主题 header.php 里那些 meta 该写什么、不该写什么

打开一个别人写的主题，header.php 里往往堆了十几行 meta。有些是必须的，有些纯属历史包袱。我按顺序说。

必须有的三个。charset 放第一行，越靠前越好，浏览器拿到前 1024 字节就要判断编码。viewport 决定移动端缩放，漏了这行，后面写多少媒体查询都白搭。title 不用多说，但顺序有讲究——文章页用「标题 - 站名」，首页用「站名 - 副标题」，别反过来。

然后 description 和 keywords。

description 值得认真写。用 $article->Intro 截一段就行，但记得过滤 HTML 标签、去掉换行、按字数截断。截断这事有坑：substr 按字节切，中文会被切成半个字，直接变乱码。用 mb_substr，参数里带上 UTF-8。

keywords 现在基本没用。百度自己在 2019 年就说过不参考，谷歌更早。留着不碍事，但别为它花时间。

容易写错的几行。

canonical 写错比不写更糟。它告诉搜索引擎「这个页面的正式地址是哪个」，写错了等于主动放弃权重。列表页翻页的时候，第 2 页的 canonical 应该是第 2 页自己的地址，不是第 1 页。见过不少主题直接写死成首页地址，这就是把全站权重往首页堆。

OG 标签。分享到微信、微博、X 的时候，缩略图和标题从这来。og:image 必须是绝对地址，带上 http。相对路径在部分抓取器里认不出来，图就空了。

还有个细节：og:title 和页面 title 不必相同。页面 title 为了搜索可以堆关键词，分享标题最好干净些。

不该写的。

applicable-device。这标签当年给百度看的，说明「我是 PC 页」还是「我是移动页」。现在响应式一统天下，写了反而可能被误判成独立移动站。

renderer 指定双核浏览器内核。除了特定老系统要兼容 IE，没别的理由写。

还有一堆 theme-color、format-detection、apple-mobile-web-app-*。真要做 PWA 才需要，普通博客写了是噪音。

最后一个顺序问题。

css 放 head，js 能放底部就放底部。但有一类 js 必须放 head——会影响首屏布局的那些，比如主题色初始化。放底部的话，页面会先闪一下白，再跳成暗色。

这个闪烁我调过。真正的解法不是挪位置，是在 head 里内联一小段脚本，读 localStorage 直接给 html 加 class，不用等外部 js 加载完。

你主题的 header.php 现在有多少行 meta？