资讯中心

seo优化

首页 >技术资讯 > seo优化 >

SEO优化干货:meta属性详解

  meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果。

  meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等。

  name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类)。

  这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词)。

  meta的属性有两种:name和http-equiv。

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

  meta标签的name属性语法格式是:

  。

  其中name属性主要有以下几种参数:

  A、Keywords(关键字)

  说明:keywords用来告诉搜索引擎你网页的关键字是什么。

  举例:

  B、description(网站内容描述)

  说明:description用来告诉搜索引擎你的网站主要内容。

  举例:

  C、robots(机器人向导)

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

  content得参数有all,none,index,noindex,follow,nofollow。默认是all。

  举例:

  具体参数如下:

  信息参数为all:文件将被检索,且页面上的链接可以被查询;

  信息参数为none:文件将不被检索,且页面上的链接不可以被查询;

  信息参数为index:文件将被检索;

  信息参数为follow:页面上的链接可以被查询;

  信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;

  信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

  D、author(作者)

  说明:标注网页的作者

  举例:

  E、generator

  meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。

  F、COPYRIGHT

  meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。

  G、revisit-after

  revisit-after代表网站重访,7days代表7天,依此类推。

  http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

  meta标签的http-equiv属性语法格式是:;

  其中http-equiv属性主要有以下几种参数:

  A、Expires(期限)

  说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

  用法:

  注意:必须使用GMT的时间格式。

  B、Pragma(cache模式)

  说明:禁止浏览器从本地计算机的缓存中访问页面内容。

  用法:

  注意:这样设定,访问者将无法脱机浏览。

  C、Refresh(刷新)

  说明:自动刷新并指向新页面。

  用法://(注意后面的引号,分别在秒数的前面和网址的后面)

  注意:其中的2是指停留2秒钟后自动刷新到URL网址。

  D、Set-Cookie(cookie设定)

  说明:如果网页过期,那么存盘的cookie将被删除。

  用法:

  注意:必须使用GMT的时间格式。

  E、Window-target(显示窗口的设定)

  说明:强制页面在当前窗口以独立页面显示。

  用法:

  注意:用来防止别人在框架里调用自己的页面。

  F、content-Type(显示字符集的设定)

  说明:设定页面使用的字符集。

  用法:

  具体如下:

  meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;

  meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

  meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

  meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

  meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

  meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码;

  G、content-Language(显示语言的设定)

  用法:

  H、Cache-Control指定请求和响应遵循的缓存机制。

  Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

  ly-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

  Public指示响应可被任何缓存区缓存

  Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效

  no-cache指示请求或响应消息不能缓存

  no-store用于防止重要的信息被无意地发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

  max-age指示客户机可以接受生存期不大于指定时间(以秒为单位)的响应

  min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

  max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

  J、http-equiv="imagetoolbar"

  指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

  K、Content-Script-Type

  W3C网页规范,指明页面中脚本的类型。

  手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的Safari浏览器最新引进了viewport这个metatag,让网页开发者来控制viewport的大小和缩放,其他手机浏览器也基本支持。

  Viewport基础

  一个常用的针对移动网页优化过的页面的viewportmeta标签大致如下:

  width:控制viewport的大小,可以指定的一个值,如果600,或者特殊的值,如device-width为设备的宽度(单位为缩放为100%时的CSS的像素)。

  height:和width相对应,指定高度。

  initial-scale:初始缩放比例,也即是当页面第一次load的时候缩放比例。

  maximum-scale:允许用户缩放到的最大比例。

  minimum-scale:允许用户缩放到的最小比例。

  user-scalable:用户是否可以手动缩放

  这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:

  但令我好奇的是,此处这个标记后面竟然出现了chrome这样的值,难道IE也可以模拟chrome了?

  迅速搜索了一下,才明白原来不是微软增强了IE,而是谷歌做了个外挂:GoogleChromeFrame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是GoogleChrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器,谷歌这个墙角挖的真给力!

  而上文提到的那个meta标记,则是在是安装了GCF后,用来指定页面使用chrome内核来渲染。

  安装完成后,如果你想对某个页面使用GCF进行渲染,只需要在该页面的地址前加上gcf:即可,例如:gcf:

  但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,该如何进行呢?

  就是使用这个标记。

  标记用法:

  下面来简单讲解一下这个标记的语法。

  1.最基本的用法:在页面的头部加入

  用以声明当前页面用chrome内核来渲染。

  复杂一些的就是本文一开始看到的用法:

  这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果为安装GCF,则使用最高版本的IE内核进行渲染。

  2.通过修改HTTP头文件的方法来实现让指定的页面使用GCF内核进行渲染:

  在HTTP的头文件中加入以下信息:X-UA-Compatible:chrome=1

  在Apache服务器中,确保mod_headers和mod_setenvif文件可用,然后在httpd.conf中加入以下配置信息:

  BrowserMatchchromeframegcf

  HeaderappendX-UA-Compatible"chrome=1"env=gcf

  在IIS7或者更高版本的服务器中,只需要修改web.config文件,添加如下信息即可即可:

  1、Meta之viewport

  说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?

  viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。

  对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度莫,感觉应该是满屏的吧,事实呢?我们来看一下如下布局在iPhone上的显示情况。

  AppUE

  在iPhone上显示如图:

  因此我们必须改变viewport,我们就有如下几种属性值可以设置:

  width:viewport的宽度(范围从200到10,000,默认为980像素)

  height:viewport的高度(范围从223到10,000)

  initial-scale:初始的缩放比例(范围从>0到10)

  minimum-scale:允许用户缩放到的最小比例

  maximum-scale:允许用户缩放到的最大比例

  user-scalable:用户是否可以手动缩放

  对于这些属性,我们可以设置其中的一个或者多个,并不需要你同时都设置,iPhone会根据你设置的属性自动推算其他属性值,而非直接采用默认值。

  如果你把initial-scale=1,那么width和height在竖屏时自动为320*356(不是320*480因为地址栏等都占据空间),横屏时自动为480*208。类似地,如果你仅仅设置了width,就会自动推算出initial-scale以及height。例如你设置了width=320,竖屏时initial-scale就是1,横屏时则变成1.5了。那么到底这些设置如何让Safari知道?其实很简单,就一个meta,形如:

  设置了meat后我们页面将如此呈现了:

  好了,我们就可以按全屏来布局我们的页面了,不用再担心页面显示的很小了!

  2、Meta之format-detection

  你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

  telephone=no就禁止了把数字转化为拨号链接!

  telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

  3、Meta之

  apple-mobile-web-app-capable

SEO优化干货:meta属性详解

  这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

  加了该meta的情况:

  4、Meta之

  apple-mobile-web-app-status-bar-style

  作用是控制状态栏显示样式

  status-bar-style:black

  status-bar-style:black-translucent

  WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。

  开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。

  Webapp说白了就是一个针对Iphone、Android优化后的web站点,它使用的技术无非就是HTML或HTML5、CSS3、JavaScript,服务端技术JAVA、PHP、ASP。

  当然,因为这些高端智能手机(Iphone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP时,多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时,若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话,这也就失去了WEBAPP的本质意义了,且有些效果也无法实现的,所以在此又回到了我们的主题–webapp的布局方式和技术。

  在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap2.0。

  1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用

  1

  2

  3

  4

  第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

  user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小。

  (注意:据说HTCG7自身系统浏览器不支持这一条规则,能对页面进行放大,一旦放大导致页面布局错乱,解决方法:定义页面的最小宽度min-width,body{min-width:300px;})

  iOS7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏。

  第二个meta标签是ios设备(不只iphone)中的safari私有meta标签,它表示:允许全屏模式浏览,开启对WebAapp程序的支持。;

  第三个meta标签也是ios系统的私有标签,它指定在webapp状态下,ios设备中顶端的状态条的颜色;默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

  第四个meta标签表示:使设备浏览网页时对数字不启用电话功能(不同设备解释不同,itouch点击数字为存入联系人,iphone为拨打电话),忽略将页面中的数字识别为电话号码。

  若需要启用电话功能将telephone=yes即可,具体调用格式可以这样书写代码CallMe,若在页面上面有googlemaps,iTunes和youtube的链接会在ios设备上打开相应的程序组件。

  2、HTML5标签的使用

  在开始编写webapp时,哥建议前端工程师使用HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章的区域可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。

  3、放弃CSSfloat属性

  在项目开发过程中可以会遇到内容排列排列显示的布局(见下图),假如你遇见这样的视觉稿,哥建议你放弃float,可以直接使用display:block;

  4、利用CSS3边框背景属性

  这个按钮有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用CSS3编写,这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。

  5、块级化a标签

  请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能地保证用户的可点击区域较大。

  6、自适应布局模式

  在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、websafarik、chrome都能够正常地显示,你无需再次考虑设备的分辨率。

  7、学会使用webkit-box

  了解了自适应布局模式,有些同学可能还会问:如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。

  8、如何去除Android平台中对邮箱地址的识别

  看过iOSwebappAPI的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中1

  9、如何去除iOS和Android中的输入URL的控件条

  你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?

  答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

  1setTimeout(scrollTo,0,0,0);

  请注意,这句代码必须放在_window.onload里才能够正常地工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。

  10、如何禁止用户旋转设备

  我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!

  至少ApplewebappAPI已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。

  iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。

  11、如何检测用户是通过主屏启动你的webapp

  看过ApplewebappAPI的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下iphoneipodipodtouch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true,我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主屏这回事!

  12、如何关闭iOS中键盘自动大写

  我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

  13、iOS中如何彻底禁止用户在新窗口打开页面

  有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

  14、iOS中如何禁止用户保存图片\复制图片

  我们在第13条技巧中提到元素的-webkit-touch-callout属性,同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。

  15、iOS中如何禁止用户选中文字

  我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

  16、iOS中如何获取滚动条的值

  桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?

  通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

  17、如何解决盒子边框溢出

  当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式

  -webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

  18、如何解决Android2.0以下平台中圆角的问题

  如果大家够细心的话,在做wap站点开发时,大家应该会发现android2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。

  在对一个元素定义圆角时,为完全兼容android2.0以下的平台,我们必须要按照以下技巧来定义边框圆角:

  1\-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);

  2\如果对针对边框做样式定义,比如border:1pxsolid#000;那么-webkit-border-radius这属性必须要出现在border属性后。

  3\假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次地覆盖左下角和右下角,

  -webkit-border-bottom-left-radius:0;-webkit-

  border-bottom-right-border:0;否则在android2.0以下的平台中将全部显示直角,还有记住!-webkit这个前缀一定要加上!

  19、如何解决android平台中页面无法自适应

  虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:

  1

  如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!

  20、如何解决iOS4.3版本中safari对页面中5位数字的自动识别和自动添加样式

  新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari仍然会对页面中的5位连续的数字进行自动识别,并且将其重新渲染样式,也就是说你的css对该标签是无效的。

  1

  我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签,我们都做了如下改写:

  1.00元

  21、如何检测iOS4、iOS5或是iOS6?

  iPhone4带来的革新,retinadisplay绝对是最吸引眼球的一项。正是依赖这视网膜显示屏,iPhone4的分辨率达到了640×960pixels,不过为了保持向下兼容性,它采用的仍然是320×480points。也就是说,在不进行缩放的情况下,显示普通图片时,它会用4个像素来显示图片中的1个像素;而在显示retina图片时,每个像素都对应图片中的1个像素。

  如此一来,老的应用无需修改就可以在iPhone4上运行了——虽然显示效果差了点,但是不会出现只有左上角那1/4的区域有内容的情况。

顶部