给前端工程师的五个SEO建议

给前端工程师的五个SEO提议!我经常跟每个职位的朋友沟通交流，发觉她们对 SEO 这一总流量方式掌握非常少。我乃至干了一个简易的 PPT ，用以详细介绍 SEO 业务流程(以后会分类整理)。

此外，这种朋友的工作中对 SEO 的协助挺大，例如前端工程师，立即危害页面呈现和抓取。

并且以前恰好见到途牛网研究中心有一篇讲前端工程师怎样做 SEO 的文章内容，因此想从 SEO 业务流程方的视角梳理一下。

从业务流程的视角去看看，前端工程师涉及到的 SEO 提议，最重中之重的有 5 个层面，分别是：URL、挪动友善性、性能、页面原素、内容呈现。

第一. URL 的三要素

URL 是 SEO 工作中的基本，也是非常容易被忽略的一个要素。URL 一定要留意下列三个层面：

不一样的页面内容要有不一样的 URL，而不是用 TAB 来展现

URL 要确保唯一性

URL 要简洁明了，有易读性

最先说第一点，不一样内容用不一样的 URL 来承揽。人们的前端工程师在做一些专题讲座的情况下，就常常用 JS 来展现网页内容，而没有用独立的 URL 来承揽。例如下边这一页面：

当客户点一下某一品类，前端工程师会用新获得到的内容去升级原来页面，而沒有转化成新的 URL。这就导致了这一频道栏目只有一个URL。

而 SEO 在推广的情况下，实际上是依照页面相对高度推广。假如这一专题页只有一个 URL，也就是只有推广一个网页，而类目地这些页面由于沒有转化成独立的 URL 而没法推广(一般来说，推广的网页越多，造成的 SEO 总流量越多)。

次之，URL 的唯一性。一切正常状况下， URL 和网页是一一对应的，一个网页只有一个 URL，一个 URL 也只承重一个主题风格的网页。(注：假如一个网页有好几个 URL，可以用 canonical 来特定标准网站地址)。

最终，URL 要简洁明了，有易读性。Google 会运用 URL 来分辨网页在全部网址内的等级，因此不能用太长的 URL。并且，简洁明了和可写的 URL 对客户也有更强的感受，吸引住客户点一下(英语 URL 更是如此)。

注：Google 并不抵触动态性 URL，例如 WordPress 的规范 URL (?p=)就是说动态性的。但要处理好主要参数过多、主要参数次序不一致的难题。

第二. 手机端不可以忽略

有一些前端开发的盆友還是以前的思维模式，觉得把 PC 网页搞好就可以了。并且商品和老板全是用电脑访问，没有什么难题。但实际上现阶段在大部分国家和地区，手机端总流量早已超出 PC端。

依据 statcounter 的数据信息，手机端总流量在 2016 年 11 月就早已超出了 PC 端。因此，手机端网页一定不容忽视。

Google 早已发布了挪动网页数据库索引，也就是以手机端网页做为自卫权重页面(以前是 PC 主导)。

针对 手机端网页，Google 有 3 种配备方法，分别是：响应式设计方案、动态性出示内容、独立的网站地址。

此外，Google 也发布了 AMP 架构，能够 对内容和静态数据文档做缓存文件，并有更快的性能(中国的百度搜索和搜狗搜索也适配)。

第三. 速率 / 性能立即危害 SEO

有两个速率指标值会对 SEO 有立即危害，一个是 TTFB，一个是网页打开时间。

TTFB 是立即危害网络爬虫的抓取。最先，大部分网络爬虫仍是对网页源代码开展抓取，并不做3D渲染;次之，每一网址的抓取名额是比较有限的，网络爬虫更高效率的浏览，会产生大量的百度收录量，进而造成总流量。

(注：网络爬虫也在发展趋势，现阶段早已能够 对一部分 JS 内容开展分辨，但由于高效率较低，这些占比还较为小。)

网页打开时间，会危害客户的检索感受，也是 Google 公布的排行要素之一。网页开启速率变慢，客户跳失率越高，会被评定为 Bad Click，进而减少排行。

下列是 Webmaster 官方网blog有关速率危害排行的文章内容：

Google 继 PageSpeed 以后，又发布了 Lighthouse 新项目，协助网站站长提升网页性能。从我具体检测看来，Lighthouse 有更强劲的作用，更合乎如今的网页技术性，远超以前的 YSlow 和 PageSpeed。

第四. 页面原素有三档

页面原素对 SEO 也是危害，依照关键水平可分成三档：

第一档：TDK

第二档：导航、结构化数据

第三档：H 标识、ALT 标识

TDK 是 Title, Description, Keywords 这 3 个标识的通称，在其中 Title、Description 最重要，立即危害 SEO 的搜索关键词和百度搜索呈现(通称 SERP )。

导航和结构化数据，也立即危害 SERP。

而 H 标识、ALT标识则是协助百度搜索引擎了解网页的重中之重内容和照片。

第五. 关键内容最好是同歩展现

Google 官方网文本文档曾说过：

绝大多数“搜索引擎蜘蛛”程序流程查询网址的方法与Lynx一样。假如因运用了JavaScript、Cookie、应用程序ID、DHTML或Macromedia Flash等技术性，而导致在文字电脑浏览器中没法见到全部网址，则“搜索引擎蜘蛛”程序流程在抓取此网站时将会也会碰到不便。

我以前报名参加 Google 大会时掌握到，Googlebot 早已能抓取分析简易的 JS，并能根据 CSS 分辨关键的内容。但从成本费看来，对 JS 和 CSS 的分析和分辨，高效率還是稍低(对比于只抓源代码)。因此 Google 仍提议关键内容用同歩展现，而不是多线程。