win-j 로고
자유로운 블로그

Developer SEO Utility

Open Graph 미리보기

제목, 설명, URL, 대표 이미지 주소를 입력하면 카카오톡, 페이스북, X/Twitter 공유 카드 형태를 미리 확인하고 OG/Twitter meta 태그를 생성할 수 있습니다.

OG 카드 미리보기 공유 시 표시되는 제목, 설명, 대표 이미지, 사이트 이름을 한 화면에서 확인합니다.
플랫폼별 화면 카카오톡, 페이스북, 트위터 스타일의 링크 공유 미리보기를 비교할 수 있습니다.
Meta 태그 자동 생성 Open Graph와 Twitter Card meta 태그를 생성하고 복사 또는 다운로드할 수 있습니다.
STEP 1

Open Graph 정보 입력

공유 미리보기에 사용할 제목, 설명, URL, 대표 이미지 정보를 입력하세요.

권장 작성 길이 제목은 60자 안팎, 설명은 150자 안팎으로 작성하면 공유 카드에서 잘림을 줄일 수 있습니다.
이미지 권장 비율 대표 이미지는 1200x630px 또는 1.91:1 가로형 이미지를 사용하는 것이 좋습니다.

0/60자 권장

0/150자 권장

og:url과 twitter:url에 사용됩니다.

og:image와 twitter:image에 사용됩니다.

og:site_name에 사용됩니다.

공유 콘텐츠 유형입니다.

제목 0자 설명 0자 URL 대기 이미지 대기
STEP 2

공유 미리보기

플랫폼별로 공유 카드가 어떻게 보일지 확인하세요.

대기 중
OG IMAGE
공유 제목이 표시됩니다.

공유 설명이 표시됩니다.

win-j.com
OG IMAGE
WIN-J.COM 공유 제목이 표시됩니다.

공유 설명이 표시됩니다.

OG IMAGE
공유 제목이 표시됩니다.

공유 설명이 표시됩니다.

https://example.com/page/
STEP 3

생성 결과

아래 코드를 HTML head 영역에 추가하면 됩니다.

정보를 입력한 뒤 OG 태그 생성하기 버튼을 눌러주세요.
STEP 4

Open Graph 점검 항목

공유 미리보기 품질은 제목, 설명, 이미지, 대표 URL 설정에 따라 달라집니다.

og:title

공유 카드의 핵심 제목입니다. 너무 길면 잘릴 수 있으므로 짧고 명확하게 작성하는 것이 좋습니다.

og:description

공유 카드 설명 영역에 표시됩니다. 페이지 내용을 간결하게 요약하면 클릭률 개선에 도움이 됩니다.

og:image

링크 공유 때 가장 크게 보이는 이미지입니다. 1200x630px 가로형 썸네일을 권장합니다.

도움말

Open Graph Preview란?

Open Graph Preview는 링크를 카카오톡, 페이스북, 트위터 등에 공유했을 때 표시되는 카드 미리보기를 확인하고 meta 태그를 생성하는 개발자 SEO 유틸리티입니다.

블로그 글, 유틸리티 페이지, 랜딩 페이지, 상품 페이지의 공유 제목, 설명, 대표 이미지가 어떻게 보이는지 점검할 수 있습니다.

사용 방법

  1. 공유 제목, 설명, 페이지 URL, 대표 이미지 URL과 사이트 이름을 입력합니다.
  2. 길이 점검, 이미지 URL 점검, Twitter Card 태그 포함 여부를 선택합니다.
  3. 카카오톡, 페이스북, 트위터 탭에서 공유 카드 미리보기를 비교합니다.
  4. OG 태그 생성하기 버튼으로 meta 태그를 만들고 HTML head 영역에 추가합니다.

권장 OG 이미지 크기

권장 비율: 1.91:1 가로형 이미지

예시 크기: 1200 x 630px

권장 작성 길이

제목은 60자 안팎, 설명은 150자 안팎으로 작성하면 공유 카드에서 잘림을 줄일 수 있습니다.

이미지 권장 비율

대표 이미지는 1200x630px 또는 1.91:1 가로형 이미지를 사용하는 것이 좋습니다.

Open Graph 태그는 SEO에 직접 영향을 주나요?

Open Graph 태그는 검색 순위 자체보다 SNS와 메신저 공유 미리보기 품질에 직접적인 영향을 줍니다. 공유 카드의 제목, 설명, 이미지가 명확하면 사용자가 링크를 클릭할 가능성이 높아질 수 있습니다.

카카오톡에서 이미지가 바로 바뀌지 않는 이유는 무엇인가요?

카카오톡이나 SNS는 한 번 수집한 OG 정보를 캐시할 수 있습니다. 이미지를 수정했는데 바로 반영되지 않는다면 각 플랫폼의 공유 디버거에서 캐시를 갱신해야 합니다.

og:image를 상대 경로로 작성해도 되나요?

가능하면 https://로 시작하는 절대 URL을 사용하는 것이 좋습니다. 상대 경로는 일부 플랫폼에서 이미지를 제대로 수집하지 못할 수 있습니다.

Twitter Card 태그도 꼭 필요한가요?

Open Graph 태그만으로도 많은 플랫폼에서 미리보기가 표시되지만, X/Twitter 공유 품질까지 고려한다면 twitter:card, twitter:title, twitter:description, twitter:image 태그를 함께 넣는 것이 좋습니다.

생성한 태그는 어디에 넣어야 하나요?

생성된 meta 태그는 HTML 문서의 head 영역에 추가하면 됩니다. Django 템플릿에서는 base template의 meta block 또는 각 페이지별 SEO block에 넣어 관리할 수 있습니다.

EDITORIAL GUIDE

Open Graph 태그를 만들고 공유 카드 오차를 줄이는 법

제목·설명·대표 URL·이미지를 입력해 Open Graph와 Twitter Card 메타 태그를 만들고 세 가지 카드 스타일로 비교하는 도구입니다. 화면은 실제 플랫폼을 흉내 낸 근사치이며 각 크롤러의 캐시, 이미지 처리와 UI 변경을 그대로 재현하지는 않습니다.

작성 · 검토
win-j
최종 검토
2026년 8월 6일

이런 분께 유용합니다

  • 블로그·상품·랜딩 페이지의 공유 카드를 준비하는 운영자
  • OG와 Twitter Card 태그 초안을 빠르게 만드는 프론트엔드 개발자
  • 제목·설명·대표 이미지 조합을 배포 전에 비교하려는 사용자

대표 활용 상황

  • 새 글의 SNS 공유 제목과 설명이 너무 길지 않은지 확인할 때
  • og:image 절대 URL을 포함한 head 메타 태그를 준비할 때
  • 카카오톡·Facebook·X 스타일의 정보 우선순위를 비교할 때

처음부터 결과 확인까지

  1. 1

    공유 대상 페이지의 정식 HTTPS URL과 공개 대표 이미지 URL을 준비합니다.

  2. 2

    페이지 내용과 일치하는 제목·설명·사이트 이름·콘텐츠 유형을 입력합니다.

  3. 3

    이미지 URL을 입력하면 브라우저가 해당 외부 주소를 직접 요청한다는 점을 확인합니다.

  4. 4

    플랫폼별 미리보기와 길이 경고를 참고해 핵심 문구가 앞부분에 오도록 다듬습니다.

  5. 5

    생성 태그를 HTML head에 넣고 중복 OG 태그가 없는지 확인합니다.

  6. 6

    배포 후 실제 플랫폼 디버거로 크롤링 가능 여부와 캐시된 카드를 검증합니다.

실제 예시 1

블로그 글 공유 카드

입력
article / 글 제목 / 한 문단 요약 / 정식 URL / 1200×630 공개 이미지
결과
og:title·description·type·url·image와 선택한 Twitter Card 태그

페이지의 canonical URL과 og:url을 일치시키고 로그인 없이 접근 가능한 이미지인지 확인합니다.

실제 예시 2

도구 페이지 공유 카드

입력
website / 기능 중심 제목 / 사용 결과 설명 / HTTPS 이미지
결과
세 가지 근사 카드와 복사 가능한 meta 코드

길이 권장은 절대 규칙이 아니며 플랫폼과 화면 폭에 따라 말줄임 위치가 달라집니다.

계산·처리 기준

입력 문자열을 HTML 속성용으로 이스케이프해 Open Graph 기본 속성과 선택한 Twitter Card 태그를 생성합니다. URL은 http 또는 https 절대 URL 형식인지 확인하고, 제목 60자·설명 150자를 넘으면 참고 경고를 표시합니다. 미리보기 이미지는 입력 URL을 브라우저 CSS 배경으로 불러오지만 서버에서 이미지 크기나 응답 헤더를 검사하지 않습니다.

알아둘 한계

  • 실제 카카오톡·Facebook·X UI, 말줄임, 이미지 크롭과 폰트가 미리보기와 다를 수 있습니다.
  • 이미지 URL이 형식상 맞아도 404, robots 차단, 인증 요구, MIME 오류와 크기 제한을 감지하지 않습니다.
  • 플랫폼 캐시 때문에 태그를 수정해도 기존 공유 카드가 즉시 갱신되지 않을 수 있습니다.
  • Open Graph 태그는 공유 표현을 돕지만 검색 순위 상승이나 클릭률을 보장하지 않습니다.
개인정보 처리

제목·설명과 생성 코드는 win-j 서버에 저장하지 않습니다. 다만 대표 이미지 URL을 입력하면 현재 브라우저가 그 외부 서버에 이미지를 요청하므로 해당 서버에는 IP·브라우저 요청 정보가 전달될 수 있습니다. 비공개·서명된 이미지 URL은 사용하지 마세요.

함께 쓰면 좋은 도구

자주 묻는 질문

이 미리보기와 실제 공유 카드가 같은가요?

아닙니다. 정보 배치를 비교하는 근사 화면이며 플랫폼의 최신 UI와 크롤러 결과는 실제 디버거에서 확인해야 합니다.

이미지 URL만 입력해도 서버로 전송되나요?

win-j 서버에는 저장하지 않지만 미리보기를 위해 사용자의 브라우저가 입력한 이미지 호스트로 직접 요청합니다.

태그를 바꿨는데 공유 카드가 그대로인 이유는 무엇인가요?

플랫폼이 이전 크롤링 결과를 캐시했을 수 있습니다. 배포된 HTML을 확인한 뒤 플랫폼 공유 디버거로 재수집을 요청하세요.