常见 Meta 标签参考和用途介绍——前端开发的速查表
我刚开始做前端的时候，Meta 标签对我来说就是”一堆要复制粘贴的东西”。
直到后来面试被问到”viewport 的 user-scalable=no 有什么问题”——我才意识到 Meta 标签不仅仅是”加上就行”，每个标签背后都有它为什么要这样用的道理。
一句话理解： Meta 标签是网页的”配置信息”，告诉浏览器、搜索引擎和其他工具”该怎么处理这个页面”。
速查表（2026 年推荐配置）
必加项
1 | <meta charset="utf-8"> |
SEO 相关
1 | <meta name="robots" content="index, follow"> |
社交分享
1 | <meta property="og:title" content="分享标题"> |
移动端和 PWA
1 | <!-- 主题色——手机浏览器顶部栏颜色 --> |
安全相关
1 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
一些注意事项
theme-color：最被低估的 Meta 标签
theme-color 是我认为性价比最高的 Meta 标签——只用一行代码，就能让你的网站在手机浏览器上看起来更专业。
1 | <!-- 不同主题色 --> |
效果：Android Chrome 顶部栏、任务视图中的颜色会变成你设置的颜色。
viewport 中不要禁用缩放
1 | <!-- ❌ 错误做法：user-scalable=no 违反了 WCAG 无障碍标准 --> |
WCAG 2.1 标准要求页面内容必须可以放大到 200%。user-scalable=no 直接违反了这条规则。
robots 和搜索引擎控制
1 | <!-- 允许收录和跟踪链接 --> |
需要注意的是，robots meta 标签只是一个”请求”，搜索引擎可以选择忽略。但正规的搜索引擎（Google、百度、Bing）都会遵守。
我的建议
对于大多数网站，加上以下这些 Meta 标签就足够了：
1 | <meta charset="utf-8"> |
其他标签按需添加。不要为了”越多越全”而加一堆用不到的 Meta 标签。
相关推荐
P.S. 我自己的博客的 <head> 里大概有 20 多个 Meta 标签——但重要的其实就前面那 5 个。多出来的那些里，一半是主题自带的，一半是插件生成的。加上 Meta 标签不难，难的是知道哪些该删掉。 有空的话，看看你网站的 <head>，删掉那些没用的标签，它会变轻一些。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 飞鲤的自留地！
wechat
alipay
相关推荐
2020-06-11
Meta 标签功能大全——你可能不知道的 20 种用法
有一回面试前端，面试官问我：”你说一下 <meta> 标签有哪些用法？” 我当时心想，这还不简单——“charset、keywords、description、viewport……” 然后我说了四个之后卡住了。 面试官微微一笑：”那你知不知道 theme-color 和 color-scheme？” 我说我确实不知道。那次面试我挂了，但那之后我花了一个下午把 MDN 上关于 meta 的文档全部过了一遍，整理了一份清单。这个习惯我一直保留到现在——任何时候觉得自己”知道”，就去翻一遍 MDN，总有你没见过的 tag。 一句话理解： <meta> 是网页的”元数据层”，它告诉浏览器、搜索引擎、和各种第三方工具”这个页面是谁、该怎么对待它”。 怎么分组理解 Meta 标签Meta 标签看起来多，其实可以分成 6 组，每组 2-5 个标签。分组记忆法比死记硬背好用得多。 1. 基础元数据（每页必加）12345678<!-- 字符编码：一定要在 head 的第一行 --><meta charset="utf-8"><...
2020-06-11
绝对路径和相对路径：让我吃过亏才真正理解的区别
你应该猜不到，我第一次建站时犯的最蠢的错误是什么—— 所有图片链接全部写成了 http://localhost/images/abc.jpg。 上传到服务器后，所有图片全挂。因为服务器上没有叫”localhost”的东西。 一句话理解： 绝对路径告诉浏览器”从世界上哪里能找到这个文件”，相对路径告诉浏览器”相对于当前页面的位置”——能省事，但换个环境可能就断了。 绝对路径：从头到尾的完整地址绝对路径分两种： 12345<!-- 网络绝对路径 --><img src="https://6mal.com/images/logo.png"><!-- 本地绝对路径（专业开发者几乎不用，只在本机测试时偶尔出现） --><img src="C:/website/images/logo.png"> 网络绝对路径的好处是： 不管这个代码出现在哪（你的网站、别人的网站、RSS 订阅邮件），它都能正确加载。 缺点呢？换域名或迁移时就头疼了。 经验之谈： 我之前接手过一个项目，所有资源链接写死了 http://...
2020-06-11
H1 标签到底怎么用才正确？一个被低估的 SEO 因素
我刚开始做网站的时候，被 H1 标签怎么用这个问题困扰了很久。 去网上搜，说法五花八门：”首页 H1 要放网站名”、”文章页 H1 要放文章标题”、”一个页面只能有一个 H1”、”HTML5 可以有多个 H1”…… 更让我迷惑的是——同一套说法，换个网站看，结论居然相反。 后来我才搞明白：很多人对 H1 的理解还停留在 20 年前的 HTML4 时代。HTML5 把规则改了，但大部分教程没跟着改。 一句话理解： H1 是页面内容的”标题”，告诉搜索引擎和用户”这一页在说什么”——每个页面应该有且只有一个 H1。 先纠正几个常见的错误认知错误 1：首页不应该用 H1这个说法非常普遍——“首页 H1 留给文章内容页用”、”首页用 logo 代替 H1 就行”。 但你知道吗？百度、Google 的首页都有 H1。 它们用 <h1> 包裹了”百度一下”和”Google”这个品牌标识。当然，它们不会傻到只写个 logo，而是把 h1 和 a 标签结合，既有品牌含义又对搜索引擎友好。 123456<!-- 一个合理的首页 H1 结构 --><header>...
2020-06-11
为什么不再用 Table 做网页布局？——从 Table 到 Flexbox 到 Grid 的进化史
你有见过那种 2000 年代初的网站吗？满屏的 <table> 嵌套 <table>，像俄罗斯套娃一样，一个表格里塞一个表格，再塞一个表格…… 我刚开始学做网页的时候，用的就是 table 布局。不是因为 table 布局好，是因为那时候我只知道这一种布局方式。 后来学了 CSS，才发现以前用 table 做的很多事，CSS 只需要几行代码就能搞定，而且更灵活、更高效。 一句话理解： <table> 是用来展示表格数据的，不是用来搭页面框架的——就像你不会用筷子喝汤一样，工具要用对地方。 Table 布局的问题在哪 问题 说明 代码臃肿 Table 布局需要大量嵌套标签，比 Flexbox/Grid 多出 50-70% 的 HTML 渲染阻塞 浏览器必须等整个 <table> 加载完才能开始渲染（包括内容） 响应式困难 表格天生定宽，要适配手机非常麻烦 语义错误 用 table 做布局等于告诉搜索引擎”这是数据表格”，影响 SEO 可维护性差 改一个地方的布局，可能要动十几层嵌套的 table 结...
2020-06-11
响应式网页设计实战——从百分比到容器查询的进化
我做的第一个”响应式”网站，是用 @media 写了十几种屏幕尺寸的断点。 320px、360px、375px、414px、480px、640px、768px、1024px、1280px、1440px、1920px…… 每次新增一种设备尺寸，我就要加一个断点。后来我受不了了——这不是响应式，这是穷举法。 一句话理解： 响应式设计的终极目标不是”适配所有屏幕尺寸”，而是”在任何屏幕上都能提供良好的阅读体验”。 2026 年的响应式方案1. 流体排版：clamp() 一统江湖12345678910/* 不需要媒体查询了 */h1 { font-size: clamp(1.75rem, 5vw, 3rem);}.content { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; max-width: 65ch; /* 每行不超过 65 个字符，提升可读性 */} 2. 响应式网格：Grid + auto-fill123456789101112131415161718192...
2020-06-11
HTML5 移动端前端开发要点——2026 年更新版
几年前我做了一个移动端页面，当时市面上流行的是”rem + JS 动态计算根字号”的方案。 那时我研究了一整天 rem 的计算公式，才把适配搞定。几个月后重新翻项目，发现自己写了一堆分辨率的 media query 和 JS 计算代码。 现在回头看，那些代码已经可以全部删掉了——因为 CSS 已经用新的特性覆盖了这些需求。 一句话理解： 移动端前端开发的核心就是三件事——适配不同屏幕尺寸、触控交互优化、性能与缓存。 2026 年移动端适配方案1. 视口设置1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 注意：不要再加 user-scalable=no 了！ 这是 WCAG 无障碍标准的违规行为——用户需要能放大页面来看小字。 2. 用 clamp() 替代 rem 计算1234567891011121314/* ❌ 旧方案（2020 年前） */html { font-size: calc(100vw / 18); ...
