이 글은 2025년 8월 12일에 업데이트 됐습니다.
우리가 매일 사용하는 웹사이트나 페이스북, 인스타그램, 트위터(X), 카카오톡, 네이버 블로그 등 모두 링크를 붙여넣으면 자동으로 ‘미리보기’를 생성하죠. 여기에는 제목과 설명, 이미지가 포함되어 있고요.
이렇게 링크를 붙여넣을 때 생기는 미리보기는 도대체 어디에서 오는 것일까요? 어떤 이미지가 대표로 보여질지, 제목과 설명이 어떻게 구성될지는 단순한 우연이 아니라 웹페이지의 메타 태그 설정에 따라 결정되는데요.
대표적인 것이 바로 오픈그래프(Open Graph) 태그예요. 페이스북이 주도하여 표준화된 규칙으로 현재 대다수의 SNS 플랫폼에서 활용되고 있어요.
하지만 모든 플랫폼이 100% 동일한 방식으로 오픈그래프를 처리하는 것은 아니에요. 페이스북과 트위터만 비교해도, 읽어들이는 태그의 우선순위나 이미지 규격, 추가 메타데이터의 지원 여부 등이 다르죠.
이러한 차이를 이해하지 못하면, 한 플랫폼에서는 예쁘게 보이던 미리보기가 다른 플랫폼에서는 잘리지 않거나 흐릿하게 보일 수 있어요.
오늘은 오픈그래프에 관해 자세하게 이해하고, 이를 어떻게 설정해야 모든 플랫폼에서 일관되고 매력적인 미리보기를 구현할 수 있는지 살펴볼게요.
📌 오늘의 Key Takeaways
오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 타이틀, 설명, 문서의 타입, 이미지, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해 놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌어요.
2010년 페이스북이 웹페이지 링크를 공유할 때 사용자에게 더 풍부한 정보를 제공하기 위해 처음 도입한 프로토콜로, 현재는 페이스북 외에도 카카오톡과 네이버, 트위터 등 다양한 플랫폼에서 기본적으로 활용되고 있어요.
위에서 말씀드렸듯이, 기본적인 메타 데이터로는 제목(title), 설명(description), 대표 이미지(image), 표준 링크(canonical url : 여러 개의 URL 중에서 대표 하나의 URL) 등이 있어요.
HTML 문서의 <head> 영역에 <meta property="og:..."> 방식으로 제목, 설명, 대표 이미지, URL 등의 정보를 입력하면, SNS나 메신저에서 링크를 불러올 때 사용자가 지정한 미리보기 정보가 그대로 노출돼요.
추가로 오디오, 비디오, 이미지 속성(폭, 높이, 타입), 페이지 언어 등 더욱 다양한 고급 정보도 태그로 지정할 수 있어요.
참고로 X(트위터)는 twitter: 메타 태그를 우선 읽지만, 해당 태그가 없으면 OG를 대체로 활용해요. 그래서 OG + Twitter Cards를 함께 세팅하면 대부분의 플랫폼에서 깔끔하게 미리보기가 나와요.
검색엔진이 <title>이나 본문을 대충 추측해서 미리보기를 만들면, 브랜드 톤 앤 매너가 흐트러지거나 엉뚱한 이미지가 노출되기 쉬워요. 반면 이렇게 OG 태그를 넣어두면, 공유될 때마다 의도한 카피와 이미지로 일관되게 노출돼서 클릭률(CTR)과 공유율을 안정적으로 관리할 수 있어요.
이외에도 그 대상에 대한 구조화된(Structure) 데이터를 표현할 수 있는 여러 메타 데이터 표기용 태그들이 지원되고 있습니다. 자세한 것은 오픈그래프 웹사이트에서 확인할 수 있습니다.
오픈그래프는 웹의 세계에서 아주 높은 위상을 가지고 있어요. 오늘날 웹페이지들이 어떤 기술을 가지고 만들어졌는지를 분석해주는 사이트 builtwith의 통계에 따르면 오픈그래프는 웹문서를 이루고 있는 여러 기술들 중에서 상당히 상위권에 포진하고 있죠.
정말 기본적이고, 보편적인 JavaScript, CSS까지 포함해도 전체 기술 중 7번째에 올라와 있습니다. 숫자를 보면 대략적으로 상위권 10,000개의 웹사이트 중 약 4,200여 개의 사이트들이 오픈그래프를 사용하고 있는 것을 알 수 있어요.
이러한 오픈그래프가 웹사이트 공유에 미치는 대표적 영향은 다음과 같아요.
링크 미리보기는 사실상 첫 번째 랜딩 페이지예요. 오픈그래프 태그가 적용된 웹페이지는 SNS, 카카오톡, 페이스북 등에서 공유될 때 사용자가 원하는 대표 이미지, 제목, 설명이 깔끔하고 전문적으로 노출돼요. 이를 통해 사용자가 ‘이 페이지가 신뢰할 수 있는 사이트인지’, ‘무엇을 다루고 있는지’를 미리 확인할 수 있고, 자연스럽게 클릭·방문율이 높아져요.
여기서 메시지-이미지-오퍼(CTA) 조합을 테스트하면 CTR이 얼마나 달라지는지도 확인할 수 있어요. 캠페인 랜딩은 A/B 테스트로 OG 이미지를 시즌·오퍼별로 바꿔 보세요.
서비스 운영자 입장에서 각 페이지 별로 어떤 이미지, 텍스트, 설명을 대표로 쓸지 명확하게 지정할 수 있습니다. 오픈그래프를 적용하지 않으면, SNS가 자동으로 임의의 이미지를 가져오거나, 웹페이지의 첫 내용을 보여주기 때문에 의도하지 않은 정보가 노출될 수 있어요.
OG 태그로 제목/설명 톤을 통일하고, 브랜드 로고와 핵심 메시지, 썸네일 이미지를 일관되게 노출시켜 브랜드 인지도와 신뢰도를 높일 수 있고 채널마다 달라지는 미리보기 이슈를 줄일 수 있어요.
오픈그래프 미적용 시 단순 URL, 파편 정보만 노출되는 반면, 잘 구성된 미리보기는 풍부한 정보 전달, 시각적 주목도, 콘텐츠 공유 및 확산 효과를 극대화해요.
오픈그래프 자체가 구글 SEO 랭킹에는 직접 영향을 주지 않지만, SNS에서의 공유 클릭률과 유입 증가, 콘텐츠 확산 측면에서 실질적인 트래픽·전환률 개선에 기여해요. 결과적으로 SEO 측면에서도 큰 도움이 된다고 볼 수 있어요.
HTML에서 오픈그래프 메타 태그는 웹페이지의 <head> 영역에 <meta property="og:..."> 형식으로 직접 삽입해 설정할 수 있어요.
아래는 대표적인 오픈그래프 메타 태그 예시예요.
<head>
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명 요약">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="ko_KR">
</head>
여기서 각 og 태그는 다음을 의미해요.
여기에 X(트위터) 카드 태그는 아래처럼 설정할 수 있어요.
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="트위터용 제목(동일 사용 가능)">
<meta name="twitter:description" content="트위터용 설명(동일 사용 가능)">
<meta name="twitter:image" content="https://example.com/og/thumbnail-1200x630.jpg">
<meta name="twitter:site" content="@brand_handle"> <!-- 있으면 -->
이외에 필요에 따라 og:image:width, og:image:height, og:video, og:audio 등 다양한 확장 속성도 추가할 수 있어요.
이처럼 <head> 안에 메타 태그로 설정하면, 페이스북, 카카오톡, 네이버 등 SNS나 메신저에서 링크를 공유할 때 원하는 제목, 설명, 이미지 등이 미리보기로 자동 노출돼요.
우리가 보고 있는 웹사이트는 기본적으로 HTML문서라는 사실을 모두 알고 계실 거예요. HTML 문서는 크게 head와 body라는 두 부분으로 구성되어 있어요. 이 중 head에는 그 웹페이지를 구성하는 여러 가지 CSS, JavaScript 코드 조각들이나 참조 링크 등이 들어있고, 지금부터 다둘 메타 데이터들이 HTML 태그로 담겨있죠.
여기서 말하는, 메타 데이터란 쉽게 말하면 해당 웹페이지를 구성하는 여러 구조화된 정보들 예컨대 제목, 설명, 이미지 등을 아예 명시적으로 웹페이지쪽에서 직접 정해서 표기해준 것을 말해요. 예를 들어서 아래와 같죠.
그럼 왜 이렇게 직접 표기해 줘야 하는 걸까요? 크롤러도 하나의 소프트웨어 프로그램인지라 HTML 문서를 보면 자동으로 무엇이 제목인지, 무엇이 내용에 대한 3줄 요약인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 아주 어려워요.
따라서 웹사이트에 직접 저렇게 적어서 알려줘야 하는 것이죠.(아무리 머신러닝, 딥러닝, 자연어처리 기술이 발전해도 웹문서와 같이 비정형적인 정보에 대한 100% 정확도의 의미 인식은 불가능해요.)
그리고 이런 메타 데이터를 표기하는 방법에 대한 기본 방법(기본 HTML5 title, description 태그 등)을 제외한 제 3의 방법 중 비교적 통일되고 인정된 방법으로서 페이스북의 오픈그래프(Open Graph) 프로토콜이 있고, 이 오픈그래프 프로토콜이 우리가 보는 미리보기 화면의 실체를 구성하는 메타 데이터 표기방법이에요.
결론적으로 우리가 미리보기를 통해 보는 제목, 설명, 이미지는 이렇게 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서 나타나고 있어요. 그 구체적인 작동 원리는 아래와 같습니다.
og:title, og:type, og:url, og:image 이 네 가지 필수 태그 중 하나라도 빠지면 정상적인 미리보기가 생성되지 않으니 꼼꼼히 확인하세요.
대표 이미지(og:image)는 고해상도(최소 1200x630 픽셀 권장)로 설정해야 하며, 파일 용량은 5MB 이내인 것이 좋아요. 이미지 URL은 절대경로이며 HTTPS 주소를 사용해야 하고, 핵심 카피는 좌우 안전영역을 남겨서 잘려나가는 걸 예방하세요.
og:url과 실제 페이지 URL은 정확히 일치해야 하며, HTTPS 프로토콜을 사용하는 것이 권장되는데요. Canonical URL과도 일치시키는 것이 좋아요.
필요하다면 og:site_name(사이트 이름), og:locale(언어 설정), og:image:width, og:image:height, og:image:alt 등 추가 속성으로 정보를 더 풍부하게 제공할 수 있어요.
소셜 미디어 플랫폼은 OG 태그를 캐싱하므로, 변경 사항이 바로 반영되지 않을 수 있어요. 페이스북 공유 디버거, 트위터 카드 밸리데이터 등 공식 도구를 활용해 캐시를 갱신하세요.
미리보기 오류, 누락 태그, 깨진 이미지 등이 없는지 주기적으로 확인하고 업데이트하는 것이 중요해요.
그러나 모두가 페이스북의 제목, 설명, 이미지 식의 오픈그래프 사용법에 동의하는 것은 아니에요. 비록 우리가 크게 많이 사용하는 페이스북, 네이버 블로그, 카카오톡 등 대다수의 서비스에서는 오픈그래프 프로토콜에만 준하여 미리보기를 보여주지만 X(트위터)는 이에 더하여 자체적인 메타데이터 표기법을 가지고 있어요.
물론 기본 원리 자체는 동일해요. 두 플랫폼 모두 HTML <head>에 선언된 메타 태그를 읽어서 링크 미리보기를 생성하며, 오픈그래프 태그를 지원해요. 만약 트위터에서 제공하는 메타데이터만 있을 경우 자사의 것을 먼저 참조하지만, 오픈그래프만 있을 경우 오픈그래프를 참조하고 있어요.
다만 각각 요구하는 메타 태그 규격과 해석 방식에 차이가 있어요.
자세한 내용은 X(트위터)의 개발자 문서를 참조해주세요.
오픈그래프 적용 여부를 확인할 수 있는 방법은 3가지예요.
크롬으로 웹페이지에 접속했을 때 [F12]키를 누르면 개발자 도구에 접속할 수 있는데요. 여기서 ‘[Ctrl] + [F]’ 키를 눌러서 오픈그래프 태그들을 탐색해서 확인할 수 있어요.
크롬 SEO 확장 프로그램을 설치하면 더 쉽게 확인할 수 있어요. ‘SEO Meta in 1 Click’은 대표적인 SEO 확장 프로그램으로, 웹페이지에 접속한 후 버튼을 클릭하면 모든 메타 데이터와 오픈그래프 적용 여부를 확인할 수 있어요.
페이스북은 오픈그래프에 대한 개발자들과 마케터들의 디버깅을 지원하기 위해 ‘Sharing Debugger’를 지원하고 있어요. 사용 방법은 간단해요.
사이트에 들어가서 검사하고 싶은 링크를 입력하면 되고, 아래와 같이 해당 링크에 대한 분석결과를 받아볼 수 있어요.
프로그래밍의 세계에서 캐싱(Caching)은 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 일종의 "임시"로 저장하여 다음 번에 호출될 때 더 빨리 해당 데이터를 공급해주는 것을 말해요.
구체적으로는 데이터베이스에 저장된 어떤 정보를 한 번 불러온 후 캐시 메모리에 저장해놓거나, 어떤 HTML, CSS, JavaScript로 이뤄진 웹문서 전체 혹은 이미지 전체를 캐싱하기도 하죠. (전자에는 Memcached, Redis와 같은 시스템들이, 후자는 흔히들 "CDN"이라고 부르는 시스템들이 속할 것입니다.)
우리가 보는 모든 현대적인 웹서비스들, 앱들에는 이러한 캐싱 시스템이 구축되어 있어요. 페이스북이나 네이버 블로그, 카카오톡 또한 예외가 아니죠. 사용자들 입장에서는 더 빨리 웹사이트나 이미지가 로딩되서 좋고, 서비스측에서는 데이터베이스 구동에 들어가는 막대한 서버 자원을 절약할 수 있어서 좋아요.
일반적으로 이런 캐싱에는 TTL(Time-to-Live)라는 소멸시효가 걸려있는데, 이 소멸시효가 지나지 않은 경우 계속적으로 이미 캐싱된 데이터를 참조해서 불러올 수 있어요.
따라서 실제로 서버에서 내려주는 HTML 웹문서 상의 오픈그래프는 바뀌었을지라도, 이미 캐시된 웹문서가 내려지고 있는 상황일 수 있어요. 즉, 저 TTL이 만료되기 전까지는 아무리 본 서버에서 개발자가 다시 개발해도 미리보기는 바뀌지 않을 거예요.
이 경우 페이스북은 다행히 캐싱을 리로드할 수 있는 버튼을 "Sharing Debugger"를 통해서 지원하고 있어요.
이외의 서비스들은 향후 정보 습득하는대로 정리하여 업데이트하도록 할게요.
미리보기 제목, 설명, 이미지와 관련된 사소한 현상인데요. 가끔 내가 바로 쓴 글을 페이스북에 올리면 바로 조회수가 2로 올라가는 현상을 볼 수 있어요. 앞서 말씀드린 것과 같이 크롤러가 우리 사이트를 한 번 "미리" 방문하는 현상 때문에 조회수가 1회 더 올라가요.
구글과 같이 방금 방문한 사람이 크롤러라는 것을 명시해주는 경우도 있지만, 페이스북처럼 크롤러라는 것을 전혀 알 수 없게 해놓는 경우도 있어요. 즉, 미리보기 화면이 로딩되는 것은 곧 나의 웹사이트를 페이스북에서 익명 유저가 1번 방문하는 것과 동일하다는 것을 인지해야 해요.
오늘 함께 알아봤듯이 SNS 채널별로 오픈그래프 태그를 읽는 방식과 노출 규칙은 세부적으로 달라요.
메타 생태계(페이스북·인스타그램)에서는 표준 오픈그래프 속성(og:title, og:description, og:image)을 중심으로 미리보기를 생성하며, 이미지 비율과 최소 해상도 기준을 엄격하게 적용해요. 반면 트위터(X)는 자체 메타 태그(twitter:card, twitter:title, twitter:description, twitter:image)를 우선적으로 참고하고, 없을 경우 오픈그래프 태그를 사용하죠.
따라서 실무에서는 다음과 같은 최적화 전략이 필요해요.
결국 오픈그래프 최적화는 단순히 “보여주기”를 넘어, 브랜드 이미지 관리와 콘텐츠 성과 향상에 직접적인 영향을 미치는 작업이에요.
여러 플랫폼에서 아름답고 매력적인 첫인상을 남기고 싶다면, 각 SNS의 특성과 태그 처리 차이를 반드시 고려해야 해요.
에어브릿지(Airbridge)는 설치 링크에 대한 ‘커스텀 오픈그래프 태그(OG tag) 설정 기능’을 제공하고 있어서, 매번 개발자와 협의하면서 개발 일정에 맞출 필요가 없어요. ("og tag 바꿔주세요"라고 메일을 보내거나 회의를 할 필요가 없다는 뜻이죠.)
저희 AB180은 국내 최고의 마테크 전문가들로 구성된 데이터 기반의 그로스해킹 전문집단입니다. 에어브릿지, 브레이즈(Braze), 앰플리튜드(Amplitude) 등 다양한 마테크 솔루션의 공식 파트너로서, 각 솔루션에 대한 차별화된 전문성을 확보하고 있으며, 국내 100여 개 엔터프라이즈 및 선두 스타트업 등과 일하고 있어요.
마테크 솔루션들을 활용해서 조직 내의 데이터 사용을 극대화하여 성과를 창출하고, 조직의 그로스해킹 문화를 개선하고 싶다면 AB180과 함께하세요. 🚀
