「深入理解」HTML Meta标签：网页元信息的配置

本文旨在详尽解析HTML中的Meta标签作用及其配置方法，帮助前端开发者更好地控制网页的元信息，包括搜索引擎优化（SEO）、视口设置、字符集定义以及社交媒体卡片的呈现。通过实例展示如何正确使用Meta标签来提升用户体验和网站的可访问性，使网站在不同的设备和平台上都能表现出色。

会思想的苇草i

1463人浏览 · 2024-09-03 09:58:06

会思想的苇草i · 2024-09-03 09:58:06 发布

「深入理解」HTML Meta标签：网页元信息的配置

HTML的<meta>元素用于提供关于HTML文档的元数据（metadata），这些信息对于浏览器和其他处理HTML文档的应用程序来说是非常有用的，如：<base>、<link>、<script>、<style> 或 <title>。

<meta>标签通常放置在文档的<head>部分，不直接向用户展示内容，而是提供给浏览器、搜索引擎和其他Web服务使用。

如：

在这里插入图片描述

<meta>元素必须包含至少一个name或http-equiv属性以及一个content属性。name属性用于非HTTP头元数据，而http-equiv用于模拟HTTP头部字段。

name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

HTML5 规范定义了一系列标准的元数据名称，这些元数据通常通过<meta>标签的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改变系统菜单栏主题色（兼容性弱）

    // 创建并设置ios主题色meta标签
    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属性来指定。

<meta>标签应该位于HTML文档的<head>部分。每种类型的<meta>标签只能出现一次，除非它们有不同的content属性。例如，你可以有多个<meta name="description">标签，但它们的content属性必须不同，否则只有第一个会被解析。然而，通常情况下，每个类型只使用一次是最佳实践。