Developer SEO Utility
Open Graph 미리보기
제목, 설명, URL, 대표 이미지 주소를 입력하면 카카오톡, 페이스북, X/Twitter 공유 카드 형태를 미리 확인하고 OG/Twitter meta 태그를 생성할 수 있습니다.
Open Graph 정보 입력
공유 미리보기에 사용할 제목, 설명, URL, 대표 이미지 정보를 입력하세요.
0/60자 권장
0/150자 권장
og:url과 twitter:url에 사용됩니다.
og:image와 twitter:image에 사용됩니다.
og:site_name에 사용됩니다.
공유 콘텐츠 유형입니다.
공유 미리보기
플랫폼별로 공유 카드가 어떻게 보일지 확인하세요.
공유 설명이 표시됩니다.
win-j.com공유 설명이 표시됩니다.
공유 설명이 표시됩니다.
https://example.com/page/생성 결과
아래 코드를 HTML head 영역에 추가하면 됩니다.
정보를 입력한 뒤 OG 태그 생성하기 버튼을 눌러주세요.
Open Graph 점검 항목
공유 미리보기 품질은 제목, 설명, 이미지, 대표 URL 설정에 따라 달라집니다.
공유 카드의 핵심 제목입니다. 너무 길면 잘릴 수 있으므로 짧고 명확하게 작성하는 것이 좋습니다.
공유 카드 설명 영역에 표시됩니다. 페이지 내용을 간결하게 요약하면 클릭률 개선에 도움이 됩니다.
링크 공유 때 가장 크게 보이는 이미지입니다. 1200x630px 가로형 썸네일을 권장합니다.
도움말
Open Graph Preview란?
Open Graph Preview는 링크를 카카오톡, 페이스북, 트위터 등에 공유했을 때 표시되는 카드 미리보기를 확인하고 meta 태그를 생성하는 개발자 SEO 유틸리티입니다.
블로그 글, 유틸리티 페이지, 랜딩 페이지, 상품 페이지의 공유 제목, 설명, 대표 이미지가 어떻게 보이는지 점검할 수 있습니다.
사용 방법
- 공유 제목, 설명, 페이지 URL, 대표 이미지 URL과 사이트 이름을 입력합니다.
- 길이 점검, 이미지 URL 점검, Twitter Card 태그 포함 여부를 선택합니다.
- 카카오톡, 페이스북, 트위터 탭에서 공유 카드 미리보기를 비교합니다.
- 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에 넣어 관리할 수 있습니다.