Open Graph与社交分享元标签检查器

--- name: open-graph-and-social-share-meta-tag-checker description: 检查页面HTML源代码中用于构建链接预览的标签，包括标题和描述长度、rel=canonical、og:title/description/type/url/site_name/locale、og:image尺寸、宽高比、alt和SVG、twitter:card和句柄。标记相对/http:// URL、跟踪参数、主题和SEO插件重复项、位于<body>中的标签以及未渲染的{{ }}占位符，并返回修复后的<head>块。包含一个离线的标准库Python检查器，支持--self-test。 --- # Open Graph和社交分享元标签检查器 你让分享链接在Facebook、LinkedIn、X、Slack、Discord、WhatsApp和iMessage上看起来正确。你读取爬虫看到的页面源代码，向用户展示预览将基于哪些内容构建（标题、描述、图片、域名），解释为什么预览是空白的、被裁剪的或显示logo，并返回一个修正后的`<head>`块。你基于保存的HTML工作；你从不声称自己抓取了实时页面或看到了平台的缓存。 ## 此技能中的文件 - `scripts/og_meta_check.py` - 使用`html.parser`解析HTML，并检查title、description、canonical、og:*和twitter:*标签；使用`--root`时，它会读取本地PNG/JPEG/GIF/WebP分享图片的实际宽度/高度和文件大小（仅使用Python 3.8+标准库） - `references/tag-rules.md` - 每个标签、爬虫接受的值、长度、图片大小和回退方案 - `references/platform-notes.md` - Facebook、LinkedIn、X、Slack、Discord、WhatsApp和iMessage如何构建预览、缓存它们以及如何刷新 - `templates/share-meta-review.md` - 要返回的审查报告（预览、修复表、修复后的head块、刷新步骤） - `examples/product-page.html` - 一个主题和SEO插件都写入标签的产品页面，故意包含错误 - `examples/product-page-fixed.html` - 同一页面，带有正确的head（检查通过） - `examples/meta-report.md` - 检查器在损坏示例上的实际输出 ## 工作流程 ### 1. 获取爬虫看到的HTML 询问页面URL和服务器渲染的源代码，而不是DevTools的Elements视图（该视图显示由JavaScript添加的标签，大多数爬虫从不运行JavaScript）： ``` curl -sL -A "facebookexternalhit/1.1" https://example.com/page -o page.html curl -sL -A "Twitterbot/1.0" https://example.com/page -o page-x.html ``` 对于静态站点或构建文件夹，将检查器指向该文件夹并传递`--root`，以便从磁盘测量分享图片。询问哪些平台最重要（B2B：LinkedIn和Slack；消费者：WhatsApp、iMessage、Facebook、X）。 ### 2. 运行检查器 ``` python3 scripts/og_meta_check.py examples/product-page.html --url https://shop.example.com/shoes/trail-grip python3 scripts/og_meta_check.py dist/ --root dist/ --min-severity MEDIUM python3 scripts/og_meta_check.py page.html --url https://example.com/blog/post --json python3 scripts/og_meta_check.py --self-test ``` 为单个页面提供`--url`，以便解析相对链接并比较canonical/og:url。退出码0 = 无HIGH，1 = 有HIGH发现，2 = 输入错误。如果你无法运行代码，请按相同顺序浏览`references/tag-rules.md`。 ### 3. 解释预览 - 从预览表开始：这是人们将看到的内容。缺失、相对或SVG的`og:image`是纯文本链接的常见原因；方形或小图片会显示小缩略图而不是大卡片。 - **HIGH**会破坏预览（没有或相对的og:image、图片小于200x200、没有标题、多个canonical）。**MEDIUM**显示错误的内容（重复项、占位符、位于`<body>`中的标签、无效的twitter:card、跟踪参数、SVG）。**LOW**是润色（长度、alt文本、locale格式、site_name）。 - 重复项通常来自两个系统（主题加SEO插件、框架默认加页面组件）。说明应关闭哪一个，而不是添加第三组。 ### 4. 交付 填写`templates/share-meta-review.md`：前后预览、修复表、一个完整的`<head>`块，包含真实值（或明确标记的占位符）、分享图片规格（1200x630 JPEG/PNG，约1 MB以下，文本位于安全中心区域），以及如何刷新缓存（Facebook Sharing Debugger中的“Scrape Again”、LinkedIn Post Inspector；X、Slack和WhatsApp会在缓存过期后或URL更改后重新抓取）。 ## 示例结果 在`examples/product-page.html`上，检查器报告21个发现（HIGH 1，MEDIUM 10，LOW 10）：`<head>`中唯一的og:image是相对SVG logo，真实产品图片位于`<body>`中，尺寸为800x800，SEO插件添加了第二个og:title，带有未渲染的`{{ product.name }}`，og:url带有`?utm_source=newsletter`且与相对canonical不同，`twitter:card`是`large`，twitter:site是URL而不是`@peakline`，og:description使用`name=`且长度为269个字符，标题仅为`Peakline`。`examples/product-page-fixed.html`检查通过（退出码0）。 ## 规则 - 判断服务器渲染的HTML；当标签仅在JavaScript运行后才存在时，要明确说明。 - 不要为修复后的标签编造产品事实、价格或品牌句柄；使用页面自身的文案或标记`<placeholder>`。 - 每个单值标签只保留一个值；删除重复来源而不是覆盖它。 - og:url、og:image、twitter:image和canonical中的所有URL必须是绝对https:// URL，且不带跟踪参数。 - 不要承诺平台将如何裁剪或何时刷新；提供文档中的尺寸和刷新工具，并在平台的调试器中标记其余部分为“待验证”。 - 保持og:title不含站点名称后缀（og:site_name承载品牌），除非用户要求。