Souus Tools
후원

웹 & 인증

OG 메타태그 미리보기

무료 온라인 Open Graph 메타태그 미리보기 도구입니다. 게시하기 전에 Google, Facebook, Twitter 및 LinkedIn에서 페이지가 어떻게 보이는지 확인하세요.

무료 사용 가입 불필요 브라우저에서 실행

도구 작업 영역

Generated meta tags

<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="This is a great description of the page that will appear in search results and social media previews.">
<meta property="og:url" content="https://example.com/my-page">
<meta property="og:image" content="https://placehold.co/1200x630/3b82f6/white?text=OG+Image">
<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 great description of the page that will appear in search results and social media previews.">
<meta name="twitter:image" content="https://placehold.co/1200x630/3b82f6/white?text=OG+Image">

Google Search Preview

example.com/my-page

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

Facebook / LinkedIn Preview

OG Image

example.com/my-page

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

Twitter Card Preview

Twitter Card

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

example.com/my-page

OG 메타태그 미리보기란?

Open Graph(OG) 메타 태그는 Facebook, Twitter, LinkedIn 및 메시징 앱과 같은 소셜 미디어 플랫폼에서 공유될 때 웹 페이지가 표시되는 방식을 제어하는 HTML 메타 요소입니다. 링크 미리보기에 표시되는 제목, 설명, 이미지 및 URL을 정의합니다. 이 도구를 사용하면 페이지를 게시하거나 배포하지 않고도 OG 메타 태그 값을 입력하고 Google 검색 결과, Facebook/LinkedIn 공유 카드 및 Twitter 카드에서 페이지가 어떻게 표시되는지 즉시 미리 볼 수 있습니다. 클릭률을 극대화하고 공유 시 콘텐츠가 전문적으로 보이도록 하려면 이러한 미리 보기를 올바르게 수행하는 것이 필수적입니다.

OG 메타태그 미리보기를 사용하는 방법

  1. 1'og:title' 필드에 페이지 제목을 입력하세요. 모든 플랫폼에서 최상의 표시를 위해 60자 미만으로 유지하세요.
  2. 2'og:url' 필드에 페이지 URL을 추가하세요. 이는 미리보기에 표시될 표준 URL입니다.
  3. 3'og:description' 필드에 설득력 있는 설명을 작성하세요. 최적의 표시를 위해 155자 이하를 목표로 하세요.
  4. 4OG 이미지 URL을 'og:image' 필드에 붙여넣습니다. 플랫폼 전반에서 최상의 결과를 얻으려면 권장 크기는 1200×630픽셀입니다.
  5. 5아래의 실시간 미리보기를 검토하여 귀하의 페이지가 Google, Facebook/LinkedIn 및 Twitter에 어떻게 표시되는지 확인하세요.

Common OG 메타태그 미리보기 use cases

Developer debugging

Use OG 메타태그 미리보기 to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.

Review before reuse

Validate or transform open graph, og, meta tag, preview, social, share before adding the result to a project, document, form, message, or shared file.

Privacy-first browser processing

Run common open graph, og, meta tag, preview, social, share tasks locally in the browser without sending sensitive development data to a backend service.

자주 묻는 질문

OG 메타 태그에 권장되는 이미지 크기는 얼마입니까?

권장되는 OG 이미지 크기는 1.91:1 화면 비율의 1200×630픽셀입니다. 이 크기는 Facebook, Twitter, LinkedIn 및 대부분의 기타 플랫폼에서 잘 작동합니다. 일부 플랫폼에서는 가장자리가 잘릴 수 있으므로 고품질 이미지를 사용하고 중요한 콘텐츠를 중앙에 유지하세요.

OG 태그와 Twitter 카드의 차이점은 무엇입니까?

Open Graph 태그(og:제목, og:설명, og:가미지)는 Facebook, LinkedIn 및 기타 여러 플랫폼에서 사용됩니다. Twitter에는 자체 메타 태그(twitter:card, twitter:title, twitter:description, twitter:image)가 있지만 Twitter 관련 태그가 없으면 OG 태그로 대체됩니다.

내 공유 링크에 잘못된 이미지나 제목이 표시되는 이유는 무엇입니까?

소셜 플랫폼 캐시 링크 미리보기. OG 태그를 업데이트한 후에는 플랫폼별 도구(Facebook's Sharing Debugger, Twitter's Card Validator 또는 LinkedIn의 Post Inspector)를 사용하여 캐시를 지워야 합니다. 변경사항이 적용되는 데 몇 분 정도 걸릴 수 있습니다.