meta标签总结

karlge

已于 2022-07-08 08:58:13 修改

阅读量467

点赞数

分类专栏： H5 文章标签： html 前端搜索引擎

于 2022-07-07 17:44:41 首次发布

本文链接：https://blog.csdn.net/weixin_46331416/article/details/125663415

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近搞SEO，提高网站的的排名，发现跟meta有很大的关系，对meta的知识点有点疏散，对此做一个总结：

meta是什么？有什么作用呢？

Meta ：即元数据（Metadata）是数据的数据信息。
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。
元数据的作用
- 可以被使用浏览器（如何显示内容或重新加载页面）
- 搜索引擎优化（SEO）（关键词），或其他 Web 服务调用。
- 定义页面使用语言
- 自动刷新并指向新的页面
- 实现网页转换时的动态效果
- 控制页面缓冲
- 网页定级评价
- 控制网页显示的窗口

meta标标签下的属性

1. charset : 定义文档的字符编码

<meta charset="utf-8" />

2. name和content属性的搭配使用:

2.1. 理解:

name属性主要用于描述网页，对应于content（网页内容）

2.2. 作用:

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

2.3. 语法：

<meta name="参数"content="具体的参数值">

2.4. name属性中的主要参数有一下几种参数：

Keyword(关键字)：告诉搜索引擎你的网页关键字是什么，content=“你的网页中的关键字”
description(网站内容描述)：告诉搜索引擎你网站主要内容，content"你的网页中的主要内容"
application-name: 网页中所运行的应用名称。content=“application name”
author(作者)：标注网页的作者,content=“name,email,address,etc”
genertor: 说明网站采用的什么软件制作，content=“信息参数”
copyright: 代表说明网站的版权信息，content=“信息参数”
http-equiv：告诉搜索引擎每隔多少天访问一次你的页面，content=“7days”,7days就代表7天，以此类推
renderer(双核浏览器渲染方式): renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

viewport: 为视口的初始大小提供指示，目前仅用于移动设备
```
// 使用示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
```
- content可选参数值为：
  - width: 定义视口的宽度，可能的值：
    - number: 此时单位为像素
    - string: 带单位的CSS宽度值
    - ddevice-width: 表示与设备宽度一致
  - height: 定义viewport的高度，但未被任何浏览器使用
  - initial-scale: 定义viewport的宽度定义设备宽度（与横竖屏相关）
    - 0.0 - 10.0之间的整数
  - maximum-scale：定义缩放的最大值，必须大于等于minimum-scale
    - 0.0 - 10.0之间的整数
  - minimum-scale：定义缩放的最小值，必须小于等于maximum-scale
    - 0.0 - 10.0之间的整数
  - user-scalable：用户是否可以缩放当前页面
    - yes: 允许缩放
    - no: 不允许缩放(阻止一切意义上的缩放)
  - viewport-fit ：视口是否根据设备自适应
    - auto :不会影响“初始布局”视口，整个网页都是可查看的
    - contain: 视口被缩放以适合显示中内接的最大矩形
    - cover: 缩放视口以填充设备显示
robots(机器人向导)：告诉搜索机器人哪些页面需要索引，哪些页面不需要索引
```
// 使用示例：
<meta name="robots" content="all"/>
<meta name="robots" content="index,follow"/>
```
- content的可选参数为：
  - all（默认）：与index,follow 等价（只针对谷歌爬虫）
  - none：与noindex, nofollow等价（只针对谷歌爬虫）；
  - index：允许爬虫索引此页面（所有爬虫）
  - noindex：要求爬虫不索引此页面（所有爬虫）
  - follow：允许爬虫跟踪页面上链接所指向的页面（所有爬虫）
  - nofollow：要求爬虫不跟踪页面上的链接（所有爬虫）
  - noarchive: 要求搜索引擎不缓存页面内容（针对谷歌、雅虎、必应搜索）
  - nosnippet：要求搜索引擎不要在搜索结果页显示本页面的描述。（针对谷歌、必应搜索）
  - noimageindex：要求本页面不会成为搜索结果页中索引图像的引用页。（只针对谷歌搜索）
  - nocache：noarchive的替代名称。（只针对必应）
referrer: 控制由当前文档发出的请求的HTTP Referer请求头
```
// 使用示例
<meta name="referrer" content="no-referrer"/>
<meta name="referrer" content="origin"/>
```
- content的可选参数为：
  - no-referrer：不发送HTTP Referer请求头
  - origin：只发送当前文档的origin
  - no-referrer-when-downgrade：
    - 如果请求目标比当前页面一样安全或更加安全，则发送完整的URL
    - 如果请求目标比当前页面更加不安全，则不发送referrer(这是默认行为)
  - origin-when-cross-origin：对同源请求发送完整URL（不含参数），其他情况只发送origin
  - same-origin：对同源请求发送完整URL（不含参数），其他情况，不发送referrer请求头
  - strict-origin：
    - 如果请求目标与当前页面一样或更加安全，发送 origin
    - 如果请求目标不如当前页面安全，不发送referrer
  - strict-origin-when-cross-origin：
    - 对同源请求发送完整URL（不含参数）
    - 如果请求目标与当前页面一样或更加安全，发送origin
    - 如果请求目标不如当前页面安全，则不发送referrer
  - 如果请求目标不如当前页面安全，则不发送referrer

3. http-equiv和content属性的搭配使用

3.1. 理解：

可以被称作http响应头、http文件头，当浏览器请求某个文件时，首先会加载此响应（文件）头内的设置
http-equiv 属性在标签相当于HTTP的头文件，向浏览器传递有用的信息，该属性使用的变量的值会在 content 属性中规定

3.2. 作用：

http-equiv和content属性名称/值对,当服务器向浏览器发送文档时,会先发送这些名称/值对
该属性可以包含HTTP头的名称，属性的英文全称为http-equivalent。
它定义了可以改变server和user-agent行为的指令
主要是用来定义一些http参数的

3.3. 语法：

＜meta http-equiv="参数" content="参数变量值"＞

3.4. http-equiv可选参数：

content-type: 规定文档的字符编码

<!--//HTML5设定网页字符集的方式，推荐使用UTF-8-->
<meta charset="utf-8">

X-UA-Compatible: 浏览器采取何种版本渲染当前页面
- 用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）

 <!--指定IE和Chrome使用最新版本渲染当前页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

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

<!--值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。在W3C's Web 内容可访问性指南 中使用 "refresh" 会到导致失败。-->

<!-- 刷新当前页面 -->
<meta http-equiv="refresh" content="30"> 
<!--停留2秒钟后自动刷新到URL网址-->
<meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/">

pragma：禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出

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

cache-control: 清除缓存(再访问这个网站要重新下载！)
```
<meta http-equiv="cache-control" content="no-cache"> 
```
- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
expires: 设定网页的到期时间,一旦网页过期,必须到服务器上重新传输

<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 13 Jun 2022 22:33:00 GMT">

Set-Cookie(cookie设定) : 如果网页过期，那么存盘的cookie将被删除

<!--必须使用GMT的时间格式-->
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/">

default-style: 规定要使用的预定义的样式表

<!--content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。-->

<meta http-equiv="default-style" content="the document's preferred stylesheet">