OGP·메타 태그 검증기
HTML 소스를 붙여넣기만 하면 Open Graph Protocol(OGP)과 Twitter Card 메타 태그를 한 번에 검증합니다. 누락된 태그와 절대 URL이 아닌 og:image를 감지하고, SNS에 공유했을 때의 모습을 카드 형태로 미리보기 할 수 있습니다.
팁
- og:image의 권장 크기는 가로 1200×세로 630px(가로세로 비율 1.91:1)입니다. 이미지가 너무 작거나 비율이 다르면 SNS 측에서 예상치 못하게 잘려서 표시될 수 있습니다.
- Facebook·LINE·Slack 등의 크롤러는 og:title/og:description을 읽지만, X(Twitter)는 별도의 twitter:title/twitter:description을 사용합니다. 두 가지를 모두 설정해 두면 어느 플랫폼에서도 올바르게 표시됩니다.
- twitter:card가 설정되어 있지 않으면 X는 og:title/og:description으로 대체를 시도하지만 이미지가 올바르게 표시되지 않을 수 있으므로 명시적으로 설정하는 것을 권장합니다.
- og:url에는 정규화된 페이지의 URL(https:// 절대 URL)을 지정해 주세요. 파라미터가 붙은 URL과의 중복 콘텐츠 판정을 피하는 데도 도움이 됩니다.
- 메타 태그를 변경한 직후 SNS에 공유해도 캐시된 이전 미리보기가 표시될 수 있습니다. Facebook의 공유 디버거처럼 각 SNS가 제공하는 재수집(recrawl) 도구로 캐시를 갱신하세요.
자주 묻는 질문
/img/a.png 등)로 되어 있는 경우입니다. 대부분의 크롤러는 상대 URL을 해석할 수 없으므로 반드시 https://로 시작하는 절대 URL을 지정해 주세요. 서버가 크롤러의 User-Agent를 차단하고 있거나 이미지 크기가 너무 작은 경우에도 표시되지 않을 수 있습니다.<title>은 검색 결과 제목과 브라우저 탭에 사용되고, og:title은 SNS에 공유되었을 때의 카드 제목에 사용됩니다. og:title이 없으면 많은 크롤러가 <title>로 대체하지만, 반드시 의도한 문구가 되는 것은 아닙니다.summary_large_image를 권장합니다. 작은 썸네일 정도로 충분하다면 summary를 사용하세요. app과 player는 각각 앱 설치 유도와 동영상/오디오 임베드 전용이므로 일반적인 웹페이지에는 사용하지 않습니다.<title>과 meta description으로 대체해 미리보기를 생성하려 하지만, 이미지는 표시되지 않아 링크와 텍스트만 있는 밋밋한 모습이 되기 쉽습니다. 클릭률에 영향을 주므로 최소한 og:title·og:description·og:image 세 가지는 설정하는 것을 권장합니다.
여담 ― OGP가 탄생한 이유 ― Facebook이 "좋아요" 버튼을 작동시키기 위해 만든 구조
Open Graph Protocol(OGP)은 2010년 Facebook이 자사의 "좋아요" 버튼을 널리 보급하기 위해 만든 사양입니다. 당시 웹페이지는 Facebook에서 공유되어도 단순한 링크와 제목만 표시되어 클릭률이 좀처럼 오르지 않았습니다. Facebook은 "페이지 스스로가 SNS용 표시 내용을 선언할 수 있다면 더 매력적인 공유 경험을 만들 수 있다"고 생각해, 일반 HTML에 <meta property="og:xxx">라는 독자적인 네임스페이스를 추가하는 형태로 OGP를 설계했습니다.
흥미로운 점은 OGP가 원래 RDFa(HTML에 구조화된 데이터를 기술하기 위한 W3C 사양)를 기반으로 한다는 것입니다. Facebook은 기존 표준 규격을 재활용함으로써, 브라우저 제조사나 다른 회사의 협력 없이도 기존 HTML에 메타 태그를 추가하는 것만으로 새로운 기능을 구현할 수 있도록 설계했습니다. 이 "하위 호환성을 깨지 않고 확장한다"는 발상이 주효해, OGP는 Facebook 이외의 플랫폼(Slack·LINE·Discord 등)에도 사실상의 표준으로 널리 퍼졌습니다.
X(Twitter)는 처음에는 OGP를 그대로 따르지 않고 독자적인 Twitter Cards(twitter:xxx)라는 별도의 네임스페이스를 채택했습니다. 이는 기술적 필연이라기보다, 경쟁사인 Facebook이 만든 규격을 그대로 채택하고 싶지 않았던 사정도 있었다고 알려져 있습니다. 그 결과 지금도 많은 사이트가 og: 계열과 twitter: 계열 태그를 중복해서 작성해야 하며, 이것이 이런 OGP 검증 도구가 여전히 필요한 이유 중 하나입니다.