Open Graph·Twitter Card 생성기

Open Graph·Twitter Card 생성기 사용 가이드

링크를 메신저나 SNS에 붙이면 제목, 설명, 큰 이미지가 담긴 카드가 뜹니다. 이 카드 내용은 페이지 head에 들어 있는 Open Graph(og:) 태그와 Twitter Card 태그에서 가져옵니다. 태그가 없으면 카드가 텅 비거나 엉뚱한 이미지가 뜹니다.

이 생성기는 공유 제목, 페이지 주소, 설명을 받아 og:type·og:title·og:description·og:url·og:locale과 twitter:card 태그를 만들고, image=를 넣으면 og:image와 큰 이미지 카드(summary_large_image)를, alt=를 넣으면 이미지 대체 텍스트(og:image:alt)를 더합니다.

검색용 title·description은 빼고 공유 태그만 만들기 때문에, 이미 SEO 태그가 있는 페이지에 공유 카드만 보강할 때 쓰기 좋습니다. 이미지 주소가 전체 주소인지도 확인합니다.

사용 방법

1. 1'공유 제목 (og:title)'에 카드에 보일 제목을 적습니다.
2. 2'공유할 페이지 주소'에 전체 주소를 넣습니다.
3. 3'첫 줄: 공유 설명 · 다음 줄부터 image=, alt=, site=, card=, type= (선택)' 칸에 설명과 이미지 주소 등을 적습니다.
4. 4'실행'을 누르고 결과 태그를 head 안에 붙여 넣습니다.

공유 제목: 여름 린넨 원피스 기획전
주소: https://shop.example.com/sale/linen
설명: 린넨 원피스 최대 40% 할인
image=https://shop.example.com/og/linen.png
alt=린넨 원피스를 입은 모델 사진
site=예시상점

<meta property="og:type" content="website">
<meta property="og:title" content="여름 린넨 원피스 기획전">
<meta property="og:description" content="린넨 원피스 최대 40% 할인">
<meta property="og:url" content="https://shop.example.com/sale/linen">
<meta property="og:site_name" content="예시상점">
<meta property="og:image" content="https://shop.example.com/og/linen.png">
<meta property="og:image:alt" content="린넨 원피스를 입은 모델 사진">
<meta property="og:locale" content="ko_KR">
<meta name="twitter:card" content="summary_large_image">

이럴 때 쓰면 좋아요

• 카카오톡으로 공유할 이벤트 페이지의 미리보기를 꾸밀 때
• 블로그 글 공유 카드에 대표 이미지를 지정할 때
• SNS 광고 랜딩 페이지의 미리보기를 점검하고 다시 만들 때
• 공유 카드에 이미지 대체 텍스트를 넣어 접근성을 챙길 때

문제가 생겼을 때

활용 팁

• type=article을 적으면 블로그 글 같은 기사형 페이지로 표시됩니다.
• og:title은 검색 제목보다 짧고 끌리게 써도 됩니다. 사이트 이름은 site=로 따로 넣으세요.
• 공유 이미지 용량은 1MB 안팎으로 줄이면 미리보기가 빨리 뜹니다.

자주 묻는 질문