宇扬信息科技工作室

浅谈前端与SEO(2)突出重要内容

发布: 2013-03-14 08:40:21 | 作者: 酷猫 | 来源: 360UXC | 查看: 1048


截图取自于360搜索(so.com

虽然现在搜索对这三项的权重慢慢减小,但还是希望能够合理的写好他们,只写有用的东西,不要在这里写小说,要表达重点。

title:只强调重点即可,重要关键词出现不要超过2次,而且要靠前,每个页面title要有所不同,如下图:

description:把网页内容高度概括到这里,长度要合理,不可过分堆砌关键词,每个页面description要有所不同,如下图:

keywords:列举出几个重要关键词即可,也不可过分堆砌。

语义化书写HTML代码,符合W3C标准。

对于搜索引擎来说,最直接面对的就是网页HTML代码,如果代码写的语义化,搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标题,合理利用h1-h6,列表形式的代码使用ul或ol,重要的文字使用strong等等。总之就是要充分利用各种HTML标签完成他们本职的工作,当然要兼容IE、火狐、Chrome等主流浏览器。
我们来看看著名的禅意花园网站(http://www.csszengarden.com/),在没有样式的情况下,代码非常语义化,看起来很工整,加载不同的样式之后可以随心所欲的改变页面外观。

无样式情况下:

加载样式1:

加载样式2:

利用布局,把重要内容HTML代码放在最前。

搜索引擎抓取HTML内容是从上到下,利用这一特点,可以让主要代码优先读取,广告等不重要代码放在下边。例如,在左栏和右栏的代码不变的情况下,只需改一下样式,利用float:left;和float:right;就可以随意让两栏在展现上位置互换,这样就可以保证重要代码在最前,让爬虫最先抓取。同样也适用于多栏的情况。

重要内容不要用JS输出。

蜘蛛不会读取JS里的内容,所以重要内容必须放在HTML里。

尽少使用iframe框架。

搜索引擎不会抓取到iframe里的内容,重要内容不要放在框架中。

为图片加上alt属性。


当网络速度很慢,或者图片地址失效的时候,就可以体现出alt属性的作用,他可以让用户在图片没有显示的时候知道这个图片的作用。

可以显示图片时:

不能显示图片时:

需要强调的地方可以加上title属性。

保留文字效果。

如果需要兼顾用户体验和SEO效果,在必须用图片的地方,例如个性字体的标题,我们可以利用样式控制,让文本文字不会出现在浏览器上,但在网页代码中是有该标题的。
例如这里的“电视剧分类”,为了完美还原设计图,前端工程师可以把文字做成背景图,之后用样式让html中的文字的缩进设置成足够大的负数,偏离出浏览器之外,也可以利用设置行高的方法让文字隐藏。注意:不可使用display:none;的方法让文字隐藏,因为搜索引擎会过滤掉display:none;里边的内容,就不会被蜘蛛检索了。

HTML代码:

CSS代码:


利用CSS截取字符。

如果文字长度过长,可以用样式截取,设置高度,超出的部分隐藏即可。这样做的好处是让文字完整呈现给搜索引擎,同时在表现上也保证了美观。

评论 0 次    最新评论(评论内容只代表网友观点,与本站立场无关!)
发表评论
点击更换验证码  

·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!

·您在本站发表的作品,本站有权在网站内转载或引用!

·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。

About 宇扬联系我们付款方式友情链接网站地图版权声明投稿须知帮助