HTML meta 标签详解

作者: 刘星
日期: 2021年12月06日

meta 标签

简介

元数据不会显示在页面上,但可以机器解析。 元数据由浏览器(如何显示内容或重新加载页面)、搜索引擎引擎优化或是其他网络服务使用。

下面我们就来看看常用的meta标签。

一、Meta 标签的 charset 属性

如果设置了 charset 属性, meta 元素就是一个字符集声明,用于告诉文档使用哪种字符编码。

想必每一个都开发者都十分熟悉下面这一个meta元素, 它设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。意味着该 web 页面可以显示任意的语言。

<meta charset="utf-8">

你也可以设置为 GBK (中国大陆国标字符集)[*不推荐]

<meta charset="GBK">

但是!当你设置为 GBK 再使用藏文之类的语言时,那么页面将会会出现乱码。

二、meta 标签的 name 属性

如果设置了 name 属性,meta 元素提供的是文档级别(document-level)的元数据,应用于整个页面。如通过keywords, description等属性设置SEO相关内容

meta标签中name属性语法格式是:

1. keywords

keywords 定义了一组关键词,用于搜索引擎优化。

<meta name="keywords" content="HTML, Liu Xing, JavaScript之禅">

在网络和 SEO 刚刚兴起的时候,这个标签是相当有用的,但是到如今,很多搜索引擎都已经不再用keywords标签作排名因素。我们在使用时k应该避免关键词堆砌

2. description

description 是一个针对页面的简短描述,用于告诉搜索引擎你网站的主要内容, 此内容可能被用作搜索引擎结果的一部分。

<meta name="description" content="JavaScript之禅专注于Web开发, 汇集HTML, CSS,
JavaScript教程">

3. robots

robots 用于告诉网页爬虫如何索引网页

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

它有以下几种参数值:

  • all:对索引编制或内容显示无任何限制, 该指令为默认值

  • noindex: 告诉搜索引擎不要索引当前页, 等价于noindex,nofollow

  • index: 告诉搜索引擎索引当前页

  • follow: 即使页面没有被索引,爬虫也应该爬取页面上的所有链接

  • nofollow: 告诉爬虫不要跟踪页面上的任何链接以及资源

  • noimageindex: 告诉爬虫不要索引页面上的任何图片

  • none: 相当于同时使用 noindex 和 nofollow

  • noarchive: 不在搜索结果中显示缓存链接。如果您未指定此指令,搜索引擎可能会生成缓存网页,并且用户可能会通过搜索结果访问该网页。

  • nosnippet: 不在搜索结果中显示该网页的文本摘要或视频预览

4. viewport

viewport 是用户网页的可视区域。 viewport 通常用于设置页面的视口, 这个属性常用于设计移动端网页。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

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

它主要有以下属性值:

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

5. subject

subject 是关于你的网站主题的简短描述

<meta name="subject" content="你的网站主题">

6. rating

rating 基于网站内容给出一般的年龄分级,通常用于让浏览者知道内容是不是合适的。 如果您希望对页面的受众适当性进行评分,请使该标记

<meta name="rating" content="General">

它主要有以下属性值:

  • general
  • mature
  • restricted
  • adult
  • 14 years
  • safe for kids

7. referrer

referrer 允许由客户端指定资源的 URI 来自于哪一个请求地址,它告诉了服务器,用户在访问当前资源时是从哪过来的。此数据可用于分析、日志记录、优化缓存等。 与HTTP请求中的referer字段相同。(注:Referer的正确拼写是Referrer,但是在写入标准时写错了,只好将错就错)

<meta name="referrer" content="no-referrer">

它主要有以下属性值:

  • no-referrer: 整个 referrer 会被移除。访问来源信息不随着请求一起发送。
  • no-referrer-when-downgrade: (默认值) 在没有指定任何策略的情况下用户代理的默认行为。在同等安全级别的情况下,引用页面的地址会被发送(HTTPS->HTTPS),但是在降级的情况下不会被发送 (HTTPS->HTTP)
  • origin: 在任何情况下,仅发送文件的源作为引用地址
  • origin-when-cross-origin: 对于同源的请求,会发送完整的URL作为引用地址,但是对于非同源请求仅发送文件的源
  • same-origin: 对于同源的请求会发送引用地址,但是对于非同源请求则不发送引用地址信息
  • strict-origin: 在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS),但是在降级的情况下不会发送 (HTTPS->HTTP)
  • strict-origin-when-cross-origin: 对于同源的请求,会发送完整的URL作为引用地址;在同等安全级别的情况下,发送文件的源作为引用地址(HTTPS->HTTPS);在降级的情况下不发送此首部 (HTTPS->HTTP)
  • unsafe-url: 无论是同源请求还是非同源请求,都发送完整的 URL(移除参数信息之后)作为引用地址

8. author

author 用于标明该页面的作者

<meta name="author" content="Liu Xing">

9. generator

generator 用于标明网页又什么工具生成,如使用Hexo生成的静态网站,其值就为Hexo

<meta name="generator" content="Hexo">

copyright 用于标注版权信息

<meta name="copyright" content="Liu Xing">

三、meta 标签的 http-equiv 属性

如果设置了 http-equiv 属性(http-equivalent的简写),meta 元素则是编译指令,提供的信息与类似命名的HTTP header相同,它可用于模拟 HTTP header 响应,通常可以用来控制缓存,刷新等操作。

meta标签中http-equiv属性语法格式是:

1. content-type

该属性与类似,用于设定网页字符集,便于浏览器解析与渲染页面。不推荐使用。

<meta http-equiv="content-Type" content="text/html;charset=utf-8">

2. refresh

refresh 定义文档自动刷新的时间间隔

<meta http-equiv="refresh" content="30">

上面的例子中,页面会间隔30s刷新一次。

4. cache-control

cache-control 用了来控制缓存策略

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

主要有以下属性值:

  • public 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存。
  • private 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)
  • no-cache 不使用强缓存,需要与服务器验协商缓存验证。
  • no-store 缓存不应存储有关客户端请求或服务器响应的任何内容,即不使用任何缓存。
  • max-age= 缓存存储的最大周期,超过这个周期被认为过期

5. expires

expires 用于设定网页的到期时间,它告诉浏览器在过期时间之前可以直接从浏览器缓存中存取数据。

关于 HTTP 缓存机制, 建议参考阅读笔者写的另一篇文章 深入理解 HTTP 缓存机制

结语

至此,我们一共介绍了15中meta标签的用法,分别可以用于SEO,响应式开发,HTTP响应控制等。meta标签对于社交媒体分享,提升SEO以及浏览器/平台的一些兼容性设置都十分重要。

文档信息

版权声明:署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0)

原文链接:https://www.liuxing.io/blog/html-meta-tags/

发表日期:2021年12月06日


最近更新