Softonic

Open Graph 체커

단계 1 / 3
다음

페이지의 HTML을 붙여넣으면(<head> 부분만으로도 충분합니다) 이 체커가 발견한 모든 og: 및 twitter: 메타 태그를 파싱한 뒤, 여섯 개의 필수 태그 중 어떤 것이 있고 어떤 것이 빠졌는지, 그리고 각각의 정확한 값을 알려줍니다. 실제 URL을 가져오는 대신 붙여넣은 마크업을 읽기 때문에, 온라인 스크레이퍼가 접근할 수 없는 스테이징 서버, localhost, 로그인 뒤에 있는 페이지에서도 작동합니다.

체커가 태그를 읽는 방식

  1. 1

    페이지 소스 열기

    Ctrl+U(macOS에서는 Cmd+Option+U)를 눌러 소셜 크롤러가 실제로 받는 원본 HTML을 확인하세요.

  2. 2

    head 섹션 복사

    `<head>`부터 `</head>`까지 선택하세요. 본문(body)은 필요 없지만, 페이지 전체를 붙여넣어도 문제없습니다.

  3. 3

    체커에 붙여넣기

    입력하는 동안 모든 `<meta>` 태그가 파싱됩니다. URL은 가져오지 않으며, 붙여넣은 마크업만 검사합니다.

  4. 4

    체크리스트 확인

    여섯 개 항목이 녹색 또는 빨간색으로 바뀝니다: og:title, og:description, og:type, og:url, og:image, twitter:card.

  5. 5

    발견된 값 검토

    모든 og: 및 twitter: 태그가 내용과 함께 나열되므로 오타, 빈 값, 상대 이미지 경로가 눈에 잘 띕니다.

체커가 찾는 Open Graph 태그

태그 용도 체크리스트 포함?
og:title 카드 헤드라인 예, 필수
og:description 카드 부제 예, 필수
og:type website, article, video 등 예, 필수
og:url 표준(canonical) URL 예, 필수
og:image 미리보기 이미지 URL 예, 필수
og:site_name 헤드라인 위의 브랜드 줄 있을 때 표시
og:locale en_US, es_ES 등 있을 때 표시

마크업에 있는 다른 og: 태그도 체크리스트에 포함되지 않더라도 모두 나열됩니다.

Twitter Card 태그

X(Twitter)는 자체 태그가 없으면 Open Graph로 폴백하므로, 체크리스트에는 twitter:card만 포함됩니다. 나머지는 체커가 발견할 때마다 나열됩니다.

태그 용도
twitter:card summary, summary_large_image 등
twitter:site 게시 계정의 @핸들
twitter:creator 작성자의 @핸들
twitter:title og:title 재정의
twitter:description og:description 재정의
twitter:image og:image 재정의

어디서나 작동하는 이미지 사양

체커는 og:image가 선언되어 있는지 확인하지만 파일을 다운로드하지는 않으므로, 다음 항목은 직접 확인하세요:

  • 크기: 1200 x 630 px(Facebook, LinkedIn, 큰 Twitter 카드).
  • 종횡비: summary_large_image는 1.91:1.
  • 파일 크기: 5 MB 미만, 크롤러가 타임아웃되지 않도록 가급적 1 MB 미만.
  • 형식: JPG 또는 PNG. WebP와 AVIF는 아직 지원이 일관되지 않습니다.
  • 절대 URL: 항상 전체 https://... 주소를 사용하고, 프로토콜 상대 경로나 루트 상대 경로는 쓰지 마세요.

보고서가 드러내는 흔한 문제

  • og:image 없음. 가장 흔한 단일 실패입니다. 이미지가 없으면 카드가 스타일 없는 파란 링크로 전락합니다.
  • 있지만 비어 있는 태그. 체커가 모든 값을 출력하므로, 뒤에 아무것도 없는 og:title을 쉽게 잡아낼 수 있습니다.
  • 상대 이미지 경로. og:image는 절대 URL이어야 합니다. /img/card.jpg 같은 경로는 스크레이핑을 깨뜨립니다.
  • og:url 불일치. og:url이 실제 표준 URL과 다르면 플랫폼이 페이지 스크레이핑을 거부할 수 있습니다.
  • JavaScript로 삽입된 태그. view-source에 나타나지 않으므로 여기에도 나타나지 않으며, 대부분의 크롤러도 보지 못합니다.
  • Facebook의 오래된 카드. 마크업 문제가 아닙니다. Facebook이 스크레이프 결과를 캐시하기 때문입니다. Sharing Debugger에서 강제로 갱신하세요.

자주 묻는 질문

마크업을 붙여넣으면 소셜 크롤러가 원본 응답에서 보는 것을 정확히 보여주며, 크롤러가 접근할 수 없는 페이지, 즉 스테이징 서버, localhost, 인트라넷, 로그인 뒤의 모든 페이지에서도 작동하기 때문입니다. 페이지를 열고 Ctrl+U를 눌러 소스를 복사한 뒤 여기에 붙여넣으세요.

반드시 그렇지는 않습니다. X는 twitter: 태그가 없으면 Open Graph 태그로 폴백하므로 체크리스트에는 twitter:card만 있습니다. X에서 다른 모든 플랫폼과 다른 제목, 설명, 이미지를 쓰고 싶을 때만 나머지를 추가하세요.

검사기는 JavaScript가 실행된 뒤의 DOM을 보여주지만, 소셜 크롤러는 원본 HTML 응답을 읽습니다. 검사기가 아니라 view-source(Ctrl+U)를 사용해 그 내용을 붙여넣으세요. 태그가 DOM에만 존재한다면, 서버 측 렌더링이나 프리렌더 서비스를 추가해 크롤러가 볼 수 있게 하세요.

1200 x 630 px, JPG 또는 PNG입니다. 큰 Facebook과 LinkedIn 카드에 권장되는 크기이고, X에서도 허용되며, Slack, Discord 및 기타 링크 펼침 앱에서 깔끔하게 확장됩니다. 체커는 og:image가 선언되어 있는지 확인하지만 파일을 열지는 않으므로 크기는 직접 확인하세요.

Facebook은 스크레이프 결과를 최대 30일 캐시합니다. developers.facebook.com/tools/debug의 Sharing Debugger에 URL을 붙여넣고 다시 스크레이프해 캐시를 무효화하세요.

관련 도구

메타 설명 길이 확인기

메타 설명의 문자 수와 예상 픽셀 너비를 측정하고 편집 기준 및 데스크톱·모바일 레이아웃 예시와 비교하세요.

외부 링크 추출기

원시 HTML을 붙여넣고 필요에 따라 기본 URL을 지정하면, 코드에 포함된 모든 외부 http/https 링크를 중복 없이 정리된 목록으로 제공합니다. 링크 감사와 SEO 검토에 유용합니다.

FAQ 스키마 생성기

질문과 답변 쌍으로 FAQPage JSON-LD 마크업을 생성해 Google의 리치 결과와 답변 상자 노출 자격을 얻으세요.

Google SERP 시뮬레이터

모바일과 데스크톱의 글자 수 제한으로 Google 스타일 검색 스니펫을 대략 확인하세요. 초안은 이 브라우저 세션에만 남습니다.

HTTP 보안 헤더 검사기

HTTP 응답 헤더를 붙여넣고 HSTS, CSP, 클릭재킹, MIME, 리퍼러, 교차 출처 정책을 브라우저에서 점검하세요.

hreflang 검사기

붙여 넣은 HTML의 hreflang을 로컬에서 검사합니다. 코드, 전체 URL, 중복, 위치와 선택적 자기 참조를 확인하세요.

이 도구는 다른 언어로도 제공됩니다