오픈 그래프 메타 태그 검사기

HTML 페이지의 Open Graph 및 Twitter Card 메타 태그를 확인하세요. og:title/og:description/og:image와 Twitter 태그를 추출하고, 누락되거나 유효하지 않은 값을 강조 표시하며, 공유 가능한 JSON/PDF 보고서를 생성합니다. 리디렉션 지원과 원시 텍스트 출력을 갖춘 SEO 및 소셜 미리보기 디버깅을 위해 설계되었습니다.

Loading…

소개 Open Graph 메타 검사기

URL을 붙여넣어 소셜 플랫폼이 귀하의 페이지에서 읽을 수 있는 내용을 확인하세요: Open Graph(og:*) 태그 및 Twitter Card 메타데이터. 이 도구는 누락된 제목/설명, 손상되었거나 공개되지 않은 og:image URL, 리디렉션 문제 및 일반적인 미리보기 문제를 발견하는 데 도움을 줍니다. 따라서 귀하의 링크가 X/Twitter, Facebook, LinkedIn, Slack, Discord 등에서 올바르게 표시됩니다.

기능

  • Open Graph 메타 추출: og:title, og:description, og:image 및 관련 OG 속성(존재하는 경우).
  • Twitter Card 태그 추출 (twitter:card, twitter:title, twitter:description, twitter:image) (존재하는 경우).
  • 리디렉션을 따라 최종 표준 대상(HTTP→HTTPS, www, 로케일 경로에 일반적)을 검사합니다.
  • 메타 태그에 집중하는 HTML 전용 검증 모드(비 HTML 리소스 제외).
  • 발견 사항 + 점수 카드 및 빠른 정리를 위한 "문제만" 필터.
  • 복사, 비교 및 공유하기 쉬운 원시 텍스트 출력.
  • 티켓 및 문서화를 위한 결과 복사.
  • 자동화 및 감사를 위한 JSON 내보내기.
  • 클라이언트 납품물 및 SEO 감사를 위한 PDF 보고서 내보내기.

🧭 사용 방법 for open-graph-meta-checker

1

페이지 URL 붙여넣기

미리보기를 원하는 페이지(예: 랜딩 페이지, 블로그 게시물, 제품 페이지)의 URL을 입력하세요. 이 도구는 이미지나 API가 아닌 HTML 페이지를 위한 것입니다.

2

사이트가 리디렉션하는 경우 리디렉션을 따르세요

소셜 크롤러가 도달할 가능성이 높은 최종 대상을 도구가 확인할 수 있도록 "리디렉션 따르기"를 활성화 상태로 유지하세요.

3

OG 및 Twitter 값 검토

제목, 설명 및 이미지 필드를 확인하세요. 빈 값, 자리 표시자, 중복 또는 OG와 Twitter 태그 간 불일치를 찾으세요.

4

일반적인 미리보기 문제 해결

og:image가 절대 URL이고 공개적으로 접근 가능하며 올바른 에셋을 가리키는지 확인하세요. 제목/설명이 간결하고 페이지마다 고유한지 확인하세요.

5

보고서 내보내기 및 공유

자동화를 위해 JSON을 다운로드하거나 SEO/클라이언트 보고를 위해 PDF를 다운로드하세요. 원시 텍스트 보기를 사용하여 값을 티켓에 빠르게 붙여넣으세요.

기술 사양

요청 및 파싱 모델

이 도구는 대상 페이지(HTML)를 가져와 문서의 메타 요소에서 Open Graph 및 Twitter Card 메타 태그를 추출합니다. 효과적인 대상을 검사하기 위한 리디렉션 추적을 지원합니다.

설정동작기본값
HTML 전용HTML 페이지와 메타 데이터 추출에 집중활성화됨 (도구 기능에 따라)
리디렉션 따르기최종 URL을 검사하기 위해 리디렉션을 따름활성화됨
최대 리디렉션 횟수루프를 방지하기 위한 리디렉션 제한10
타임아웃요청 타임아웃 제한15000 ms
사용자 에이전트요청 사용자 에이전트를 식별Encode64Bot/1.0 (+https://encode64.com)
사설 네트워크안전을 위해 사설 네트워크 범위 접근 차단비활성화됨 (사설 네트워크 허용 안 됨)

권장 메타 세트 (기준선)

견고한 기준선은 Open Graph와 Twitter Card 필드를 모두 포함하여 플랫폼 간에 미리보기가 일관되게 렌더링되도록 합니다.

플랫폼최소 태그참고사항
Open Graphog:title, og:description, og:image적용 가능한 경우 og:url 및 og:type 추가
Twitter Cardtwitter:card, twitter:title, twitter:description, twitter:imagetwitter:card는 일반적으로 summary 또는 summary_large_image임
브라우저에서는 페이지가 정상적으로 보일지라도, 크롤러는 가져온 HTML 응답에 있는 내용만 볼 수 있습니다. 클라이언트 전용 메타 데이터 주입은 안정적으로 수집되지 않을 수 있습니다.

주의해야 할 og:image 함정

가장 흔한 미리보기 실패는 이미지 URL에서 발생합니다: 접근 가능하고, 절대 경로이며, 크롤러 가져오기 규칙과 호환되어야 합니다.

문제증상해결 방법
상대 이미지 URL미리보기에 이미지가 표시되지 않음og:image 및 twitter:image에 절대 URL 사용
인증/로봇/방화벽에 의해 차단됨미리보기 누락 또는 불일치크롤러에 대한 공개 접근 허용; 필터링하는 경우 소셜 사용자 에이전트 허용
이미지 URL 리디렉션일부 플랫폼에서 가져오기 실패직접적이고 안정적인 이미지 URL 선호 (리디렉션 없음)
잘못된 콘텐츠 유형이미지 인식되지 않음올바른 Content-Type 제공 (예: image/png, image/jpeg)

명령줄

HTML을 가져와 메타 태그를 검색하여 터미널에서 OG/트위터 태그를 검증할 수 있습니다. CI 검사 및 SSR 문제 디버깅에 유용합니다.

macOS / Linux

HTML 가져오기 및 OG/트위터 메타 태그 나열

curl -Ls https://example.com/page | grep -i -E "<meta[^>]+(property=\"og:|name=\"twitter:)"

소셜 미리보기에 영향을 주는 메타 태그를 표시합니다. 리디렉션을 따르려면 -L을 사용하세요.

리디렉션 후 최종 URL 확인

curl -ILs https://example.com/page | awk '/^HTTP\//{print} /^location:/I{print}'

리디렉션 체인 상태 줄과 Location 헤더를 출력합니다.

Windows (PowerShell)

HTML 다운로드 및 OG/트위터 태그 검색

$html = (Invoke-WebRequest https://example.com/page).Content; $html -split "`n" | Select-String -Pattern "<meta" | Select-String -Pattern "og:|twitter:"

전달된 HTML에 태그가 존재하는지 빠르게 확인하는 방법입니다.

앱이 SPA 위주인 경우, 신뢰성을 위해 OG/트위터 태그가 서버 측(SSR/SSG)에서 렌더링되는지 확인하세요. 크롤러가 브라우저와 같은 방식으로 클라이언트 JavaScript를 실행하지 않을 수 있습니다.

사용 사례

깨진 소셜 미리보기 수정

링크가 잘못된 제목, 이미지 없음 또는 오래된 텍스트로 공유될 때, 이 도구는 누락되거나 잘못된 메타 필드를 빠르게 찾는 데 도움을 줍니다.

  • og:title 및 twitter:title 검증
  • og:image가 접근 가능하고 절대 경로인지 확인
  • 빈 설명 또는 플레이스홀더 감지

동적 페이지 및 SSR에 대한 QA

프레임워크가 각 경로에 대해 HTML 응답에 OG/트위터 태그를 출력하는지 확인하세요 (특히 Next.js, Nuxt, SvelteKit 등).

  • 페이지별 메타가 HTML에 존재하는지 확인
  • 클라이언트 전용 메타 생성 감지
  • 표준 로캘로의 리디렉션 검증

SEO 및 콘텐츠 게시 워크플로

사이트 전체에서 미리보기 표준화: 일관된 제목/설명, 올바른 OG 유형, 안정적인 이미지는 링크 공유 시 CTR을 향상시킵니다.

  • 누락된 OG 필드에 대한 템플릿 감사
  • 편집 체크리스트용 PDF/JSON 내보내기
  • 여러 페이지 간 중복 메타 감지

클라이언트 보고 및 감사

소셜 미리보기 상태와 권장 수정 사항을 문서화할 수 있는 깔끔하고 내보내기 가능한 보고서를 생성합니다.

  • 이해관계자용 PDF 보고서
  • 시간 경과에 따른 변경 사항 추적용 JSON 보고서

❓ Frequently Asked Questions

❓Open Graph와 Twitter Cards의 차이점은 무엇인가요?

Open Graph(og:*)는 많은 플랫폼(Facebook, LinkedIn, Slack/Discord 등)에서 사용됩니다. Twitter Cards(twitter:*)는 X/Twitter에서 사용됩니다. 최상의 커버리지를 위해 많은 사이트에서 둘 다 게시합니다.

❓내 미리보기에 오래된 이미지나 제목이 표시되는 이유는 무엇인가요?

플랫폼이 미리보기를 캐시합니다. 태그를 수정한 후에는 플랫폼의 디버거 도구를 사용하여 다시 스크래핑해야 하며, 캐시가 새로고침될 때까지 기다려야 할 수 있습니다.

❓내 og:image가 표시되지 않는 이유는 무엇인가요?

일반적인 원인: URL이 상대적이거나 차단됨(인증/WAF/robots), 너무 많은 리디렉션, 잘못된 콘텐츠 유형, 또는 공개적으로 접근할 수 없음. 이 도구를 사용하여 추출된 값을 확인한 다음 이미지 URL을 직접 테스트하세요.

❓og:title과 twitter:title이 모두 필요한가요?

권장됩니다. 일부 플랫폼은 OG에 의존하고, 다른 플랫폼은 Twitter 태그에 의존합니다. 둘 다 있으면 불일치가 줄어듭니다.

❓로그인 뒤의 페이지를 테스트할 수 있나요?

소셜 크롤러는 일반적으로 인증된 콘텐츠에 접근할 수 없으므로 미리보기가 안정적으로 작동하지 않습니다. 공유 가능한 콘텐츠의 경우 공개 미리보기 페이지나 공개 OG 엔드포인트를 선호하세요.

❓여기에 URL을 붙여넣는 것이 안전한가요?

이 도구는 제공된 URL에 대해 서버 측 요청을 수행하며 사설 네트워크 대상을 차단합니다. 쿼리 문자열에 비밀(토큰)을 넣지 마세요.

Pro Tips

Best Practice

og:image와 twitter:image에 절대 URL을 사용하고 안정적으로 유지하세요(리디렉션 피하기). 크롤러 실패를 줄일 수 있습니다.

Best Practice

OG 이미지를 결정론적으로 생성하세요(템플릿 + 매개변수). 페이지별 URL을 안정적으로 유지하면서 브랜딩을 업데이트할 수 있습니다.

Best Practice

Next.js/SSR 앱의 경우, 하이드레이션 후 DOM뿐만 아니라 초기 HTML 응답(소스 보기)에서 태그를 확인하세요.

Best Practice

제목을 간결하게 유지하고 페이지마다 고유하게 만드세요. 너무 긴 제목은 미리보기에서 잘리고 CTR을 낮출 수 있습니다.

CI Tip

JSON 보고서를 내보내고 릴리스 체크리스트에 추가하여 메타 템플릿의 회귀를 발견하세요.

Additional Resources

Open Graph 프로토콜
Documentation
Twitter Cards (X) 문서
Documentation
소셜 미리보기를 위한 메타 태그 (MDN: <meta>)
Documentation
Google Search Central: 스니펫 제어 (메타 태그)
Documentation

Other Tools

Open Graph 메타 검사기 — OG 및 Twitter Card 미리보기 검증 | Encode64