配置
HTML生成的 HTML
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Awesome Page</title> <meta name="description" content="A short description of this page for SEO and search engine results."> <meta name="keywords" content="vue, nuxt, tools"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://example.com/page">
Google 搜索预览
https://example.com/page
My Awesome Page
A short description of this page for SEO and search engine results.
关于 Meta 标签生成器
当链接被分享到微信、Twitter、Facebook、Slack 等平台时，平台会读取页面 <head> 里的 Open Graph 与 Twitter Card 标签来生成带标题、描述和缩略图的预览卡片。本工具在浏览器本地根据你填写的标题、描述、图片、URL 和类型，一次性生成 og:、twitter: 及基础 SEO meta 标签代码，复制即可粘贴到模板中。所有标签都在本机拼装，你输入的页面信息不会被发送或保存到服务器。 建议在日常开发中收藏本工具，遇到相关 Web 开发需求时即可快速打开使用。所有处理均在浏览器本地完成，无需安装任何软件。
使用场景
- 优化分享卡片 — 为文章页生成 og:title、og:image，让链接在社交平台显示精美预览。
- 统一站点元信息 — 为新页面批量产出 description、og 标签，保持站内规范一致。
- 适配多平台 — 同时输出 Open Graph 与 Twitter Card 标签，覆盖不同分享渠道。
- 电商落地页 — 为促销页配置带商品图与价格描述的预览，提高点击率。
- 调试预览异常 — 对照生成的标准标签，排查抓取器抓不到图或标题的问题。
常见问题
og:image 有什么尺寸要求？
多数平台推荐 1200×630 像素（约 1.91:1），文件不宜过大。图片需用可公开访问的绝对 URL，否则抓取器拿不到会显示空白卡片。
改了标签为什么分享预览没更新？
平台会缓存抓取结果。修改后需用对应的调试器（如 Facebook 分享调试工具）强制重新抓取，或等待缓存自然过期。
Open Graph 和普通 meta description 冲突吗？
不冲突，二者用途不同：description 主要服务搜索引擎摘要，og:description 服务社交分享卡片，建议都填且内容可略有侧重。
一定要 twitter: 标签吗？
Twitter/X 在缺少 twitter: 标签时会回退读取 Open Graph 标签，但显式设置 twitter:card 能更精确控制卡片样式（如大图或摘要图）。
这些标签会影响搜索排名吗？
og 标签本身不是直接排名因素，但更好的分享预览能提升点击与传播；title 和 description 则会影响搜索结果展示，间接影响点击率。
有浏览器兼容性要求吗？
本工具兼容所有现代浏览器（Chrome、Firefox、Edge、Safari），无需安装任何插件或扩展。
可以离线使用吗？
首次加载后，部分功能在离线状态下仍可使用。页面资源加载后，核心逻辑完全在浏览器本地运行，不依赖网络。