AnyTools
👁

Open Graph 预览工具

为社交媒体分享卡预览和生成 Open Graph 元标签

元数据输入

标题
描述
图片
URL

预览

页面标题页面描述将在这里显示example.com

生成的元标签

❓什么是 Open Graph 预览工具

Open Graph 预览工具可视化和测试网页在社交媒体上分享时的显示效果。Open Graph 是 Facebook 创建的协议，将网页转化为社交图谱中的丰富对象。它通过 meta 标签（og:title、og:description、og:image、og:url）控制分享卡片的外观。主要功能：实时分享卡片预览（Facebook、Twitter、LinkedIn 等）、完整的 OG 标签生成、图片尺寸验证、标签语法检查、多平台预览。为什么重要：正确的 OG 标签提高点击率、改善品牌展示、增加社交媒体参与度。不正确的标签会导致图片损坏、标题错误或描述缺失。必需标签：og:title（标题）、og:type（类型 - website/article）、og:image（图片 URL - HTTPS、1200x630px）、og:url（规范 URL）。可选标签：og:description、og:site_name、og:locale、图片元数据。平台特定标签：Twitter Cards（twitter:card、twitter:title）、Facebook 特定（fb:app_id）。此工具帮助您编写 OG 标签、跨平台预览，并提供优化建议。

✨功能特点

🔍

实时预览

即时预览页面在社交媒体上的显示效果
📝

完整 OG 标签

生成所有必需的 Open Graph 元标签
🌐

多平台支持

同时预览 Facebook、Twitter、LinkedIn 效果
📋

复制标签

一键复制生成的元标签

📋使用指南

1️⃣
输入元数据
填写内容的标题、描述、图片URL和页面URL
2️⃣
配置选项
设置 Open Graph 类型、网站名称、Twitter 卡片类型和社交媒体账号
3️⃣
预览外观
查看内容在不同社交媒体平台上的显示效果
4️⃣
生成并复制标签
生成元标签代码并复制到网站的 <head> 部分

📚技术介绍

🏗️Open Graph 协议

Open Graph 使用 HTML <head> 中带有 og: 前缀的元标签来定义页面元数据。核心属性包括 og:title（页面标题）、og:type（内容类型，如 article、website、video）、og:image（预览图片URL）、og:url（规范URL）和 og:description（内容摘要）。可选属性包括 og:site_name、og:locale、article:published_time 和 video:duration。社交媒体平台在分享 URL 时解析这些标签以创建富预览卡片。

🐦Twitter Cards

Twitter Cards 使用 twitter: 前缀标签扩展 Open Graph，提供 Twitter 特定功能。提供四种卡片类型：summary（默认，方形图片）、summary_large_image（大型矩形图片）、app（移动应用推广）和 player（视频/音频播放器）。twitter:card 指定类型，twitter:site 和 twitter:creator 引用 Twitter @账号。如果缺少 Twitter 特定标签，Twitter 会回退到 Open Graph 标签。

📐图片要求

不同平台有特定的图片要求：Facebook 推荐 1200x630px（1.91:1 比例），最小 200x200px，最大 8MB；Twitter summary_large_image 需要 2:1 比例（推荐 1200x600px），summary 卡片 1:1 比例（最小 144x144px）；LinkedIn 支持 1200x627px（1.91:1）；微信要求 300x300px 到 1068x455px。图片应为 JPG、PNG 或 WEBP 格式。使用多个 og:image 标签提供回退。

🔍测试和调试

平台特定的调试工具验证 Open Graph 实现：Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) 显示 Facebook 如何看到您的页面并清除缓存；Twitter Card Validator (https://cards-dev.twitter.com/validator) 预览 Twitter 卡片；LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) 测试 LinkedIn 分享。这些工具识别缺失标签、图片加载问题，并提供最佳实践警告。
❓

常见问题

❓

什么是 Open Graph 标签？

Open Graph 标签是控制 URL 在社交媒体平台上共享时显示方式的元标签。它们定义链接预览的标题、描述、图片和其他属性。
💬

哪些平台使用 Open Graph？

Facebook、LinkedIn、Pinterest 等许多平台使用 Open Graph。Twitter 使用类似的 Twitter Card 标签。两者可以共存于同一页面。
🔍

推荐的图片尺寸是多少？

推荐：Facebook/LinkedIn 使用 1200x630px。最小：600x315px。使用 PNG 或 JPG 格式。文件大小保持在 8MB 以下。
💡

如何调试 Open Graph 标签？

使用 Facebook Sharing Debugger、Twitter Card Validator 或 LinkedIn Post Inspector。这些工具显示标签的显示效果并识别错误。
📚

是否需要为每个平台设置不同的标签？

Open Graph 标签适用于大多数平台。为 Twitter 特定功能添加 Twitter Card 标签（twitter:*）。使用 og:* 标签作为所有平台的后备。

💡使用方法

1️⃣

输入页面 URL

输入页面 URL 或粘贴 Open Graph 标签。工具获取并分析元标签。查看跨平台预览效果。
2️⃣

编辑 OG 标签

修改 Open Graph 属性：标题、描述、图片、类型。工具实时更新预览。针对每个平台优化。
3️⃣

预览平台

查看内容在 Facebook、Twitter、LinkedIn 上的显示。检查图片尺寸、文本长度、格式。确保最佳显示。
4️⃣

生成元标签

工具生成完整的 HTML 元标签代码。复制到页面 <head> 部分。包含所有必需的 OG 属性。
5️⃣

验证和测试

使用平台验证器测试标签。Facebook Debugger、Twitter Validator、LinkedIn Inspector。修复任何警告或错误。

🔗Related Documents

📖Open Graph 协议-Open Graph 协议官方文档
🐦Twitter Card 标签-Twitter Card 元标签指南
📘Facebook 分享-Facebook 分享最佳实践
🔍LinkedIn Post Inspector-LinkedIn 帖子预览和调试工具
📊SEO 元标签指南-SEO 和社交元标签完整指南

📝更新日志

📌v1.11.251102
v1.0.251026创建 Open Graph 预览工具；支持多平台预览（Facebook、Twitter、LinkedIn）；实时元标签生成；图片验证和尺寸检查；完整的 Open Graph 和 Twitter Card 标签生成；一键复制和验证功能(2025年10月26日)

📦推荐组件

User Comments

0 / 2000
Loading...