HTML 元信息与 SEO 基础

说明 title/description/viewport/canonical 等元信息职责，建立“SEO 是综合结果”的正确预期。

#type / concept #status / growing #tech / dev / frontend #resource / html

[!info] 关联笔记

所属：文档与语义 MOC

前置：文档结构

相关：语义化 · 脚本

HTML 元信息与 SEO 基础

这个概念为什么出现

搜索结果标题不对、微信/Twitter 卡片空白、手机打开像缩小的桌面站——这些问题首先出在 head 元信息合同，不是再写一条 CSS 能彻底解决。

[!abstract] 一句话理解元信息描述文档给机器看：浏览器、搜索引擎、社交爬虫；它不直接画 UI，但决定发现与分享体验。

最小示例

场景：对外开放的补货状态页

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>A 仓低库存预警 - 华东仓储门户</title>
  <meta name="description" content="查看 A 仓低于安全库存的 SKU 列表与补货建议" />
  <link rel="canonical" href="https://example.com/inventory/low-stock" />
  <!-- 社交预览（属性名以各平台文档为准） -->
  <meta property="og:title" content="A 仓低库存预警" />
  <meta property="og:description" content="低于安全库存的 SKU 列表" />
</head>

核心职责

项	作用
`title`	标签页与搜索标题主来源之一
`description`	摘要候选
`viewport`	移动布局基础
`canonical`	重复 URL 收敛
OG/Twitter	分享预览

边界

SEO 是内容质量、性能、内链、语义、可抓取性综合结果。
SPA 需 SSR/预渲染/运行时更新 title，否则爬虫与分享预览可能只见壳。
堆砌关键字无效且可能有害。

常见误区

[!warning] 常见误区：把 SEO 当成 meta 竞赛没有实质内容与可访问结构，meta 救不了。

本节总结

先把 title/description/viewport/canonical 做对，再谈高级 SEO 工具链。

自测题

为什么 SPA 只改客户端路由不够？

参考答案

首屏 HTML 与社交爬虫抓取可能看不到客户端后写的 title/内容，需要 SSR/预渲染或专门预览方案。

延伸阅读

资料	类型	支撑内容
MDN meta	文档	meta
Google SEO starter	官方	SEO 基础