Skip to content
On this page

复习一下 HTML 的 Meta 元素

MDN 释义

HTML <meta> 元素表示那些不能由其它 HTML 元相关(meta-related)元素(<base><link><script><style><title>)之一表示的任何 元数据 信息。

meta 元素定义的元数据的类型包括以下几种:

  • 如果设置了 name 属性,meta 元素提供的是文档级别(document-level)的元数据,应用于整个页面;
  • 如果设置了 http-equiv 属性,meta 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同;
  • 如果设置了 charset 属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码;
  • 如果设置了 [itemprop](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#attr-itemprop) 属性,meta 元素提供用户定义的元数据。

属性

meta 元素包括 全局属性

注意: 全局属性 name<meta> 元素中具有特殊的语义;另外, 在同一个 <meta> 标签中,namehttp-equiv 或者 charset 三者中任何一个属性存在时,itemprop 属性不能被使用。

name 取值

keywords

为搜索引擎提供的关键字列表,多个关键字以 , 隔开。

用法:

<meta name="keywords" content="王小错的博客,王小错,博客,blog,wangxiaocuo,个人博客">

description

为搜索引擎提供的网页描述。

用法:

<meta name="description" content="王小错的个人博客。">

viewport

viewport 是移动端浏览器网页的可视区域。移动版的 Safari 浏览器最先引进了 viewport,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

这里涉及到移动端适配的知识,不展开赘述。

用法:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

content 解释:

  • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素);
  • height:和 width 相对应,指定高度;
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例;
  • maximum-scale:允许用户缩放到的最大比例;
  • minimum-scale:允许用户缩放到的最小比例;
  • user-scalable:用户是否可以手动缩放。

format-detection

格式检测,用来检测 HTML 里的特定格式,包括:电话号码、邮箱、地址。

用法:

<meta name="format-detection" content="telephone=no, email=no, adress=no">

<!-- 等同于: -->
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">

content 解释:

  • telephone:是否将符合手机号格式的数字串设置为拨号链接,默认开启。telephone=no 禁止,telephone=yes 开启;
  • email:是否将邮箱字符串设置为发送邮箱链接,默认开启。email=no 禁止,email=yes 开启;
  • adress:是否地址字符串设置为跳转地图链接,默认开启。adress=no 禁止,adress=yes 开启。

theme-color

用户的浏览器将根据所设定的建议颜色来改变用户界面。倘若设置了该值,则   content 属性必须包含有效的 CSS 值。

用法:

<meta name="theme-color" content="#4285f4">

<!-- 可以用 media 来查询一个媒体类型,如果条件符合则使用对应颜色。比如: -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">

robots - 不常用

告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

用法:

<meta name="robots" content="all">

content 取值:

  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;(和 noindexnofollow 起相同作用);
  • index:文件将被检索;(让 robot/spider 登录);
  • follow:页面上的链接可以被查询;
  • noindex:文件将不被检索,但页面上的链接可以被查询;(不让 robot/spider 登录);
  • nofollow:文件将不被检索,页面上的链接可以被查询。(不让 robot/spider 顺着此页的连接往下探找)。

author - 不常用

标注网页的作者或制作组,content 可以是你或你的制作组的名字、Email 等。

用法:

<meta name="author" content="王小错,xiaocuo.wang@outlook.com">

标注网页的版权信息。

现代网站的版权信息通常通过网页的页脚来标注。

用法:

<meta name="copyright" content="本网站版权归 XX 所有"/>

generator - 不常用

标注网站采用什么编辑器开发。

用法:

<meta name="generator" content="你所用的编辑器"/>

revisit-after - 不常用

告诉搜索引擎每隔多少天访问一次你的页面。

一般来说,网站并不需要使用 revisit-after 来限制搜索引擎的访问频率。revisit-after 并不能提高搜索引擎抓取网页的频率。搜索引擎对网站的抓取频率最主要是取决于网站自身的更新频率、内容质量、用户体验、网站结构等众多因素。

用法:

<meta name="revisit-after" content="7days"/>

固定站点快捷方式(windows IE9 +)- 不常用

以下取值只在 IE9+ 生效。拓展了解下。

微软官方文档

  • application-name
  • msapplication-allowDomainApiCalls
  • msapplication-allowDomainMetaTags
  • msapplication-badge
  • msapplication-config
  • msapplication-navbutton-color
  • msapplication-notification
  • msapplication-square150x150logo
  • msapplication-square310x310logo
  • msapplication-square70x70logo
  • msapplication-wide310x150logo
  • msapplication-starturl
  • msapplication-task
  • msapplication-task-separator
  • msapplication-TileColor
  • msapplication-TileImage
  • msapplication-tooltip
  • msapplication-window