前端知识点之关于SEO

关于SEO

在之前的SPA和SSR文章中有提到过SEO，我也是第一次听到这个知识，就去csdn，掘金，知乎等各大博客平台查询了相关知识。对SEO的知识做了简单的了解。下面是我所了解的关于SEO。

搜索引擎工作原理

首先在了解SEO前，需要了解一些简单的搜索引擎的工作原理

在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“**搜索引擎蜘蛛”或“网络爬虫”**程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。

什么是SEO

SEO： Search Engine Optimization, 搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。SEO是提高你网站排名的一个很有效的方法，这个完善和优化你网站的排名因素的方法就是能影响搜索引擎的排名的算法。 因此，SEO是网络营销策略 （online marketing Digital strategy）和数字营销策略 （Digital Marketing strategy）中很重要的一个环节。SEO使你的网站获取得更多的流量（traffic）同时也可以提高你在搜索引擎的排名。那就意味你可以获取得更多的订单，更多的利润。

是不是每个搜索引擎的SEO算法都是一样的？

不完全相同，但相信逻辑是差不多的。

我们常用的搜索引擎有谷歌，必应，雅虎，百度，搜狗，360每一个搜索引擎的算法都不会公布出来的。都是需要不断的尝试和实践所累积的经验。因此需要根据你自己的市场需求来决定做那个搜索引擎的SEO。

SEO的分类

分类	介绍
白帽SEO	起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。
黑帽SEO	利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。

前端SEO规范

网站结构布局优化

一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。并且根据相关数据调查：如果访客经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

名称	内容
控制首页链接数量	网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好
扁平化的目录层次	尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
导航优化	导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
网站的结构布局	页面头部：logo及主导航，以及用户的信息。页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。页面底部：版权信息和友情链接。
利用布局，把重要内容HTML代码放在最前	搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。
控制页面的大小，减少http请求，提高网站的加载速度。	一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

标签优化

1. <title>标签，在搜索引擎中，权重最高。
2. <meta keywords>标签，页面关键词，3-5个最佳。（多了会起反效果）
3. <meta description>标签，网页描述，页面的描述信息，建议长度控制在 300字符左右，关键词中最核心的词汇控制出现在前150个字符内最佳。
4. 标签语义化，合理利用标签布局：header，nav，article，footer，ul，li，h1~h6 等（好的页面代码甚至不会出现一个div标签）
5. <a>标签：要加 “title” 属性加以说明，外链最好加上nofollow属性，避免它向别的网站输出权重。“搜索引擎蜘蛛”会忽略加了nofollow 的链接。
6. <h1>标签一个页面最好出现一次（多了会起反效果），权重仅次于title，用在最重要的内容，如信息标题。
7. <br>标签：最好只用于文本内容的换行
8. 表格应该使用<caption>表格标题标签
9. <img>标签，“搜索引擎蜘蛛”不识别图片，应使用 “alt” 属性加以说明。
10. <b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
11. 将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
12. 搜索引擎会过滤掉display:none的内容。

网站性能优化

1. 减少HTTP请求

   • 使用雪碧图（精灵图），多张图片合并到一张进行请求；

   • 使用静态资源缓存：服务器上静态资源未更新时再次访问不请求服务器；

   • 压缩img，css，js等文件 ；

   • 使用公共的css、js文件（base、common）；

2. 服务器端渲染

   • 服务端渲染不仅仅解决了seo和首屏加载过慢的问题，还能减少接口的暴露，前后端分离的弊端就是接口的对外暴露，导致别人可以抓取我们的接口，而服务端渲染可以做到至少一小部分不该暴露出去的接口是可以留在服务端的。

3. CDN加速

   • CDN通过将资源存储在更接近用户的位置，缩短到服务器的往返行程，加快页面加载时间来解决性能问题。

4. 将CSS放在页面顶端，JS文件放在页面底端

   • CSS的引用要放在html的头部header中，因为显示页面时要用到的，对于JS文件引用尽量放在页面后面，因为页面一般都是自上而下加载的，而js加载时会影响整个页面的显示速度，给人一种加载速度慢的印象。加载速度慢，对网站访问量是致命的。当然，特殊情况除外。避免使用CSS表达式与滤镜。
   • 另外：绝对不能用@import导入css或者js文件！

5. 合理的ajax请求

   • 对于返回内容相同的请求，没必要每次都直接从服务端拉取，合理使用* AJAX* 缓存能加快 AJAX 响应速度并减轻服务器压力。

6. 缩小 favicon.ico 并缓存

   • 有利于 favicon.ico 的重复加载，因为一般一个 Web 应用的 favicon.ico 是很少改变的。

7. 减少DOM数量和层级数量

   • HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和扁平化的层级