How to use meta tags

携手创作,共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情

介绍

<meta> Not by the other elements are used to represent and HTML 元相关（meta-related）元素（(<base>、<link>、<script>、<style> 或 <title>）One of the said data information,Element does not contain any content.

With different attributes of multiple <meta> Elements can be used on the same page.<meta> Element content will not display on the page,但是对于机器是可读的,可用于模拟 HTTP The use of the response header fields,页面描述、Keyword is used to search engine optimization,或其他 web 服务.

属性

<meta> 标签的属性定义了与文档相关联的名称/值对,元数据总是以名称/值的形式被成对传递的.

对于 HTML 4.01 和 XHTML 1.0,There are four effective properties：content、http-equiv、name 和 scheme.在 HTML 5 下,Now there are five effective attribute,添加了 charset.http-equiv 用于模拟 HTTP 标题,并用 name To embed metadata.无论哪种情况,Statement of values are included in the content 属性中,除非给出 charset,Otherwise it is the only required attribute.

<meta> 标签通常位于 <head> 区域内,但在 HTML5 中不再需要 <head> 标签.

属性	值	描述
charset	character_set	规定 HTML 文档的字符编码.
content	text	定义与 http-equiv 或 name 属性相关的元信息.
http-equiv	content-security-policy content-type default-style refresh	把 content 属性关联到 HTTP 头部.
name	application-name author description generator keywords viewport	把 content 属性关联到一个名称.
scheme	format/URI	定义用于翻译 content 属性值的格式.

name 属性

name 属性提供了名称/值对中的名称.HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称.通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称.

keywords 是一个经常被用到的名称.它为文档定义了一组关键字.某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类.

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">
复制代码

如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值.

http-equiv 属性

http-equiv 属性为名称/值对提供了名称.并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对.

当服务器向浏览器发送文档时,会先发送许多名称/值对.虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个：content-type:text/html.这将告诉浏览器准备接受一个 HTML 文档.

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部.例如,添加：

<meta http-equiv="expires" content="31 Dec 2008">
复制代码

This is sent to the browser's head should contain：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
复制代码

当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义.

content 属性

content 属性提供了名称/值对中的值.该值可以是任何有效的字符串.

content 属性始终要和 name 属性或 http-equiv 属性一起使用.

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案.此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义.

HTML 4.01 与 HTML5之间的差异

在 HTML5 中,有一个新的 charset 属性,It makes the definition of a character set more easily：

HTML 4.01：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5：<meta charset="UTF-8">

示例

Define the creator and modify information：

<meta name="author" content="Chris Mills">

<meta name="revised" content="David Yang,8/1/07">
复制代码

Definition document keywords and page description,用于搜索引擎：

<meta name="description" content="HTML examples">

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
复制代码

下面示例演示 3 秒后,重定向到另外一个地址,如果 url Empty will refresh the current page：

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
复制代码

On the document level set model of light color and brunet model way of working with CSS color-scheme Properties allows a single element to specify the first choice and accept the same color scheme：

<meta name="color-scheme" content="dark light">
复制代码

Already exists a website,With too much inline code to fix the problem,And want to ensure that resources（如图片、字体、脚本等）只从 https 加载,And banned the plugin：

<meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'">
复制代码

Micro front end need to press function split more child application,主应用在加载的过程中经常出现加载失败的问题.因为 https 地址中,如果加载了 http 资源,浏览器将认为这是不安全的资源,将会默认阻止.Later in the document to add the following <meta> 标签完美解决：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
复制代码

禁止浏览器从本地机的缓存中调阅页面内容,设定后,Once the left page cannot from Cache 中再调出：

<meta http-equiv="Pragma" content="no-cache">
复制代码

告诉搜索引擎机器人抓取哪些页面：

<meta name="robots" content="index,follow">
复制代码

all：文件将被检索,且页面上的链接可以被查询.
none：文件将不被检索,且页面上的链接不可以被查询.
index：文件将被检索.
follow：页面上的链接可以被查询.
noindex：文件将不被检索,但页面上的链接可以被查询.
nofollow：文件将不被检索,页面上的链接可以被查询.

引用资料

meta标签到底是做什么的

current position：Home>How to use meta tags