常见meta标签记录

Posted 前端问题记录

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常见meta标签记录相关的知识,希望对你有一定的参考价值。

关于meta

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta标签可分为两大部分:http-equiv和name变量。

 

content 基于内容,这个属性为 http-equiv 或 name 属性提供了与其相关的值的定义.

http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义.

 

常用meta

http-equiv

相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。

 

  • content-type:设定页面使用的字符集.

例子:

<meta http-equiv="content-Type" content="text/html; charset=utf-8">
GB2312时,代表说明网站是采用的编码是简体中文;

ISO-8859-1时,代表说明网站是采用的编码是英文;

UTF-8时,代表世界通用的语言编码;

PS:html5页面的做法是直接使用<meta charset="utf-8"/>
 

 

 
  • X-UA-Compatible:IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题.  

  例子:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=8"> 以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame. PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),
这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,
实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

 

  • refresh:自动刷新并指向新页面。  

   例子:

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
PS:2代表页面停留2秒后跳转到后面的网址上

 

  • expires:设定网页的过期时间。  

   例子:

<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
PS:必须使用GMT的时间格式

 

  • set-cookie:如果网页过期,那么自动删除本地cookie

    例子:

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">
PS:必须使用GMT的时间格式。
  • windows-target:强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用

    例子:

<meta http-equiv="Window-target" content="_top">

 

 

name

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

 

  • author:标注网页的作者.

  例子:

<meta name="author" content="zhn" />

 

  • keywords:页面关键词,用于被搜索引擎收录.

    例子:

<meta name="keywords" content="web前端,web学习, javascript">

 

  • description:页面描述,用于搜索引擎收录.

    例子:

    

<meta name="description" content="Mozilla 开发者网络(MDN)提供有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。它还记录了 Mozilla 产品的文档,例如 Firefox OS。">

 

  • viewport:用于控制页面缩放.

   例子:

  

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1, user-scalable=no">
详情可查看:http://www.cnblogs.com/lovesong/p/4355029.html

 

  • renderer:指定双核浏览器默认以何种方式渲染页面。

  例子:

  

<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式
PS:360浏览器支持

 

  • generator:说明网站采用的什么软件制作.

    例子:

<meta name="generator" content="Microsoft"/>

 

  • revised:网页文档的修改i时间.

    例子:

    

    
<meta name="revised" content="设计网, 6/24/2015"/>

 

    

  • robots:用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引.

  例子:

    

<meta name="robots" content="none"/>
取值:all|none|index|noindex|follow|nofollow, 默认all
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;
nofollow:文件将不被检索,页面上的链接可以被查询。

 

  • copyright:网站版权信息.

    例子:

  

    
  <meta name="copyright" content="本页版权zhn所有。All Rights Reserved" />

 

推荐使用的meta标签:

<!-- 设置文档的字符编码 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
<!-- 允许控制资源的过度加载 -->
<meta http-equiv="Content-Security-Policy" content="default-src \'self\'">
<!-- 尽早地放置在文档中 -->
<!-- 仅应用于该标签下的内容 -->
<!-- Web 应用的名称(仅当网站被用作为一个应用时才使用)-->
<meta name="application-name" content="应用名称">
<!-- 针对页面的简短描述(限制 150 字符)-->
<!-- 在*某些*情况下,该描述是被用作搜索结果展示片段的一部分 -->
<meta name="description" content="一个页面描述">
<!-- 控制搜索引擎的抓取和索引行为 -->
<meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
<!-- 关于你的网站主题的简短描述 -->
<meta name="subject" content="你的网站主题">
<!-- 非常简短(少于 10 个字)的描述。主要用于学术论文。-->
<meta name="abstract" content="">
<!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/">
 
<!-- 在客户端存储 cookie,web 浏览器的客户端识别 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">

 

 

 

  为移动设备添加 viewport

  

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --> width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz) content 参数: width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no) minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写: <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。 <meta name="viewport" content="width=device-width,user-scalable=yes"> 适配 iPhone 6 和 iPhone 6plus 则需要写: <meta name="viewport" content="width=375"> <meta name="viewport" content="width=414"> 大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,
大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。

 

SEO 优化部分

  

页面标题<title>标签(head 头部必须)
<title>your title</title>
页面关键词 keywords <meta name="keywords" content="your keywords">

页面描述内容 description <meta name="description" content="your description">

定义网页作者 author <meta name="author" content="author,email address">

定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 <meta name="robots" content="index,follow">

 

      

百度禁止转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加
<meta http-equiv="Cache-Control" content="no-siteapp" />

 

参考:
  http://www.cnblogs.com/herozhi/p/5993844.html
  http://www.cnblogs.com/lovesong/p/5745893.html
  https://developer.mozilla.org/zh-CN/

  

 

以上是关于常见meta标签记录的主要内容,如果未能解决你的问题,请参考以下文章

关于meta标签

覆盖一个常见的片段帮助其他标签片段

记录meta标签和npm模块化

meta标签的一些属性描述

比较有用的php代码片段

meta标签的作用