오픈그래프 생성기
OG·트위터 태그.
설명
카카오톡·페이스북·트위터 등에서 링크 미리보기를 보여주는 오픈그래프(og:)와 트위터 카드 메타태그를 생성합니다.
관련 도구
카카오톡·페이스북·슬랙 등에 URL을 공유했을 때 표시되는 미리보기 이미지·제목·설명을 지정하는 오픈그래프(OG) 태그와 트위터 카드 메타 태그를 자동 생성해 주는 도구입니다. HTML head 섹션에 붙여 넣을 코드를 즉시 만들 수 있어, 태그 문법을 외우지 않아도 SNS 공유 화면을 원하는 대로 꾸밀 수 있습니다. 블로거·퍼블리셔·마케터가 콘텐츠 클릭률을 높이기 위해 자주 활용합니다.
사용 방법
제목(og:title), 설명(og:description), 대표 이미지 URL(og:image), 페이지 URL(og:url), 사이트 이름(og:site_name) 등 항목을 입력 폼에 작성합니다. 트위터 카드 유형(summary 또는 summary_large_image)을 선택하면 트위터 전용 태그도 함께 생성됩니다. 생성 버튼을 누르면 완성된 meta 태그 코드가 출력되고, 복사 버튼으로 클립보드에 저장한 뒤 HTML 파일의 head 태그 안에 붙여 넣으면 됩니다. 수정이 필요하면 입력값을 바꿔 즉시 재생성할 수 있습니다.
이럴 때 유용해요
신규 랜딩 페이지를 만든 뒤 카카오톡으로 링크를 돌렸는데 썸네일이 안 뜨거나 엉뚱한 이미지가 나올 때, OG 태그가 없거나 잘못 설정된 경우입니다. 이 도구로 올바른 태그를 생성해 삽입하면 원하는 이미지와 문구가 미리보기에 정확히 표시됩니다. 블로그 포스팅마다 고유한 OG 이미지를 지정해 두면 공유 시 클릭률이 높아집니다. 광고 랜딩 페이지, 이벤트 페이지, 사내 공지 페이지 등 공유 빈도가 높은 페이지에 특히 효과적입니다.
알아두면 좋은 점
og:image는 최소 1200×630px 이상의 이미지를 권장합니다. 이보다 작으면 일부 플랫폼에서 이미지가 잘리거나 저화질로 표시될 수 있습니다. 카카오톡은 OG 태그를 한 번 캐싱하므로 태그를 수정해도 한동안 이전 이미지가 보일 수 있는데, 카카오 개발자 센터의 공유 캐시 초기화 도구를 사용하면 강제로 갱신할 수 있습니다. 페이스북의 경우 Open Graph Debugger(developers.facebook.com/tools/debug)로 태그 적용 여부를 확인하고 캐시를 초기화할 수 있습니다. og:type은 일반 웹 페이지라면 'website', 기사나 블로그 포스팅은 'article'로 지정하는 것이 표준입니다.
자주 묻는 질문
OG 태그를 넣었는데 카카오톡 미리보기가 바뀌지 않아요.
og:image에 상대 경로를 써도 되나요?
트위터 카드와 OG 태그를 둘 다 넣어야 하나요?
og:description 권장 글자 수가 있나요?
한 페이지에 OG 태그를 여러 세트 넣어도 되나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
오픈그래프 생성기가 만드는 태그
이 도구는 웹페이지 <head> 안에 넣는 오픈그래프(og:) 메타 태그와 트위터 카드 태그를 한 번에 만들어 줍니다. 제목(og:title), 설명(og:description), 대표 이미지(og:image), 페이지 주소(og:url), 콘텐츠 유형(og:type), 사이트 이름(og:site_name)을 입력하면, 카카오톡·페이스북·트위터에 링크를 붙였을 때 표시되는 미리보기 카드를 지정한 대로 나오게 하는 HTML 코드를 즉시 출력합니다. 트위터용으로는 summary_large_image 카드 태그도 함께 생성해 큰 이미지 카드로 노출되게 합니다.
실제 사용 순서
먼저 공유했을 때 보이길 원하는 제목과 한두 줄 설명을 입력합니다. 다음으로 og:image에는 공유 카드에 뜰 이미지의 절대 URL(https://로 시작하는 전체 주소)을 넣습니다. 상대경로(/img/thumb.png)는 SNS 크롤러가 못 읽으므로 반드시 전체 주소여야 합니다. 생성된 코드를 복사해 해당 페이지의 <head>와 </head> 사이에 붙여넣고 파일을 배포하면 끝입니다. 페이지마다 내용이 다르면 페이지별로 각각 태그를 넣어야 하며, 사이트 전체에 같은 태그 하나만 넣으면 모든 링크가 같은 카드로 보입니다.
이미지 규격과 캐시
og:image는 가로 1200 × 세로 630(약 1.91:1)이 페이스북·카카오톡에서 잘리지 않고 가장 안정적으로 표시됩니다. 정사각형이나 세로 이미지는 양옆·위아래가 잘릴 수 있습니다. SNS는 한 번 읽은 미리보기를 캐시에 저장하므로, 태그를 고친 뒤에도 예전 카드가 계속 뜨면 페이스북은 공유 디버거(Sharing Debugger)에서 다시 스크랩, 카카오톡은 캐시가 자연 갱신될 때까지 시간이 걸립니다. 이미지 파일명을 바꿔 새 URL로 교체하면 즉시 반영됩니다.
| 태그 | 역할 |
|---|---|
| og:title | 카드 제목 |
| og:description | 제목 아래 설명 문구 |
| og:image | 대표 이미지(절대 URL·1200×630 권장) |
| og:url | 공유 기준이 되는 정식 주소 |
| twitter:card | 트위터 카드 형태 지정 |
이럴 때 씁니다
블로그 글·쇼핑몰 상품·이벤트 페이지 링크를 카톡 단톡방이나 SNS에 뿌릴 때 밋밋한 회색 상자 대신 이미지가 들어간 카드로 보이게 하려는 경우에 씁니다. 특히 카카오톡 공유 시 썸네일이 아예 안 뜨거나 엉뚱한 이미지가 잡히는 문제를 og:image로 직접 지정해 해결할 수 있습니다.