概念介绍

在 HTML 中，元数据（metadata）是关于页面内容的附加信息，用于提供页面的描述、作者、关键词、视口设置、页面编码等。元数据不会直接显示在页面内容中，但它对搜索引擎优化（SEO）、社交分享、移动设备适配等方面至关重要。

元数据通常放在 HTML 文档的 <head> 标签内，主要通过 <meta> 标签以及一些特殊标签（如 <title>、<link>、<style> 等）来实现。

<meta>元素可用于提供名称 - 值对形式的文档元数据，name属性为元数据条目提供名称，而content属性提供值。

关于 <meta> 的更多信息，请看：meta

常见的数据类型

文档标题

<title>页面标题</title>

用途：

指定网页的标题，显示在浏览器标签上。
对 SEO 重要，通常在标题中包含页面的主要关键词。

字符编码

<meta charset="UTF-8" />

用途：

指定页面的字符编码。常见的编码是 UTF-8，支持大部分语言字符，确保页面在不同语言环境下正常显示。

视口设置

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

用途：

用于控制页面在移动设备上的显示方式。
width=device-width表示视口宽度等于设备屏幕宽度，initial-scale=1.0表示初始缩放比例为 1.0。
常用于响应式设计，确保页面在移动设备上能够正确缩放。

页面描述

<meta
  name="description"
  content="这是一个网页的简短描述，通常显示在搜索引擎结果中。"
/>

用途：

提供页面的简短描述，通常在搜索引擎结果页面（SERP）中显示。
对 SEO 重要，内容应概括页面的核心内容，有助于提高点击率。

关键词

<meta name="keywords" content="HTML, CSS, JavaScript, 前端开发" />

用途：

以前用于列出页面的关键词，但现代搜索引擎几乎不再使用它。可以忽略或用于内部用途。

作者

<meta name="author" content="作者姓名或公司名称" />

用途：

指定页面或内容的作者，通常包含作者的姓名、公司或联系方式。

页面刷新和重定向

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

用途：

content="30"表示每 30 秒刷新一次页面。
content="5; url=https://example.com"表示 5 秒后重定向到指定网址。不推荐过度使用，因为会影响用户体验。

Open Graph（用于社交分享）

<meta property="og:title" content="页面标题" />
<meta property="og:description" content="页面描述" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com" />

用途：

Open Graph 协议用于控制页面在社交媒体上的显示效果。适用于 Facebook、Twitter 等平台。
og:title是标题，og:description是描述，og:image是缩略图，og:url是页面的 URL

图标

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

用途：

设置浏览器标签上的图标。favicon.ico 通常放在网站的根目录下。

应用缓存（不再推荐）

<meta http-equiv="cache-control" content="no-cache" />

用途：

控制缓存行为，但现代浏览器已不再推荐使用 App Cache。现在多使用 Service Worker 和缓存 API 实现离线功能。

颜色主题

<meta name="theme-color" content="#ffffff" />

用途：

表示当前页面的建议颜色，在自定义当前页面或周围用户界面时，用户代理应当使用此颜色。

其他标签

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

用途：

设置页面的兼容模式为最新的 IE 版本，以避免兼容性问题。

前端 HTML标签