[!info] related notes

• 所属：文档与语义 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 列表" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/inventory/low-stock" />
  <meta property="og:image" content="https://example.com/images/low-stock-preview.jpg" />
</head>

示例 URL 与预览图为占位；实际页面应使用可抓取的正式地址，具体卡片效果仍取决于平台支持与缓存。

核心职责

项	作用
title	标签页与搜索标题主来源之一
description	摘要候选
viewport	移动布局基础
canonical	向搜索引擎提示重复/高度相似页面的首选 URL，不是重定向或强制命令
OG/Twitter	分享预览

边界

• SEO 是内容质量、性能、内链、语义、可抓取性综合结果。
• 客户端更新 title 对浏览器有效；许多分享爬虫不执行 JS，不能把它当作 SSR/预渲染的等价方案。需按目标抓取方提供可读取的初始 HTML。
• 搜索引擎可能重写结果标题与摘要；填了 title/description 不保证原样展示。
• canonical 不是访问控制，也不等同于 noindex；不要把语义不同的页面都指向同一 URL。\
• 堆砌关键字无效且可能有害。

常见误区

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

本节总结

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

自测题

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

参考答案

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

延伸阅读

资料	类型	支撑内容
MDN meta	文档	meta
Canonical URL	官方	首选 URL 信号
Google SEO starter	官方	SEO 基础