基础用法指南
本指南将带你逐步了解如何使用我们的工具生成 Open Graph 元标签。
第 1 步：进入工具
从主工具页面进入 Open Graph 元标签生成器，或直接输入对应 URL 打开。
第 2 步：填写通用信息
页面类型
为你的页面选择合适的内容类型：
- Website：通用网站页面
- Article：博客文章、新闻报道、教程
- Book：图书页面、电子书
- Profile：个人或企业资料页
- Music：音乐曲目、专辑、播放列表
- Video：视频内容、电影、电视节目
标题
为页面输入一个有吸引力的标题：
- 为了获得更好的展示效果，建议控制在 60 个字符以内
- 标题应清晰且有吸引力
- 自然融入相关关键词
描述
为内容撰写简洁明了的描述：
- 建议长度为 150 到 160 个字符
- 概括用户将在页面中看到的内容
- 文案要足够吸引人，以促进点击
页面 URL
输入页面的完整 URL：
- 使用绝对 URL（包含 https://）
- 确保该 URL 可以被访问
- 尽量使用简洁、描述性强的 URL
站点名称
填写你的网站或品牌名称：
- 该名称会显示在社交媒体帖子中
- 在所有页面中保持一致
- 使用正式的品牌名称
第 3 步：配置图片设置
图片 URL
提供社交分享图片的 URL：
- 使用绝对 URL（包含 https://）
- 确保图片可被公开访问
- 推荐尺寸：1200x630 像素
图片 Alt 文本
为无障碍访问添加描述性 Alt 文本：
- 描述图片中展示的内容
- 保持简洁，但要有足够信息
- 对屏幕阅读器用户尤其重要
图片尺寸
填写图片的宽度与高度：
- 宽度：通常为 1200 像素
- 高度：通常为 630 像素
- 这些信息有助于社交平台优化展示效果
第 4 步：设置 Twitter 选项
卡片类型
选择合适的 Twitter Card 类型：
- Summary：带标题、描述和缩略图的基础卡片
- Summary with Large Image：带大图的增强卡片
- App：用于移动应用推广
- Player：用于视频或音频内容
站点账号
输入你的网站 Twitter 账号：
- 格式：@yourhandle
- 该账号会显示在 Twitter 帖子中
- 可选，但推荐填写
作者账号
输入内容创作者的 Twitter 账号：
- 格式：@authorhandle
- 对文章和博客内容尤其有用
- 可选
第 5 步：生成并复制元标签
填写完所有信息后：
- 元标签会实时自动生成
- 在输出区域查看生成的 HTML
- 点击“复制元标签”按钮复制到剪贴板
- 预览区域会展示内容在社交媒体上的呈现效果
第 6 步：集成到网站中
将复制好的元标签添加到网站 HTML 的 <head> 区域：
<head>
<!-- Your existing head content -->
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Page Title" />
<!-- ... other meta tags ... -->
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<!-- ... other Twitter meta tags ... -->
</head>
快速提示
为了获得最佳效果：
- 始终使用高质量且与内容相关的图片
- 使用社交媒体调试工具测试元标签
- 让标题和描述保持在推荐字符范围内
- 在所有页面中保持一致的品牌风格
需要避免的常见错误：
- 使用相对 URL，而不是绝对 URL
- 忘记填写图片 Alt 文本
- 使用尺寸过小或过大的图片
- 未在不同平台上测试标签展示效果
测试你的元标签
在完成部署后，可以使用以下工具测试元标签：
- Facebook Sharing Debugger：developers.facebook.com/tools/debug
- Twitter Card Validator：cards-dev.twitter.com/validator
- LinkedIn Post Inspector：linkedin.com/post-inspector
这些工具会展示你的内容在分享时的实际效果，并帮助你发现潜在问题。
下一步
现在你已经掌握了基础用法，可以继续阅读 高级功能 指南，了解更多高级选项与自定义能力。