用途
og-tags 是前端检查清单(front-end-checklist)中的一条规则,用于审计网页的社交分享元数据。它适用于任何可能被用户在社交网络或即时通讯应用中分享的页面。Open Graph 标签控制页面在 Facebook、LinkedIn、Slack 等平台被分享时的展示效果;缺少或错误的标签会导致链接预览不美观,从而降低点击率。
主要能力
该规则围绕五个核心 Open Graph 属性进行检查:og:title、og:description、og:image、og:url 和 og:type。检查内容包括:验证所有取值非空;确认 og:image 与 og:url 使用绝对 HTTPS URL;将 og:url 与 canonical 标签进行比对,要求二者完全一致。
使用方式
规则提供了检查(Check)、修复(Fix)、解释(Explain)和代码审查(Code Review)四个环节。
检查环节:检查页面中的 Open Graph 元标签 og:title、og:description、og:image、og:url 和 og:type,验证所有值非空,且 og:image/og:url 使用绝对 HTTPS URL。
修复环节:向页面添加四个必需的 Open Graph 元标签——og:title(不超过 95 字符)、og:description(不超过 200 字符)、og:image(绝对 HTTPS URL,1200×630)、og:url(规范绝对 URL);并为标准页面添加 og:type='website'。
解释环节:说明 Open Graph 标签控制页面在 Facebook、LinkedIn、Slack 等社交平台分享时的展示方式;若缺少这些标签,平台会自行猜测标题、描述和图片,结果往往不佳。
代码审查环节:检查渲染后的页面中全部五个核心 OG 属性,验证 og:image 和 og:url 的值以 'https://' 开头,标记任何内容为空的属性,并将 og:url 与 canonical 标签比对,要求完全匹配。
快速参考
每个页面都应包含 og:title、og:description、og:image 和 og:url;og:image 和 og:url 应使用绝对 URL;og:image 建议至少 1200×630 像素以获得最佳展示效果;og:type 省略时默认为 'website',但显式设置是最佳实践。
适用场景
适用于任何用户可能分享到社交网络或即时通讯应用的网页,尤其是需要控制链接预览效果的页面。
限制
资料未提供该规则的具体实现代码示例、框架特定指导的完整内容,仅指出完整实现细节、代码示例和框架特定指导见 references/rule.md。资料未提供收费、价格、平台支持范围或效果保证等信息。