OG 태그 디버거

다음

링크 미리보기가 비어 있거나 잘못되어 보인다면, 가장 먼저 확인할 곳은 페이지 소스의 og 태그입니다. HTML을 붙여 넣으면 도구가 읽을 수 있는 태그와 각 태그의 값을 정확히 보여 주므로, 빠졌거나 비어 있는 태그가 바로 드러납니다.

og 태그 디버그 방법

  1. 1

    view-source 사용

    브라우저 검사 도구가 아니라 페이지 소스를 열고 head를 복사하세요. 크롤러는 원본 응답을 읽습니다.

  2. 2

    붙여 넣고 실행

    페이지 head HTML 입력란에 붙여 넣고 다음, 결과 순서로 클릭하세요.

  3. 3

    빨간 항목 찾기

    여섯 개의 검사 중 빨간색인 각 항목은 도구가 마크업에서 읽지 못한 태그입니다.

  4. 4

    원인 찾기

    표시된 값과 아래 목록을 비교해 head를 고친 다음, 다시 붙여 넣으세요.

태그를 읽지 못하는 흔한 이유

head에서 보이는 태그가 누락으로 보고된다면, 원인은 거의 항상 다음 중 하나입니다.

증상 가능한 원인 해결 방법
og:title이 빨간색 태그가 name="og:title"로 되어 있음 name을 property로 바꾸기
태그는 누락인데 값은 맞아 보임 값에 따옴표가 없음 content 값을 따옴표로 감싸기
검사 도구에서만 빨간색, 태그는 있음 자바스크립트로 태그가 추가됨 서버가 보내는 HTML에 출력하기
태그는 초록색인데 출력된 텍스트가 비어 있음 content 속성이 비어 있음 값 채우기
태그가 잘리거나 없어짐 content 값 안에 원시 >가 있음 >로 쓰기
/img/a.jpg처럼 경로가 표시된 이미지 상대 주소 https://로 시작하는 전체 주소 사용

판단을 흐리게 하는 것들

  • 주석 처리된 태그도 읽힙니다. 검사기는 붙여 넣은 텍스트를 그대로 스캔하므로, HTML 주석 안의 태그가 초록색으로 보일 수 있습니다. 브라우저나 크롤러는 이를 무시합니다. 테스트하기 전에 오래된 주석 처리 코드를 지우세요.
  • 중복. 같은 태그가 두 번 나오면 목록에는 값 하나, 즉 마지막으로 찾은 값이 표시됩니다. 테마와 플러그인이 둘 다 태그를 추가하는 경우가 많으니 head에서 중복을 찾으세요.
  • 빈 값. 비어 있을 때 실패하는 것은 og:title과 og:description뿐입니다. 다른 태그는 존재하기만 하면 통과하므로, 표시된 값을 읽어 빈 값이 없는지 확인하세요.

짧은 디버그 절차

  1. head를 붙여 넣고 빨간 항목을 적어 둡니다.
  2. 붙여 넣은 복사본이 아니라 템플릿의 마크업을 고칩니다.
  3. 페이지를 새로 고치고 소스를 다시 복사해 새 버전을 붙여 넣습니다.
  4. 여섯 개의 검사가 모두 초록색이 되고 표시된 값이 맞을 때까지 반복합니다.

이 도구는 라이브 페이지가 아니라 텍스트를 읽으므로, og:image 주소가 오류를 반환하는지, 페이지가 리디렉션되는지는 알려 주지 않습니다. og:image 주소를 브라우저에서 열어 로드되는지 확인하세요.

여섯 개가 모두 초록색인데도 미리보기가 잘못된 경우

마크업은 맞아도 다른 부분이 실패하고 있을 수 있습니다. 이미지 주소가 로그인 없이 브라우저에서 열리는지, 페이지가 다른 주소로 리디렉션되어 다른 태그를 내보내지는 않는지, 플랫폼이 이전 스크레이프의 캐시를 보여 주고 있지는 않은지 확인하세요. 이러한 원인은 마크업 바깥에 있으므로 도구에서는 보이지 않지만, 여기서 문제가 없다면 원인을 이 범위로 좁힐 수 있습니다.

자주 묻는 질문

도구는 HTML 주석을 포함해 붙여 넣은 원시 텍스트를 모두 스캔합니다. 테스트하기 전에 주석 처리된 태그를 삭제하세요.

결과에는 태그 이름마다 값 하나, 즉 마지막으로 찾은 값이 표시됩니다. 혼동을 피하려면 중복을 제거하세요.

인스펙터는 스크립트가 실행된 뒤의 페이지를 보여 줍니다. 크롤러는 보통 원본 HTML 응답을 읽으므로, 디버그할 때는 view-source를 사용하세요.

아니요. 붙여 넣은 마크업만 읽습니다. 리디렉션, 차단된 요청, 로드되지 않는 이미지는 볼 수 없습니다.

관련 도구

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

사용 가이드와 활용 사례