HTML meta 标签详解：name 与 http-equiv 属性在现代 Web 开发中的应用

2013-01-04 · Ryan · 发表评论

meta 标签是 HTML 文档 <head> 区域的关键元素，用于提供关于网页的元数据（metadata）。这些数据不会直接显示在页面上，但对浏览器、搜索引擎和其他网络服务至关重要。meta 标签主要通过 name 和 http-equiv 两个属性来定义其用途。

name 属性详解

name 属性主要用于定义与文档内容相关的元信息，供搜索引擎、社交媒体平台或其他客户端软件读取。其值通过 content 属性来指定。

description：提供网页内容的简短摘要，通常显示在搜索引擎结果中。

<meta name="description" content="关于HTML meta标签name与http-equiv属性的详细解释与用法指南。">

keywords：为搜索引擎提供与页面内容相关的关键词（现代搜索引擎已降低其权重）。
```
<meta name="keywords" content="HTML, meta标签, name属性, http-equiv属性, SEO">
```

author：声明网页的作者。

<meta name="author" content="作者姓名">

viewport（现代网页开发必备）：控制移动端视口的大小与缩放，对于响应式设计至关重要。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

robots：指示搜索引擎爬虫如何索引和跟踪页面链接。

<meta name="robots" content="index, follow">
<!-- 常用指令说明：
index / noindex: 是否允许索引本页。
follow / nofollow: 是否跟踪本页中的链接。
-->

http-equiv 属性用于模拟 HTTP 响应头，指示浏览器应如何执行某些操作或如何处理页面。它同样与 content 属性配对使用。

Content-Type（已过时，推荐使用 <meta charset>）：声明文档的字符编码。现代标准写法是：
```
<meta charset="UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
```
X-UA-Compatible：指示 IE 浏览器使用最新的渲染模式（针对旧版 IE 的兼容性设置）。
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```

Refresh：设定页面在指定秒数后刷新或重定向到另一个 URL。

<!-- 5秒后刷新本页 -->
<meta http-equiv="Refresh" content="5">
<!-- 3秒后跳转到新网址 -->
<meta http-equiv="Refresh" content="3; url=https://example.com/">

Content-Security-Policy (CSP)：定义内容安全策略，帮助防止跨站脚本（XSS）等攻击。
```
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
```

字符编码：始终使用 <meta charset="UTF-8"> 作为 <head> 中的第一个元素，以确保正确的字符渲染。
视口设置：为移动友好型网站，必须包含 viewport 的 meta 标签。
过时属性：原文中提到的 Generator、Expires、Pragma、set-cookie、Pics-label、windows-Target、Page-Enter/Exit 等属性在现代 Web 开发中已极少使用或已被更佳实践（如 HTTP 头、CSS 动画、JavaScript）取代。
SEO：description 对搜索引擎结果展示（SERP）很重要，应认真撰写。keywords 的作用已微乎其微。

合理使用 meta 标签是构建标准、易访问、对搜索引擎友好的网页的基础。请根据实际需求选择必要的标签，并遵循最新的 Web 标准。