OG 태그 미리보기 - Open Graph 메타 태그 검사기
카톡·페북·트위터·링크드인·디스코드 링크 미리보기를 한 화면에서 실시간으로.
쓰는 법
- og:title, og:description, og:image URL, og:url, og:type, og:site_name 입력.
- 트위터에 다른 걸 보여주고 싶으면 twitter:title, twitter:image 따로 입력(생략 시 OG 값 사용).
- 오른쪽 4개 플랫폼 탭에서 어떻게 보이는지 바로 확인.
- '코드 복사' 누르면 완성된
<meta>태그들이 클립보드로. 에 붙여 넣기만 하면 끝.
링크 붙였을 때 썸네일, 배포 전에 미리 확인
페이지 만들고 카톡이나 페북에 링크 공유해봤는데 썸네일이 안 뜨거나 엉뚱한 이미지가 나온 적 있으시죠. 이건 og:image나 og:title이 제대로 안 들어가서 그래요. 배포 후에 Facebook Sharing Debugger 돌리는 것도 방법인데, 배포 전에 여기서 먼저 값 넣고 썸네일이 어떻게 보이는지 확인하는 게 훨씬 빠릅니다.
페이스북, 트위터/X, 링크드인, 디스코드 4개 플랫폼 미리보기를 동시에 보여드려요.
여기 쓰기 편한 점
- 페북, 트위터, 링크드인, 디스코드 4종 미리보기를 한 화면에서 동시에 확인.
- 입력하는 즉시 모든 플랫폼 미리보기가 갱신돼요. 페이지 새로고침 필요 없음.
- 완성된 메타 태그 HTML 코드가 자동 생성. 오타 실수 줄어듭니다.
- 트위터 카드는 twitter: 접두사 필드 따로 있어서 플랫폼별로 다른 카피 쓸 수 있어요.
- 이미지 권장 크기(1200x630px) 안내도 내장.
- 모든 처리는 브라우저 안에서. 서버 전송 없음.
다른 OG 미리보기 도구랑 비교
| 항목 | FreeToolbox | OpenGraph.xyz | MetaTags.io |
|---|---|---|---|
| 지원 플랫폼 | 4종 (FB, 트위터, LI, 디스코드) | 3종 | 3종 (구글 포함) |
| 실시간 미리보기 | 있음 | 있음 | 있음 |
| 코드 자동 생성 | 있음 | 있음 | 있음 |
| 디스코드 미리보기 | 있음 | 없음 | 없음 |
| 가입 필요 | 없음 | 없음 | 무료 한도 있음 |
자주 묻는 질문
og:image 크기 얼마로 해야 해요?
1200×630 픽셀(가로세로비 1.91:1)이 가장 안전해요. 페북, 트위터, 링크드인, 디스코드 전부 이 비율에서 잘 보입니다. PNG나 JPG로 하시고 파일 크기는 8MB 이하로 유지하세요. 너무 크면 페북이 아예 안 읽어요.
URL 넣으면 OG 태그 자동으로 가져오면 안 돼요?
브라우저 보안 정책(CORS) 때문에 JavaScript로 다른 도메인의 페이지를 못 가져와요. 여긴 수동 입력 방식인데, 배포 전에 값 미리 확인하는 용도라 오히려 이게 더 빠릅니다.
OG랑 Twitter 태그 둘 다 넣어야 하나요?
트위터는 twitter:* 태그가 없으면 OG 값을 대체로 읽어요. 그래서 OG만 잘 써도 대부분 괜찮은데, 카드 타입(summary / summary_large_image)을 정하려면 twitter:card는 명시하는 게 좋아요.
og:type은 뭘 고르면 되나요?
대부분 website면 충분해요. 블로그 글이나 뉴스 기사는 article, 쇼핑몰 상품 상세는 product로 바꾸세요. 잘 모르겠으면 기본값 website로 두시면 됩니다.
실제 배포 후 OG 태그 검증은 어디서?
배포 다 하셨으면 facebook.com/tools/debug (페북 공유 디버거), cards-dev.twitter.com/validator (트위터 카드 검증기)에서 실제 URL 넣고 확인하세요. 캐시 갱신도 이 도구들에서 강제로 할 수 있어요.