```html

打开任何一个网页，网页右键“查看网页源代码”，代码第一眼撞上的头部就是<head>。这东西不渲染，开始不显示，网页藏在浏览器标签页后面默默干活。代码很多人写HTML只盯着<body>里的头部div和span，head随便糊弄两下。开始结果呢？网页移动端打开字体小得要用放大镜，分享到微信的代码卡片没图没摘要，搜索引擎抓过去一堆乱码。头部

我见过一个真实案例。开始朋友公司的网页官网，前端用Vue写了半年，代码上线后老板在手机上打开，头部页面宽度直接溢出，左右能拖出半米空白。查了半天CSS，最后发现是<head>里少了一行<meta name="viewport" content="width=device-width, initial-scale=1.0">。就这么一行，整个移动端体验全毁。你说head重不重要？

<head>里最核心的几样东西，我按优先级排一下。第一是<meta charset="UTF-8">，这行必须放在最前面。为什么？浏览器解析HTML是从上到下的，如果charset声明晚了，它可能先用系统默认编码（比如GBK）去解析前面的中文，等读到UTF-8声明时已经乱码了。我试过把charset放到<title>后面，Chrome直接显示“锟斤拷”。

第二是viewport。PC端网页默认按980px宽度渲染，手机上就会缩成一小坨。加上width=device-width，页面宽度才等于设备逻辑宽度。有些老网站没加这行，你在手机上打开，字小得要把手机贴到鼻尖。更气人的是，有些网站加了user-scalable=no，禁止用户双指缩放。这纯属反人类，WCAG无障碍指南明确反对这种做法。

第三是<title>。这玩意儿显示在浏览器标签页上，也是搜索引擎结果页的标题。我见过一个后台管理系统，所有页面title都是“Vue App”。用户开了十个标签页，完全分不清哪个是订单列表哪个是用户管理。title写清楚，是基本素养。

然后是<meta name="description">。这行不直接影响排名，但影响点击率。Google搜索结果里，标题下面的那段摘要，很多时候就是从这里抓的。写得好，用户点；写得烂，用户划过去。我观察过，同一关键词下，description里带具体数字和疑问句的，点击率能差出30%。比如“5种方法解决...”就比“本文介绍了...”强得多。

Open Graph协议那套<meta property="og:...">，做社交分享的必须加。你想想，公众号文章分享到朋友圈，那个小卡片上的缩略图和标题哪来的？就是微信爬虫读你网页head里的og标签。没有og:image，分享出去就是一张灰底白字的默认图，看着像诈骗链接。og:title和og:description也一样，不写的话微信可能随便抓你页面第一段文字，抓出什么奇怪的东西都有可能。

还有<link rel="icon">，就是浏览器标签页上那个小图标。很多开发者用默认的favicon.ico，结果浏览器缓存死都不更新。我习惯在link后面加个版本号，比如href="/favicon.ico?v=2"，强制刷新。另外现在推荐用SVG格式的favicon，一个文件适配所有尺寸，比ico省事。

性能相关的，<link rel="preload">和<link rel="preconnect">值得提一句。preconnect提前跟CDN建立TCP连接，preload提前下载关键资源。我测过一个电商首页，加了preconnect到图片CDN后，首屏加载时间从2.1秒降到1.7秒。别小看这0.4秒，转化率能差好几个百分点。

最后说个坑。<head>里不要放<script>阻塞渲染的代码。以前大家习惯把jQuery放head里，现在不行了。浏览器遇到script标签会暂停解析HTML，等下载执行完才继续。把script放body末尾，或者加defer、async属性。我见过一个页面head里塞了八个script，白屏时间长达五秒。用户早跑了。

head这东西，写好了没人夸，写砸了全是坑。下次新建HTML文件，别急着写body，先把head里那几行该加的加上。省下来的调试时间，够你多摸半小时鱼。

```