途牛：前端工程师如何做SEO的URL？

　　途牛：前端工程师如何做SEO的URL？

　　我经常与不同职位的同事交流，发现他们对SEO作为流量渠道知之甚少。我什至做了一个简单的PPT来介绍SEO业务（稍后整理）。

　　同时，这些同事的工作对SEO非常有帮助，比如前端工程师，直接影响页面展示和抓取。

　　之前刚刚在途牛技术中心看到一篇文章的文章，讲到前端工程师是怎么做SEO的，所以想从SEO业务端的角度来梳理一下。

　　从业务角度来看，前端工程师所涉及的SEO推荐最重要的方面是：URL、移动友好性、性能、页面元素和内容呈现。

　　

　　一.URL 的三个元素

　　URL 是 SEO 工作的基础，也是一个容易被忽视的因素。 URL必须注意以下三个方面：

　　不同的页面内容应该有不同的 URL 而不是 TAB 呈现

　　网址必须是唯一的

　　URL 应该简短易读

　　首先来说说第一点。不同的内容使用不同的网址进行。当我们的前端工程师在处理一些主题时，他们经常使用 JS 来呈现网页内容，而不是单独的 URL。例如这个页面：

　　

　　当用户点击一个类别时，前端工程师会用新获取的内容更新原创页面，而不会生成新的 URL。这导致此频道只有一个网址。

　　SEO放置的时候，其实是按照页面的纬度来放置的。如果主题页面只有一个URL，即只能放置一个网页，而该类别的那些页面由于没有生成单独的URL而无法放置（一般放置的网页越多，SEO流量越大生成）。

　　其次，URL 的唯一性。一般情况下，URL 和网页是一一对应的。一个网页只有一个网址，一个网址只携带一个主题的网页。 （注意：如果一个网页有多个网址，可以使用canonical来指定规范网址）

　　最后，URL 应该简短易读。谷歌在整个网站中会使用URL来判断网页的级别，所以不要使用过长的URL。此外，简短易读的网址会给用户带来更好的体验并吸引用户点击（尤其是英文网址）。

　　注意：Google 不排除动态网址。例如，标准的 WordPress URL (?p=) 是动态的。但是需要解决参数过多，参数顺序不一致的问题。

　　参考文档：“保持简单的 URL 结构”

　　第二.手机端不容忽视

　　一些前端的朋友还是和以前一样，认为做好PC网页就够了。而且产品和老板都是用电脑浏览，没有问题。但事实上，在大多数国家和地区，移动流量已经超过了PC流量。

　　根据statcounter的数据，2016年11月移动端流量已经超过PC端，因此移动端网页也不容忽视。

　　

　　Google 推出了移动网络索引，该索引基于移动网页（以前基于 PC）。

　　对于移动网页，Google 有三种配置方式：自适应设计、动态内容提供和单独的 URL。

　　此外，谷歌还推出了AMP框架，可以缓存内容和静态文件，性能更快（国内百度和搜狗也兼容）。

　　参考文档：

　　“移动版网站搜索引擎优化 (SEO) 概览”

　　“AMP”

　　第一个三.speed/performance直接影响SEO

　　直接影响SEO的速度指标有两个，一个是TTFB，一个是网页打开时间。

　　TTFB 直接影响爬虫的爬取。第一，大部分爬虫还是爬取网页源代码，不渲染；其次，每个网站的抓取配额是有限的。更高效的爬虫访问将带来更多的收录数量。 ，从而产生流量。

　　（注：爬虫技术也在发展，现在可以识别出部分JS内容，但是因为效率低，这部分的比例还是比较小。）

　　网页的打开时间会影响用户的搜索体验，也是谷歌公开排名的因素之一。网页打开越慢，用户跳出率越高，就会被识别为BadClick，从而降低排名。

　　以下是站长官博文章关于速度对排名的影响：

　　

　　Google 在 PageSpeed 之后推出了 Lighthouse 项目，以帮助站长优化网页性能。根据我的实际测试，Lighthouse 的功能更强大，更符合当前的 web 技术，远远超过了之前的 YSlow 和 PageSpeed。

　　参考文档：

　　“灯塔介绍”

　　“使用pagespeedinmobilesearchranking”

　　四.page 元素收录三个文件

　　页面元素对搜索引擎优化也有影响，可以根据重要性分为三个级别：

　　一档：TDK

　　第二层：面包屑导航、结构化数据

　　第三个文件：H 标签、ALT 标签

　　

　　TDK 是 Title、Description 和 Keywords 三个标签的缩写。其中Title和Description最为重要，直接影响SEO（SERP）的搜索词和搜索结果展示。

　　面包屑导航和结构化数据也直接影响 SERP。

　　H 标签和 ALT 标签帮助搜索引擎了解网页的关键内容和图片。

　　参考文档：“在搜索结果中创建好的标题和摘要”

　　五.重要内容最好同时显示

　　谷歌官方文档曾经说过：

　　大多数“蜘蛛”程序以与 Lynx 相同的方式查看网站。如果由于 JavaScript、Cookie、Session ID、DHTML 或 MacromediaFlash 等技术导致无法在文本浏览器中看到整个网站，“蜘蛛”程序也可能会遇到这种网站 问题。

　　之前参加谷歌会议时，了解到Googlebot已经可以抓取解析简单的JS，并且可以通过CSS识别重要内容。但是从成本上来看，解析识别JS和CSS的效率还是很低的（比起仅仅抓取源码）。所以谷歌还是建议重要内容同步显示，而不是异步显示。

　　谷歌今年还引入了动态渲染技术作为临时解决方案。以下是动态呈现技术的原型：

　　

　　参考文档：

　　“方便Google处理的网站的创建步骤”

　　“实现动态呈现”