Open Graph 검사기

실시간 URL을 확인하거나 붙여넣은 HTML을 통해 소셜 공유용 Open Graph 메타 태그를 미리보고 검증하세요. og:title, og:description, og:image, 캐노니컬 링크, Twitter 폴백, 중복 태그, 리다이렉트 동작 및 Facebook, LinkedIn, Slack, Discord, 메시징 앱에 영향을 미치는 일반적인 공유 미리보기 문제를 검사합니다.

Open Graph 검사기

소셜 카드 QA

Facebook, LinkedIn, Slack, Discord, iMessage, X 또는 기타 미리보기 영역에서 URL이 공유될 때 어떻게 보일지를 결정하는 메타데이터를 확인하세요. 배포 후 라이브 URL을 검사하거나 스테이징 중에 HTML을 붙여넣어 출시 전 누락된 og:* 태그를 찾아낼 수 있습니다.

빠른 예제

소스 설정

라이브 URL 모드는 크롤러가 지금 즉시 가져올 수 있는 내용을 확인합니다. HTML 붙여넣기 모드는 출시 전, CMS 내부 또는 공개하지 않고 서버 렌더링된 head 마크업을 검증하고 싶을 때 유용합니다.

감사 모드 프로덕션 QA에는 라이브 URL 모드를 사용하세요. 스테이징이나 템플릿 작업에는 HTML 붙여넣기 모드를 사용하세요.

URL 또는 참조 URL 라이브 URL 모드에서는 가져올 페이지입니다. HTML 붙여넣기 모드에서는 상대 정규 경로나 이미지 경로를 해석하기 위한 선택적 기본 URL 역할을 합니다.

HTML 소스

전체 HTML 또는 소셜 메타데이터가 포함된 최소한의 <head> 섹션을 붙여넣으세요.

붙여넣은 HTML 검사기는 원본 소스를 읽습니다. 페이지 로드 후 태그를 주입하는 JavaScript는 실제 크롤러에서 여전히 실패할 수 있습니다.

결과 상세 내용은 아래의 감사 보고서와 소셜 공유 미리보기 카드에 나타납니다. 결과 영역은 서버 사이드에서 렌더링되므로 프론트엔드 전용 계산에 의존하지 않고도 출력물이 작동합니다.

\\n' } }; function setValue(id, value) { var el = document.getElementById(id); if (el) { el.value = value; } } function syncMode() { var modeField = document.getElementById('id_mode'); var pastePanel = document.getElementById('ogc-paste-panel'); var hint = document.getElementById('ogc-url-hint'); var mode = modeField ? modeField.value : 'fetch'; if (pastePanel) { pastePanel.classList.toggle('is-visible', mode === 'paste'); } if (hint) { hint.textContent = mode === 'paste' ? '선택 사항이지만 도움이 됩니다. 붙여넣은 마크업이 상대 URL을 사용하는 경우, 이 기본 URL을 통해 검사기가 정규 경로와 이미지 경로를 해석할 수 있습니다.' : '사용자나 캠페인이 공유할 정확한 공개 URL을 입력하세요. 리다이렉트 및 최종적으로 가져온 URL은 보고서에 표시됩니다.'; } } function applyExample(key) { var example = examples[key]; if (!example) { return; } setValue('id_mode', example.mode); setValue('id_page_url', example.page_url); setValue('id_html_source', example.html_source); document.querySelectorAll('.ogc-example-btn').forEach(function (btn) { btn.classList.toggle('is-active', btn.getAttribute('data-example') === key); }); syncMode(); } document.addEventListener('DOMContentLoaded', function () { var modeField = document.getElementById('id_mode'); if (modeField) { modeField.addEventListener('change', syncMode); } document.querySelectorAll('.ogc-example-btn').forEach(function (btn) { btn.addEventListener('click', function () { applyExample(btn.getAttribute('data-example')); }); }); syncMode(); }); })();

Embed Open Graph 검사기 Widget

Open Graph 검사기 정보

Open Graph 검사기는 소셜 피드, 채팅 앱, 이메일 미리보기 또는 협업 도구에서 링크를 공유할 때 페이지가 어떻게 표시되는지 제어하는 정확한 메타데이터를 확인하는 데 도움을 줍니다. 플랫폼이 본문 내용에서 제목, 요약 또는 이미지를 임의로 추측하도록 내버려 두는 대신, Open Graph 태그는 크롤러에게 명확한 지침 세트를 제공합니다. 즉, 어떤 헤드라인을 보여줄지, 어떤 요약을 표시할지, 어떤 이미지를 가져올지, 어떤 정규 URL을 공유와 연결할지, 그리고 페이지가 어떤 유형의 콘텐츠인지를 명시합니다. 이는 SEO 및 GEO 워크플로우에서 중요한데, 현대의 검색 시스템들이 미리보기, 링크 카드, 요약 또는 출처 인용을 생성할 때 이와 동일한 페이지 레벨 신호를 재사용하기 때문입니다.

사용 방법

소스 선택. 크롤러가 지금 공개 페이지에서 가져올 수 있는 내용을 테스트하려면 라이브 URL 모드를 사용하고, 출시 전 마크업을 검증하려면 HTML 붙여넣기 모드로 전환하세요.
URL 또는 HTML 입력. 사용자가 공유할 것으로 예상되는 정확한 URL을 붙여넣거나, 검사기가 Open Graph, Twitter 및 정규 태그를 읽을 수 있도록 head 섹션이 포함된 페이지 HTML을 붙여넣으세요.
검사기 실행. 스캔이 완료된 후 미리보기 카드, 누락 필드 경고, 중복 태그 발견 사항, 리다이렉트 참고 사항 및 필드 비교 테이블을 검토하세요.
공유 전 최종 소스 수정. 서버에서 렌더링된 응답이 하나의 명확한 태그 세트를 노출하도록 페이지를 업데이트한 다음 캠페인, 소셜 포스트, 뉴스레터 또는 내부 채팅 도구에 링크를 게시하기 전에 다시 확인하세요.

검사기가 검토하는 항목

신호	중요한 이유	전형적인 문제
`og:title`	HTML title이나 무작위 제목 대신 크롤러에게 명시적인 공유 헤드라인을 제공합니다.	너무 짧은 제목은 일반적여 보이고, 긴 제목은 메시징 미리보기에서 잘리는 경우가 많습니다.
`og:description`	제목 뒤에 페이지를 설명하는 보조 문구를 제어합니다.	설명이 부실하면 미리보기 공간을 낭비하거나 플랫폼이 본문 텍스트에서 파편을 조합하게 됩니다.
`og:image`	보통 카드에서 썸네일이나 히어로 이미지를 결정합니다.	상대 URL, HTTP 이미지 또는 이미지 누락은 앱마다 일관되지 않은 미리보기를 유발합니다.
`og:url` 및 canonical	플랫폼이 공유를 통합하고 기본 페이지 URL을 일관되게 유지하도록 돕습니다.	리다이렉트나 일치하지 않는 URL은 참여 수치를 분산시키고 인덱싱 신호를 혼란스럽게 합니다.
`twitter:card`	Open Graph가 있더라도 X 및 일부 임베드 서비스에서 폴백 동작을 개선합니다.	OG만으로 충분하다고 가정했다가 일부 영역에서 작거나 일관되지 않은 카드가 표시될 수 있습니다.

흔한 실수 및 해석 팁

메타데이터가 중복되거나, JavaScript로 나중에 주입되거나, 잘못된 정규 URL에 연결되어 있다면 브라우저에서는 정상적으로 보여도 소셜 미리보기는 부실할 수 있습니다. 흔한 실수 중 하나는 페이지의 비정규 버전이나 파라미터가 포함된 버전에 대해 og:url을 게시한 다음, 캠페인이나 뉴스레터에서는 다른 URL을 공유하는 것입니다. 또 다른 실수는 브라우저 내부에서는 작동하지만 크롤러에게는 모호함을 주는 상대 이미지 경로에 의존하는 것입니다. 중복된 og:title이나 og:description 태그도 위험한데, 플랫폼에 따라 페이지를 가져오는 방식에 따라 첫 번째 값, 마지막 값 또는 캐시된 이전 값을 선택할 수 있기 때문입니다.

검사기가 리다이렉트를 보고하는 경우 요청된 URL, 최종적으로 가져온 URL, 정규 링크 및 og:url을 함께 비교하세요. 이 네 가지 값은 일반적으로 동일한 기본 페이지를 가리켜야 합니다. 그렇지 않은 경우 프로모션이나 제품 출시 전에 페이지를 수정하여 소셜 공유, 분석 및 인덱싱 신호가 모두 하나의 안정적인 URL을 가리키도록 하세요.

사용 사례

이 도구는 게시 전 기사 공유를 확인하는 편집 팀, 캠페인 전 제품 카드를 검증하는 이커머스 팀, 프레임워크 마이그레이션 후 SSR 출력을 검토하는 개발자에게 유용합니다. 또한 Slack, Discord, LinkedIn 또는 Facebook에 오래된 썸네일, 홈페이지 제목 또는 일반 폴백 이미지가 표시되는 이유를 디버깅할 때도 유용합니다. 이러한 상황에서 문제는 플랫폼 자체가 아니라 플랫폼이 가져온 페이지 소스에 노출된 메타데이터인 경우가 많습니다.

많은 AI 답변 서비스와 미리보기 시스템이 페이지 메타데이터를 재사용하므로, 잘 제어된 Open Graph 태그는 기존 소셜 미디어 이외의 곳에서 링크가 요약되거나 인용되는 방식도 개선할 수 있습니다. 태그 자체가 랭킹 요소는 아니지만, 클릭률과 공유 신뢰도에 영향을 미치는 페이지 품질 패키징의 일부입니다.

자주 묻는 질문 (FAQ)

소셜 미디어에 링크를 게시하기 전에 Open Graph 태그를 어떻게 테스트하나요?

라이브 URL을 가져오거나 최종 HTML 소스를 붙여넣은 다음, 크롤러가 실제로 수신하는 페이지 소스에 og:title, og:description, og:image, og:url, og:type이 있는지 확인하세요. 그 후 OG URL을 정규 링크와 비교하고 페이지가 예기치 않은 곳으로 리다이렉트되지 않는지 확인하세요.

왜 내 링크 미리보기에 잘못된 이미지나 제목이 표시되나요?

일반적인 원인은 Open Graph 태그 누락, 중복된 값, 상대 이미지 경로, 소셜 플랫폼의 오래된 캐시, 또는 공유된 URL과 정규/리다이렉트 페이지 간의 불일치입니다. 최종 소스가 하나의 명확한 필드 세트를 노출하지 않으면 미리보기 시스템이 임의로 추측할 수 있습니다.

이미 Open Graph 태그가 있는데 Twitter 태그가 따로 필요한가요?

Open Graph는 많은 플랫폼을 커버하지만, twitter:card와 선택적인 Twitter 전용 제목, 설명, 이미지 필드는 X 및 해당 태그를 직접 읽는 일부 도구에서 폴백 동작을 여전히 개선해 줍니다. 이는 일관성을 높여주는 작은 추가 사항입니다.

JavaScript로 생성된 메타 태그가 소셜 공유 미리보기를 망칠 수 있나요?

네, 그렇습니다. 많은 크롤러는 초기 HTML 응답을 검사하며 클라이언트 측 렌더링을 기다리는 전체 브라우저처럼 동작하지 않습니다. 프레임워크가 로드 후 태그를 주입하는 경우, 사용자는 브라우저에서 올바른 페이지를 볼 수 있지만 크롤러는 여전히 누락되었거나 오래된 메타데이터를 보게 됩니다.

이 콘텐츠, 페이지 또는 도구를 다음과 같이 인용하세요:

"Open Graph 검사기" - https://MiniWebtool.com/ko/open-graph-검사기/에서 MiniWebtool 인용, https://MiniWebtool.com/

miniwebtool 팀 제작. 업데이트: 2026-03-09

Open Graph 검사기

소스 설정

HTML 소스

Open Graph 검사기 정보

사용 방법

검사기가 검토하는 항목

흔한 실수 및 해석 팁

사용 사례

자주 묻는 질문 (FAQ)

소셜 미디어에 링크를 게시하기 전에 Open Graph 태그를 어떻게 테스트하나요?

왜 내 링크 미리보기에 잘못된 이미지나 제목이 표시되나요?

이미 Open Graph 태그가 있는데 Twitter 태그가 따로 필요한가요?

JavaScript로 생성된 메타 태그가 소셜 공유 미리보기를 망칠 수 있나요?

웹 관리 도구:

주요 도구: