OGP·메타 태그 검증기

HTML 소스를 붙여넣기만 하면 Open Graph Protocol(OGP)과 Twitter Card 메타 태그를 한 번에 검증합니다. 누락된 태그와 절대 URL이 아닌 og:image를 감지하고, SNS에 공유했을 때의 모습을 카드 형태로 미리보기 할 수 있습니다.

공유했을 때의 모습을 정하는 메타 태그를 점검하기

링크를 SNS에 올렸을 때 나타나는 제목과 설명, 그림은 페이지의 ``에 적은 Open Graph와 Twitter Card 메타 태그가 정합니다. 이 도구는 붙여 넣은 HTML에서 그것들을 뽑아내어 빠진 태그와 잘못된 값을 짚어 주고, 실제 카드에 가까운 모습으로 미리 보여 줍니다.

**가장 흔한 탈은 `og:image`를 상대 경로로 적는 것입니다.** 각 서비스의 크롤러는 제 서버에서 그림을 가져가므로 `/img/ogp.png` 같은 경로로는 풀어낼 수 없어 **그림만 빠진 카드가 됩니다.** 반드시 `https://`로 시작하는 절대 URL로 적어 주십시오. **또 하나 알아 둘 것은, 이들 서비스가 크롤링한 결과를 캐시한다는 점입니다.** 태그를 고쳐도 예전 내용이 계속 보일 수 있으며, 그때는 각 서비스의 디버그 도구로 다시 가져오게 해야 합니다. 덧붙여 Twitter Card는 `twitter:` 태그가 없으면 `og:`로 기대므로 둘 다 적을 필요는 없습니다.

사용하는 방법

  1. HTML 소스를 붙여 넣습니다 ``의 내용만 넣어도 되고, 페이지 전체를 넣어도 무방합니다.
  2. 먼저 예시로 확인합니다 좋은 예와 나쁜 예가 마련되어 있어 판정의 차이를 미리 볼 수 있습니다.
  3. 지적된 항목을 읽습니다 **빠진 태그와, 절대 URL이 아닌 `og:image`가 짚입니다.**
  4. 미리보기로 모습을 확인합니다 올리기 전에 제목이 어떻게 접히고 설명이 어디서 잘리는지 볼 수 있습니다.

더 잘 활용하기 위한 팁

  • og:image의 권장 크기는 가로 1200×세로 630px(가로세로 비율 1.91:1)입니다. 이미지가 너무 작거나 비율이 다르면 SNS 측에서 예상치 못하게 잘려서 표시될 수 있습니다.
  • Facebook·LINE·Slack 등의 크롤러는 og:title/og:description을 읽지만, X(Twitter)는 별도의 twitter:title/twitter:description을 사용합니다. 두 가지를 모두 설정해 두면 어느 플랫폼에서도 올바르게 표시됩니다.
  • twitter:card가 설정되어 있지 않으면 X는 og:title/og:description으로 대체를 시도하지만 이미지가 올바르게 표시되지 않을 수 있으므로 명시적으로 설정하는 것을 권장합니다.
  • og:url에는 정규화된 페이지의 URL(https:// 절대 URL)을 지정해 주세요. 파라미터가 붙은 URL과의 중복 콘텐츠 판정을 피하는 데도 도움이 됩니다.
  • 메타 태그를 변경한 직후 SNS에 공유해도 캐시된 이전 미리보기가 표시될 수 있습니다. Facebook의 공유 디버거처럼 각 SNS가 제공하는 재수집(recrawl) 도구로 캐시를 갱신하세요.

이럴 때 쓸 수 있습니다

글을 공개하기 전에 확인할 때

**내보낸 뒤에 링크가 망가져 보이면 캐시 탓에 고쳐도 돌아오지 않습니다.** 미리 보아 두는 편이 확실합니다.

템플릿의 출력을 검증할 때

CMS나 프레임워크가 내놓은 ``를 붙여 넣어 뜻한 태그가 들어 있는지 확인할 수 있습니다.

그림을 바꾼 것을 점검할 때

**새 `og:image`가 절대 URL인지는 놓치기 딱 좋은 대목입니다.**

다른 사이트의 표기를 참고할 때

잘 보이는 페이지의 소스를 붙여 넣어 어떤 태그를 갖춰 두었는지 볼 수 있습니다.

Open Graph 용어

og:title
카드에 나타나는 제목입니다. **``과 달리 적을 수 있어 SNS용으로 짧게 고쳐 쓸 수 있습니다.**</dd> <dt class="glossary-term" id="glossary-1">og:description</dt> <dd class="glossary-definition">카드의 설명문입니다. 너무 길면 잘리므로 요점을 앞에 둡니다.</dd> <dt class="glossary-term" id="glossary-2">og:image</dt> <dd class="glossary-definition">카드의 그림입니다. **반드시 절대 URL로 적어 주십시오.** 가로 1200 세로 630 픽셀쯤이 다루기 좋은 크기입니다.</dd> <dt class="glossary-term" id="glossary-3">og:type</dt> <dd class="glossary-definition">페이지의 종류입니다. 글이라면 `article`, 그 밖에는 `website`가 흔합니다.</dd> <dt class="glossary-term" id="glossary-4">twitter:card</dt> <dd class="glossary-definition">카드의 꼴을 정합니다. `summary_large_image`로 두면 그림이 큼직하게 나옵니다.</dd> <dt class="glossary-term" id="glossary-5">og:url</dt> <dd class="glossary-definition">그 페이지의 정규 URL입니다. **공유가 이리로 모이므로 질의 매개변수가 붙은 URL을 적지 않도록 조심합니다.**</dd> </dl> </div> </div> </div> <div class="row mt-4 section-faq"> <div class="col-md-12"> <div class="faq-card"> <h2 class="h4"><svg class="svg-icon-inline me-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-help-circle" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 16v.01" /> <path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483" /> </svg>자주 묻는 질문</h2> <div class="accordion accordion-flush mt-3" id="faq-accordion"> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-0"> og:image를 설정했는데 SNS에서 이미지가 표시되지 않는 이유는 무엇인가요? </button> </h3> <div id="faq-0" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">가장 흔한 원인은 이미지 URL이 상대 경로(<code>/img/a.png</code> 등)로 되어 있는 경우입니다. 대부분의 크롤러는 상대 URL을 해석할 수 없으므로 반드시 <code>https://</code>로 시작하는 절대 URL을 지정해 주세요. 서버가 크롤러의 User-Agent를 차단하고 있거나 이미지 크기가 너무 작은 경우에도 표시되지 않을 수 있습니다.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1"> og:title과 title 태그를 둘 다 작성해야 하나요? </button> </h3> <div id="faq-1" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">네, 역할이 다르기 때문에 둘 다 설정하는 것을 권장합니다. <code><title></code>은 검색 결과 제목과 브라우저 탭에 사용되고, <code>og:title</code>은 SNS에 공유되었을 때의 카드 제목에 사용됩니다. og:title이 없으면 많은 크롤러가 <code><title></code>로 대체하지만, 반드시 의도한 문구가 되는 것은 아닙니다.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-2"> twitter:card 값은 무엇을 선택해야 하나요? </button> </h3> <div id="faq-2" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">일반적인 기사·블로그 페이지에서는 이미지를 크게 표시하는 <code>summary_large_image</code>를 권장합니다. 작은 썸네일 정도로 충분하다면 <code>summary</code>를 사용하세요. <code>app</code>과 <code>player</code>는 각각 앱 설치 유도와 동영상/오디오 임베드 전용이므로 일반적인 웹페이지에는 사용하지 않습니다.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-3"> 메타 태그를 수정했는데 SNS 미리보기가 갱신되지 않습니다. 왜 그런가요? </button> </h3> <div id="faq-3" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">각 SNS는 크롤링 결과를 캐시하기 때문에 태그를 수정한 후에도 예전 내용이 계속 표시될 수 있습니다. Facebook·LINE의 "공유 디버거"나 X의 "Card Validator"처럼 각 SNS가 제공하는 재수집 도구로 캐시 갱신을 요청해야 합니다.</div> </div> </div> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-4"> OGP 태그가 하나도 없으면 어떻게 되나요? </button> </h3> <div id="faq-4" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">대부분의 크롤러는 <code><title></code>과 <code>meta description</code>으로 대체해 미리보기를 생성하려 하지만, 이미지는 표시되지 않아 링크와 텍스트만 있는 밋밋한 모습이 되기 쉽습니다. 클릭률에 영향을 주므로 최소한 <code>og:title</code>·<code>og:description</code>·<code>og:image</code> 세 가지는 설정하는 것을 권장합니다.</div> </div> </div> </div> </div> </div> </div> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"og:image를 설정했는데 SNS에서 이미지가 표시되지 않는 이유는 무엇인가요?","acceptedAnswer":{"@type":"Answer","text":"가장 흔한 원인은 이미지 URL이 상대 경로(/img/a.png 등)로 되어 있는 경우입니다. 대부분의 크롤러는 상대 URL을 해석할 수 없으므로 반드시 https://로 시작하는 절대 URL을 지정해 주세요. 서버가 크롤러의 User-Agent를 차단하고 있거나 이미지 크기가 너무 작은 경우에도 표시되지 않을 수 있습니다."}},{"@type":"Question","name":"og:title과 title 태그를 둘 다 작성해야 하나요?","acceptedAnswer":{"@type":"Answer","text":"네, 역할이 다르기 때문에 둘 다 설정하는 것을 권장합니다. <title>은 검색 결과 제목과 브라우저 탭에 사용되고, og:title은 SNS에 공유되었을 때의 카드 제목에 사용됩니다. og:title이 없으면 많은 크롤러가 <title>로 대체하지만, 반드시 의도한 문구가 되는 것은 아닙니다."}},{"@type":"Question","name":"twitter:card 값은 무엇을 선택해야 하나요?","acceptedAnswer":{"@type":"Answer","text":"일반적인 기사·블로그 페이지에서는 이미지를 크게 표시하는 summary_large_image를 권장합니다. 작은 썸네일 정도로 충분하다면 summary를 사용하세요. app과 player는 각각 앱 설치 유도와 동영상/오디오 임베드 전용이므로 일반적인 웹페이지에는 사용하지 않습니다."}},{"@type":"Question","name":"메타 태그를 수정했는데 SNS 미리보기가 갱신되지 않습니다. 왜 그런가요?","acceptedAnswer":{"@type":"Answer","text":"각 SNS는 크롤링 결과를 캐시하기 때문에 태그를 수정한 후에도 예전 내용이 계속 표시될 수 있습니다. Facebook·LINE의 \"공유 디버거\"나 X의 \"Card Validator\"처럼 각 SNS가 제공하는 재수집 도구로 캐시 갱신을 요청해야 합니다."}},{"@type":"Question","name":"OGP 태그가 하나도 없으면 어떻게 되나요?","acceptedAnswer":{"@type":"Answer","text":"대부분의 크롤러는 <title>과 meta description으로 대체해 미리보기를 생성하려 하지만, 이미지는 표시되지 않아 링크와 텍스트만 있는 밋밋한 모습이 되기 쉽습니다. 클릭률에 영향을 주므로 최소한 og:title·og:description·og:image 세 가지는 설정하는 것을 권장합니다."}}]}</script> <div class="row mt-4 section-article"> <div class="col-md-12"> <div class="article-card"> <img src="https://toolbase.cc/img/toolkun.png" alt="툴군" style="float:right;width:56px;margin:0 0 .5rem 1.25rem;opacity:.9"> <h2 class="h4">여담 ― OGP가 탄생한 이유 ― Facebook이 "좋아요" 버튼을 작동시키기 위해 만든 구조</h2> <p>Open Graph Protocol(OGP)은 2010년 Facebook이 자사의 "좋아요" 버튼을 널리 보급하기 위해 만든 사양입니다. 당시 웹페이지는 Facebook에서 공유되어도 단순한 링크와 제목만 표시되어 클릭률이 좀처럼 오르지 않았습니다. Facebook은 "페이지 스스로가 SNS용 표시 내용을 선언할 수 있다면 더 매력적인 공유 경험을 만들 수 있다"고 생각해, 일반 HTML에 <code><meta property="og:xxx"></code>라는 독자적인 네임스페이스를 추가하는 형태로 OGP를 설계했습니다.</p> <p>흥미로운 점은 OGP가 원래 <strong>RDFa</strong>(HTML에 구조화된 데이터를 기술하기 위한 W3C 사양)를 기반으로 한다는 것입니다. Facebook은 기존 표준 규격을 재활용함으로써, 브라우저 제조사나 다른 회사의 협력 없이도 기존 HTML에 메타 태그를 추가하는 것만으로 새로운 기능을 구현할 수 있도록 설계했습니다. 이 "하위 호환성을 깨지 않고 확장한다"는 발상이 주효해, OGP는 Facebook 이외의 플랫폼(Slack·LINE·Discord 등)에도 사실상의 표준으로 널리 퍼졌습니다.</p> <p>X(Twitter)는 처음에는 OGP를 그대로 따르지 않고 독자적인 <strong>Twitter Cards</strong>(<code>twitter:xxx</code>)라는 별도의 네임스페이스를 채택했습니다. 이는 기술적 필연이라기보다, 경쟁사인 Facebook이 만든 규격을 그대로 채택하고 싶지 않았던 사정도 있었다고 알려져 있습니다. 그 결과 지금도 많은 사이트가 og: 계열과 twitter: 계열 태그를 중복해서 작성해야 하며, 이것이 이런 OGP 검증 도구가 여전히 필요한 이유 중 하나입니다.</p> <div class="related-trivia"> <p class="related-trivia-label"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-books" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /> <path d="M9 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /> <path d="M5 8h4" /> <path d="M9 16h4" /> <path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041" /> <path d="M14 9l4 -1" /> <path d="M16 16l3.923 -.98" /> </svg> 관련 여담 읽기 </p> <ul class="related-trivia-list"> <li> <a href="https://toolbase.cc/ko/dev/seo/jsonld_validator"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 6l6 6l-6 6" /> </svg> <span>여담 ― JSON-LD가 Microdata・RDFa를 대체한 이유</span> </a> </li> <li> <a href="https://toolbase.cc/ko/dev/server/security_headers_checker"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M9 6l6 6l-6 6" /> </svg> <span>여담 ― securityheaders.com과 클릭재킹 대책의 역사</span> </a> </li> </ul> </div> <div class="trivia-collection-link"> <a href="https://toolbase.cc/ko/trivia"> <svg class="svg-icon-inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-library" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 5.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 7.26a2.005 2.005 0 0 0 -1.012 1.737v10c0 1.1 .9 2 2 2h10c.75 0 1.158 -.385 1.5 -1" /> <path d="M11 7h5" /> <path d="M11 10h6" /> <path d="M11 13h3" /> </svg> 모든 여담 보기 </a> </div> </div> </div> </div> </div> <div class="container"> <div class="row mt-4 section-related"> <div class="col-md-12"> <p class="related-tools-label">이 도구를 본 사람들이 함께 본 도구</p> <div class="row g-3"> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/ko/dev/seo/robots_txt" class="text-decoration-none tool-card-link" title="robots.txt 내용을 붙여넣어 구문을 확인하세요. User-agent, Disallow, Allow, Sitemap 지시문을 분석하고 크롤러 접근 규칙을 시각화합니다."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-robot" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -4" /> <path d="M12 2v2" /> <path d="M9 12v9" /> <path d="M15 12v9" /> <path d="M5 16l4 -2" /> <path d="M15 14l4 2" /> <path d="M9 18h6" /> <path d="M10 8v.01" /> <path d="M14 8v.01" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">robots.txt 유효성 검사기</p> <p class="mb-0 text-muted small">robots.txt 내용을 붙여넣어 구문을 확인하세요. User-agent, Disallow, Allow, Sitemap 지시문을 분석하고 크롤러 접근 규칙을 시각화합니다.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/ko/dev/seo/sitemap_validator" class="text-decoration-none tool-card-link" title="sitemap.xml 내용을 붙여넣으면 sitemaps.org 프로토콜 준수 여부를 검증합니다. urlset 네임스페이스, 필수 loc 요소, lastmod/priority 형식 오류를 확인하고 구글의 5만 건 URL 상한도 검사합니다."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-sitemap" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M15 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2" /> <path d="M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1" /> <path d="M12 9l0 3" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">Sitemap.xml 검사기</p> <p class="mb-0 text-muted small">sitemap.xml 내용을 붙여넣으면 sitemaps.org 프로토콜 준수 여부를 검증합니다. urlset 네임스페이스, 필수 loc 요소, lastmod/priority 형식 오류를 확인하고 구글의 5만 건 URL 상한도 검사합니다.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/ko/dev/seo/jsonld_validator" class="text-decoration-none tool-card-link" title="HTML이나 원시 JSON-LD를 붙여넣기만 하면 FAQPage・BreadcrumbList・Article 구조화 데이터를 검증합니다. 누락된 필수 속성과 구글 리치 결과에서 자주 발생하는 실수를 한눈에 확인할 수 있습니다."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-schema" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 2h5v4h-5l0 -4" /> <path d="M15 10h5v4h-5l0 -4" /> <path d="M5 18h5v4h-5l0 -4" /> <path d="M5 10h5v4h-5l0 -4" /> <path d="M10 12h5" /> <path d="M7.5 6v4" /> <path d="M7.5 14v4" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">JSON-LD 구조화 데이터 검증기</p> <p class="mb-0 text-muted small">HTML이나 원시 JSON-LD를 붙여넣기만 하면 FAQPage・BreadcrumbList・Article 구조화 데이터를 검증합니다. 누락된 필수 속성과 구글 리치 결과에서 자주 발생하는 실수를 한눈에 확인할 수 있습니다.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/ko/dev/seo/ads_txt" class="text-decoration-none tool-card-link" title="ads.txt 내용을 붙여넣기만 하면 구문 오류를 즉시 확인할 수 있습니다. DOMAIN/PUBLISHER_ID/RELATIONSHIP(DIRECT/RESELLER) 필드를 한 줄씩 검증하여, 광고 인벤토리 무단 재판매(도메인 스푸핑)를 막는 데 필수적인 이 파일을 올바르게 설정했는지 확인할 수 있습니다."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-ad-2" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M11.933 5h-6.933v16h13v-8" /> <path d="M14 17h-5" /> <path d="M9 13h5v-4h-5v4" /> <path d="M15 5v-2" /> <path d="M18 6l2 -2" /> <path d="M19 9h2" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">ads.txt 검증 도구</p> <p class="mb-0 text-muted small">ads.txt 내용을 붙여넣기만 하면 구문 오류를 즉시 확인할 수 있습니다. DOMAIN/PUBLISHER_ID/RELATIONSHIP(DIRECT/RESELLER) 필드를 한 줄씩 검증하여, 광고 인벤토리 무단 재판매(도메인 스푸핑)를 막는 데 필수적인 이 파일을 올바르...</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/ko/dev/seo/hreflang_validator" class="text-decoration-none tool-card-link" title="HTML <head>에 작성한 hreflang 태그를 붙여넣기만 하면 x-default 누락, 자기 참조 누락, 잘못된 언어 코드, 중복 선언 등 다국어 사이트에서 흔히 발생하는 SEO 설정 오류를 자동으로 검출하는 검증 도구입니다."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-world-www" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" /> <path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" /> <path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" /> <path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" /> <path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" /> <path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" /> <path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" /> <path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">Hreflang 태그 검증 도구</p> <p class="mb-0 text-muted small">HTML <head>에 작성한 hreflang 태그를 붙여넣기만 하면 x-default 누락, 자기 참조 누락, 잘못된 언어 코드, 중복 선언 등 다국어 사이트에서 흔히 발생하는 SEO 설정 오류를 자동으로 검출하는 검증 도구입니다.</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/ko/dev/seo/manifest_validator" class="text-decoration-none tool-card-link" title="manifest.json 내용을 붙여넣기만 하면 PWA 설치 조건을 충족하는지 검증합니다. name, start_url, display, icons 등 필수 항목과 maskable 아이콘 유무를 확인하여 문제점을 목록으로 표시합니다."> <div class="card h-100 border shadow-sm tool-card"> <div class="card-body p-3"> <div class="d-flex align-items-start gap-2"> <span class="tool-card-icon flex-shrink-0" style="color:#6f42c1"> <svg class="tool-card-icon-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-app-window" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /> <path d="M6 8h.01" /> <path d="M9 8h.01" /> </svg> </span> <div class="flex-grow-1 min-w-0"> <p class="mb-1 fw-semibold text-dark" style="font-size:.9rem">웹 앱 매니페스트(manifest.json) 검증 도구</p> <p class="mb-0 text-muted small">manifest.json 내용을 붙여넣기만 하면 PWA 설치 조건을 충족하는지 검증합니다. name, start_url, display, icons 등 필수 항목과 maskable 아이콘 유무를 확인하여 문제점을 목록으로 표시합니다.</p> </div> </div> </div> </div> </a> </div> </div> </div> </div> </div> </main> <footer> <div class="container mt-4"> <div class="row"> <div class="col-12"> <div class="d-flex align-items-center gap-3 my-3"> <hr class="flex-grow-1 m-0"> <img src="https://toolbase.cc/img/toolkun-up.png" alt="" style="height:40px; opacity:.75;"> <hr class="flex-grow-1 m-0"> </div> <p class="text-center text-secondary small mt-3 mb-3">본 사이트의 계산 결과 및 게재 정보는 참고 목적으로 제공되며, 정확성·최신성을 보장하지 않습니다. 이용으로 인해 발생한 손해에 대해 당 사이트는 책임을 지지 않습니다.</p> <p class="text-center mb-3"> <a href="https://toolbase.cc/ko/about" class="text-muted small me-3">Toolbase란?</a> <a href="https://toolbase.cc/ko/feedback?tool=dev.seo.ogp_validator" class="text-muted small me-3">피드백</a> <a href="https://toolbase.cc/ko/terms" class="text-muted small me-3">이용약관</a> <a href="https://toolbase.cc/ko/privacy" class="text-muted small me-3">개인정보 처리방침</a> <a href="https://toolbase.cc/ko/licenses" class="text-muted small me-3">오픈소스 라이선스 고지</a> <a href="#" onclick="showCookieSettings(); return false;" class="text-muted small">쿠키 설정</a> </p> <p class="text-center mb-3" style="font-size:.75rem;"> <a href="https://toolbase.cc/dev/seo/ogp_validator" hreflang="ja" class="text-muted">日本語</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/en/dev/seo/ogp_validator" hreflang="en" class="text-muted">English</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/zh/dev/seo/ogp_validator" hreflang="zh" class="text-muted">简体中文</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/zh-Hant/dev/seo/ogp_validator" hreflang="zh-Hant" class="text-muted">繁體中文</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/es/dev/seo/ogp_validator" hreflang="es" class="text-muted">Español</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/pt/dev/seo/ogp_validator" hreflang="pt" class="text-muted">Português</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/de/dev/seo/ogp_validator" hreflang="de" class="text-muted">Deutsch</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/fr/dev/seo/ogp_validator" hreflang="fr" class="text-muted">Français</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/it/dev/seo/ogp_validator" hreflang="it" class="text-muted">Italiano</a> <span class="text-muted mx-1">|</span> <a href="https://toolbase.cc/ko/dev/seo/ogp_validator" hreflang="ko" class="text-body fw-semibold">한국어</a> </p> <p class="text-center"> <a href="https://codebase.co.jp" target="_blank" class="text-muted" style="font-size:.75rem; opacity:.6;">Codebase Inc.</a> </p> </div> </div> </div> </footer> <div class="modal fade" id="toolSearchModal" tabindex="-1" aria-hidden="true" data-endpoint="https://toolbase.cc/ko/search-index.json" data-error-message="도구 목록을 불러오지 못했습니다. 네트워크 상태를 확인한 후 다시 시도해 주세요."> <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered"> <div class="modal-content"> <div class="modal-header border-bottom-0"> <div class="input-group"> <span class="input-group-text bg-white border-end-0"><svg class="svg-icon-inline text-muted" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" /> </svg></span> <input type="text" id="toolSearchInput" class="form-control border-start-0" placeholder="도구 검색..." autocomplete="off"> </div> <button type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-0"> <ul id="toolSearchResults" class="list-group list-group-flush"></ul> <p id="toolSearchEmpty" class="text-muted text-center py-4 px-3 d-none mb-0">일치하는 도구가 없습니다</p> </div> </div> </div> </div> <div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1090"></div> <link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/app-DJY5gZmy.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/bootstrap.bundle.min-CYJJg-x7.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/rolldown-runtime-DAXXjFlN.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/favorites-CHkhC6V5.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/toast-wr68XIKP.js" /><script type="module" src="https://toolbase.cc/build/assets/app-DJY5gZmy.js"></script> <link rel="preload" as="style" href="https://toolbase.cc/build/assets/index-CU7vBhfN.css" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/index-BQgUPmBB2.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/vue.esm-bundler-CZulxOyf.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/rolldown-runtime-DAXXjFlN.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/_plugin-vue_export-helper-BDNMzG2s.js" /><link rel="modulepreload" as="script" href="https://toolbase.cc/build/assets/csrf-DLdgo79t.js" /><link rel="stylesheet" href="https://toolbase.cc/build/assets/index-CU7vBhfN.css" /><script type="module" src="https://toolbase.cc/build/assets/index-BQgUPmBB2.js"></script></body> </html>