Open Graph 미리보기
HTML 소스에서 OG 태그를 파싱하여 소셜 미디어 공유 화면을 미리 확인합니다
📖 OG 미리보기 도구, 왜 실제 카카오톡·페이스북과 다르게 보일 수 있나 가이드 보기
오픈그래프 미리보기
붙여넣은 HTML에서 정규식으로 모든 <meta> 태그를 찾아 property 또는 name 속성과 content 값을 뽑아낸 뒤, og:title이 없으면 <title> 태그로 대체합니다. og:title·og:description·og:image·og:url·og:type·og:site_name 6개 핵심 태그의 존재 여부로 점수를 매기고, Facebook·Twitter·LinkedIn 카드 미리보기를 각 플랫폼의 실제 글자 수 제한(예: Facebook 제목 88자, LinkedIn 설명 300자)에 맞춰 잘라 렌더링합니다. HTML 속성 안의 content 값은 &, ' 같은 HTML 엔티티로 인코딩되어 있는 경우가 많아, 추출한 값을 화면에 그대로 다시 이스케이프하면 "Coffee & Tea"처럼 이중 인코딩되어 실제 문자가 아니라 엔티티 코드 자체가 보이는 문제가 생길 수 있는데, 이 도구는 추출 시점에 엔티티를 먼저 디코딩한 뒤 화면 출력 시 다시 안전하게 이스케이프하는 방식으로 처리합니다. 또한 실제 Twitter 카드는 twitter:title/twitter:description/twitter:image가 있으면 og: 값보다 그것을 우선 사용하므로, Twitter 미리보기 카드도 twitter: 전용 태그가 있으면 그 값을 우선 표시합니다.
자주 묻는 질문
Open Graph 태그는 무엇인가요?
Facebook이 개발한 프로토콜로, 소셜 미디어에서 페이지가 공유될 때 표시할 제목, 설명, 이미지를 og: 접두사가 붙은 메타 태그로 지정합니다.
og:image 크기 권장 사항은?
1200×630px(비율 1.91:1)를 권장하며, Facebook은 최소 600×315px 이상이어야 이미지를 표시합니다. 너무 작으면 아예 이미지 없이 텍스트만 표시될 수 있습니다.
Twitter 미리보기는 twitter: 태그와 og: 태그 중 무엇을 쓰나요?
twitter:title/twitter:description/twitter:image가 있으면 그 값을 우선 사용하고, 없으면 og:title/og:description/og:image로 대체합니다. 실제 Twitter(X)의 카드 렌더링 우선순위와 동일하게 동작합니다.
제목이나 설명에 & 기호나 아포스트로피가 있으면 이상하게 보이나요?
아니요. HTML 소스의 content 값은 &, ' 같은 HTML 엔티티로 인코딩되어 있는 경우가 많은데, 추출 시점에 먼저 디코딩한 뒤 화면 출력 시 한 번만 안전하게 이스케이프하므로 "Coffee & Tea", "Today's News"처럼 실제 문자 그대로 미리보기에 표시됩니다.
OG 태그를 업데이트해도 소셜 미디어에서 반영이 안 돼요
Facebook, LinkedIn 등 소셜 플랫폼은 크롤링한 OG 태그를 자체 캐시에 저장해두고 재사용합니다. Facebook Sharing Debugger, LinkedIn Post Inspector 같은 각 플랫폼의 캐시 초기화 도구로 강제 재크롤링을 요청해야 최신 태그가 반영됩니다.
og:type에는 어떤 값이 있나요?
website, article, book, profile, music, video 등이 있습니다. 기본값은 website이며, 블로그 글은 article로 지정하면 게시일·작성자 등 추가 메타데이터를 함께 노출할 수 있습니다.
여러 og:image 태그를 사용할 수 있나요?
여러 개 선언하는 것은 유효하지만, 대부분의 소셜 미디어는 문서에 처음 등장하는 og:image 하나만 사용합니다. 이 도구도 첫 번째로 발견된 og:image만 미리보기에 사용합니다.
og:locale은 무엇인가요?
콘텐츠의 언어와 지역을 지정합니다(예: ko_KR, en_US, zh_CN). Facebook은 og:locale:alternate 태그로 다국어 버전을 함께 알릴 수도 있습니다.