共计 3870 个字符，预计需要花费 10 分钟才能阅读完成。
「深入理解」HTML Meta 标签：网页元信息的配置
HTML 的 元素用于提供关于 HTML 文档的元数据（metadata），这些信息对于浏览器和其他处理 HTML 文档的应用程序来说是非常有用的，如：、、
或
标签通常放置在文档的 部分，不直接向用户展示内容，而是提供给浏览器、搜索引擎和其他 Web 服务使用。
如：
元素必须包含至少一个 name 或 http-equiv 属性以及一个 content 属性。name 属性用于非 HTTP 头元数据，而 http-equiv 用于模拟 HTTP 头部字段。
name 和 content 属性可以一起使用，以名 – 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。
HTML5 规范定义了一系列标准的元数据名称，这些元数据通常通过 标签的 name 属性来表达。以下是一些常用的元数据名称：
- charset: 定义文档的字符编码。
meta charset="UTF-8">
- viewport: 控制视口的尺寸和缩放，对于响应式设计至关重要。
meta name="viewport" content="width=device-width, initial-scale=1">
- author：作者的名字。
meta name="author" content="会思想的苇草 i ">
- description：页面的描述。
meta name="description" content="这是一个描述网页内容的简短摘要。">
- generator：生成页面的软件或工具。
meta name="generator" content="WordPress 5.8.1">
- keywords：与页面内容相关的关键词列表。
meta name="keywords" content="关键词 1, 关键词 2, 关键词 3 ">
- referrer：控制是否发送 referrer 头到服务器。
meta name="referrer" content="no-referrer">
- robots：指导搜索引擎机器人如何索引页面。
meta name="robots" content="noindex, nofollow">
- short-link：页面的短链接。
meta name="shortlink" content="www.csdn.net">
除了上述标准元数据名称外，HTML5 规范还引入了 http-equiv 属性，它可以用于模仿 HTTP 头部信息。例如：
- Content-Type：指定文档的 MIME 类型和字符集。通常被所替代。
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- Default-Style：指定首选的样式表。
meta http-equiv="Default-Style" content="alternate stylesheet.css">
- Pragma：用于缓存控制。比如告诉浏览器不要缓存页面：
meta http-equiv="Pragma" content="no-cache">
- Expires：指定文档过期的时间，通常用格林尼治时间表示：
meta http-equiv="Expires" content="0">
- Cache-Control：指示缓存机制如何处理页面。比如禁止缓存：
meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
- Set-Cookie：设置 cookie。
meta http-equiv="Set-Cookie" content="myCookie=myValue; expires=Thu, 01-Jan-2025 00:00:00 GMT; path=/">
- X-UA-Compatible：控制 Internet Explorer 的渲染模式和文档模式。
meta http-equiv="X-UA-Compatible" content="IE=edge">
除了这些标准元数据名称之外，还有一些非官方的但广泛接受的元数据名称，例如：
- apple-mobile-web-app-capable：告诉 Safari 浏览器该页面可以作为一个全屏的 Web 应用程序运行。window.navigator.standalone 获取是否以全屏运行。
meta name="apple-mobile-web-app-capable" content="yes">
- apple-mobile-web-app-status-bar-style：设置 iOS 设备上 Safari 浏览器的状态栏颜色。可以设置为 black 或 black-translucent 来改变状态栏文本和图标颜色，或者通过 default 恢复到系统默认颜色。
- 为了使 apple-mobile-web-app-status-bar-style 元信息标签生效，首先需要在 HTML 头部声明 apple-mobile-web-app-capable 元信息标签，并将其值设为 yes。这样设置表明您的网站可以作为一个“全屏”的 Web 应用程序运行，即当用户从主屏幕启动该网站时，它将在没有浏览器界面的状态下运行。
meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
- theme-color：设置 Web 应用的主题颜色，用于 Android Chrome 的工具栏颜色。
- theme-color 元信息标签在 Android 设备上主要影响 Chrome 浏览器。它允许网站开发者指定一个颜色，当用户将网站添加到主屏幕后，作为 web app 启动时的背景颜色，以及在某些情况下，改变浏览器工具栏的颜色。从 Android 5.0（Lollipop）开始，theme-color 还会影响状态栏和导航栏的颜色。
- 在 iOS 设备上，theme-color 元信息标签的行为与 Android 有所不同。Apple 在其 Safari 浏览器中实现了自己的一套机制来处理主题颜色。对于 iOS，主要的控制点是通过 apple-mobile-web-app-status-bar-style 元信息标签来改变顶部状态栏的颜色，当用户将网站添加到主屏幕并以全屏模式启动时。
- Safari 在某些情况下可能也会受到 theme-color 元信息的影响，但这并不是官方文档明确支持的行为，可能是因为浏览器的实现细节或与其他元信息标签的交互导致的。因此，不能依赖 theme-color 在 iOS 上的一致行为，特别是在改变状态栏颜色方面，该操作不应被视为可靠的行为。
meta name="theme-color" content="#ff0000">
- 使用 js 改变系统菜单栏主题色（兼容性弱）
let iosThemeColorMetaEle = document.createElement('meta');
iosThemeColorMetaEle.name = 'theme-color';
iosThemeColorMetaEle.content = '#fff';
document.head.append(iosThemeColorMetaEle);
- msapplication-TileColor：设置 Windows 任务栏图标和启动屏幕的背景颜色。
meta name="msapplication-TileColor" content="#00bcd4">
- msapplication-config：引用一个 XML 文件，其中包含了用于 IE11 的浏览器选项卡图标（favicon）和其他信息。
meta name="msapplication-config" content="/browserconfig.xml">
- og：用于社交分享时的元数据，如标题、描述、图片等。
meta property="og:title" content="我的页面标题">
meta property="og:description" content="这是页面的描述。">
meta property="og:image" content="http://example.com/path/to/image.jpg">
- twitter：用于 Twitter 分享时的元数据。
meta name="twitter:card" content="summary_large_image">
meta name="twitter:description" content="这是页面的描述。">
meta name="twitter:image" content="http://example.com/path/to/image.jpg">
og:*（Open Graph 协议）和twitter:*（Twitter Cards）元数据名称虽然不是 HTML5 标准的一部分，但它们被广泛用于社交媒体平台，用于控制页面在社交媒体上的显示方式。这些元数据名称使用property属性而不是name属性，并且它们的值通常通过content属性来指定。
标签应该位于 HTML 文档的 部分。每种类型的 标签只能出现一次，除非它们有不同的 content 属性。例如，你可以有多个 标签，但它们的 content 属性必须不同，否则只有第一个会被解析。然而，通常情况下，每个类型只使用一次是最佳实践。
原文地址: 「深入理解」HTML Meta 标签：网页元信息的配置
