07头部与 SEO

<head> 是网页的档案袋：用户一行也看不见，浏览器、搜索引擎、社交平台却全靠它认识你的页面。这一课把 head 六件套、搜索结果的标题与摘要、社交分享卡片一次配齐——上线前的最后一道安检。

约 15 分钟 5 个动手实验上线前必查

一、head 是什么：网页的「档案袋」

打开任意网页，用户看到的全部内容都在 <body> 里；而 <head> 里的东西一行也不会渲染到页面上。分工很清晰：body 管「页面长什么样」，head 管「页面是谁、该怎么被处理」—— 用什么编码解码、标题叫什么、搜索结果里怎么介绍自己、分享到微信时长什么样，全写在档案袋里。

head · 档案袋（用户看不见）

浏览器、搜索引擎、社交平台的必读材料

<title> 页面标题（六件套中唯一会「露脸」的）

<meta> 编码 / 视口 / 摘要 / OG 卡片

<link> 站点图标 / 外部 CSS

<style> 内联样式

<script> 脚本（常加 defer）

<base> 全站链接基准（很少用）

body · 舞台（用户看得见）

标题、段落、图片、按钮……所有内容

header
main · article · aside
「大家好，我是正文」
footer

head 六件套：title / meta / link / style / script / base，除了 title 的文字会显示在标签页上，其余全在幕后

head 元素速查：每件的职责与常见属性
元素	作用	常见属性
`<title>`	页面标题：标签页、收藏夹、搜索结果第一行	—（只有文字内容，全页唯一）
`<meta>`	各种元数据：编码、视口、摘要、OG	charset · name + content · property
`<link>`	引入外部资源：CSS、图标、预加载	rel · href · type
`<style>`	内联 CSS（本页头部那一块就是）	—（直接写规则）
`<script>`	引入或内嵌脚本	src · defer · async
`<base>`	设定全站相对链接的基准地址	href（慎用于新手项目）

一份及格的 head 骨架长这样（每一行后面都会细讲）：

二、两个必写 meta：charset 与 viewport

所有 meta 里有两个是「漏写就出事」级别。第一个 <meta charset="UTF-8">：告诉浏览器「这份文件请用 UTF-8 解码」。浏览器从收到第一个字节起就要决定用什么编码，所以它必须出现在文档最前面（前 1024 字节内）——写晚了浏览器早就猜完了，猜错的结果就是整页中文变「锟斤拷」。

第二个 viewport：手机浏览器默认假装自己是 980px 宽的桌面，把整页排版好再缩小给你看，字小得要用放大镜。写上 width=device-width, initial-scale=1.0 就是告诉它：「别装，就按手机的真实宽度排版，也别给我默认缩放」。

两台手机对比：没写 viewport 的页面被整体缩小成蚂蚁字。把 .bad .screen 的 font-size: 5px 改成 12px，看桌面版内容立刻撑出屏幕外——这就是手机为什么要缩小它

铁律：charset 必须是 head 里的第一行。把它写到 title 后面、或在它前面塞一大段注释，都可能让浏览器先猜错编码再回头，整页乱码。本站每一课的第一行都是它——翻开本页源码看看。

三、title：标签页与搜索结果的门面

<title> 是六件套里唯一的「正式元素」（不是 meta），它出现在三个地方：浏览器标签页、收藏夹默认名、搜索结果第一行蓝标题—— 用户在搜索结果里点不点你，一半看这行字。

写法三条建议：≤ 30 字（超出会被省略号截断）、 关键词前置（重要词放前面，站名放后面）、 每页唯一（全站共用同一个 title 是新手第一大坑，搜索引擎根本分不清你的页面谁是谁）。

改 .tab-title 和 .r-title 里的文字（比如「我的烘焙小站 · 每周更新」），看标签页与搜索结果的门面同步换字——它们读的都是同一个 <title>

推荐格式：「本页主题 · 补充说明 — 站名」。抬头看本页标签页，写的就是「头部与 SEO · HTML 基础 — 前端自习室」——现学现用。

四、meta description：搜索结果的摘要

<meta name="description"> 是搜索结果里标题下面的 两行灰色摘要：搜索引擎不保证照抄（它觉得正文某段更合适时会自作主张），但写了大概率会用它。写法建议 70~160 字、自然包含关键词、像一句广告语一样勾人点击。至于 keywords——当年滥用太狠，主流搜索引擎早已不再参考，可以不写。

常用 meta name 速查：谁在岗、谁已退休
name 值	作用	现状
viewport	移动端视口设置	必写（第二节）
description	页面摘要，搜索结果第二行	必写，70~160 字
keywords	告诉引擎本页关键词	✗ 已废弃，写了也没人看
robots	控制收录与链接跟踪	需要时写（第七节）
author	页面作者	可选，聊胜于无

三条搜索结果对比：把中间那条 .clamp 的摘要删到两行以内，看省略号消失；最下面那条是「没写 description」的下场——摘要由引擎从正文乱抓

五、Open Graph：社交分享的封面卡片

把链接甩进微信、微博、Twitter，它会变成一张有图有标题的卡片—— 靠的就是 OG 协议（Open Graph，Facebook 发明的社交分享元数据），本质还是 head 里的一堆 <meta>，只是 name 换成了 property。它是网页的「朋友圈分享名片」：不给名片，平台就只能瞎猜。

微信分享卡片模拟：把 .og-title 里的文字改成「周末爬山组队中」，看分享卡片标题立刻换人；.og-desc 同理——卡片上每个字都来自对应的 og 标签

og:image 必须写完整的绝对地址（以 https:// 开头），相对地址平台抓不到；推荐尺寸 1200×630，太小会被拉伸成马赛克。

六、favicon 与站点图标

favicon 是标签页上那粒 16×16 的小图标，也是收藏夹里的门面。格式上 ico 最老兼容最广、png 是主流、svg 矢量是趋势；苹果设备「添加到主屏幕」用的是 apple-touch-icon。本站的 favicon 更极客：直接把 SVG 编码成 data:image 写进 href，一个图标文件都不用多建——按 F12 看看本页 head 里那行就是。

三个标签页找不同：把 .fv-c 的 background: transparent 改成 background: #C08A3E，看第三个标签页瞬间有了辨识度——没有 favicon 的站，在标签页海洋里直接隐身

七、SEO 基础常识：搜索引擎怎么看你的网页

SEO（搜索引擎优化）说到底是一件事：让搜索引擎看懂并喜欢你的页面。 head 里能直接做的有三件：<meta name="robots"> 控制「收不收录」； <link rel="canonical"> 告诉引擎「这些相似页面以这个地址为准」，防止重复内容稀释权重；title + description 前面已经讲过。但真正的基本功在 body：语义化标签、合理的 h1~h6 层级、图片 alt—— 上一课的语义化，就是最好的 SEO。最后的铁律：内容为王。

robots 的 content 值：给搜索引擎的通行指令
content 值	含义	什么时候用
index, follow	收录本页、跟踪页内链接（默认值）	正常页面根本不用写
noindex	别收录本页	站内搜索页、后台页、测试页
nofollow	别跟踪本页里的链接	外链不可信的评论区等
noarchive	别保存页面快照	极少用
noindex, nofollow	两个指令一起上	逗号分隔组合使用

黑帽反面教材：在页面里堆砌几百个重复关键词、写一堆白色文字骗搜索引擎——这套二十年前就过时了，一旦被识别直接降权甚至除名。正经写内容、写语义化、写好 title 和 description，比一切旁门左道都快。

八、小结

<head> 是网页的档案袋：用户看不见，浏览器和搜索引擎全靠它；六件套 = title / meta / link / style / script / base。
两个必写 meta：charset="UTF-8" 必须写在最前面防乱码；viewport 让手机按真实宽度排版。
<title> 出现在标签页、收藏夹、搜索结果第一行：≤ 30 字、关键词前置、每页唯一。
description 是搜索结果摘要（70~160 字）；keywords 已废弃，别再写。
OG 四件套（og:title / description / image / url）决定社交分享卡片；og:image 必须用绝对地址。
favicon 是最便宜的辨识度；robots 控制收录，canonical 防重复，语义化 + 好内容才是真正的 SEO。

动手练习：给你之前写的任意一个页面补齐 head 六件套—— charset、viewport、唯一的 title、70~160 字的 description、一个 favicon、一套 OG 标签。然后按 F12 → Elements，展开 <head> 逐项核对是否生效，再看标签页上的标题和图标有没有换上新门面。