参考链接

前端SEO优化

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

前端需要注意哪些SEO?

SEO

概述

  • 设置合理的**title**、**description**、**keywords**：搜索对着三项的权重逐个减小，
    title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
    description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description 有所不同；
    keywords 列举出重要关键词即可

  • 语义化的 **HTML** 代码，符合W3C规范：语义化代码让搜索引擎容易理解网页。

  • 重要内容 **HTML** 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

  • 重要内容不要用 **js** 输出：爬虫不会执行js获取内容

  • 少用 **<iframe>**：搜索引擎不会抓取iframe中的内容

  • 非装饰的 **<img>** 都加上 **alt** 属性
    alt 是 <img> 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标。

    • 减少 http 请求，例如懒加载
    • 减少重排
    • 使用 CDN

详细

SEO简介

SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。

分类：白帽SEO 和黑帽SEO。

白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。

黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。

本文针对白帽SEO，那么白帽SEO能做什么呢？

  1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
  2. 网站内容优化：内容与关键字的对应，增加关键字的密度；
  3. 在网站上合理设置 Robots.txt 文件；
  4. 生成针对搜索引擎友好的网站地图；
  5. 增加外部链接，到各个网站上宣传。

前端SEO规范

1、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构

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

  • 控制首页链接数量
    网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。
    但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
  • 扁平化的目录层次
    尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
  • 导航优化
    • 导航应该尽量采用文字方式
    • 在每一个网页上应该加上面包屑导航，
      好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；
      对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
  • 网站的结构布局
    • 页面头部：logo及主导航，以及用户的信息。
    • 页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，
      好处：留住访客，让访客多停留，
      对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
    • 页面底部：版权信息和友情链接。

特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

  • 利用布局，把重要内容 HTML 代码放在最前
    搜索引擎抓取 HTML 内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。
    例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用 float:left; 和 float:right; 就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。
  • 控制页面的大小，减少 http 请求，提高网站的加载速度。

2、网页代码优化

  • 突出重要内容—-合理的设计 **<title>**、**<description>** 和 **<keywords>**
    • <title> ：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的 <title> 标题中不要设置相同的内容。
    • <keywords>：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
    • <description>：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
  • 语义化书写 HTML 代码，符合 W3C 标准
    尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。
  • <a>：页内链接，要加 title 属性加以说明，让访客和 “蜘蛛” 知道链接作用。
    而外部链接，链接到其他网站的，则需要加上 rel="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
  • 正文标题要用 h1 标签，副标题用 h2 标签,
    h1 标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个 h1 标签，
    放在该页面最重要的标题上面。
    而其它地方不应该随便乱用 h 标题标签。
  • <img> 应使用 alt 属性加以说明
    <img src="cat.jpg" width="300" height="200" alt="猫" />
    当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。
  • 表格应该使用表格标题标签
    <caption> 标签定义表格标题，必须紧随 <table> 标签之后，只能对每个表格定义一个标题。
  • <br/> 标签：只用于文本内容的换行。
  • <strong>、<em> 标签 ：需要强调时使用。
    <strong> 标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，
    <em> 标签强调效果仅次于标签；
    <b>、<i> 标签：只是用于显示效果时使用，在SEO中不会起任何效果。
  • 文本缩进不要使用特殊符号 &nbsp，应当使用 CSS 进行设置， text-indent: 2em。
  • 版权符号不要使用特殊符号 &copy; ，可以直接使用输入法打出版权符号 ©。
  • 重要内容不要用JS输出，因为“蜘蛛”不会读取 JS 里的内容，所以重要内容必须放在 HTML 里。
  • 尽量少使用 iframe 框架，因为“蜘蛛”一般不会读取其中的内容。
  • 谨慎使用 display：none ：对于不想显示的文字内容，应当设置 z-index 或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉 display:none 其中的内容。

3、前端网站性能优化

  • 减少 http 请求数量
    • CSS Sprites
      国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的 background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。
    • 合并 CSS 和 JS 文件
      现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
    • 采用 lazyload
      俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
  • 控制资源文件加载优先级
    一般情况下都是 CSS 在头部，JS 在底部。
  • 尽量外链 CSS 和 JS（结构、表现和行为的分离），保证网页代码的整洁，也有利于日后维护 
    1. <link rel="stylesheet" href="asstes/css/style.css" />
    2. <script src="assets/js/main.js"></script>
  • 利用浏览器缓存
    浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
  • 减少重排（reflow）
    基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是reflow低效的原因。
    如果reflow的过于频繁，CPU使用率就会急剧上升。
    减少reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
  • 减少 DOM 操作
  • 图标使用 IconFont 替换
  • 不使用 CSS 表达式，会影响效率
  • 使用 CDN 网络缓存，加快用户访问速度，减轻服务器压力
  • 启用 GZIP 压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大
  • 伪静态设置
    如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果 url 中带有关键词效果更好。
    动态地址：www.360.cn/index.php
    伪静态地址：www.360.cn/index.html