OG 미리보기 도구

로딩 중...

OG 태그란?

OG(Open Graph) 태그는 웹페이지가 SNS에서 공유될 때 제목, 설명, 이미지 등이 어떻게 표시될지를 지정하는 HTML 메타 태그입니다. 2010년 Facebook이 처음 도입한 프로토콜로, 웹페이지를 "소셜 그래프의 객체(object)"로 표현하기 위해 만들어졌습니다. 현재는 카카오톡, 트위터/X, 라인, 슬랙, 디스코드, 링크드인, 텔레그램 등 거의 모든 메신저와 SNS 플랫폼에서 표준으로 사용되고 있습니다. OG 태그가 제대로 설정되어 있으면 링크를 공유했을 때 깔끔한 카드 형태로 표시되어 클릭률(CTR)이 크게 향상됩니다. 반대로 OG 태그가 없거나 잘못 설정되면 링크만 덩그러니 표시되어 신뢰감이 떨어지고 클릭률도 낮아집니다.

필수 OG 태그와 권장 태그

OG 태그는 HTML의 <head> 영역 안에 <meta> 태그 형태로 작성합니다. 아래는 반드시 포함해야 하는 필수 태그 4개와 함께 설정하면 좋은 권장 태그 목록입니다. 필수 태그만 제대로 설정해도 대부분의 플랫폼에서 깔끔한 미리보기가 표시됩니다.

  • og:title — 페이지 제목입니다. 각 플랫폼에서 굵은 글씨로 표시되며, 60자 이하로 작성하는 것이 좋습니다. 너무 길면 말줄임표(...)로 잘립니다.
  • og:description — 페이지 설명입니다. 제목 아래에 보조 텍스트로 표시됩니다. 카카오톡은 80자, 페이스북은 160자, 트위터는 85자까지 표시되므로 80자 이내로 핵심 내용을 담는 것이 좋습니다.
  • og:image — 미리보기 이미지 URL입니다. 1200×630px(1.91:1 비율)이 가장 보편적이며, 최소 200×200px 이상이어야 합니다. 반드시 절대 URL(https://...)로 작성해야 합니다.
  • og:url — 페이지의 대표(canonical) URL입니다. 같은 콘텐츠의 여러 URL이 있을 때 대표 URL을 지정하면 공유 횟수가 하나로 합산됩니다.
  • og:site_name — (권장) 웹사이트 이름입니다. 카카오톡과 페이스북에서 도메인 대신 표시될 수 있습니다.
  • og:type — (권장) 콘텐츠 유형입니다. website, article, product, video 등이 있으며, 기본값은 website입니다.
  • og:image:width / og:image:height — (권장) 이미지의 가로·세로 크기(px)입니다. 명시하면 플랫폼이 이미지를 다운로드하지 않고도 레이아웃을 바로 잡을 수 있어 로딩이 빨라집니다.

플랫폼별 미리보기 특징

같은 OG 태그라도 플랫폼마다 표시 방식이 다릅니다. 각 플랫폼의 특징을 이해하면 모든 곳에서 최적의 미리보기를 만들 수 있습니다.

  • 카카오톡 — 이미지가 상단, 제목·설명·도메인이 하단에 표시됩니다. 이미지는 2:1 비율로 크롭되며, 제목은 약 30자, 설명은 약 80자까지 표시됩니다. 캐시 갱신은 developers.kakao.com > 도구 > 캐시 초기화에서 할 수 있습니다.
  • 페이스북 — 이미지가 상단에 1.91:1 비율로 표시되고, 하단에 도메인(대문자)·제목·설명 순으로 나옵니다. 제목은 약 60자, 설명은 약 160자까지 표시됩니다. Sharing Debugger(developers.facebook.com/tools/debug)에서 캐시를 초기화할 수 있습니다.
  • 트위터/X — twitter:card 메타 태그의 값에 따라 표시 방식이 달라집니다. summary_large_image는 큰 이미지(2:1)에 제목·설명·도메인이 표시되고, summary는 작은 정사각형 이미지와 함께 표시됩니다. twitter: 전용 태그가 없으면 og: 태그를 대신 사용합니다.
  • 슬랙/디스코드 — OG 태그를 기반으로 임베드 카드를 자동 생성합니다. 슬랙은 og:image 외에도 favicon을 함께 표시하며, 디스코드는 테마 색상(theme-color 메타 태그)을 카드 왼쪽 테두리에 적용합니다.

이럴 때 사용하세요

  • 새 웹사이트나 블로그를 만들고 SNS 공유가 제대로 되는지 확인하고 싶을 때
  • 쇼핑몰 상품 페이지의 카카오톡/페이스북 미리보기를 최적화하고 싶을 때
  • 마케팅 캠페인 랜딩페이지의 SNS 공유 이미지를 점검하고 싶을 때
  • OG 태그를 수정한 뒤 각 플랫폼에서 어떻게 보이는지 빠르게 비교하고 싶을 때
  • 경쟁사 웹사이트의 OG 태그 설정을 분석하고 벤치마킹하고 싶을 때
  • 개발 중인 사이트의 메타 태그가 올바르게 작성되었는지 배포 전에 검증하고 싶을 때

자주 묻는 질문

QOG 태그를 수정했는데 카카오톡 미리보기가 안 바뀌어요
A

카카오톡은 한 번 읽어간 OG 정보를 캐시에 저장합니다. developers.kakao.com에 접속하여 "도구 > 초기화 도구 > Open Graph 캐시 초기화"에서 해당 URL의 캐시를 삭제하면 바로 반영됩니다. 페이스북은 Sharing Debugger에서 "Scrape Again" 버튼을, 트위터는 Card Validator에서 URL을 다시 입력하면 됩니다.

QOG 이미지 권장 크기와 포맷은 무엇인가요?
A

가로 1200px × 세로 630px(1.91:1 비율)이 가장 보편적입니다. 최소 200×200px 이상이어야 대부분의 플랫폼에서 정상 표시되며, 파일 크기는 5MB 이하, 포맷은 JPG·PNG·WebP를 권장합니다. GIF는 일부 플랫폼에서 첫 프레임만 표시될 수 있습니다.

Qtwitter:card 종류는 무엇이 있나요?
A

summary(작은 정사각형 이미지 + 텍스트), summary_large_image(큰 가로형 이미지 + 텍스트), app(앱스토어 설치 유도), player(동영상/오디오 재생) 네 가지입니다. 일반 웹페이지는 summary_large_image, 앱 홍보는 app, 유튜브 같은 동영상은 player를 사용합니다.

Qog:title과 <title> 태그는 다른 건가요?
A

네, 다릅니다. <title> 태그는 브라우저 탭에 표시되는 제목이고, og:title은 SNS 공유 시 표시되는 제목입니다. og:title이 없으면 <title> 값이 대신 사용됩니다. SEO와 SNS 최적화를 위해 둘 다 설정하되, SNS용으로는 더 짧고 임팩트 있는 제목을 쓰는 것이 좋습니다.

QOG 태그가 SEO(검색엔진 최적화)에도 영향을 주나요?
A

OG 태그 자체는 구글 검색 순위에 직접적인 영향을 주지 않습니다. 하지만 잘 설정된 OG 태그로 SNS 공유 시 클릭률이 높아지면 트래픽이 늘어나고, 이것이 간접적으로 SEO에 긍정적 영향을 줄 수 있습니다. 또한 구글은 검색 결과 스니펫에 meta description을 활용하므로 함께 최적화하는 것이 좋습니다.

알아두면 좋은 정보

  • OG 태그는 반드시 서버사이드 렌더링(SSR)으로 제공되어야 합니다. React SPA처럼 클라이언트에서 동적으로 생성되는 메타 태그는 대부분의 크롤러가 읽지 못합니다. Next.js, Nuxt.js 등의 SSR 프레임워크를 사용하거나 서버에서 HTML을 직접 렌더링해야 합니다.
  • 이미지 URL은 반드시 절대경로(https://example.com/image.jpg)로 작성해야 합니다. 상대경로(/image.jpg)로 작성하면 일부 플랫폼에서 이미지를 읽지 못할 수 있습니다.
  • 한 페이지에 여러 개의 og:image를 지정할 수 있습니다. 이 경우 첫 번째 이미지가 대표 이미지로 사용되고, 일부 플랫폼에서는 사용자가 이미지를 선택할 수 있습니다.
  • 카카오톡은 OG 이미지가 없을 때 페이지 본문에서 가장 큰 이미지를 자동으로 추출하여 표시합니다. 의도하지 않은 이미지가 표시될 수 있으므로 og:image를 반드시 명시하세요.
  • 동적 OG 이미지 생성이 필요하다면 Vercel의 @vercel/og, Cloudinary, Imgix 등의 서비스를 활용할 수 있습니다. 블로그 글 제목을 자동으로 이미지에 삽입하는 등의 활용이 가능합니다.
EVERYCALC
배너 로딩 중입니다...

이 계산기가 도움이 되었나요?