current position:Home>How to use meta tags

How to use meta tags

2022-08-06 19:34:03zkj

携手创作,共同成长!这是我参与「掘金日新计划 · 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.01XHTML 1.0,There are four effective properties:contenthttp-equivnamescheme.在 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> 标签.

属性描述
charsetcharacter_set规定 HTML 文档的字符编码.
contenttext定义与 http-equiv 或 name 属性相关的元信息.
http-equivcontent-security-policy
content-type
default-style
refresh
把 content 属性关联到 HTTP 头部.
nameapplication-name
author
description
generator
keywords
viewport
把 content 属性关联到一个名称.
schemeformat/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">

示例

  1. Define the creator and modify information:
<meta name="author" content="Chris Mills">

<meta name="revised" content="David Yang,8/1/07">
复制代码
  1. Definition document keywords and page description,用于搜索引擎:
<meta name="description" content="HTML examples">

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
复制代码
  1. 下面示例演示 3 秒后,重定向到另外一个地址,如果 url Empty will refresh the current page:
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
复制代码
  1. 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">
复制代码
  1. 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'">
复制代码
  1. 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">
复制代码
  1. 禁止浏览器从本地机的缓存中调阅页面内容,设定后,Once the left page cannot from Cache 中再调出:
<meta http-equiv="Pragma" content="no-cache">
复制代码
  1. 告诉搜索引擎机器人抓取哪些页面:
<meta name="robots" content="index,follow">
复制代码
  • all:文件将被检索,且页面上的链接可以被查询.
  • none:文件将不被检索,且页面上的链接不可以被查询.
  • index:文件将被检索.
  • follow:页面上的链接可以被查询.
  • noindex:文件将不被检索,但页面上的链接可以被查询.
  • nofollow:文件将不被检索,页面上的链接可以被查询.

引用资料

meta标签到底是做什么的

copyright notice
author[zkj],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/218/202208061924591923.html

Random recommended