liminfo

오픈그래프 미리보기

카카오톡·페이스북·트위터 링크 공유 시 OG 태그 미리보기 및 메타 태그 생성기

OG 메타 정보 입력

플랫폼별 미리보기

플랫폼별 권장 이미지 크기

Facebook:1200 x 630 px (1.91:1)
Twitter / X:1200 x 628 px (1.91:1) summary_large_image 기준
LinkedIn:1200 x 627 px (1.91:1)
카카오톡:800 x 400 px (2:1) 또는 400 x 400 px (1:1)
f

Facebook

524 x 274 px 카드
이미지 없음

example.com

My Awesome Page

This is a description of my page that will appear in social media previews.

X

Twitter / X

506 x 265 px 카드
이미지 없음

My Awesome Page

This is a description of my page that will appear in social media previews.

example.com

in

LinkedIn

1200 x 627 px 카드
이미지 없음

My Awesome Page

example.com

K

카카오톡

800 x 400 px 카드
이미지 없음

My Awesome Page

This is a description of my page that will appear in social media previews.

example.com

메타 태그 코드

<meta property="og:title" content="My Awesome Page" />
<meta property="og:description" content="This is a description of my page that will appear in social media previews." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page" />
<meta name="twitter:description" content="This is a description of my page that will appear in social media previews." />

HTML <head> 태그 안에 위 코드를 붙여넣으세요. Next.js, WordPress, 일반 HTML 모두 사용 가능합니다.

오픈그래프 미리보기 소개

오픈그래프 미리보기 도구를 사용하면 Facebook, Twitter/X, LinkedIn, 카카오톡 네 플랫폼에서 내 페이지가 어떻게 보일지 한눈에 확인할 수 있습니다. og:title, og:description, og:image URL, og:url 값을 입력하면 각 플랫폼의 고유한 카드 레이아웃, 비율, 텍스트 잘림 규칙이 반영된 실시간 소셜 카드 목업이 렌더링됩니다. 특히 카카오톡 링크 미리보기는 국내 서비스 운영자에게 필수로, 공유 시 채팅 말풍선 안에 표시되는 리치 카드를 게시 전에 직접 확인할 수 있습니다.

페이스북 공유 미리보기는 도메인을 대문자로 표시하는 524 x 274 카드로 재현됩니다. Twitter/X는 summary_large_image(506 x 265)와 summary(작은 정사각형) 두 가지 카드 타입을 드롭다운으로 선택할 수 있고, LinkedIn은 제목과 도메인만 깔끔하게 보여줍니다. 카카오톡은 채팅 말풍선 안에 둥근 모서리 카드가 들어가는 독특한 스타일을 재현합니다. 플랫폼별 권장 이미지 크기(Facebook 1200x630, 카카오톡 800x400, Twitter 1200x675, LinkedIn 1200x627)가 인라인으로 표시됩니다.

OG 태그 생성기는 og:title, og:description, og:image, og:url, og:type, og:site_name, Twitter Card 태그를 모두 포함한 완성 HTML을 원클릭 복사 버튼으로 즉시 복사할 수 있습니다. 모든 처리가 클라이언트에서 이루어져 입력한 내용이 서버로 전송되지 않습니다. 오픈그래프 미리보기, OG 태그 생성기, 카카오톡 링크 미리보기, 페이스북 공유 미리보기 기능을 하나의 도구에서 모두 제공합니다.

주요 기능

  • 오픈그래프 미리보기: Facebook, Twitter/X, LinkedIn, 카카오톡 4개 플랫폼 실시간 확인
  • 페이스북 공유 미리보기 — 실제 카드 규격(524x274)과 도메인·텍스트 잘림 충실 재현
  • 카카오톡 링크 미리보기 — 채팅 말풍선 스타일 리치 카드 시뮬레이션
  • OG 태그 생성기 — og: + twitter: 메타 태그 전체 세트를 원클릭 복사
  • 플랫폼별 권장 이미지 크기: Facebook 1200x630, 카카오톡 800x400, Twitter 1200x675, LinkedIn 1200x627
  • Twitter/X 카드 타입 선택기: summary_large_image와 summary 레이아웃 전환
  • 브랜딩을 위한 og:site_name 선택 필드
  • 입력할 때마다 4개 플랫폼 미리보기가 모두 즉시 갱신
  • 100% 클라이언트 사이드 — 서버 요청 없음, 오프라인 동작, 콘텐츠 전송 없음
  • 다크 모드 지원 및 모든 기기에서 편안한 반응형 레이아웃

자주 묻는 질문

Open Graph(오픈그래프)란 무엇이고 og: 메타 태그가 왜 필요한가요?

Open Graph는 Facebook이 만든 프로토콜로, URL이 소셜 네트워크에서 공유될 때 어떻게 표시될지를 제어합니다. Facebook, Twitter, LinkedIn, 카카오톡, Slack 등에서 링크를 공유하면 og:title, og:description, og:image 태그를 읽어 미리보기 카드를 만듭니다. 이 태그가 없으면 플랫폼이 제목과 이미지를 추측하므로 결과가 좋지 않은 경우가 많습니다. OG 태그 생성기를 사용해 올바른 태그를 쉽게 만들 수 있습니다.

플랫폼별 og:image 권장 크기는 무엇인가요?

Facebook은 1200 x 630 px (1.91:1), Twitter는 summary_large_image 기준 1200 x 675 px (표시 크기 506 x 265), LinkedIn은 1200 x 627 px, 카카오톡은 800 x 400 px (2:1) 또는 정사각형 400 x 400 px입니다. 범용으로는 1200 x 630 px를 사용하면 모든 플랫폼에서 잘 표시됩니다.

카카오톡 링크 미리보기는 어떻게 동작하나요?

카카오톡 링크 미리보기는 공유된 URL의 og:title, og:description, og:image 태그를 읽어 채팅 말풍선 안에 이미지·제목·설명·도메인이 포함된 리치 카드로 표시합니다. 권장 이미지 크기는 800 x 400 px (2:1)입니다. 카카오 오픈그래프(kage) 커스터마이징도 지원하지만, 표준 og: 태그만으로도 대부분의 경우 충분합니다.

페이스북 공유 미리보기를 게시 전에 확인하려면 어떻게 하나요?

이 오픈그래프 미리보기 도구에 og:title, og:description, og:image URL, og:url을 입력하면 게시 전에 페이스북 공유 미리보기를 즉시 확인할 수 있습니다. 게시 후에는 Facebook Sharing Debugger(developers.facebook.com/tools/debug/)를 사용해 실제 캐시를 확인하고 강제 갱신할 수 있습니다.

Twitter의 summary와 summary_large_image 차이는 무엇인가요?

summary 카드는 왼쪽에 작은 정사각형 썸네일(144 x 144 px)과 오른쪽에 제목·설명을 보여줍니다. summary_large_image는 상단에 큰 배너 이미지(506 x 265 px)와 아래에 제목·설명을 보여줍니다. 기사나 랜딩 페이지에는 더 시각적으로 눈에 띄는 summary_large_image가 권장됩니다.

생성된 OG 태그를 웹사이트에 어떻게 추가하나요?

OG 태그 생성기의 복사 버튼으로 메타 태그를 복사한 후 HTML 페이지의 <head> 요소 안에 붙여넣으세요. Next.js에서는 metadata 내보내기, WordPress에서는 Yoast SEO 플러그인, 일반 HTML에서는 <head>에 직접 붙여넣으면 됩니다.

Open Graph와 Twitter Card 태그 둘 다 필요한가요?

Twitter는 twitter: 태그가 없으면 og: 태그를 폴백으로 사용합니다. 하지만 twitter:card로 카드 타입을 지정하고 모든 플랫폼에서 최적의 표시를 보장하려면 두 세트 모두 포함하는 것이 좋습니다. 이 OG 태그 생성기는 두 세트를 자동으로 생성합니다.

소셜 플랫폼은 OG 캐시를 얼마나 자주 갱신하나요?

Facebook은 24시간~7일 캐싱하며 Sharing Debugger로 강제 갱신할 수 있습니다. Twitter는 비교적 빠르게 갱신됩니다. 카카오톡은 수 시간 캐싱합니다. LinkedIn은 최대 7일 걸릴 수 있습니다. 메타 태그 업데이트 후 각 플랫폼의 디버거 도구를 사용해 캐시를 초기화하세요.