1200 × 630 픽셀(1.91:1)이 안전한 기본 — Facebook·LinkedIn·Slack·Twitter `summary_large_image` 카드 만족. Twitter 일반 `summary`는 1:1이지만 대부분 사이트가 둘 다에 한 이미지 사용.

`summary`와 `summary_large_image` 차이?

`summary`는 제목·설명 옆에 작은 정사각 썸네일. `summary_large_image`는 제목 위에 전체 폭 배너 이미지. 콘텐츠 중심 게시물은 large, 이미지가 부수적이면 small.

canonical 링크가 중요?

예. 크롤러가 URL 변형(`?utm_source=…`·trailing slash 등) 중복 제거 및 소셜 인게이지먼트(좋아요·댓글)를 단일 canonical URL로 라우팅.

Open Graph · Twitter Card 생성기

사용자가 URL을 공유할 때 모든 소셜 플랫폼·채팅 앱이 찾는 표준 미리보기 카드 메타데이터 블록 생성. 제목·설명·이미지·타입·Twitter 카드 변형 모두 설정. 작은 미리보기로 소셜 피드에 어떻게 보일지 대략 표시. 결과를 페이지 `<head>`에 바로 복사.

—

기본제목설명Canonical URL이미지 URL이미지 대체 텍스트

Open Graph

사이트 이름og:typeog:locale

Twitter Card

twitter:cardtwitter:site (@)twitter:creator (@)

<meta> 블록

<title>Site Title — Page Title</title>
<meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="Site Title — Page Title" />
<meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:alt" content="Cover image describing the page" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Site Title — Page Title" />
<meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:image:alt" content="Cover image describing the page" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />

미리보기

Example Site

Site Title — Page Title

A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.

배포 후 Facebook Sharing Debugger·Twitter Card Validator로 검증.

사용법

제목·설명·canonical URL·1200×630 커버 이미지 URL 입력.
OG `og:type`(article·website 등)과 Twitter 카드 스타일(summary·summary_large_image 등) 선택.
생성된 블록을 페이지 `<head>`에 복사 — HTML·Astro·Next.js 등에서 동작.

자주 묻는 질문

이미지 크기?: 1200 × 630 픽셀(1.91:1)이 안전한 기본 — Facebook·LinkedIn·Slack·Twitter `summary_large_image` 카드 만족. Twitter 일반 `summary`는 1:1이지만 대부분 사이트가 둘 다에 한 이미지 사용.
`summary`와 `summary_large_image` 차이?: `summary`는 제목·설명 옆에 작은 정사각 썸네일. `summary_large_image`는 제목 위에 전체 폭 배너 이미지. 콘텐츠 중심 게시물은 large, 이미지가 부수적이면 small.
canonical 링크가 중요?: 예. 크롤러가 URL 변형(`?utm_source=…`·trailing slash 등) 중복 제거 및 소셜 인게이지먼트(좋아요·댓글)를 단일 canonical URL로 라우팅.

Open Graph · Twitter Card 생성기

Site Title — Page Title

사용법

자주 묻는 질문

관련 도구

SNS / SEO 글자수 한도 체커

JSON to Go 구조체 변환기

Snowflake ID 디코더 (Discord, Twitter)

CSS 애니메이션 생성기

해시 생성기 (SHA)

UUID 생성기