B01 元信息与 SEO

摘要：一个页面被搜索引擎收录、被分享到社交平台时，展示的不是页面内容，而是 head 里的一组元信息。缺少这些信息时，检索结果会出现无标题、无摘要，分享卡片会退化为一条纯链接。本文给出一份可直接复用的 head 模板，逐条说明九项元信息的作用与写错后的表现，并给出三条验证路径。
关键词：元信息，SEO，Open Graph，canonical，robots

所属：frontend/html / B-进阶 ｜上一篇：B00-总结 ｜下一篇：B02-多媒体与响应式图片

1 引言

搜索引擎抓取页面时先读 head，再读正文；社交平台抓取分享链接时只读 head，完全不看正文。两类消费者都依赖同一组元信息，但要求的字段不同：检索需要标题、摘要、规范地址；分享需要标题、简介、缩略图。

本文解决三件事：给出完整 head 模板、说明每个字段的影响面、给出验证方法。范围见表 1-1。

项	本文覆盖	本文不覆盖
检索	title、description、robots、canonical	收录速度、外链与权重
分享	Open Graph、Twitter Card	平台审核与图片规格细节
移动	viewport、theme-color	PWA 清单与离线能力（C 阶段）

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
文件	`html-practice/meta.html`	编码 UTF-8
素材	一张 1200×630 的分享图	放 `assets/images/`
浏览器	Chrome 130+ / Edge 130+	地址栏 `about:version`
前置	A03 的 head/body 分工	能写出四层骨架

3 原理与实现

3.1 同一份 head，三类消费者

head 里的信息被三类系统读取，读取范围与用途完全不同，如图 3-1 所示。

flowchart LR
    H["head 元信息"] --> S["搜索引擎<br/>title / description / robots / canonical"]
    H --> M["社交平台<br/>og:title / og:description / og:image"]
    H --> B["浏览器<br/>viewport / theme-color / charset"]
    S --> R["检索结果卡片"]
    M --> C["分享卡片"]
    B --> V["渲染与配色"]

图 3-1 元信息的三类消费方

图上可见：缺 og:* 时分享卡片不会报错，只是退化为纯链接；缺 description 时检索摘要由页面正文拼凑，长度不可控。

3.2 完整的 head 模板

<!-- 运行环境：Chrome 130+；替换为实际域名与图片地址 -->
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#0f172a" />

  <title>HTML 元信息清单 | 李明的工作笔记</title>
  <meta name="description" content="一份可直接复用的 head 模板，覆盖检索、分享与移动端三类元信息。" />
  <link rel="canonical" href="https://example.com/html/meta" />
  <meta name="robots" content="index,follow" />

  <meta property="og:type" content="article" />
  <meta property="og:title" content="HTML 元信息清单" />
  <meta property="og:description" content="覆盖检索、分享与移动端三类元信息。" />
  <meta property="og:image" content="https://example.com/assets/og-meta.png" />
  <meta property="og:url" content="https://example.com/html/meta" />

  <meta name="twitter:card" content="summary_large_image" />
</head>

九项元信息的作用与写错后的表现见表 3-1。

元信息	作用	建议值	写错后表现
`charset`	声明编码	`UTF-8`，必须是 head 第一项	中文乱码
`viewport`	移动端按设备宽度布局	`width=device-width, initial-scale=1`	手机显示为缩小的桌面版
`theme-color`	移动端浏览器地址栏配色	与主色一致，如 `#0f172a`	地址栏使用默认色
`title`	检索结果标题与标签页文字	主标题 + 分隔符 + 站点名，60 字内	检索结果被截断或标题笼统
`description`	检索结果摘要	80 ~ 160 字，概括页面前三段	摘要由正文拼凑，出现半句
`canonical`	声明规范地址，合并重复页面	绝对地址，无参数	同一内容出现多个收录版本
`robots`	抓取与收录指令	正常页面 `index,follow`	误写 `noindex` 后整站不收录
`og:title` 等	分享卡片标题、简介、图	与页面标题一致，图 1200×630	分享只剩链接，无标题无图
`twitter:card`	卡片样式	`summary_large_image`	卡片退化为小图或纯文本

四条规则：charset 放在 head 最前，避免解析器中途切换编码；description 与 og:description 不必相同，前者面向检索、后者面向社交；canonical 必须是绝对地址；同一站点的 og:image 使用统一尺寸，避免每个平台各自裁剪。

4 验证与讨论

保存文件，浏览器打开，右键「查看网页源代码」，确认九项均在 head 内且顺序正确。
打开开发者工具的元素面板，确认 title 与标签页文字一致。
使用浏览器扩展或在线调试器预览分享卡片，检查标题、简介、缩略图是否齐全。
运行 Lighthouse（开发者工具 Lighthouse 面板，只勾 SEO），查看四项检查是否通过。

检查项	预期结果	不通过时先看
编码声明位置	`charset` 为 head 第一行	模板顺序
标题长度	标签页完整显示，未被截断	`title` 是否超过 60 字
摘要长度	80 ~ 160 字	`description` 内容
规范地址	绝对地址，与页面实际地址一致	域名与路径
分享图	卡片显示缩略图	`og:image` 是否可公网访问
SEO 检查	Lighthouse 四项全部通过	表 3-1 逐项核对

讨论与局限。 元信息只在抓取时生效，改动后平台缓存可能延迟数天。另 robots 元信息只约束单页，robots.txt 与站点地图才能约束整站，这部分属于部署范畴。og:image 必须可公网访问，本地路径在分享时一定失败。

5 常见问题

现象	原因	处理
分享卡片没有图片	`og:image` 用相对路径或图片不可访问	改为绝对地址，确认图片能直接打开
检索结果标题是站点名	缺少 `title`，或写在 `body` 内	补 `title` 到 `head`
搜索摘要出现半句话	未写 `description`	补 80 ~ 160 字摘要
页面被排除收录	`robots` 误写 `noindex`	改为 `index,follow`
同一文章出现两个收录版本	缺少 `canonical`，参数页被分别收录	补规范地址，去掉跟踪参数

6 结论

序号	结论	依据
1	检索与分享读取同一份 head，字段要求不同	图 3-1
2	`charset` 必须是 head 第一项	表 3-1
3	分享图与规范地址必须用绝对地址	表 3-1
4	元信息改动后用源码视图与卡片调试器验证	4 节步骤 1、3

参考文献

[1] MDN Web Docs · meta 元素，https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta（访问于 2026-10-29）
[2] Open Graph 协议，https://ogp.me/（访问于 2026-10-29）
[3] Google 搜索中心 · title 与 description 最佳实践，https://developers.google.com/search/docs/appearance/title-link（访问于 2026-10-29）