移动前端第二弹:善用meta

2016/04/19 · CSS ·
Meta

原文出处:
杜瑶(@doyoe)   

Meta 标签与搜索引擎优化

2016/01/08 · HTML5 ·
Meta

原文出处:
静子(@静-如秋叶)   

当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

18个你可能不相信是用CSS制作出来的东西

2015/08/19 · CSS · 1
评论 ·
CSS

原文出处:
hongkiat   译文出处:9iphp   

图片 1

与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力。还有很多其他的事情,CSS也可以做的很好。由于它创建动画和交互的能力,CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。

浏览器就像一个空的画布,WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子,从原始字符到有趣的动画,有很多激励你自己将时间花费在CSS上。

前言

在移动前端第一弹:viewport详解中,我们讲了viewport,那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。

写过HTML的童鞋,应该都对这个不陌生,或用它来定义页面编码,或用它来定义搜索引擎抓取方式,或用它定义页面关键字,描述等等。

什么是Meta标签

Meta标签给搜索引擎提供了许多关于网页的信息。这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的。

你可以在网页的 <head>元素中发现<meta>标签。在过去,有人曾经问我它是否可以放在网页的<body>,最好不要这样做。如果<meta>标签被放在<body>位置,某些浏览器可能无法识别它们,也就相当于你创建了无效的标签。

通常情况下,<meta> 标签会包含一个name属性,用来设置元数据。元数据的值放在content属性里面。你可以在<meta>标签中使用各种名称/值对,让我们来看看其中的一些。

1. The Simpsons

Chris
Pattle使用纯CSS创建了Simpsons家族。他把每个角色的脸部拆分成很小的形状,然后又拼接回去。他甚至给角色的眼睛添加了动画来赋予它们生命力

图片 2

meta列表

好的meta使用,能更好地提高页面的可用性及被检索的几率。

这里并不会列出所有的meta使用方式,只挑选一些常用及实际意义比较大的讲讲,当然也包括一些厂商私有定制的。

 

你可以会遇到一些Meta标签

让我们运行一下在一个网页中发现的几个不同的 <meta> 标签。

2. Minions With Pure CSS

如果你看过电影《Despicable
Me(神偷奶爸)
》,那你一定对其中的Minion(小黄人)印象深刻。Amr
Zakaria用纯CSS实现了其中的几个Minion,它们会用闪烁的眼睛和友好的手势给你打招呼。

图片 3

常规

Meta Description

Meta
description标签可能是最有用的标签之一。顾名思义,它会给搜索引擎提供关于这个网页的简短的描述。代码如下:

JavaScript

<meta name=”description” content=”Everything you need to know about
meta tags for search engine optimization”/>

1
<meta name=”description” content=”Everything you need to know about meta tags for search engine optimization”/>

这个标签曾经在搜索排名中占有很大的权重,但随着算法的不断的更新升级,它的地位也逐渐降低。它虽然不会提高网站排名,但是,因为它会被用在搜索引擎的结果页,所以依然有用。

这也就意味着它仍然可以提高你的网页点击率。毕竟,当用户搜索的关键词与之相匹配时,会以粗体显示突出显示。这就是为什么一个好的页面说明
(利用关键字的)
可以显示更多与用户相关的信息,进而提高了点击率。推荐的description长度为160 个字符。

但是如果你没有使用description标签或者description标签为空时,会发生什么呢?搜索引擎仍会在搜索结果页显示出自己创键的一小段文字。大多数的结果都不是用户需要的,也就意味着你将失去用户点击网页的机会。

3. Broken neon sign

这是用CSS的 text-shadow
实现破碎的霓虹灯效果的例子。把鼠标放到单词上,注意字母“c”、“n”和“i”的变化。

图片 4

声明文档使用的字符编码

XHTML

<meta charset=”utf-8″ />

1
<meta charset="utf-8" />

该声明用来指定文档的编码,除了utf-8,可选值还有:ISO-8859-1、BIG5、iso-8859-2,
iso-2022-jp, iso-2022-kr, gb2312等

当然,你可能还见过使用另外一种方式来定义文档字符编码:

XHTML

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″
/>

1
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

相对于这种方式,更推荐你使用第1种,言外之意,就是推荐使用HTML5

Meta Robots

我们在之前的教程中已经接触过Meta
robots标签。如果你没有机会回去阅读它,这里有一段简短的介绍:

Meta
robots标签管理着搜索引擎是否可以进入网页,你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。例如:

JavaScript

<meta name=”robots” content=”noindex, nofollow” />

1
<meta name=”robots” content=”noindex, nofollow” />

这个 meta 标签告诉搜索引擎不要获取网页,并且阻止其进入链接。如果你不小心使用了两个矛盾的术语
(例如noindex 和index),谷歌会选择最具限制性的选项。

为什么这个标签会对搜索引擎优化(SEO)起作用呢?首先,它可以防止对拷贝内容的冗余抓取,例如页面的打印版页面。它也可能会对那些内容不完整的页面或者而存在私密信息的网页起作用。

4. Mmm… Cheese

这是一块奶酪还是?Hugo
Giraduel用CSS制作了这个3D的奶酪。我不知道你怎么认为,但是它看起来就像某种家居用品。

图片 5

声明页面刷新或跳转

XHTML

<meta http-equiv=”refresh” content=”10″ /> <meta
http-equiv=”refresh” content=”10; url=” />

1
2
<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

该声明用来指定页面自刷新或者跳转到其它页面,其中的时间单位是s

Title

专业的讲,title标签不是meta标签,但他们都放在相同位置。我之所以把title标签放在这里是因为它对搜索引擎优化很重要。

在所有的HTML文档中,title标签都是不可缺少的。它定义了整个文档的标题,如下所示:

JavaScript

<title>Title of the page</title>

1
<title>Title of the page</title>

简单而实用。标题通常会显示在两个不同的地方;浏览器的头部标签和搜索结果页。这就意味着title标签在点击率(CTR)和排名上有很重要的影响。

一个好的标题应该包含关键字,而且最好放在标题的开头部分。请记住,那些匹配到用户搜索的关键字会以粗体显示。

另一件你应该牢记在心的事情就是标题的长度。谷歌会限制标题为70个字符,所以偶尔你可能需要书写一个合适的标题。

Dan Shure发表过一篇很不错的关于标题的文章,叫are your titles
irresistibly click worthy and
viral?,包含了很多有意思的知识点。

5. Single Element CSS character

Hugo Giraudel的另一个作品,这次,他只用一个元素实现了8位字符。

图片 6

声明页面过期时间

XHTML

<meta http-equiv=”expires” content=”0″ /> <meta
http-equiv=”expires” content=”Wed, 26 Feb 1997 08:21:57 GMT” />

1
2
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

该声明用来指定页面的过期时间,一旦网页过期,从服务器上重新请求,其中时间必须使用GMT格式,或者直接是0(即不缓存)

其它一些Meta标签

讲解了一些常用的meta标签,下面让我们来看一些不经常使用的。

6. Viking Shield

这个一个由 LukyVj 创建的Viking盾牌。它做的太好了,以至于你很难看出它是用CSS而不是由图形编辑器做出来的。

图片 7

声明页面是否缓存

XHTML

<meta http-equiv=”pragma” content=”no-cache” /> <meta
http-equiv=”cache-control” content=”no-cache” />

1
2
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

上述语句都可以用来指定文档不被缓存。一些仍然在使用HTTP/1.0的可以使用第1条,第2条由HTTP/1.1提供,常用值还有:public,
no-cache, no-store等

Meta Content Type (charset)

meta content
type标签被用来声明网页的字符编码,为了防止浏览器产生编码问题最好加上这个属性。但是它不会影响搜索排名或点击率(CTR)。

你可能很熟悉下面长长的Content-type代码:

JavaScript

<meta http-equiv=’Content-Type’ content=’Type=text/html;
charset=utf-8′>

1
<meta http-equiv=’Content-Type’ content=’Type=text/html; charset=utf-8′>

现在我们也可以使用更简短的、向后兼容的声明模式:

JavaScript

<meta charset=”utf-8″ />

1
<meta charset="utf-8" />

这个标签应该放在任何包含文本元素的标签之前,包括我们已经讲解的title标签。

7. Fluid menu with transparent icon

这是一个独特的透明颜色滑块菜单,当鼠标滑过的时候会有一个菜单图标。

图片 8

声明作者信息

XHTML

<meta name=”author” content=”joy, dooyoe@gmail.com” />

1
<meta name="author" content="joy, dooyoe@gmail.com" />

Meta Keywords

这个标签在过去很重要,但是现在却没什么价值了。现在没有一个主流的搜索引擎使用meta
keywords来判断网页的内容了。

在meta
keywords标签里面,你可以存储几个关于网页内容的关键字。然而,它却不会提高你的排名。如果你想要实现它(尽管我不知道你为什么这样做)你可以用如下代码:

JavaScript

<meta name=”keywords” content=”meta tags,search engine optimization”
/>

1
<meta name=”keywords” content=”meta tags,search engine optimization” />

8. CSS Creatures

CSS
Creatures是由@bennettfeely制作的可以微笑、哭或者你想表达的其他表情。你可以选择牙齿、胡须、颜色、眼睛以及嘴巴来创建你自己。

图片 9

发表评论

电子邮件地址不会被公开。 必填项已用*标注