meta标签

封面图 • 2025-09-18 • SEO技术

“meta标签”是HTML中的一种标签，用于定义关于网页的元数据（metadata），这些信息不会直接显示在网页上，但对浏览器、搜索引擎和网站管理有重要作用。

### 一、什么是 `<meta>` 标签？

`<meta>` 标签位于 HTML 文档的 `<head>` 部分，用来提供关于页面的元信息，例如：

- 页面的字符编码
- 页面描述
- 关键字
- 页面作者
- 视口设置（移动端适配）
- 网站图标（favicon）
- 页面刷新或跳转

---

### 二、常见的 `<meta>` 标签用法

#### 1. 设置字符编码（推荐使用 UTF-8）

```html
<meta charset="UTF-8">
```

这告诉浏览器页面使用的是 UTF-8 编码，可以正确显示中文等多语言字符。

---

#### 2. 页面描述（用于搜索引擎优化 SEO）

```html
<meta name="description" content="这是一个示例页面的简要描述。">
```

搜索引擎会在搜索结果中展示这个描述内容，有助于提高点击率。

---

#### 3. 关键字（虽然现在搜索引擎不再重视，但有些系统仍可能使用）

```html
<meta name="keywords" content="HTML, CSS, JavaScript, 教程">
```

---

#### 4. 页面作者信息

```html
<meta name="author" content="张三">
```

---

#### 5. 移动端适配（响应式设计）

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

这个标签非常重要，用于控制移动端浏览器的视口大小，使网页能自适应不同设备。

---

#### 6. 设置网页刷新或跳转

```html
<meta http-equiv="refresh" content="5;url=https://www.example.com">
```

该标签会让页面在 5 秒后跳转到指定网址。

---

#### 7. 设置网站图标（favicon）

```html
<link rel="icon" href="favicon.ico" type="image/x-icon">
```

注意：这是 `<link>` 标签，不是 `<meta>`，但常与 `<meta>` 一起使用。

---

### 三、总结

| 属性 | 作用 |
|------|------|
| `charset` | 定义字符编码 |
| `name` | 定义元数据的名称（如 description、keywords、author） |
| `content` | 元数据的具体内容 |
| `http-equiv` | 模拟 HTTP 响应头（如 refresh） |
| `viewport` | 控制视口，用于移动端适配 |

---

如果你有具体的使用场景或想了解某个 `<meta>` 标签的详细用法，欢迎继续提问！