最近搞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">

最后

以上就是疯狂电灯胆为你收集整理的meta标签总结meta是什么？有什么作用呢？meta标标签下的属性的全部内容，希望文章能够帮你解决meta标签总结meta是什么？有什么作用呢？meta标标签下的属性所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。