OG 미리보기 도구

로딩 중...

URL을 입력하면 카카오톡, 페이스북, 트위터/X에서 링크가 어떻게 표시되는지 실시간으로 미리 확인할 수 있습니다. OG(Open Graph) 태그 누락 여부와 개선점도 함께 진단해드립니다.

OG 태그란?

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

필수 OG 태그와 권장 태그

  • ●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)입니다. 명시하면 플랫폼이 이미지를 다운로드하지 않고도 레이아웃을 바로 잡을 수 있어 로딩이 빨라집니다.

플랫폼별 미리보기 특징

  • ●카카오톡 — 이미지가 상단, 제목·설명·도메인이 하단에 표시됩니다. 이미지는 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 태그 설정을 분석하고 벤치마킹하고 싶을 때
  • ●개발 중인 사이트의 메타 태그가 올바르게 작성되었는지 배포 전에 검증하고 싶을 때

자주 묻는 질문

Q. OG 태그를 수정했는데 카카오톡 미리보기가 안 바뀌어요
A. 카카오톡은 한 번 읽어간 OG 정보를 캐시에 저장합니다. developers.kakao.com에 접속하여 "도구 > 초기화 도구 > Open Graph 캐시 초기화"에서 해당 URL의 캐시를 삭제하면 바로 반영됩니다. 페이스북은 Sharing Debugger에서 "Scrape Again" 버튼을, 트위터는 Card Validator에서 URL을 다시 입력하면 됩니다.
Q. OG 이미지 권장 크기와 포맷은 무엇인가요?
A. 가로 1200px × 세로 630px(1.91:1 비율)이 가장 보편적입니다. 최소 200×200px 이상이어야 대부분의 플랫폼에서 정상 표시되며, 파일 크기는 5MB 이하, 포맷은 JPG·PNG·WebP를 권장합니다. GIF는 일부 플랫폼에서 첫 프레임만 표시될 수 있습니다.
Q. twitter:card 종류는 무엇이 있나요?
A. summary(작은 정사각형 이미지 + 텍스트), summary_large_image(큰 가로형 이미지 + 텍스트), app(앱스토어 설치 유도), player(동영상/오디오 재생) 네 가지입니다. 일반 웹페이지는 summary_large_image, 앱 홍보는 app, 유튜브 같은 동영상은 player를 사용합니다.
Q. og:title과 <title> 태그는 다른 건가요?
A. 네, 다릅니다. <title> 태그는 브라우저 탭에 표시되는 제목이고, og:title은 SNS 공유 시 표시되는 제목입니다. og:title이 없으면 <title> 값이 대신 사용됩니다. SEO와 SNS 최적화를 위해 둘 다 설정하되, SNS용으로는 더 짧고 임팩트 있는 제목을 쓰는 것이 좋습니다.
Q. OG 태그가 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
배너 로딩 중입니다...