MUTools

웹 분석

OGP 검사기

OGP 검사기 도구는 지정한 URL의 페이지에서 OGP(Open Graph Protocol)와 Twitter Card의 메타데이터를 추출하여, X나 Facebook 등의 SNS에 공유되었을 때 어떤 카드로 표시되는지를 근사적으로 미리 보는 도구입니다.

URL 을 입력하고 "OGP 확인"을 누르면 여기에 진단, 메타데이터 목록, 공유 카드 미리 보기가 표시됩니다.

입력한 URL 은 서버에서 가져와 HTML 을 분석합니다. 프라이빗 IP 와 localhost 로의 접속은 거부됩니다. 각 URL 의 가져오기는 8 초에 타임아웃되며 HTML 본문의 선두 2MB 만 읽어들입니다.

OGP 검사기 도구란?

OGP 검사기 도구는 지정한 URL의 페이지에서 OGP(Open Graph Protocol)와 Twitter Card의 메타데이터를 추출하여, X나 Facebook 등의 SNS에 공유되었을 때 어떤 카드로 표시되는지를 근사적으로 미리 보는 도구입니다.

페이지의 og:title, og:description, og:image 등의 주요 메타 태그를 일람으로 표시할 뿐만 아니라, 필수 항목의 누락, 권장 글자 수 초과, og:image:alt 미설정 등을 "대응 필요", "권장" 레벨로 지적하는 진단 기능도 갖추고 있습니다.

기사나 LP를 공개하기 전의 리뷰, SNS로부터의 유입을 늘리기 위한 점검 등, 공유 카드의 완성도를 실제 SNS에 게시하지 않고 확인하고 싶을 때 도움이 됩니다.

사용 방법

  1. 검사할 페이지의 URL(https://로 시작하는 형식)을 입력란에 붙여넣습니다.
  2. "OGP 검사" 버튼을 누르면 대상 URL의 페이지가 분석되어 결과가 표시됩니다.
  3. "OGP 진단" 섹션에서 필수 항목의 부족이나 권장 설정과의 차이를 확인합니다.
  4. "메타데이터 일람"에서 추출된 title / og:* / twitter:* 각 태그의 값을 확인합니다.
  5. "공유 카드 미리 보기"에서 X(Twitter)와 Facebook의 카드 표시를 전환하고, 라이트 / 다크의 모양을 확인합니다.

활용 사례

  • 새 기사나 LP를 공개하기 전에 SNS 공유 시의 카드 표시가 깨지지 않았는지 확인하고 싶은 편집자, 마케터.
  • SNS 경유의 클릭률(CTR)을 개선하기 위해 제목이나 설명문, OG 이미지를 조정하고 싶은 운영 담당자.
  • 기업 사이트의 모든 페이지에 OGP가 올바르게 설정되었는지 1건씩 확인하고 싶은 웹 제작 회사.
  • 경쟁사나 참고 사이트가 어떤 공유 카드를 노출하는지 확인하고 싶은 기획 담당자.
  • OG 이미지 교체 후 CDN 캐시의 영향을 확인하고 싶은 엔지니어(카드의 내용이 즉시 반영되는지).

주의사항

  • 프라이빗 IP 주소나 localhost로의 접속은 안전을 위해 거부됩니다. 사내 네트워크 내의 사이트는 검사할 수 없습니다.
  • 1건당 가져오기 타임아웃은 8초입니다. 응답이 느린 사이트는 오류가 발생할 수 있습니다.
  • HTML의 앞 2MB만 읽어들입니다. 극단적으로 큰 페이지에서는 메타 태그를 가져오지 못할 수 있습니다.
  • JavaScript로 동적으로 메타 태그를 다시 쓰는 사이트(SPA 등)의 경우 초기 HTML의 값이 추출됩니다. 실제 SNS 크롤러의 동작과 다를 수 있습니다.
  • 미리 보기는 X / Facebook의 사양을 기반으로 한 근사 표시입니다. 실제 카드 표시는 각 SNS의 사양 변경에 따라 다를 수 있습니다.
  • SNS 측에서 카드 이미지를 캐시하는 경우, 변경이 반영될 때까지 시간이 걸릴 수 있습니다(X / Facebook 모두 디버거로 재가져오기를 촉구할 수 있습니다).

자주 묻는 질문

OGP란 무엇인가요?
OGP(Open Graph Protocol)는 웹 페이지의 정보를 다른 서비스에 전달하기 위한 메타데이터 규격입니다. og:title, og:description, og:image 등을 페이지의 <head>에 기술하면 SNS에서 공유될 때 이미지를 포함한 리치한 카드로 표시됩니다. Facebook이 책정했으며 X(Twitter), LinkedIn, Slack 등 많은 서비스가 대응하고 있습니다.
OGP와 Twitter Card의 관계는?
Twitter Card는 X(이전의 Twitter) 독자의 메타데이터 규격으로 twitter:card, twitter:title, twitter:image 등의 태그로 지정합니다. 대부분은 OGP 값으로 폴백되므로, X 독자의 값을 덮어쓰고 싶을 때만 twitter:*를 지정하는 것이 일반적입니다. 이 도구에서는 양쪽을 추출하여 각각의 일람과 진단 결과를 표시합니다.
미리 보기와 실제 SNS에서의 카드 표시가 다른 이유는?
이 도구의 미리 보기는 X / Facebook의 레이아웃을 참고로 한 근사 표시입니다. 각 SNS는 카드 사양을 지속적으로 변경하고 있으며, 이미지의 가로세로 비율 트리밍, 제목 길이의 상한, 다크 / 라이트 테마 취급 등이 다를 수 있습니다. 최종 확인은 X 카드 밸리데이터, Facebook Sharing Debugger 등 각 SNS 공식 디버거도 함께 사용하는 것을 권장합니다.
og:title의 글자 수는 어느 정도가 적절한가요?
X에서는 70자 정도에서 끝이 잘리는 경우가 많아, 이 도구에서는 70자를 초과하면 경고를 표시합니다. og:description은 200자 이내가 권장입니다. 실제로 미리 보기에서 잘리는 모양을 확인하면서 제목과 설명문을 조정해 주세요.
검사할 수 없는 사이트가 있습니다.
8초 타임아웃을 초과한 경우, HTML 앞 2MB에 <head> 내의 메타 태그가 포함되지 않은 경우, Basic 인증이나 봇 차단으로 접근이 거부된 경우 등에는 오류가 발생합니다. 프라이빗 IP / localhost로의 접속도 안전을 위해 거부됩니다. 이에 해당하는 경우 대상 사이트 측의 설정 확인이 필요합니다.