Fork me on GitHub

前端工程与搜索引擎优化(SEO)

搜索引擎工作原理

当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。
  • 搜索引擎网站,比如百度,其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址都是由百度程序(爬虫)从互联网上下载收集而来的。网络爬虫每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果爬虫认为该关键词在数据库中没有对用户是有用的便存入数据库。反之,如果爬虫认为是垃圾信息或重复信息,就舍弃不要,继续爬行,寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时,就能检索出与关键字相关的网址显示给访客。
  • 由于一个关键字会对应多个网站,因此就出现了排序的问题,而与关键词越吻合的网址就会越靠前
  • 在爬虫抓取网页内容,提炼关键词的过程中,存在一个爬虫是否能读懂的问题。如果网站是Flash和JS生成的,则爬虫无法读懂网页,即使关键字再贴切也没法将网页存入数据库。相应的,如果网站内容是它的语言,那么爬虫便能看懂,它的语言即搜索引擎优化(Search Engine Optimization,简称SEO)。

SEO简介

  • 搜索引擎优化(Search Engine Optimization,简称SEO)是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。
  • SEO存在的意义:为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。
  • SEO可以分为白帽SEO黑帽SEO
    • 白帽SEO,旨在保持良好的互联网秩序,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获取合理的流量,这是搜索引擎鼓励和支持的
    • 黑帽SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量,这类行为大多是欺骗搜索引擎,一般搜索引擎公司是不支持与鼓励的
针对白帽SEO,可以做什么?
  1. 对网站的标题(title)关键字(keywords)描述(description)精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;
  2. 网站内容优化:内容与关键字的对应,增加关键字的密度,设置长尾关键字
    • 长尾关键词(Long Tail Keyword)是指网站上非目标关键词但也可以带来搜索流量的关键词。例如,目标关键词是服装,其长尾关键词可以是男士服装、冬装、户外运动装等。长尾关键词基本属性是:可延伸性,针对性强,范围广。
  3. 在网站上合理设置Robot.txt文件
    • 网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取。百度官方建议,仅当您的网站包含不希望被搜索引擎收录的内容时,才需要使用robots.txt文件。如果您希望搜索引擎收录网站上所有内容,请勿建立robots.txt文件。
  4. 生成针对搜索引擎友好的网站地图;
  5. 增加外部链接,到各个网站上宣传。

前端SEO

  • 通过网站结构布局优化网页代码优化,使前端页面既能让浏览器用户能够看懂,也能让爬虫看懂。
网站结构布局优化
  • 合理优化站点结构,我们要让爬虫看懂我们的网站,就不能设置太复杂的结构。使用扁平化结构,建立的网站目录层次越少越容易被收入。一般的中小型网站目录层次结构不要超过三层。
如何做到扁平化结构
  1. 控制首页链接数量
    • 网站首页是权重最高的地方,如果首页链接太少,没有“桥”,爬虫则无法继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。
    • 因此对于中小型企业网站,建议首页链接在100个以内,链接的性质可以包含页面导航、底部导航、锚文字链接等等,注意链接要建立在用户的良好体验引导用户获取信息的基础之上。
  2. 扁平化的目录层次,尽量让搜索引擎程序跳转3次就能到达网站内的任何一个内页。
    • 扁平化的目录结构,比如:“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”,通过3级就能找到香蕉了。
  3. 导航优化
    • 从搜索引擎优化角度来看,导航设计最好用文字。但为了用户体验,有时也可以搭配图片导航,但是图片代码一定要进行优化,<img>标签必须添加“alt”和“title”属性,告诉搜索引擎导航的定位,即使图片未能正常显示时,用户也能看到提示文字。
    • 其次,在每一个网页上应该加上面包屑导航,这样做的好处是:
      • 从用户体验方面来说,可以让用户了解当前所处的位置以及当前页面在整个网站中的位置,帮助用户很快了解网站组织形式,从而形成更好的位置感,同时提供了返回各个页面的接口,方便用户操作;
      • 从SEO方面来说,能够让网络爬虫清楚的了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率。
  4. 网站的结构布局(不可忽略的细节
    • 页面头部:logo及主导航,以及用户的信息。
    • 页面主体:左边正文,包括面包屑导航及正文;右边放热门文章及相关文章,好处:
      • 留住访客,让访客多停留;
      • 对“蜘蛛”而言,这些文章属于相关链接,增强了页面相关性,也能增强页面的权重。
    • 页面底部:版权信息和友情链接。
  5. 分页处理
    • 栏目内有多条记录时,我们会进行分页处理。
    • 分页导航推荐写法:“首页 1 2 3 4 5 6 7 8 9 下拉框”,这样“蜘蛛”能够根据相应页码直接跳转,下拉框直接选择页面跳转。
    • 而不推荐,“首页 下一页 尾页”这种写法,特别是当分页数量特别多时,“蜘蛛”需要经过很多次往下爬,才能抓取,会很累、会容易放弃。
  6. 控制页面的大小,减少http请求,提高网站的加载速度。
    • 一个页面最好不要超过100k,页面太大,加载速度慢。当速度很慢时,用户体验不好,留不住访客,并且一旦超时,网络爬虫也会离开。
网页代码优化
  1. <title>标题:
    • 标题要强调重点,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<title>不要设置相同的内容。
  2. <meta keywords>关键词标签:
    • 列举出几个重要关键字即可,不要过分堆砌。
  3. <meta description>网页描述标签:
    • 需要高度概括网页内容,切记不能太长,不要过分堆砌关键词,每个页面的描述也要有所不同。
  4. 对于<body>中的标签,要遵循代码语义化
    • 在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和爬虫都一目了然。比如:h1-h6 是用于标题类的,<nav>标签是用来设置页面主导航的,<span>标签是html里面最没有语义的等。
  5. <a>链接标签:
    • 对于页内链接,要加 “title” 属性加以说明,让访客和网络爬虫知道。
    • 对于外部链接,链接到其他网站的,则需要加上rel=”nofollow” 属性, 告诉爬虫不要爬取该链接,因为一旦爬虫爬了外部链接之后,就不会再回来了。
  6. <h1>标题标签:
    • 正文标题要用<h1>标签:因为爬虫认为它最重要,若不喜欢<h1>的默认样式可以通过CSS设置。
    • 尽量做到正文标题用<h1>标签,副标题用<h2>标签, 而其它不重要的地方不应该随便乱用<h>标题标签。
  7. <p>标签与<br>标签:

    • 爬虫读到<p>标签就知道这是一个段落,而对于<br>标签,默认该标签只用于文本内的换行,例如:
      1
      2
      3
      4
      5
      <p>
         第一行文字内容<br/>
      第二行文字内容<br/>
      第三行文字内容
      </p>
  8. 表格应该使用<caption>标签。

  9. <img>应使用”alt”属性加以说明,因为爬虫对图片的读取有限。
  10. <strong><em><b><i>标签:
    • <strong><em>标签是在需要强调时使用。
    • <strong>标签在搜索引擎中能够得到高度的重视(权重NO.1),它能突出关键词,表现重要的内容。
    • <em>标签强调效果仅次于<strong>标签。
    • <b><i>标签:只是用于显示效果时使用,在SEO中不会起任何效果。
  11. 文本缩进不要使用特殊符号&nbsp;,应当使用CSS进行设置(text-indent)。版权符号不要使用特殊符号&copy;可以直接使用输入法,拼“banquan”,选择序号5就能打出版权符号©。
  12. 巧妙利用CSS布局,将重要内容的HTML代码放在最前面,爬虫是从上到下进行内容关键词抓取,最前面的内容被认为是最重要的。
  13. 重要内容不要用JS输出,因为爬虫不认识。
  14. 尽量少使用iframe框架,因为爬虫一般不会读取其中的内容。
  15. 谨慎使用display: none,对于不想显示的文字内容,应当设置z-index设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
  16. 不断精简代码,能用一个标签完成的就不要用两个。
  17. JS代码如果是操作DOM操作,应尽量放在</body>之前,html代码之后;JS 调用应该尽量放到网页底部。
    • 因为浏览器渲染HTML文件是从上往下渲染的,即先执行head标签里面的内容,再执行body标签里的,一行行渲染下去。无论当前JS代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JS执行过程耗时越久,浏览器等待相应用户输入的时间就越长,所以JS尽量放底部可以有一定的性能优化效果。
------ 本文结束 ------