DataHub Tools Open Graph 预览

Open Graph 预览工具

本地优先

根据 Open Graph 标题、描述、URL 和图片字段预览社交卡片。

工具实际如何工作?

工具读取 title、description、url 和 image 的 key=value 行,并以文本返回基于 div 的 HTML 模拟代码。它不会抓取网页、解析真实 og:* 元数据、显示视觉预览,也不会复现平台裁剪和截断。

  • 读取四个 Open Graph 风格字段
  • 生成静态 HTML 模拟代码
  • 在浏览器本地处理

如何使用?

  1. 把 title、description、url 和 image 写成 key=value 行。
  2. 页面和图片都使用完整公开绝对 URL。
  3. 生成代码后放入安全测试页面单独检查。
  4. 使用各平台调试器测试已经部署的真实页面元数据。

快速示例

示例输入

title=数据质量指南
description=面向分析数据的实用检查方法。
url=https://example.com/guide/
image=https://example.com/guide-1200x630.jpg

预期结果

生成包含图片、标题、描述和 URL 的 <div class="og-preview"> HTML 字符串。

输出是代码,不是已渲染社交卡片预览;它无法证明 LinkedIn、X 等爬虫最终抓取和展示的结果。

适合哪些场景?

  • 根据四个字段起草本地 HTML 模拟代码。
  • 检查分享地址是否为绝对 URL。
  • 使用平台调试器前准备测试字段。

参考标准与适用边界

Open Graph 协议定义页面元数据,但社交平台自行决定抓取、缓存、裁剪和展示方式;静态 div 无法复现这些系统。

来源核验日期:2026 年 7 月 24 日。规范与平台行为可能更新,正式使用前请复核来源。

已知限制

  • 页面不会抓取或检查 URL。
  • 不会解析真实 meta property="og:*" 元素。
  • 不会模拟平台图片比例、缓存、截断和回退行为。

FAQ

会自动抓取网页吗?

不会。它只读取你粘贴的四个字段。

会显示视觉预览吗?

不会。当前结果是在输出区显示 HTML 模拟字符串。

会校验真实 og:* 标签吗?

不会。应检查线上页面源码并使用平台调试工具。

页面和图片必须用绝对 URL 吗?

建议使用。公开分享元数据应使用完整且可被抓取的地址。