Open Graph 이미지 미리보기

Twitter, Facebook, LinkedIn에서 공유 시 페이지 모습을 미리봅니다. OG 메타 태그를 입력하여 실시간 미리보기를 확인하세요.

Twitter / X대형 이미지 요약

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

Facebook링크 미리보기

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

LinkedIn링크 미리보기

FastDevKit - Free Developer Tools
FastDevKit

권장 OG 메타 태그

<meta property="og:title" content="FastDevKit - Free Developer Tools" />
<meta property="og:description" content="Free online developer tools. Fast, private, no signup required." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://fastdevkit.com" />
<meta property="og:site_name" content="FastDevKit" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="FastDevKit - Free Developer Tools" />
<meta name="twitter:description" content="Free online developer tools. Fast, private, no signup required." />
<meta name="twitter:image" content="https://example.com/og.png" />

OG 이미지 미리보기 사용법

  1. 1.수동 입력 모드를 선택하고 OG 태그 필드(제목, 설명, 이미지 URL)를 입력합니다.
  2. 2.Twitter, Facebook, LinkedIn에서의 페이지 표시를 실시간으로 미리봅니다.
  3. 3.모든 플랫폼의 미리보기에 만족할 때까지 값을 조정합니다.
  4. 4.하단 섹션에서 메타 태그 스니펫을 복사하여 HTML 에 붙여넣습니다.

자주 묻는 질문

Open Graph란?

Open Graph는 Facebook이 만든 프로토콜로, 소셜 미디어에서 공유될 때 웹 페이지의 표시 방식을 제어할 수 있습니다. HTML <head>의 메타 태그를 사용하여 제목, 설명, 이미지를 정의합니다.

OG 이미지 권장 크기는?

모든 플랫폼에서 최상의 결과를 위해 1200x630 픽셀을 사용하세요. Twitter는 1200x600도 지원합니다. 범용 호환성을 위해 1.91:1 비율을 사용하세요.

미리보기에 이미지가 표시되지 않는 이유는?

이미지 URL은 공개적으로 접근 가능해야 합니다(localhost 불가). CORS 제한도 확인하세요. 일부 CDN은 이미지 삽입을 허용하기 위해 특정 헤더가 필요합니다.

og:image와 twitter:image의 차이는?

og:image는 Facebook, LinkedIn 등이 사용하는 표준 Open Graph 태그입니다. twitter:image는 Twitter 전용입니다. twitter:image가 설정되지 않으면 Twitter는 og:image를 사용합니다.