Meta标签大全

Meta是html语言head区的一个辅助性标签。下面讲从3个方面讲解Meta标签。

一、优化

首先从搜索引擎优化方面来说。按照百度移动搜索优化指南2.0的要求，要想更好的优化，除了title要写的规范外，还有为每个页面添加不同的description，尽量不使用默认一样的描述。这里meta就起到了重要的作用。如下：

<meta name="keywords" content="" /><!-- 关键字 -->
<meta name="description" content="" /><!-- 描述 -->

除了要写描述外，做到终端适配可以实现百度移动搜索会对网站站给予优先排序的机会。Meta使用如下：

<meta name="applicable-device" content="mobile"><!-- 如果该网页只适合在移动设备上进行浏览 -->
<meta name="applicable-device" content="pc"> <!-- 如果该网页只适合在电脑上进行浏览 -->
<meta name="applicable-device" content="pc,mobile"><!-- 同时适合在移动设备和电脑上进行浏览 -->

二、兼容

在我们做PC站的时候最讨厌的就是360了，因为它是采用双核模式。兼容模式有可分好ie7、8、9、10等。我们都希望我们做页面最好是在极速模式或者兼容模式的最高版本下运行，这样的话用户体验会才会更好。Meta标签就给我们提供了一个解决方法。如下：

<meta name="renderer" content="webkit"><!-- 启用360浏览器的极速模式(webkit) -->
<!-- 告诉浏览器以什么版本的IE的兼容模式来显示网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

其中content="IE=edge"是永远以最新模式的IE版本来显示网页。为加强页面体验度，通常会混合着用。如下：

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="renderer" content="webkit" />

三、适配

我们在做H5页面时，如果不做设置，移动浏览器通常会自动调整页面大小。Meta也可以有效阻止移动浏览器自动调整页面大小。如下：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

这样可以保证页面宽度为设备宽度，页面保持原样，不放大缩小，禁止用户手动缩放。

四、其他Meta标签

<meta name="copyright" content="Copyright  2016 Dahe.cn Inc. All Rights Reserved." /><!-- 版权 -->
<meta name="robots" content="none">
<!-- robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。 -->
<meta name="author" content="小王"><!-- 标注网页的作者 -->
<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->

<!-- 以下meta标签不常用  start here -->
<meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 -->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<!-- 以下meta标签不常用  stop here -->

<meta http-equiv="expries" content="Wed, 26 Feb 2012 08:21:57 GMT" />
<!-- expires(期限) 可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。 必须使用GMT的时间格式 -->
<meta http-equiv="pragma" content="no-cache" />
<!--pragma(cach模式) 禁止浏览器从本地的缓存中调阅页面内容。 设定后访问者将无法脱机浏览 -->
<meta http-equiv="refresh" content="5;url="http://www.baidu.com" />
<!-- refresh(刷新)  定时让网页自动链接到指定URL，单位是秒 -->
<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Wed, 26 Feb 2012 08:21:57 GMT;path=/" />
<!-- set-cookie(cookies设定)。  定义Cookies。 -->
<meta http-equiv="window-target" content="_top" />
<!-- window-target(显示窗口的设定)。设置当前窗口页面显示方式。 如果设置成_top就会强制页面在当前窗口以独立页面显示，防止别人在框架里调用页面 -->

 

注：转载请注明出处，谢谢。不足之处还请博友多多指教！

转载于:https://my.oschina.net/xlily/blog/769784