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

「深入理解」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属性来表达。以下是一些常用的元数据名称:

  1. charset: 定义文档的字符编码。
html 复制代码
<meta charset="UTF-8">
  1. viewport: 控制视口的尺寸和缩放,对于响应式设计至关重要。
html 复制代码
<meta name="viewport" content="width=device-width, initial-scale=1">
  1. author:作者的名字。
html 复制代码
<meta name="author" content="会思想的苇草i">
  1. description:页面的描述。
html 复制代码
<meta name="description" content="这是一个描述网页内容的简短摘要。">
  1. generator:生成页面的软件或工具。
html 复制代码
<meta name="generator" content="WordPress 5.8.1">
  1. keywords:与页面内容相关的关键词列表。
html 复制代码
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
  1. referrer:控制是否发送referrer头到服务器。
html 复制代码
<meta name="referrer" content="no-referrer">
  1. robots:指导搜索引擎机器人如何索引页面。
html 复制代码
<!-- 告诉搜索引擎不要索引该页面或跟踪其链接 -->
<meta name="robots" content="noindex, nofollow">
  1. short-link:页面的短链接。
html 复制代码
<meta name="shortlink" content="www.csdn.net">

除了上述标准元数据名称外,HTML5 规范还引入了http-equiv属性,它可以用于模仿HTTP头部信息。例如:

  • Content-Type:指定文档的MIME类型和字符集。通常被所替代。
html 复制代码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  • Default-Style:指定首选的样式表。
html 复制代码
<meta http-equiv="Default-Style" content="alternate stylesheet.css">
  • Pragma:用于缓存控制。比如告诉浏览器不要缓存页面:
html 复制代码
<meta http-equiv="Pragma" content="no-cache">
  • Expires:指定文档过期的时间,通常用格林尼治时间表示:
html 复制代码
<meta http-equiv="Expires" content="0">
  • Cache-Control:指示缓存机制如何处理页面。比如禁止缓存:
html 复制代码
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  • Set-Cookie:设置cookie。
html 复制代码
<!-- 这样做不推荐,也非标准 -->
<meta http-equiv="Set-Cookie" content="myCookie=myValue; expires=Thu, 01-Jan-2025 00:00:00 GMT; path=/">
  • X-UA-Compatible:控制Internet Explorer的渲染模式和文档模式。
html 复制代码
<meta http-equiv="X-UA-Compatible" content="IE=edge">

除了这些标准元数据名称之外,还有一些非官方的但广泛接受的元数据名称,例如:

  • apple-mobile-web-app-capable:告诉Safari浏览器该页面可以作为一个全屏的Web应用程序运行。window.navigator.standalone 获取是否以全屏运行。
html 复制代码
<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应用程序运行,即当用户从主屏幕启动该网站时,它将在没有浏览器界面的状态下运行。
html 复制代码
<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上的一致行为,特别是在改变状态栏颜色方面,该操作不应被视为可靠的行为。
html 复制代码
<meta name="theme-color" content="#ff0000">
  • 使用js改变系统菜单栏主题色(兼容性弱)
js 复制代码
    // 创建并设置ios主题色meta标签
    let iosThemeColorMetaEle = document.createElement('meta');
    iosThemeColorMetaEle.name = 'theme-color';
    iosThemeColorMetaEle.content = '#fff';
    document.head.append(iosThemeColorMetaEle);
  • msapplication-TileColor:设置Windows任务栏图标和启动屏幕的背景颜色。
html 复制代码
<meta name="msapplication-TileColor" content="#00bcd4">
  • msapplication-config:引用一个XML文件,其中包含了用于IE11的浏览器选项卡图标(favicon)和其他信息。
html 复制代码
<meta name="msapplication-config" content="/browserconfig.xml">
  • og:用于社交分享时的元数据,如标题、描述、图片等。
html 复制代码
<meta property="og:title" content="我的页面标题">
<meta property="og:description" content="这是页面的描述。">
<meta property="og:image" content="http://example.com/path/to/image.jpg">
  • twitter: 用于Twitter分享时的元数据。
html 复制代码
<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属性必须不同,否则只有第一个会被解析。然而,通常情况下,每个类型只使用一次是最佳实践。

相关推荐
excel4 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子11 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构18 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep19 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss23 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风24 分钟前
html二次作业
前端·html
江城开朗的豌豆27 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵27 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮30 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
江城开朗的豌豆36 分钟前
拆解Redux:从零手写一个状态管理器,彻底搞懂它的魔法!
前端·javascript·react.js