meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原创。

  一个好的meta标签可以提高你的网站被搜索到的可能性,在搜索引擎优化方面需要好好利用meta标签的相关知识。

  meta标签可以分为两大部分:

  • http-equiv: http标题信息
  • name:页面描述信息

  http-equiv 类似于http的头部协议,作用是回应给浏览器一些有用的信息来帮助正确精确的显示网页内容。常用的http-equiv 类型有:Content-Type 和 Content-Language(显示字符集的设定)。

以下以示例代码介绍http-equiv的详细内容:

代码1:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  这段代码指定了HTML页面使用的字符编码为gb2312,即国标汉字码,不同的语言对应不同的charset,日文对应的字符集是:"iso-2022-jp", 韩文对应的字符集: “ks_c_5601”

代码2:

<meta http-equiv="Refresh" content="5; url=http://www.cnblogs.com" />

  这段代码让网页在指定的5秒内,跳转到所指定的页面,比如博客园首页,或者网页的自动刷新。

代码3:

<meta http-equiv="Expires" content="Mon,1,May 2015 00:00:00 GMT" />

  这段代码可以用于设定网页的到期时间,一旦过期必须到服务器上重新调用(GMT时间格式)。

代码4:

<meta http-equiv="Pragma" content="no-cache" />

  这段代码用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出。

代码5:

<meta http-equiv="Pics-label" content="" />

  这段代码用于网页等级的评定,在IE的internet选项中有一项内容设置可以防止浏览一些受限制的网站,而网站的限制等级就是通过meta属性的设置。

 代码6:

<meta http-equiv="windows-Target" content="_top" />

  这段代码可以强制页面在当前窗口中以独立页面显示,防止自己的网页被别人当成一个frame调用。Content选项:_blank、_top、_self、_parent

代码7:

<Meta http-equiv="Page-Enter" Content="revealTrans(Duration=0.5,tansition=10" />
 <Meta http-equiv="Page-Exit" Content="revealTrans(Duration=0.5,transition=12" />

  Page-Enter、Page-Exit是页面被载入和调出时的一些特效。相应的还有:Site-Exit和Site-Enter离开和进入网站。content表示的是网页过渡的效果设置,本例中的RevealTrans是动态滤镜的一种,可以用于进入和退出的效果,Duration表示滤镜特效的持续时间(单位:s), Transition:表示滤镜的类型,取值为0到23。

  注意:这些特效我自己做了一些测试,在Chrome, FF,下特效都显示不出来,原文(HTML页面过渡效果大全)中测试环境是IE5.5之上,不过我利用IE tester只在IE8中测试出效果了。

name,常见的有Keyword,Description,Robots等,下面逐一介绍。

Description: 

<meta name="description" content="这是我的一篇博客" />

  description中的content=" ", 是对网页概况的介绍,这些信息可能会出现在搜索结果中,因此要尽量的避免和网页内容不相关的描述。

  • 网页描述为自然语言而不是罗列很多关键词;
  • 描述内容为希望在搜索引擎检索结果中展示的摘要信息。
  • 必须和网页的标题内容,网页主题内容有高度的相关性。
  • 不要超过255个字符,搜索引擎一般都会索引Description中的前255个字符,

  有一个小技巧:如果你使用的网页编码是UTF-8,那么在Description中的标点符号最好都使用英文,例如英文的逗号、句号等。如果是中文的话,那么就使用中文的标点符号即可。

在Google网站管理员工具中,有个非常有用的工具——网页内容分析。它可以对你网站中所有的Description做出一个准确的判断和建议,例如哪些Description是重复的,哪些Description太短或者太长,哪些Description是和网页内容无关的等等问题。(Google网站管理员工具:http://www.google.com/webmasters/tools?hl=zh_CN

Keywords:

<meta name="keywords" content="博客,meta标签" />

  Keywords和description类似,也是用来描述一个网页的属性的,只不过列出的是关键词,而不是网页的摘要。各个关键词之间用逗号(英文逗号)隔开。

  • 要根据网页的主题和内容来选择适合的关键词,越是核心的关键词越是放到前面
  • 选择关键词既要考虑网页的核心内容相关,还要用户容易通过搜索引擎检索,尽量避免使用生僻的词来做关键字。
  • 不要堆砌过多的关键词,罗列大量关键词对于搜索引擎没有太大的意义,对于N多同类型的网站来说可能还会有副作用。

来看一下博客园的description和Keywords:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>博客园 - 开发者的网上家园</title>
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区"/>
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />

以上来自博客园首页的网页源代码中<meta>部分,参考一下。

Robots:

<meta name="Robots" content="All" />

  很多搜索引擎都是通过放出robot/spider搜索网站,robot/spider自动在www上搜索,当发现新的网站后,这些robot/spider会检索页面中的keywords和descript,然后加入到自己的数据库中。而Robots用来告诉机器人哪些页面需要索引,哪些页面不需要,content的参数有:all, none, index, noindex, follow, nofollow 。 默认情况下是all。

  • All:文件将被检索,而且页面的链接可以被查询。
  • none: 页面不被检索,页面的链接不可以被查询。
  • index: 文件将被检索,让robot/spider登录。
  • follow: 页面的链接可以被查询。
  • noindex:阻止页面被列入索引,页面的链接可以被查询(不让robot/spider登录)。
  • nofollow: 阻止对页面中任何链接进行索引   (注,这不同于超级链接上的nofollow属性,那个属性只是组织索引单独的链接。

  META信息是对页面本身给搜索引擎的一个说明。而有些时候,我们可能需要拒绝搜索引擎来访问我们网站的某个文件夹(例如后台文件夹),或者是要屏蔽一些搜索引擎的索引,我们就可以采取使用robots.txt文件来限制一些权限 。具体本文不再详述,可以自己搜索相关内容。

Author:

<meta name="Author" content="guihailiuli" />

这段代码可以说明网页的作者,content的内容可以是制作者或联系信息。

Copyright:

<meta name="Coptright" content="Created By guihailiuli" />

说明页面的版权。

Revisit-after:

<meta name="revisit-after" content="7 days" />

  设置robot/spiser的重访时间,一般大型网站,蜘蛛爬行频率相当频繁,导致服务器重压。因此做这样的限制是让蜘蛛在限定日期内重访,例如7 days就是七天访问一次

Distribubtion:

<meta name="Distribution" content="Global" />

  这段代码是指网站都在哪些地区范围出现,一般设置为Global即为全球范围。

补充:

  在百度,知乎的首页的meta标签中看到有下面这段代码:

<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">

HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用?

  X-UA-Compatible是自从IE8新添加一个位置,对IE8一下的浏览器是不识别的,通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。 

  网页中指定的模式优先于服务器通过HTTP Header指定的模式。

常用的例子:

<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=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  Edge告诉IE以最高的模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级别标准模式渲染,避免版本升级造成影响,也就是说:什么版本的IE就用什么版本的标准模式渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

使用这段代码强制IE使用Chrome Frame 渲染。有关Chrome Frame可以到百科上查看:Google Chrome Frame

其他注意:

  • “IE=Edge,chrome=1” , 的弊端是代码无法通过W3C的验证,不过如果只有这一个"错误"基本上也不会有什么不良的影响。
  • 根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话,它不起作用

有关上面那段代码更详细的参见这里:http://www.tuicool.com/articles/ra6Fjuj。

meta标签使用方法总结的更多相关文章

  1. Html的<meta>标签使用方法及用例

    浏览器支持 所有浏览器都支持 <meta> 标签. 定义和用法 <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和 ...

  2. Asp.net 后台添加Meta标签方法

    Asp.net 后台添加Meta标签方法包括keywords,CSS.JS 下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Pa ...

  3. 实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  4. 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  5. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  6. 最齐全的站点元数据meta标签的含义和使用方法

    最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...

  7. meta标签的使用方法(PC端)

    <!DOCTYPE html> <html lang="en"> <head> <!--设定页面使用的字符集--> <meta ...

  8. html meta标签属性与内容

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  9. meta标签中的http-equiv属性使用介绍(转载)

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

随机推荐

  1. MySQL储存过程

    储存过程 本文章原创,转载需注明出处. 前提: 在大型数据库中 来源: 为了完成特定功能的SQL语句集 定义: 储存在数据库中, 用户通过指定储存过程的名字并给出参数(带有参数的)来执行它 声明: 储 ...

  2. Mysql常用单词

    Create 建造,创造Data数据Database数据库(缩写db)If如果Not没有Exists存在Table表Drop 去掉Delete删除Show展示Select选择Default默认Uniq ...

  3. ef学习一

    学习内容:https://www.cnblogs.com/5ishare/p/5801229.html 注意点: 1.NuGet程序包引入ef,使用DbSet<>必须引入ef.本例EFCo ...

  4. .net Framework 源代码 · ScrollViewer

    本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单 看完本文,可以学会如何写一个 ScrollViewer ,如何定义一个 ISc ...

  5. 【Spring】1、Spring 中的监听器 Listener

    一.接口 1.EventListener 2.HttpSessionAttributeListener   继承EventListener接口 HttpSessionAttributeListener ...

  6. 性能监控(1)--linux下的top命令

    Linux下的监控工具 top命令 top命令能够实时显示系统中各个进程的资源占用情况,其输出信息分为两部分,前半部分为系统统计信息,后半部分是进程信息. 第一行是任务队列信息,它的结果等同于upti ...

  7. 关于在WP8.1中使用剪贴板的问题

    熟悉WindowsPhone8.0和WindowsPhone8.1开发的朋友都应该很清楚,在windowphone8.0的 开发时代下,我们可以很轻松的使用系统提供的API进行简单的文本拷贝和复制.但 ...

  8. 详解 ESLint 规则,规范你的代码

    在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的 一个前端程序猿的Sublime Text3的自我修养 ,这篇博客的朋友,肯定知道在当时我使用 SublimeLinter- ...

  9. 纯CSS绘制mac代码

    1.效果图 2.代码 <!doctype html> <html lang="en"> <head> <meta charset=&quo ...

  10. for each....in、for in、for of

    一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,a ...