用于搜索和分享的 meta 标签，附带预览
这个 meta 标签生成器会写出 HTML，决定页面在 Google 搜索结果中的样子，以及链接被分享到 Facebook、LinkedIn、X、Slack、Discord 或 WhatsApp 时的样子。填写标题、描述、规范网址和分享图片，即可得到主要的 SEO 标签、Open Graph 标签和 Twitter Card 标签，均已正确转义，可直接粘贴到 <code><head></code> 中，并能实时预览搜索摘要和各个社交卡片。粘贴现有页面的 head，即可载入并改进其中的标签。一切都在你的浏览器中运行。
如何生成 meta 标签
- 1填写标题和描述。当 Google 很可能截断时，计数器会变红：标题约 600 像素（≈60 个字符），描述约 160 个字符。
- 2输入页面的规范网址、网站名称和绝对图片网址（最好是 1200 × 630 像素），并填写替代文本。
- 3选择 Open Graph 类型、语言区域和 Twitter 卡片样式，并添加你的 X 账号。对于不应出现在搜索结果中的页面，取消勾选允许索引。
- 4检查 Google、Facebook、LinkedIn 和 X 的预览，然后切换到 HTML，选择要包含的分组，把标签复制到页面的
<head>中。 - 5要编辑现有页面，点击导入并粘贴它的 HTML 或网页源代码。
对 SEO 重要的标签
- <title>
- 最重要的页面内信号，也是搜索结果中可点击的标题。把主要主题放在最前面，每个页面保持唯一，并以品牌名结尾。Google 会改写它认为无用、过长或堆砌关键词的标题。
- meta description
- 不是排名因素，但常被用作标题下方的摘要，因此会影响点击率。用 120–160 个字符概括页面，并给出访问的理由。
- canonical
- <link rel="canonical"> 在同一内容可通过多个地址访问时（跟踪参数、http 与 https、末尾斜杠）指定首选网址。
- robots
- noindex 让页面不出现在搜索结果中，nofollow 告诉爬虫不要跟踪页面上的链接。默认是 index, follow，因此只有在你修改时才会写出该标签。
- viewport & charset
- 严格来说不算 SEO 标签，但每个页面都需要：UTF-8 和响应式 viewport 是移动优先索引的前提。
- keywords
- Google 和 Bing 已有十多年不在排名中使用它。只有站内搜索或其他系统会读取时才需要添加。
Open Graph：链接分享后的样子
Open Graph 是 Facebook 推出的协议，如今几乎所有平台都会读取：LinkedIn、Slack、Discord、WhatsApp、Telegram、iMessage、Pinterest 等等。必需的标签是 og:title、og:description、og:image、og:url 和 og:type；og:site_name 和 og:locale 用来进一步完善卡片。
图片决定了卡片的成败。请使用以 https:// 开头的绝对网址，尺寸 1200 × 630 像素（1.91:1 比例），小于 5 MB，格式为 JPEG、PNG 或 WebP，并让文字和 logo 远离边缘，因为各平台的裁剪方式不同。平台会缓存卡片：修改标签后，可用 Facebook 的 Sharing Debugger、LinkedIn 的 Post Inspector 刷新，或分享带查询参数的网址。
Twitter / X 卡片
X 通过自己的 twitter:card 标签选择布局——summary_large_image 为全宽大图，summary 为小方形缩略图——并通过 twitter:site 和 twitter:creator 获取网站和作者的账号。标题、描述和图片会回退使用 Open Graph 标签，因此只有在关闭 Open Graph 时，生成器才会写出 twitter:title、twitter:description 和 twitter:image，避免重复标记。
目前 X 将大图卡片显示为叠加了标题的图片，下方显示域名；描述只会在部分客户端的 summary 卡片上出现。
标题长度：字符数还是像素
Google 按宽度而不是字符数截断标题：在桌面端，上限约为 20 像素类 Arial 字体下的 600 像素，视字母不同大约可容纳 50–60 个字符——"WWW" 的宽度是 "iii" 的三倍。计数器会在你的浏览器中用这种字体测量标题，因此反映的是你实际写的文字。描述大约在 920 像素处被截断，桌面端约为 155–160 个字符，移动端更少。
截断并不是惩罚——只是隐藏了文字的结尾——但把重要的词放在前面能确保它们被看到。让标题和描述与页面可见内容一致，Google 更有可能原样保留它们。
标签应该放在哪里
所有这些标签都应放在页面的 <head> 元素内，并且必须出现在服务器返回的 HTML 中：链接预览爬虫不会执行 JavaScript，因此由客户端代码添加的标签对 Facebook、LinkedIn 和 X 是不可见的。在 Next.js、Nuxt 或 Astro 等框架中，请使用它们的元数据 API 在服务器端渲染这些标签。每个属性值都会进行 HTML 转义，因此标题中的引号和 & 符号不会破坏标记。
同时配合一个允许爬虫访问页面的 robots.txt、列出规范网址的 XML 站点地图，以及一个 favicon，让搜索结果显示你的图标。
常见问题
- meta 标题和描述的理想长度是多少？
- 标题约 50–60 个字符（小于约 600 像素），描述 120–160 个字符。计数器会同时显示两者，当 Google 很可能截断文字时会变红。
- Open Graph 图片应该多大？
- 1200 × 630 像素（1.91:1）适用于 Facebook、LinkedIn、X 和即时通讯应用。使用绝对 https 网址，保持在 5 MB 以下，并把关键内容放在中间。
- 为什么我的链接预览显示旧的图片或标题？
- 平台会缓存链接预览。用 Facebook 的 Sharing Debugger 或 LinkedIn 的 Post Inspector 重新抓取网址；X 大约一周后刷新缓存，带新查询参数的网址则会立即刷新。
- Open Graph 和 Twitter 标签都需要吗？
- 大多数平台需要 Open Graph，X 至少需要 twitter:card。X 会回退使用 og:title、og:description 和 og:image，因此有 Open Graph 时其他 Twitter 标签是可选的。
- meta keywords 标签对 SEO 有帮助吗？
- 没有。Google 和 Bing 多年来在排名中都忽略它。这里它是可选项，只有当某个内部系统会读取时才有用。
- 可以编辑现有页面的 meta 标签吗？
- 可以。点击“导入”，粘贴页面的 HTML（网页源代码即可），标题、描述、canonical、Open Graph、Twitter 和 robots 的值就会载入表单。
- 为什么分享图片没有出现在预览中？
- 网址必须是绝对网址（https://…）且可公开访问。有些服务器禁止其他网站显示它们的图片；而真实平台是在服务器端获取图片的，所以在那里可能仍能正常显示。
- 会上传任何内容吗？
- 不会。标签在你的浏览器中生成。只有分享图片会从你输入的网址加载，用于在预览中显示。