前端对于页面SEO的一些总结

1,630 阅读5分钟

前端对于页面SEO的一些总结

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

SEO的分类:白帽SEO和黑帽SEO

  • 白帽SEO:使用正规符合搜索引擎网站质量规范的手段和方式,使网站在搜索引擎中关键词获得良好的自然排名称为白帽技术。
  • 黑帽SEO:黑帽技术是指在seo就是通过一些类似作弊的方法或技术手段,以不符合主流搜索引擎优化发行方针规定的手法来获得短时间内较好的搜索引擎优化的一种技术。

SEO有哪些优化?

  • 网页的Title、Keyword、Description
  • 网页结构布局优化
  • 网页代码优化
  • 网页的内容优化(文章原创最有效)
  • 合理利用robots.txt文件
  • 搜索引擎友好的网站地图
  • 给网站增加外链来源(最好是大型网站)

前端针对上面SEO优化处理

前端能在上面能处理最好的就是前面3个了,本文也是简单介绍前面3个处理方式。

网页的Title、Keyword、Description。

重要性:Title > Keyword > Description

  • <head>标签正确使用<title></title>,各个页面最好不同。title一般不超过80个字符,而且词语间要用英文“-”隔开

    1. 首页title写法,一般是“网站名称-主关键词或一句含有主关键词的描述”。
    2. 栏目页title写法,一般有2种:“栏目名称-网站名称”、“栏目名称栏目关键词-网站名称”。
    3. 分类列表页title写法,一般是“分类列表页名称-栏目名称-网站名称”,这个和栏目页差不多。
    4. 文章页title写法,一般有3种:“文章标题-网站名称”、“内容标题-栏目名称”、“内容标题-栏目名称-网站名称”。
  • 使用<meta name="keyword" content="">,列举网站的几个重要的关键字,每个关键字不宜过长,关键字之间要使用英文“,”隔开。

    1. 首页keywords写法,一般是“网站名称,主要栏目名,主要关键词”。
    2. 栏目页keywords写法,一般是“栏目名称,栏目关键字,栏目分类列表名称”。
    3. 分类列表页keywords写法,这个就比较简单了,只要将你这个栏目中的主要关键字写入即可。
    4. 文章页keywords写法,建议提取文章中的关键词。
  • 使用<meta name="description" content="">,网页内容的高度概括。description一般不超过150个字符,描述内容要和页面内容相关。

    1. 首页description写法,一般是将首页的标题、关键词和一些特殊栏目的内容融合到里面,写成简单的介绍。
    2. 栏目页description写法,一般是将栏目的标题、关键字、分类列表名称融合到里面,写成简单的介绍。
    3. 分类列表页description,这个就比较简单了,一般只需要把分类列表的标题、关键词融合在一起,写成简单的介绍。
    4. 文章页description写法,一般有2种写法,标准写法就和前面的一样,将文章标题、文章中的重要内容和关键词融合在一起,写成简单的介绍。还有一种是文章标题+文章首端。

网页结构布局优化

推荐使用扁平化结构。网站的目录层级要尽可能少,中小型网站最好不要超过3级。

  1. 首页的访问链接数量。首页应该有有效的链接,爬虫通过首页的连接到达内页,如果没有有效的链接就会直接影响网站的收录数量。但是不宜过多,中小企业网站首页的链接数量应该在100个以内
  2. 扁平化的目录层次。尽量让蜘蛛跳转3次就可以到达网站的任意一个内页。
  3. 导航SEO优化。导航可以分为主导航和父导航。导航应该使用文字。其次在导航的设计上应该使用面包屑导航。
  4. 页面的大小控制在100k以下。

网页代码优化

这个对于前端来说就是我们平时面试时说道“html语义化”,没错就是w3s标准里面的html标签的含义,传送门

我简单提几点,这些刚好都是平时可能容易忽略掉(包括我...)

  • <div><span>标签是html中语义化最低的标签,所以页面最好不要大片大片使用<div><span>
  • <a>标签要加上说明(title属性),对于指向外部网站的链接要使用rel="nofollow"属性告诉爬虫不要去爬其他的页面。``img标签的titlealt```同理。
  • <h1>正文标题<h1>标签,副标题要使用<h2>。可以使用CSS样式进行显式风格的设置。切记:不重要的地方不要随便使用<h1>标签。
  • 强调网页中的重要内容应该使用<strong>标签,<em>的权重次之。
  • 尽量少使用iframe框架,对搜索引擎不友好,不利于蜘蛛爬行和抓取的。
  • 重要内容不要使用javascript、Flash、动态URL输出。
  • 对于暂时不需要显示的元素应该使用z-index或者opacity属性而不是display:none;这样的代码,因为蜘蛛会过滤display属性为none的内容。

内容参考网上文章整理,仅限个人学习使用:

segmentfault.com/a/119000000…

www.mayihr.com/blog/182.ht…