example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
오픈그래프·메타태그 생성기
URL을 붙여넣으면 카카오톡·페이스북·트위터·구글 미리보기를 한눈에 확인하고, 복사용 메타태그 코드까지 만들어 드립니다.
example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
example.com
페이지 제목 미리보기
메타 설명이 여기에 표시됩니다.
메타태그 코드
메타태그·오픈그래프란?
웹페이지를 SNS나 메신저에 공유하면 제목·설명·썸네일이 담긴 미리보기 카드가 뜹니다. 이 카드를 결정하는 것이 오픈그래프(OG) 메타태그입니다. 태그가 없거나 잘못되면 링크가 밋밋하게 보이거나 엉뚱한 이미지가 노출돼 클릭률이 떨어집니다. 특히 한국에서는 카카오톡 공유가 많아 OG 설정이 곧 유입으로 이어집니다.
이 도구는 페이지의 실제 태그를 읽어 카카오톡·페이스북·트위터(X)·구글 검색결과에서 각각 어떻게 보일지 미리 보여주고, 빠진 태그를 알려준 뒤 바로 붙여넣을 수 있는 코드를 생성합니다.
사용법
- URL로 확인 탭에 점검할 페이지 주소를 붙여넣고 "불러오기"를 누릅니다.
- 네 가지 플랫폼 미리보기와 누락된 태그 안내를 확인합니다.
- 필요하면 직접 입력 탭에서 제목·설명·이미지를 수정해 봅니다.
- 아래 "메타태그 코드"를 복사해 페이지
<head>에 붙여넣습니다.
자주 묻는 질문
오픈그래프(Open Graph) 태그가 뭔가요?
오픈그래프는 링크를 공유했을 때 보이는 제목·설명·이미지를 정해주는 메타태그 규약입니다. og:title, og:description, og:image 같은 태그를 페이지 <head>에 넣으면 카카오톡·페이스북·트위터 등에서 미리보기 카드가 의도한 대로 표시됩니다.
메타태그 코드를 어디에 넣어야 하나요?
생성된 코드를 복사해 HTML 문서의 <head> </head> 사이에 붙여넣으면 됩니다. 정적 사이트는 HTML 파일에 직접, Next.js·Astro 같은 프레임워크는 각 페이지의 head/metadata 영역에 추가합니다.
카카오톡 미리보기가 안 바뀌어요.
카카오톡·페이스북은 한 번 가져온 미리보기를 캐시합니다. 메타태그를 고친 뒤에도 옛 미리보기가 보이면 카카오 'OG 캐시 초기화'나 페이스북 공유 디버거에서 캐시를 갱신하세요. 이 도구는 현재 페이지의 실제 태그를 그대로 읽어 보여줍니다.
og:image는 어떤 크기가 좋나요?
가로세로 1200×630px(약 1.91:1)을 권장합니다. 너무 작으면 일부 플랫폼에서 작은 썸네일로 표시되거나 무시됩니다. 이미지 URL은 누구나 접근 가능한 절대 경로여야 합니다.
직접 입력 모드는 언제 쓰나요?
아직 배포하지 않은 페이지의 제목·설명·이미지를 미리 넣어보며 미리보기와 코드를 설계할 때 씁니다. URL 모드는 이미 떠 있는 페이지의 실제 태그를 점검할 때 편합니다.