AZ Tools

Open Graph · Twitter Card 생성기

개발

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

—
기본
Open Graph
Twitter Card
<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" />

미리보기

Cover image describing the page

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로 검증.

사용법

  1. 제목·설명·canonical URL·1200×630 커버 이미지 URL 입력.
  2. OG `og:type`(article·website 등)과 Twitter 카드 스타일(summary·summary_large_image 등) 선택.
  3. 생성된 블록을 페이지 `<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로 라우팅.

관련 도구

JWT 디코더

JWT의 헤더·클레임·만료를 즉시 확인하세요.

개발00

UUID 생성기

무작위 버전4 UUID를 여러 개 한 번에 생성하고 복사하세요.

개발00

해시 생성기 (SHA)

텍스트로 SHA-1·SHA-256·SHA-384·SHA-512 해시를 생성하세요.

개발00

URL 인코더 / 디코더

URL용으로 텍스트를 퍼센트 인코딩하거나, 인코딩된 URL을 디코딩하세요.

개발00

Base64 인코더 / 디코더

텍스트를 Base64로 인코딩하거나 다시 텍스트로 디코딩하세요.

개발00

JSON 포맷터 & 검증기

브라우저에서 바로 JSON을 포맷·정렬·압축·검증하세요.

개발00