OGP 与 Meta 标签验证器

粘贴 HTML 源代码，即可一次性验证 Open Graph Protocol（OGP）和 Twitter Card 的 meta 标签。检测缺失的标签以及不是绝对路径的 og:image，并以卡片形式预览在社交媒体上分享时的效果。

检视决定分享外观的元标签

把链接贴到社交网络时所显示的标题、说明与图片，是由页面 `` 里的 Open Graph 与 Twitter Card 元标签所决定的。本工具会从您贴入的 HTML 中把它们抽出来，指出缺失的标签与有误的取值，并以接近实际卡片的样子预览出来。

**最常见的毛病，莫过于把 `og:image` 写成相对路径。** 各家的爬虫是从自己的服务器去取图的，像 `/img/ogp.png` 这样的路径解析不了，**卡片送到时图片便缺了一块。** 请务必写成以 `https://` 开头的绝对网址。**另一件值得知道的事是：这些服务会把爬取的结果缓存起来。** 改了标签，显示的仍可能是旧的内容，这时便须借各家的调试工具促其重新抓取。另外，Twitter Card 在没有 `twitter:` 标签时会回落到 `og:`，故不必两套都写。

使用方法

  1. 贴入 HTML 源码 只放 `` 的内容即可，整页贴进来也无妨。
  2. 先试一试样例 好例与坏例都已备好，动手之前便可看出判定的分别。
  3. 阅读所提出的各点 **缺失的标签，以及并非绝对网址的 `og:image`，都会被点名。**
  4. 在预览里确认外观 贴出去之前，便可看出标题如何折行、说明在何处被截断。

用好本工具的小技巧

  • og:image 推荐尺寸为 1200×630px（宽高比 1.91:1）。尺寸过小或比例不对的图片，在社交平台上可能会被意外裁剪。
  • Facebook、LINE、Slack 等平台的爬虫读取的是 og:title/og:description，而 X（Twitter）使用的是独立的 twitter:title/twitter:description。两者都设置好，才能在各平台上都正确显示。
  • 如果没有设置 twitter:card，X 会尝试回退到 og:title/og:description，但图片可能无法正确显示，因此建议明确设置该标签。
  • og:url 应填写页面的规范化绝对路径（https:// 开头）。这也有助于避免带参数的 URL 被误判为重复内容。
  • 刚修改完 meta 标签后立即分享，社交平台可能仍显示旧的缓存预览。可以使用各平台提供的重新抓取工具（例如 Facebook 的分享调试器）来刷新缓存。

这些场景会用到

文章发布前先行确认

**一旦发出去才发现链接显示错乱，因有缓存在，改了也未必挽得回。** 先看一眼才稳妥。

检验模板的产出

把 CMS 或框架所输出的 `` 贴上，便可确认所期望的标签是否都在。

检视图片的更换

**新的 `og:image` 是否为绝对网址，正是最容易被漏看的地方。**

借鉴他人站点的写法

把显示良好的页面源码贴上，看看它把哪些标签备齐了。

Open Graph 的术语

og:title
卡片上所显示的标题。**它可与 `` 不同，从而为社交媒体改写得更简短。**</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">卡片上的图片。**务必以绝对网址给出。** 约 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">该页面的规范网址。**分享的权重会归拢到此处，故切莫写上带查询参数的网址。**</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，社交媒体上却不显示图片？ </button> </h3> <div id="faq-0" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">最常见的原因是图片地址使用了相对路径（如 <code>/img/a.png</code>）。大多数爬虫无法解析相对路径，请务必使用以 <code>https://</code> 开头的绝对路径。此外，服务器屏蔽了爬虫的 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> 用于社交媒体分享时的卡片标题。若缺少 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"> 修改了 meta 标签，但社交媒体的预览仍未更新，是什么原因？ </button> </h3> <div id="faq-3" class="accordion-collapse collapse" data-bs-parent="#faq-accordion"> <div class="accordion-body">各社交平台会缓存抓取结果，因此修改后仍可能显示旧的预览内容。需要使用各平台提供的重新抓取工具（例如 Facebook/LINE 的分享调试器，或 X 的 Card Validator）主动请求刷新缓存。</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，社交媒体上却不显示图片？","acceptedAnswer":{"@type":"Answer","text":"最常见的原因是图片地址使用了相对路径（如 /img/a.png）。大多数爬虫无法解析相对路径，请务必使用以 https:// 开头的绝对路径。此外，服务器屏蔽了爬虫的 User-Agent，或图片尺寸过小，也可能导致无法显示。"}},{"@type":"Question","name":"og:title 和 title 标签需要同时设置吗？","acceptedAnswer":{"@type":"Answer","text":"是的，两者作用不同，建议都设置。<title> 用于搜索结果标题和浏览器标签页，og:title 用于社交媒体分享时的卡片标题。若缺少 og:title，多数爬虫会回退使用 <title>，但结果未必符合预期。"}},{"@type":"Question","name":"twitter:card 应该选哪个值？","acceptedAnswer":{"@type":"Answer","text":"对于一般的文章或博客页面，推荐使用能大图展示的 summary_large_image。如果只需要小图缩略图，可使用 summary。app 和 player 分别用于引导下载应用和嵌入视频/音频，通常不适用于普通网页。"}},{"@type":"Question","name":"修改了 meta 标签，但社交媒体的预览仍未更新，是什么原因？","acceptedAnswer":{"@type":"Answer","text":"各社交平台会缓存抓取结果，因此修改后仍可能显示旧的预览内容。需要使用各平台提供的重新抓取工具（例如 Facebook/LINE 的分享调试器，或 X 的 Card Validator）主动请求刷新缓存。"}},{"@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）是 Facebook 于 2010 年为推广自家「赞」按钮而制定的规范。当时的网页在 Facebook 上被分享后，往往只显示一个简单的链接和标题，点击率难以提升。Facebook 的思路是：如果页面本身能够声明在社交媒体上应呈现的内容，就能打造更具吸引力的分享体验。于是他们设计了 <code><meta property="og:xxx"></code> 这一独立命名空间，追加到普通 HTML 之上。</p> <p>有趣的是，OGP 实际上建立在 <strong>RDFa</strong>（一种用于在 HTML 中嵌入结构化数据的 W3C 规范）之上。通过沿用已有标准，Facebook 无需浏览器厂商或其他公司的配合，只需在现有 HTML 中追加几个 meta 标签即可实现新功能。这种「不破坏向后兼容性的扩展」思路取得了成功，OGP 逐渐成为事实标准，被 Slack、LINE、Discord 等 Facebook 以外的平台广泛采用。</p> <p>X（Twitter）最初并未直接采用 OGP，而是设立了独立的命名空间 <strong>Twitter Cards</strong>（<code>twitter:xxx</code>）。据说这与其说是技术上的必然，不如说也带有「不想直接采用竞争对手 Facebook 制定的规范」的考量。结果是，如今大多数网站仍需要同时重复书写 og: 系和 twitter: 系标签，这也是本类验证工具至今仍然有用的原因之一。</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/zh/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/zh/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/zh/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/zh/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/zh/dev/seo/sitemap_validator" class="text-decoration-none tool-card-link" title="粘贴 sitemap.xml 内容，即可根据 sitemaps.org 协议进行校验。检测 urlset 命名空间、必需的 loc 元素，以及 lastmod/priority 的格式错误，并检查 Google 规定的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 的格式错误，并检查 Google 规定的5万条URL上限。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/zh/dev/seo/jsonld_validator" class="text-decoration-none tool-card-link" title="粘贴HTML或原始JSON-LD即可验证FAQPage、BreadcrumbList、Article等结构化数据，快速发现缺失的必需属性以及Google富媒体搜索结果中常见的错误。"> <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等结构化数据，快速发现缺失的必需属性以及Google富媒体搜索结果中常见的错误。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/zh/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/zh/dev/seo/hreflang_validator" class="text-decoration-none tool-card-link" title="只需粘贴HTML <head>中的hreflang标签，即可自动检测多语言网站常见的SEO配置错误：缺少x-default、缺少自我引用、语言代码无效以及重复声明等问题。"> <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标签，即可自动检测多语言网站常见的SEO配置错误：缺少x-default、缺少自我引用、语言代码无效以及重复声明等问题。</p> </div> </div> </div> </div> </a> </div> <div class="col-6 col-md-4 col-lg-2"> <a href="https://toolbase.cc/zh/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">Web App Manifest（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/zh/about" class="text-muted small me-3">关于 Toolbase</a> <a href="https://toolbase.cc/zh/feedback?tool=dev.seo.ogp_validator" class="text-muted small me-3">反馈</a> <a href="https://toolbase.cc/zh/terms" class="text-muted small me-3">使用条款</a> <a href="https://toolbase.cc/zh/privacy" class="text-muted small me-3">隐私政策</a> <a href="https://toolbase.cc/zh/licenses" class="text-muted small me-3">开源许可证声明</a> <a href="#" onclick="showCookieSettings(); return false;" class="text-muted small">Cookie 设置</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-body fw-semibold">简体中文</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-muted">한국어</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/zh/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>