Meta Tag 生成器

输入参数
标签输出

浏览器端 Meta 标签生成工具，支持 title、description、keywords、canonical、Open Graph、Twitter Card、robots 等标签生成，自动 HTML 实体转义，字符长度实时提示带颜色状态，一键复制下载。

相关推荐

Sitemap 生成器

二维码/条形码生成器

TS 压缩

十六进制转换器

SHA-256 哈希

Base64 解码

适用场景

  • 新网站上线前批量生成首页、列表页、详情页的全套 Meta 标签，快速完成 SEO 基础配置
  • 博客文章发布前配置 article 类型的 Open Graph 标签和 summary_large_image 类型 Twitter Card，提升社交平台分享效果
  • 电商产品页配置 product 类型 og:type，设置产品 og:image、og:price:amount 等结构化信息，优化社交平台商品展示
  • 网站改版或域名更换后重新生成 canonical 标签，统一规范 URL 避免重复内容导致的权重分散
  • 为移动端网页配置 theme-color 主题色，让 Chrome、Safari 移动端地址栏与品牌色调保持一致
  • 使用 Next.js、Nuxt.js、Gatsby 等 SSR/SSG 框架开发时，快速生成 head 配置所需的完整 Meta 标签代码
  • WordPress、Shopify 等 CMS 系统中，为自定义页面模板手动配置 Meta 标签，不依赖 SEO 插件
  • 排查网站收录问题时，快速生成正确的 robots meta 标签组合（如 noindex,nofollow 用于测试环境）
  • 社交媒体运营人员配置活动落地页的分享卡片，确保分享到 Facebook、Twitter/X、LinkedIn、WhatsApp、Slack、Discord 时预览效果正确
  • 前端开发人员编写 HTML 页面模板时，自动完成 Meta 标签的实体转义处理，避免特殊字符导致的 HTML 语法错误

使用方法

  1. 在「基础 SEO 标签」区域填写页面 title（标题，建议 50-60 字符）、meta description（描述，建议 120-160 字符）、keywords（关键词，逗号分隔）、canonical URL（规范链接）、author（作者）
  2. 在「robots 爬虫指令」区域选择合适的索引和跟踪规则：index/noindex（是否索引）、follow/nofollow（是否跟踪链接），可额外勾选 noarchive、nosnippet 等选项
  3. 在「主题色设置」区域输入或选择 theme-color 十六进制颜色值，用于移动端浏览器地址栏着色
  4. 切换到「Open Graph 标签」区域，选择 og:type（website/article/product/profile 四选一），填写 og:title、og:description、og:image（分享图片 URL，建议 1200×630 像素）、og:url、og:site_name、og:locale
  5. 切换到「Twitter Card 标签」区域，选择 twitter:card 类型（summary/summary_large_image/app/player 四选一），填写 twitter:site @账号、twitter:title、twitter:description、twitter:image
  6. 所有内容输入过程中观察右侧实时预览区域和字符计数颜色提示：绿色表示长度最佳，橙色表示接近边界，灰色表示过短或过长需要调整
  7. 确认标签无误后，点击「复制到剪贴板」按钮一键复制全部代码粘贴到 HTML head 区域，或点击「下载 HTML 文件」保存为 meta-tags.html 备用

功能特点

  • 自动 HTML 实体转义：对 &、<、>、"、' 五个特殊字符进行安全转义，避免生成的标签在 HTML 中出现语法错误
  • title 长度智能提示：50-60 字符范围内显示绿色（最佳），超出或不足时显示橙色/灰色状态指示，实时计算字符数
  • meta description 长度智能提示：120-160 字符范围内显示绿色（最佳展示区间），超出或过短时颜色状态实时变化
  • 支持 4 种 og:type 选项：website（通用网站）、article（文章/博客）、product（产品页）、profile（个人主页），匹配不同页面类型
  • 支持 4 种 twitter:card 类型：summary（小图摘要）、summary_large_image（大图摘要）、app（应用卡片）、player（视频/播放器卡片）
  • robots 指令组合配置：支持 index/noindex、follow/nofollow、noarchive、nosnippet、noimageindex 等多种爬虫指令自由组合
  • author 作者元标签：支持配置 content-author、article:author 等作者署名标签，适用于博客和新闻站点
  • theme-color 主题色配置：支持设置浏览器移动端地址栏主题色，提供颜色选择器和色值输入
  • og:site_name 站点名称配置：专门设置 Open Graph 协议中的站点名称字段，社交分享时正确展示网站名
  • twitter:site @账号配置：支持填写 Twitter/X 平台的官方 @handle 账号，关联分享卡片与官方账号
  • 三大分区结构化输出：按 Primary SEO、Open Graph、Twitter Card 三个清晰分区展示生成结果，结构一目了然
  • 一键复制到剪贴板：生成的代码可一键复制，无需手动选中，适配各种浏览器环境
  • 下载为 meta-tags.html：可将生成的标签完整下载为独立 HTML 文件，方便保存或直接导入项目使用
  • 实时生成与预览：输入内容即时生成标签代码，同步预览 SERP 搜索结果展示效果和社交分享卡片样式

常见问题

Meta Tag 生成器生成的代码可以直接复制到网站使用吗？需要修改吗？

可以直接复制使用。本工具生成的代码是标准格式的 HTML Meta 标签，自动完成了 HTML 实体转义处理，直接粘贴到你网页的 &lt;head&gt; 和 &lt;/head&gt; 之间即可。你只需要确保填写的 URL（canonical、og:image、og:url、twitter:image）是你网站真实的线上地址，不是示例占位符。如果使用 Next.js、Nuxt.js、React Helmet、Vue Meta 等框架的 head 管理方案，可能需要按照框架的 JSX/Vue 模板语法稍作调整，但标签属性和值完全可以直接复用。

为什么必须填写 og:image 图片？没有图片会怎么样？

og:image 直接影响社交分享卡片的视觉效果和点击率。没有 og:image 的链接分享到 Facebook、Twitter、LinkedIn、微信等平台时，要么显示光秃秃的文字链接没有任何图片预览，要么平台会随机抓取页面上的一张小图（可能是 logo、头像、广告图甚至无关图片），展示效果极差，点击率通常比有正确预览图的分享低 50% 以上。og:image 建议尺寸是 1200×630 像素（1.91:1 比例），必须是公开可访问的绝对 URL，文件大小不超过 5MB。

Open Graph 和 Twitter Card 标签都要配置吗？只配 OG 行不行？

Twitter/X 平台确实会读取 Open Graph 标签作为后备——如果你不配置任何 twitter: 前缀标签，Twitter 会尝试用 og:title、og:description、og:image 来生成卡片。但专门配置 Twitter Card 有几个好处：①可以选择最适合的 twitter:card 类型（特别是 summary_large_image 大图类型，用 OG 可能不一定默认用大图样式）；②可以设置 twitter:site 关联你的官方 Twitter 账号，增加关注转化；③可以为 Twitter 单独优化标题描述长度，和 OG 区分开。建议两者都配置，本工具支持同时生成，工作量几乎一样。

title 和 meta description 长度超出建议范围会有什么后果？会被惩罚吗？

超出长度不会被搜索引擎惩罚，但会被截断。Google 搜索结果中 title 超过约 600 像素宽度（中文约 50-60 字）的部分会用省略号截断，用户看不到完整标题；meta description 超过约 920 像素宽度（中文约 120-160 字）也会被截断。长度过短的问题是浪费了宝贵的展示空间，无法充分传达页面价值和吸引点击。注意这不是精确的字符数限制，而是像素宽度限制——全角字符、大写英文字母、W/M 等宽字母、emoji 占用宽度更大，实际展示可能比字符数看起来更早截断。本工具的颜色提示是基于字符数的最佳实践参考。

HTML 实体转义是什么意思？为什么工具自动做这个？

HTML 中某些字符有特殊语法含义，如果直接写在属性值里会破坏 HTML 结构：双引号 " 是属性值的结束符，直接写会导致标签提前闭合；& 是实体转义的起始符；< 和 > 是标签起止符。这些字符必须写成实体形式才能正确显示：& → &amp;，< → &lt;，> → &gt;，" → &quot;，' → &#x27;。如果你的 title 或 description 中包含 &、引号、尖括号等特殊字符，不转义直接写会导致 HTML 语法错误，可能让后面的标签全部失效。本工具自动处理这些转义，你直接输入原始文字即可，不用手动转义。

为什么 Facebook/Twitter 爬虫抓不到我用 React/Vue 写的页面的 Meta 标签？

因为 React、Vue、Angular 等现代前端框架默认是客户端渲染（CSR）——HTML 源码是空的或者只有一个容器 div，Meta 标签是靠浏览器执行 JavaScript 之后才动态插入到 DOM 里的。但是 Facebook 的爬虫 facebookexternalhit、Twitterbot、LinkedInBot、微信爬虫等大部分社交平台的爬虫不会执行 JavaScript（或者执行能力非常有限），它们抓到的原始 HTML 里没有 Meta 标签，自然无法生成分享卡片。解决方案：①使用 SSR（服务端渲染）或 SSG（静态站点生成），比如 Next.js、Nuxt.js、Gatsby、Astro 等框架，在服务器端就把完整的 Meta 标签渲染到 HTML 源码里；②使用 prerender.io、Rendertron 等预渲染服务给爬虫返回静态 HTML；③使用专门的 OG 图片生成服务动态生成标签。

同一个页面的 canonical 和 og:url 应该填一样的吗？

是的，应该保持一致。canonical 标签是给搜索引擎看的，告诉搜索引擎首选 URL；og:url 是给社交平台看的，告诉社交平台这个内容的唯一 URL 用于聚合点赞、评论、分享计数。两者指向同一个 URL 是最佳实践，能避免权重分散和社交计数碎片化。注意必须都是完整的绝对 URL（包含 https://、域名、完整路径），不能用相对路径。如果有 UTM 参数、追踪参数的 URL，应该 canonical 和 og:url 都指向不带参数的干净 URL。

noindex 页面的链接还会被爬虫爬取吗？会传递权重吗？

noindex 的含义是「不要索引这个页面」，不是「不要抓取」也不是「不要跟踪链接」。爬虫还是会抓取 noindex 页面（只有这样它才能看到 noindex 标签），如果 robots meta 同时设置了 follow（默认就是 follow），爬虫会继续抓取页面上的链接。但关于权重传递：Google 的官方说法是 noindex 页面最终会从索引中移除，页面上的链接权重也不会正常传递（因为页面本身不被索引）。所以如果你想让爬虫通过某个页面爬到其他页面但不想让这个页面本身被收录，用 noindex,follow 是可以的，但不要指望 noindex 页面能像正常页面那样传递权重。

theme-color 在哪些浏览器生效？iOS Safari 支持吗？

theme-color 目前支持情况：Android 版 Chrome/Firefox/Edge/Brave 等 Chromium 内核浏览器从很早开始就支持，是效果最明显的；Safari 从 iOS 15 和 macOS Monterey 开始支持 theme-color，但 Safari 的实现稍有不同——它会根据页面背景色自动调整，也支持用 media 属性为浅色/深色模式分别设置颜色。桌面端 Chrome 也从某个版本开始在标签栏等位置应用 theme-color。IE 和旧版浏览器不支持，但不支持也没关系，只是没有主题色效果，不影响任何功能。建议主题色设置为你网站 header/导航栏的颜色，视觉上更统一。

为什么 Google 搜索结果有时候显示的 description 不是我写的那个？

Google 并不保证 100% 使用你写的 meta description。当 Google 判断你写的 description 与用户的搜索查询不够相关，或者 description 质量不高（比如是关键词堆砌、全站相同、与内容不符），Google 会自动从页面正文内容中提取一段它认为与搜索词最相关的文字作为搜索结果展示的描述。这是 Google 的正常行为，不是 bug。要提高 description 被使用的概率：①每个页面写独一无二、准确描述内容的 description；②description 自然包含页面核心关键词但不要堆砌；③长度控制在合理范围内不要过短；④description 内容确实在页面正文中有体现。即使 Google 有时候改写，你依然应该认真写 description——这是你主动控制展示效果的主要手段。

配置完标签后怎么验证是否正确生效？有什么检查工具？

验证 Meta 标签有几个步骤和工具：①首先用浏览器「查看网页源代码」，在原始 HTML 源码中搜索 title、description、og: 等标签是否存在且内容正确（注意是源码不是 Elements 面板，因为源码是服务器返回的，CSR 的话源码里看不到）；②用 Facebook Sharing Debugger 验证 OG 标签并刷新缓存；③用 Twitter Card Validator 验证 Twitter Card；④用 Google Rich Results Test 检查基础标签；⑤用 Google Search Console 的「网址检查」工具查看 Google 实际抓取到的页面、索引状态；⑥如果是本地测试，可以用浏览器的 user-agent switcher 模拟社交媒体爬虫，或者用 curl 命令带 Facebook UA 抓取看看返回的 HTML。

每个页面都需要单独配置 Meta 标签吗？全站用一套标签行不行？

绝对不行！每个页面必须有独一无二的 title 和 meta description。如果全站所有页面都用同一个 title 和 description，搜索引擎无法区分不同页面的内容主题：①搜索引擎不知道每个页面是关于什么的，无法正确排名；②搜索结果中所有页面都显示相同标题描述，用户无法分辨应该点哪个，CTR 极低；③可能被搜索引擎判定为低质量站点影响整站权重。OG 和 Twitter Card 标签原则上也应该每个页面不同。只有 theme-color、og:site_name、twitter:site 这类站点级配置可以全站统一，其他标签都应该按页面内容单独配置。

meta keywords 现在还要写吗？写多少个合适？

Google、Bing、百度等主流搜索引擎在 2026 年都已经不将 meta keywords 作为排名因素了，你写不写、写什么都基本不影响 SEO。如果你的 CMS 或模板有这个字段，花几秒钟填 3-5 个核心关键词即可，不要花太多时间琢磨关键词选择和密度。重要的是：不要堆砌几十个关键词、不要重复同一个词很多次、不要写和页面无关的热门词——虽然 keywords 本身不用于排名，但堆砌得太离谱可能被搜索引擎当作垃圾信号，得不偿失。如果你的网站没有 keywords 字段或者你懒得填，完全空着也可以，对排名没有任何负面影响。

robots meta 标签和 robots.txt 有什么区别？哪个优先级高？

两者作用层级和机制不同：①robots.txt 是放在网站根目录的文本文件，在整站或目录级别控制爬虫行为，比如 Disallow: /admin/ 告诉所有爬虫不要抓取 /admin/ 目录；但 robots.txt 是「君子协定」，合规爬虫会遵守，而且如果被禁止抓取的页面有外链指向，还是可能被收录只是没有描述。②robots meta 是页面级别的标签，放在每个页面的 HTML head 里，可以精确控制单个页面的 index/noindex/follow/nofollow 等行为，优先级高于 robots.txt。③X-Robots-Tag 是 HTTP 响应头级别，功能和 robots meta 一样但通过 HTTP 头返回，可以用于非 HTML 文件（如 PDF、图片）的索引控制。要完全阻止页面被收录，必须用 noindex（meta 或 X-Robots-Tag），仅靠 robots.txt Disallow 不能保证不被收录。

用本工具生成 Meta 标签还需要配置 Schema.org 结构化数据（JSON-LD）吗？

Meta 标签和 Schema.org 结构化数据是互补关系，不是替代关系。Meta 标签主要解决：搜索引擎结果页标题描述、社交平台分享卡片、基础爬虫控制。Schema.org 结构化数据（通常用 JSON-LD 格式嵌入页面）解决的是：富媒体搜索结果（Rich Snippets），比如商品评分星级、价格库存、面包屑导航、文章发布日期、FAQ 折叠块、事件时间地点等增强展示，这些能进一步提升 CTR。建议重要页面同时配置：①基础 Meta 标签（本工具生成的内容）；②对应页面类型的 Schema.org 结构化数据。两者不冲突，共同优化搜索展示效果。

故障排查

分享链接到 Facebook/Twitter/LinkedIn 时不显示图片，或者显示的图片不是设置的 og:image

og:image URL 使用了相对路径或 localhost/127.0.0.1/内网 IP，社交平台爬虫无法访问公网地址 图片被 robots.txt 屏蔽，或者服务器/WAF/CDN/防火墙拦截了 Facebook/Twitter 的爬虫 User-Agent（facebookexternalhit/Twitterbot/LinkedInBot） 图片尺寸不符合要求：og:image 小于 200×200 像素会被忽略，summary_large_image 图片小于 300×157 会降级 图片文件过大（超过 5MB-8MB）或者格式不支持（只支持 JPG/PNG/WebP/GIF，不支持 SVG 部分平台不支持） 标签是用 JavaScript 客户端动态渲染的，社交平台爬虫不会执行 JS，SSR/SSG 才能被抓取 og:image URL 返回了 404/403/5xx 错误，或者重定向到了登录页/错误页 平台缓存了旧的无图片版本，修改标签后没有用官方 Debugger 工具强制 Scrape Again 刷新缓存

Google 搜索结果中 title 被截断显示不全，或者被 Google 自动重写了标题

title 长度超过了 50-60 中文字符（或约 600 像素宽度），超出部分被省略号截断 title 中包含全角特殊符号、emoji 占用额外宽度导致提前截断，实际展示长度比字符数短 title 关键词堆砌或与页面内容不匹配，Google 认为你的标题不准确会从页面正文或锚文本中抓取其他文字重写标题 每个页面的 title 重复或高度相似，Google 无法区分页面会自动生成不同标题 title 里只有品牌名没有页面主题描述，或者品牌名过长占据太多空间 使用了 |、-、_ 等过多分隔符，或者分隔方式不规范，导致 Google 判断为分隔符堆砌 页面有 h1-h6 标题层级混乱，或者多个 h1 标签，Google 可能用 h1 内容重写 title

Meta 标签配置后页面出现中文乱码、特殊字符显示异常、或者 HTML 语法错误

没有声明 <meta charset="UTF-8">，或者声明位置不在 head 最前面（必须在 title 之前） meta description、og:description 等 content 属性值中包含未转义的双引号（"），导致标签提前闭合，HTML 结构错乱 content 中包含 &、<、> 等特殊字符但没有做 HTML 实体转义（& 应写为 &amp;，< 写为 &lt;，> 写为 &gt;） HTML 文件实际保存编码不是 UTF-8（比如保存成了 GBK/GB2312），但 charset 声明为 UTF-8 导致编码不匹配 服务器 HTTP 响应头 Content-Type 头指定了 charset=GBK 等非 UTF-8 编码，覆盖了 meta charset 声明 使用了错误的实体转义（比如用 &quot; 转义了属性外的引号，或者转义了不需要转义的字符） CMS 或模板引擎自动转义时重复转义（比如 &amp; 变成了 &amp;amp;，显示为 &amp; 而不是 &）

配置了 canonical 标签但不生效，重复 URL 还是被收录，或者 canonical 被搜索引擎忽略

canonical 指向的 URL 返回 404/403/5xx 错误，或者重定向到其他页面，搜索引擎无法访问规范版本 A 页面 canonical 到 B，B 页面又 canonical 到 A（循环 canonical），或者 A→B→C→D 链式 canonical 让搜索引擎困惑 canonical 指向了内容差异很大的页面（不是高度重复/相同内容），搜索引擎认为 canonical 设置错误会忽略 canonical 使用了相对路径（如 href="/page"）而不是完整绝对 URL（href="https://example.com/page"） 网站存在多个协议/域名版本（http/https、www/非 www）互相 canonical，但是 301 重定向没有配置好 分页页面（如 ?page=2, ?page=3）都 canonical 到第一页，导致后面的内容完全不被收录，搜索引擎会忽略这种不合理的 canonical 同一页面在 HTML 中通过 link 标签、HTTP 响应头 Link: <...>; rel="canonical"、Sitemap 中同时声明了不同的 canonical URL，优先级冲突

修改 Meta 标签后重新分享还是显示旧的标题、描述或图片，看不到更新效果

社交平台（Facebook/Twitter/LinkedIn）对 OG/Twitter Card 信息缓存时间很长（可能数天到数周），不会每次分享都重新抓取 没有使用对应平台的官方调试工具（Facebook Sharing Debugger、Twitter Card Validator、LinkedIn Post Inspector）执行 Scrape Again/重新抓取来强制刷新缓存 CDN（Cloudflare、阿里云 CDN、腾讯云 CDN 等）缓存了旧的 HTML 页面，爬虫抓取到的是 CDN 缓存的旧版本 服务器端、SSR 缓存、WordPress 缓存插件、Redis 页面缓存等没有清除，输出的还是旧 HTML og:image 等资源 URL 没有变但图片内容更新了，浏览器和平台基于 URL 缓存，加 ?v=2 等版本参数才能强制更新 修改标签后页面没有正确部署上线，本地改了文件但生产环境还是旧版本 Meta 标签放在了 HTML body 区域或用 JS 动态插入，爬虫根本没读到新标签，读到的还是之前缓存的版本

不小心设置了 noindex,nofollow 导致整个网站或重要页面不被 Google 收录，搜索不到

开发/测试环境的 noindex,nofollow 标签在上线时没有移除，整站都带着 noindex 发布上线了 WordPress 等 CMS 后台「建议搜索引擎不索引本站点」选项被勾选，自动给所有页面加了 noindex robots.txt 同时设置了 Disallow，导致爬虫连页面都抓不到更看不到 noindex，但如果有外链指向还是可能收录 HTTP 响应头返回了 X-Robots-Tag: noindex（比 meta 标签优先级高，很多人没注意响应头），例如 Nginx/Apache 配置、CDN 设置导致 CDN/WAF/安全插件自动给页面添加了 noindex 头（部分安全插件误操作或默认设置） 使用了错误的组合指令，比如把 noindex 写成了 index 但其他参数冲突，或者全站模板包含了 noindex 只在首页移除了内页还带着 网站从 staging/测试环境迁移到生产环境时，没有更新 base URL、canonical、robots 配置，测试环境的 noindex 遗留到生产环境

术语表

Meta tag
HTML 元标签，放置在 head 区域内，用于描述页面元数据信息，向浏览器、搜索引擎、社交平台传递页面的标题、描述、作者、爬虫规则等信息。
title
HTML 标题标签，定义浏览器标签页标题和搜索引擎结果页（SERP）中的可点击标题，是 SEO 最重要的标签，建议长度 50-60 字符。
meta description
页面描述元标签，展示在 SERP 标题下方的描述文字，不直接影响排名但显著影响点击率（CTR），建议长度 120-160 中文字符。
meta keywords
关键词元标签，早期搜索引擎用于判断页面主题，因被滥用 Google 已于 2009 年宣布不再使用，现在基本无 SEO 价值。
canonical
规范链接标签（rel="canonical"），告诉搜索引擎在多个相似 URL 中哪个是首选版本，用于解决重复内容、参数 URL、首选域等问题。
Open Graph
Facebook 2010 年推出的社交分享元数据协议，使用 og: 前缀标签控制链接在社交平台的分享卡片样式，被 Facebook、LinkedIn、WhatsApp、Slack 等几乎所有平台支持。
Twitter Card
Twitter/X 平台的分享卡片协议，使用 twitter: 前缀标签，支持 summary、summary_large_image、app、player 四种卡片类型，优先于 OG 标签被 Twitter 读取。
og:type
Open Graph 页面类型标签，指定内容类型，常用值有 website（通用网站）、article（文章）、product（产品）、profile（个人资料），决定社交平台如何解析内容。
og:image
Open Graph 分享图片标签，指定社交分享卡片的预览图片 URL，建议尺寸 1200×630 像素（1.91:1 比例），必须是公开可访问的绝对 URL。
twitter:card
Twitter Card 类型标签，指定分享卡片类型，取值为 summary（小图）、summary_large_image（大图）、app（应用）、player（播放器），是 Twitter Card 必填标签。
robots meta
爬虫控制元标签，在页面级别告诉搜索引擎是否索引（index/noindex）、是否跟踪链接（follow/nofollow）、是否显示快照（noarchive）等，优先级高于 robots.txt。
noindex
robots 指令之一，禁止搜索引擎索引该页面，页面不会出现在搜索结果中；爬虫仍会抓取页面读取此标签，但不会收录。常用于测试页、内部页、低价值页。
nofollow
robots 指令之一，禁止搜索引擎爬虫跟踪页面上的所有链接（区别于单链接的 rel="nofollow"），常用于用户生成内容、广告链接、不可信外链页面。
theme-color
浏览器主题色元标签，定义移动端浏览器地址栏/工具栏颜色，在 Android Chrome、Safari 15+ 等浏览器生效，提供更沉浸的品牌化体验。
author meta
作者元标签（name="author"），声明页面内容的创作者信息，在博客、新闻站点中配合 article:author 使用，标识内容作者。
HTML entity
HTML 实体转义字符，用于在 HTML 中安全显示特殊字符，如 &amp; 代表 &、&lt; 代表 <、&gt; 代表 >、&quot; 代表 "、&#x27; 代表 '，避免语法错误和 XSS 问题。
SERP
Search Engine Results Page，搜索引擎结果页，指用户在 Google/百度等搜索引擎输入关键词后返回的结果页面，包含标题、描述、URL、富媒体片段等元素。
CTR
Click-Through Rate，点击率，指搜索结果展示后用户点击的比例。CTR 是 SEO 核心指标之一，受 title 和 meta description 的吸引力直接影响，也是 Google 排名算法的用户信号。
crawl budget
抓取预算，搜索引擎在一定时间内分配给你网站的抓取次数和页面数量。合理使用 robots meta、canonical、noindex 可以避免浪费抓取预算在低价值页面上，让重要页面被更频繁抓取。
viewport
视口元标签（name="viewport"），现代响应式网页必备标签，控制页面在移动端的渲染宽度和初始缩放，标准配置为 width=device-width, initial-scale=1.0。

常用 Meta 标签清单与属性说明表

标签名作用属性/写法示例注意事项
title页面标题，浏览器标签页和 SERP 标题<title>页面标题 | 品牌</title>建议 50-60 字符，核心关键词前置，品牌名后置，每个页面唯一
meta description页面描述，SERP 中展示的描述文字<meta name="description" content="...">建议 120-160 中文字符，包含关键词和 CTA，每个页面唯一
meta keywords关键词标签<meta name="keywords" content="词1,词2,词3">Google/Bing/百度等主流搜索引擎已不再使用，无需重点配置
link canonical规范链接，指定首选 URL<link rel="canonical" href="https://example.com/page">必须写完整绝对 URL，解决重复内容问题，不要链式设置
meta robots爬虫控制，页面级索引/跟踪规则<meta name="robots" content="index,follow">优先级高于 robots.txt，noindex 才是真正禁止收录
meta charset字符编码声明<meta charset="UTF-8">必须放在 head 最前面，现代网页统一用 UTF-8
meta viewport移动端视口控制<meta name="viewport" content="width=device-width, initial-scale=1.0">响应式网页必备，必须配置否则移动端体验极差
meta author页面作者信息<meta name="author" content="作者名">标识内容创作者，博客/新闻站点使用
meta theme-color移动端浏览器主题色<meta name="theme-color" content="#2563eb">Android Chrome/Safari 15+ 支持，建议使用品牌主色
og:titleOpen Graph 分享标题<meta property="og:title" content="...">社交分享卡片标题，可以和 SEO title 不同，更吸引点击
og:descriptionOpen Graph 分享描述<meta property="og:description" content="...">社交卡片描述，建议 200 字符以内
og:imageOpen Graph 分享图片<meta property="og:image" content="https://.../img.jpg">建议 1200×630 像素，绝对 URL，公开可访问，文件 <5MB
og:urlOpen Graph 规范 URL<meta property="og:url" content="https://example.com/page">应和 canonical 保持一致，用于聚合点赞分享数
og:typeOpen Graph 内容类型<meta property="og:type" content="website">可选 website/article/product/profile，不同类型支持不同扩展属性
og:site_nameOpen Graph 站点名称<meta property="og:site_name" content="GeekFormat">显示网站整体名称，区别于页面标题
twitter:cardTwitter Card 类型<meta name="twitter:card" content="summary_large_image">可选 summary/summary_large_image/app/player
twitter:siteTwitter 官方账号<meta name="twitter:site" content="@username">填写网站/品牌的 Twitter @handle
twitter:imageTwitter Card 图片<meta name="twitter:image" content="https://.../img.jpg">不填则回退用 og:image，summary 类型用 1:1，large 用 2:1

og:type 适用场景对照表

og:type 值适用场景推荐图片比例可扩展标签
website网站首页、通用页面、关于我们、联系我们等非内容/产品页1.91:1（1200×630）基础 og: 标签即可，无特殊扩展
article博客文章、新闻稿、知识文档、教程、专栏内容等时间相关内容1.91:1（1200×630）article:published_time（发布时间）、article:modified_time（修改时间）、article:author（作者）、article:section（分类）、article:tag（标签）
product电商产品详情页、商品页、付费服务页、SaaS 产品落地页1.91:1（1200×630）产品图建议正方形或 4:3product:price:amount（价格）、product:price:currency（货币如 CNY/USD）、product:availability（库存状态）、product:brand（品牌）
profile个人主页、用户资料页、作者页、个人简历页1:1 头像图或 1.91:1 封面图profile:first_name（名）、profile:last_name（姓）、profile:username（用户名）、profile:gender（性别）

twitter:card 类型对照表

twitter:card 类型卡片样式图片要求适用场景额外必填字段
summary小图摘要卡片，小图在左/上，文字在右/下最小 144×144 像素，1:1 正方形，<5MB普通文章、页面、工具页、通用内容无强制额外字段，填基础标签即可
summary_large_image大图摘要卡片，顶部全宽大横幅图，视觉冲击力强最小 300×157 像素，推荐 1200×675，约 2:1 比例，<5MB博客文章、产品页、活动页、希望高点击率的内容（推荐默认使用）无强制额外字段，注意图片尺寸符合要求
app应用下载卡片，显示应用图标、名称、评分、下载按钮应用 logo 正方形图，144×144 以上iOS/Android App 下载页、移动应用推广页twitter:app:name:iphone/ipad/googleplay、twitter:app:id:iphone/ipad/googleplay（应用商店 ID）、twitter:app:url:iphone/ipad/googleplay（自定义 scheme）
player视频/音频播放器卡片，直接在流内嵌入媒体播放器播放器封面图，播放器页面必须 HTTPS视频内容页、播客、音频页、直播页twitter:player（播放器 URL，HTTPS）、twitter:player:width（播放器宽度）、twitter:player:height（播放器高度）、twitter:player:stream（视频/音频流地址），需要通过 Twitter 审核白名单