「Meta 标签预览 / 生成」主要解决什么问题？
一边填写标题 / 描述 / 链接，一边预览搜索结果和社交分享卡片，顺便复制 meta 代码。 适合先完成计算、转换或检查，再根据实际使用场景复核输出。
← 返回工具箱
工具
Meta 标签预览 / 生成
一边填标题、描述、链接和图片，一边预览搜索结果、Open Graph 和 Twitter 卡片效果。
可输入域名一键识别并填充下方表单；也可手动填写，预览与代码仅在本地生成，不向第三方发送数据。
输入域名一键识别
网页标题 Title 示例
example.com
这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。
example.com · 海豹建站
网页标题 Title 示例
这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。
海豹建站
网页标题 Title 示例
这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。
example.com
HEAD 片段已剪下 ✓
<meta name="description" content="这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。" />
<meta property="og:type" content="website" />
<meta property="og:title" content="网页标题 Title 示例" />
<meta property="og:description" content="这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。" />
<meta property="og:url" content="https://example.com/post/hello-world" />
<meta property="og:image" content="https://flooc.com/og-image.png" />
<meta property="og:site_name" content="海豹建站" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="网页标题 Title 示例" />
<meta name="twitter:description" content="这里是网页摘要描述，用来展示在搜索结果和社交卡片中的那两三行文案。尽量简短、有信息量。" />
<meta name="twitter:image" content="https://flooc.com/og-image.png" />USE & REVIEW
Meta 标签预览 / 生成常见问题
使用「Meta 标签预览 / 生成」前，输入内容要怎样准备？
尽量使用最终上线 URL、真实页面语言和准备发布的标题或代码。临时地址、被登录保护的页面、错误 canonical 或混用测试域名，都会让检查结果失去参考价值。
使用「Meta 标签预览 / 生成」时，数据会被保存或上传吗？
Meta 标签预览 / 生成不会把输入内容自动发布成公开页面。标明“本地处理”的步骤只在浏览器内运行；涉及实时数据、IP、外部网址或在线查询时可能需要联网，因此不要输入与任务无关的敏感资料。
「Meta 标签预览 / 生成」的结果应该怎样核对？
先检查页面语言、目标关键词、真实 URL 和站点规则，再用浏览器源码、Search Console 或对应验证工具复查。生成结果能减少漏项，但不会替代搜索引擎抓取与质量判断。
什么情况下不应该只依赖「Meta 标签预览 / 生成」？
它适合发现技术问题和生成配置，不会代替内容质量、站点信誉、抓取状态或搜索引擎的最终判断，也不能保证收录和排名。