OG 태그 미리보기

OG 태그 미리보기 도구는 Open Graph 메타 태그를 설정하면 Google 검색, Facebook, X(Twitter), LinkedIn, Discord, Slack 등 주요 플랫폼에서 어떻게 표시되는지 실시간으로 보여줍니다. SEO 점수 평가와 코드 생성 기능을 포함합니다.

SEO 점수

88
점수
Title
18
Description
76
Image
URL

미리보기

https://example.com/my-page
My Amazing Website
Discover the best tools, tips, and resources for web development and design.

코드 생성

<meta property="og:title" content="My Amazing Website" />
<meta property="og:description" content="Discover the best tools, tips, and resources for web development and design." />
<meta property="og:url" content="https://example.com/my-page" />
<meta property="og:site_name" content="Example.com" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Amazing Website" />
<meta name="twitter:description" content="Discover the best tools, tips, and resources for web development and design." />

제안이 있으신가요?

새로운 도구를 요청하거나 개선 사항을 제안해 주세요 — Slack 커뮤니티에 참여하세요!

Slack에서 피드백 남기기

OG 태그 미리보기란?

OG 태그 미리보기 도구는 Open Graph 프로토콜 메타 태그를 설정하고 다양한 플랫폼에서의 표시 결과를 실시간으로 미리보는 도구입니다. Google 검색 결과, Facebook 공유 카드, X(Twitter) 카드, LinkedIn 포스트, Discord 임베드, Slack 미리보기 등 6개 플랫폼의 렌더링을 시각적으로 확인할 수 있습니다. SEO 점수 평가와 HTML 코드 자동 생성 기능을 포함합니다.

사용 방법

  1. 제목, 설명, URL, 이미지 URL 등 기본 OG 태그를 입력합니다
  2. Twitter 카드 타입과 Twitter 전용 필드를 설정합니다
  3. 각 플랫폼별 미리보기 탭에서 표시 결과를 확인합니다
  4. SEO 점수 패널에서 개선할 점을 확인합니다
  5. 코드 생성 버튼으로 HTML 메타 태그를 복사합니다

자주 묻는 질문

Open Graph 태그란?

Open Graph(OG) 프로토콜은 Facebook이 개발한 메타데이터 표준으로, 웹 페이지가 소셜 미디어에서 공유될 때 표시되는 제목, 설명, 이미지를 제어합니다. og:title, og:description, og:image, og:url이 핵심 태그입니다.

OG 이미지 권장 크기는?

Facebook과 LinkedIn은 1200x630px, Twitter는 1200x600px를 권장합니다. 최소 600x315px 이상이어야 하며, 파일 크기는 5MB 이하가 좋습니다. 1200x630px 크기로 하나 만들면 대부분의 플랫폼에서 잘 표시됩니다.

Twitter Card와 OG 태그의 관계는?

Twitter는 자체 twitter:title, twitter:description 등의 메타 태그를 사용하지만, 해당 태그가 없으면 OG 태그를 fallback으로 사용합니다. 따라서 두 가지를 모두 설정하되, 최소한 OG 태그는 반드시 설정해야 합니다.

OG 태그 변경 후 캐시는 어떻게 갱신하나요?

Facebook은 Sharing Debugger, Twitter는 Card Validator 도구를 제공합니다. 이 도구에 URL을 입력하면 캐시가 갱신되어 새로운 OG 태그가 반영됩니다. LinkedIn은 Post Inspector를 사용합니다.

관련 도구