# HTML meta 参考

URL: https://caijiao.org/reference/html/meta
Source: docs/reference/html/meta.md
Description: HTML meta Reference，整理 charset、viewport、description、robots、theme-color、Open Graph、SEO 和移动端常见写法。

`<meta>` 用于提供页面元信息，例如字符集、视口、页面描述、搜索引擎抓取指令、移动端主题色和社交分享信息。

## 常见写法

```html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="页面描述">
<meta name="robots" content="index,follow">
```

## 常用 meta

| 写法 | 说明 |
| --- | --- |
| `charset` | 页面字符编码 |
| `viewport` | 移动端视口控制 |
| `description` | 搜索结果摘要候选 |
| `robots` | 抓取与索引指令 |
| `theme-color` | 浏览器 UI 主题色 |
| `og:*` | Open Graph 分享信息 |

## SEO 注意事项

- description 应概括页面实际内容，不要堆关键词。
- robots 的 `noindex` 会阻止页面进入搜索结果。
- meta 标签应通过项目的 SEO 机制统一输出；本项目要求 SEO 由 `@unhead/vue` 注入。

## 常见错误

- 每个页面 description 完全相同，导致搜索结果摘要缺乏区分。
- 页面误带 `noindex`，上线后一直不收录。
- viewport 缺失，移动端布局按桌面宽度渲染。
- 在多个位置重复输出相互冲突的 meta。

## 相关内容

- [HTML Reference](/reference/html/)
- [canonical 参考](/reference/html/canonical)
- [HTML meta 标签](/html/10-meta/01-meta-tags)
- [Description 到底应该怎么写](/how-to/seo-website/meta-description)
- [Meta Title / Description 检查工具](/tool/meta-title-description-checker)
- [MDN meta element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta)