常见meta标签记录

Posted 2020-09-17 前端问题记录

关于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/