meta标签

meta标签是页面head标签中一个辅助性的标签,最常见的用途便是指定页面编码。然而,meta标签的功能不单限于此,可以设置其属性实现多种功能。

<!--more-->

1. meta标签简介

首先来看一下meta标签的定义:

meta标签用来存储描述页面文档属性的元信息,比如作者、日期、网页描述和关键词、页面刷新等。而元信息保存在meta标签的属性中,一般以名称/值得形式成对传递。

也就是说,元信息的名称保存在meta标签的一个属性中(即name属性或http-equiv属性,暂时称作名称属性),而元信息的值保存在meta标签的另一个属性中(即content属性)。下面分别介绍这两个名称属性和与之对应的content属性。

2. name属性

name属性的作用是将content属性关联到一个名称,在通常情况下,可以自由地设置name的属性值(但是建议最好是使用富有意义的名称)。除此之外有几个特殊的name值,会被浏览器特殊对待。

2.1. viewport

这是一个移动设备上的概念,我也是由于项目需要才了解这个属性的。移动前端开发之viewport的深入理解这篇文章说的十分精彩,不妨移步阅读。

2.1.1. viewport概念

简单地说,移动设备上的viewport就是该设备显示网页的区域。由于网页的宽度不同,因此viewport即可能超出移动浏览器可视区,也可能小于浏览器可视区。一般情况下,为了能够正常显示PC端网页,浏览器的默认viewport为980px或者是1024px,带来的后果就是出现横向滚动条(或者其他类似页面可以左右滑动的效果)。

2.1.2. CSS像素与物理像素

最初我也以为css中的1px就等于屏幕的一个物理像素,这在桌面浏览器中大概无可厚非,然而到移动浏览器中就有了天壤之别。有两个因素决定了CSS像素与物理像素的区别:屏幕像素密度缩放

  • 随着技术发展,移动设备的屏幕像素密度越来越高(比如苹果的Retina屏幕),这意味着同样大小的手机屏幕上的css像素可能是物理像素的2倍甚至更多(即1css像素 = 2物理像素)。
    为了搞定这个问题可以做一个测试。使用iphone截一张图,然后使用PhotoShop查看,可以看见iphone5的屏幕宽度是320px,但是截图宽度确实640px,第一次碰见这个问题我甚至都不知道该怎么切图,到后面才明白。
  • 大多数移动设备都支持用户缩放功能。当页面放大一倍时,css像素所占据的物理像素也会增大一倍,而屏幕的物理像素至始至终都是不会变化的。

为了解决上面这两个问题,所以在上一节中所提到的默认viewport设置较宽,就是为了让移动端浏览器尽可能完整地显示所有网页。

2.1.3. 移动设备优先

那么问题来了,目前越来越多的网页是单独基于移动端开发的(比如最近的项目里面好几个都是微信项目页面)。既然是单独适配移动端,因此需要为页面指定一个非常理想的viewport,即不需要用户缩放也不需要横向滚动条,就能完整浏览整个页面。而这个指定的viewport就是meta标签中的viewport。 当然通过设置meta标签的name属性值为viewport只是告诉了浏览器这个页面是移动设备优先的,具体怎么设置完美的viewport呢?这时需要在content属性中显式设置viewpor对应的属性值。

2.1.4. viewport对应属性值

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

依次解释这条指令:

  • width=device-width表示viewport宽度等于移动设备宽度;
  • initial-scale=1.0表示页面初始缩放值为1,即不缩放;
  • maximum-scale=1.0表示最大缩放为1;
  • user-scalable=0表示不允许用户进行缩放。

上面提到的缩放,是相对于初始viewport来进行缩放的。关于默认缩放值,有一个特别需要注意的地方:

在iphone和ipad上,无论你给viewport设的宽的是多少,如果没有指定默认的缩放值,则iphone和ipad会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

也就是所,默认缩放值的默认值,不一定会是1,因此为了达到移动设备优先的效果,最好显式指明。

2.1.5. 小结

虽然已经着手两三个移动端项目了,关于viewpor了解却很不充分,现在只是简单理清概念,仍需继续学习。

2.2. keywords与description

keywords即为搜索引擎爬虫所提供的页面关键字,所有关键字存储在content属性中,用逗号分隔。 description属性与keywords属性类似,也保存关于页面描述的信息并提供给爬虫获取,只不过其content属性值可以为一整段话而非几个词组。 上面这两个name属性值是SEO中十分重要的概念(貌似现在的搜索引擎对于关键字与页面描述的依赖度与信赖程度比较低了,大概是黑帽SEO的关系吧,然而我对于SEO的掌握小于等于0,也仅仅知道白帽黑帽灰帽子啥的...),大概恶补几个知识点。

2.2.1. 搜索引擎工作原理

这是一门庞大且复杂的学问,万万不敢妄下什么意见和结论。由于只是为了简单了解一下keywords的用途,因此简单涉猎一番。 搜索引擎的工作主要分为三部分:抓取网页,处理网页,提供检索服务。因此,搜索引擎必须知道并抓取网页,才能进行后面的操作。为了提高被搜索爬虫抓取的概率,因此诞生了SEO这一行业,而title,keywords与description是与之相关的十分重要的三个属性。将预先准备好的信息存放在meta标签中,这样爬虫在路过网页的时候就可以停下来好好的看一看这个网页,那么网页被抓取的几率是不是更大呢?(好吧,这只是我的YY...)

2.2.2. 页面关键字与描述内容

只需要明白一点,所有的关键字与页面描述的内容都是自定义的,也就是说想写啥就写啥,哪怕是跟页面毫无关联的废话也没关系(只要不怕被老板打死)。为了实现良好的SEO效果,根据网上的建议:

  • 现在的搜索引擎并不太重视keywords和description属性了(具体不重视到什么程度我也不知道,说不定有人云亦云之嫌);
  • 将最重要的关键字放在最前面
  • 关键字最好不要超过10个,描述段落不要超过100个字符,字数过多可能导致爬虫忽略;
  • 首页与分页面的keywords没有必要相同,根据页面的内容来定义“真正”的关键字;
  • 请遵守业内白帽子规则...(什么鬼);

2.2.3. 小结

SEO也是一门博大精深的学问,只是本人目前尚处于前端小白阶段,未能窥得其奥秘,曾经还纳闷博客都建了一个多月了百度都搜不到...未来的某一天一定会好好的学习学习SEO的。

2.3. name属性的其他值

2.3.1. author

声明网页的作者,可以是名字或者邮箱等。然而使用HBuilder的时候自动生成的作者信息是使用注释实现的,貌似这样更符合其他语言的风格

2.3.2. robots

给搜索爬虫之路,指定哪些页面是需要被索引的,对应的content值有all,none,index,noindex等

3. http-equiv

name只是将content属性关联到一个名称,而http-equiv主要是把content属性关联到http头部,向浏览器传回某些信息,用以帮助浏览器正确地显示网页内容。 http-equiv可以用来实现某些特定的功能。

3.1. expires

指定网页的有效日期,一旦网页过期则必须重新从服务器下载,其对应的content值是GMT的时间格式。 所谓GMY的时间格式,指的是“格林尼标准时间”:

var d = new Date();
console.log(d);    //Tue Aug 23 2016 21:53:22 GMT+0800 (中国标准时间)

3.2. Window-target

这个属性的含义是强制页面在当前窗口以独立页面显示。所谓独立页面指的是无法被嵌套在iframe或者frameset中使用。因此该属性可以阻止别人在框架中调用自己的页面(然而我的博客十天半个月也不会有人访问!)

3.3. content-Type和content-Language

用来指定页面的字符集和语言。不太明白与mate "utf-8"的区别

3.4. Cache-Control

该属性指定请求和响应遵循的缓存机制,关于页面缓存,暂时还不太了解,目前只知道一个304,泪奔...待我填完这个坑再回来搞定这里吧。

4. 最后

对于http-equiv属性非常不熟悉,因此只是简简单单过了一遍,目前关于Meta属性,最需要掌握的就是viewport了,因此移动端项目跟PC端还是有很大区别。 最后草草结尾,留下几个坑慢慢来填。

《CSS权威指南》读书笔记 CSS文本样式