发表于: 2017-04-29 20:33:30

1 1113


【css-12】如何做好SEO优化

小课堂【郑州第96期】

分享人:董瑞


1.背景介绍

什么是seo?

SEO由英文Search Engine Optimization缩写而来,中文意译为“搜索引擎优化”。

它是指从自然搜索结果获得网站流量的技术和过程,是在了解搜索引擎自然排名机制的基 础上,对网站进行内部及外部的调整优化, 改进网站在搜索引擎中的关键词自然排名, 获得更多流量,从而达成网站销售及品牌建设的目标。

2.知识剖析

了解搜索引擎的抓取规则

  • 百度通过一个叫做Baiduspider的程序抓取互联网上的网页,经过处理后建入索引中。
  • 对网站抓取的友好性: 会制定一个规则最大限度的利用带宽和一切资源获取信息,同时也会尽最大限度降低对所抓取网站的压力。
  • 识别url重定向: 对互联网众多的url重新识别
  • 百度蜘蛛抓取优先级合理使用: 优先抓取的策略主要有:深度优先、宽度优先、 反链优先、PR优先。
  • 无法抓取数据的获取: 在互联网中可能会出现各种问题导致百度蜘蛛无法抓取信息,在这种情况下百度开通了手动提交数据。
  • 对作弊信息的抓取: 百度出台了绿萝、石榴等算法对作弊链接进行过滤,据说内部还有一些其他方法进行判断,这些方法没有对外透露。

  • 谷歌使用许多计算机来提取(或“抓取”)网站上的大量网页。
  • Googlebot 使用算法确定抓取过程:计算机程序确定要抓取的网站、抓取频率以及从每个网站抓取的网页数量。
  • 进行抓取时,Googlebot 会先查看以前的抓取过程所生成的一系列网页网址,包含网站站长提供的站点地图数据。
  • Googlebot 在访问其中的每个网站时,会检测各网页上的链接(SRC 和 HREF),并将这些链接添加到要抓取的网页列表。
  • 它会记录新出现的网站、现有网站的更新以及无效链接,并据此更新 Google 索引。

SEO需要做什么?

站长部分

  • 标题关键字描述
  • 网站内容优化
  • robot.txt:规定访问权限和范围
  • 网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接
  • 增加外部链接

站长部分2

  • 外部链接类别:博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性。
  • 外链运营:每天添加一定数量的外部链接,使关键词排名稳定提升。
  • 外链选择:与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。

3.常见问题

前端部分如何来优化?

4.解决方案(前端部分)

结构优化

  • 控制首页链接数量。太少太多都不好。多少呢?
  • 中小型网站:100个以内。可包含在页面导航,底部导航,等:不能凑链接而凑链接。
  • 最多纵向跳转三次。纵深型不推荐。超过三次最好能到达网站的任意地方。
  • 导航的seo 的优化:尽量文字方式。当然也可是图片:但是title & alt必须加。
  • 网页建议加上crumb导航,帮助爬虫了解所处位置。
  • (内容页)分页信息(首页1-10加下拉框;知道有多少页面。下一页)
  • 注意网站的加载速度。一个页面大小,推荐不超过100k。

代码优化

  • 标题:重点突出
  • meta keywords和meta description抓住重点,不过分堆砌
  • 语义化标签:合适位置使用合适标签。比如做菜单栏:用ul,li而不是div加span
  • a标签:加上title (链接说明);指向其他网站的链接:加上:rel="nofollow"(不计入权重)
  • h1最重要,觉得字体太大用css修饰,一定要有
  • br标签只用于文本换行。有时候占位置想用怎么办:用p标签包裹。p+br+/p
  • table用caption定义表格标题
  • img加上alt标签。爬虫对图片读取能力有限,通过该注释来方便读取
  • strong,em提升爬虫的关注度权重增加。b;i样式效果相同但是不引起关注

5.编码实战

(1)合理的利用title、description和keywords

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

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

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

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

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

无样式表:

有样式表:

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

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

(4)保留文字效果

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

(5)利用CSS截取字符

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

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

(7)尽量外链CSS和JS,保证网页代码的整洁,也有利于日后维护。

(8)使用CSS Sprites,减少HTTP请求。利用CSS Sprites技术可以把网页用到的切片合成到一张图上,这样做既减少了HTTP请求数,又使得样式图片一次加载,避免网页“白”的尴尬。

(9)为图片设置高度和宽度,可以提高页面的加载速度。可以在上线前,使用一些工具,把HTML、CSS和JS都压缩、格式化一下,可以减少页面大小。

(10)伪静态设置。如果是动态网页,可以开启伪静态功能,让蜘蛛“误以为”这是静态网页,因为静态网页比较合蜘蛛的胃口,如果url中带有关键词效果更好。

6.扩展思考

SEO工具

1、百度统计,可查看流量,用户通过搜索什么词进入网站,搜索词排名等等。
2、爱站网 www.aizhan.com 用户查看流量以及网站的运营状况。
3、http://link.chinaz.com/ 友情链接监测工具可以用下。

7.参考文献

参考一:参考姑婆网

参考一:segmentfault

参考一:angular 对seo不友好


PPT链接:

https://ptteng.github.io/PPT/PPT/css-12-seo-for-web.html#/

文本链接:

http://www.jnshu.com/daily/21774?uid=9388

视频链接:

https://github.com/ptteng/PPT





返回列表 返回列表
评论

    分享到