5个给前端工程师的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=）就是动态的。但要解决好参数过多、参数顺序不一致的问题。

　　参考文档：《保持简单的网址结构》https://support.google.com/webmasters/answer/76329?hl=zh-Hans&ref_topic=9460495

第二.移动端不能忽视

　　有一些前端的朋友还是之前的思维方式，认为把PC网页做好就行了。而且产品和老板都是用电脑浏览，没什么问题。但其实目前在大多数国家和地区，移动端流量已经超过PC端。

　　根据statcounter的数据，移动端流量在2016年11月就已经超过了PC端。所以，移动端网页一定不可忽视。

　　Google已经推出了移动网页索引，也就是以移动端网页作为主权重页面（之前是PC为主）。

　　对于移动端网页，Google有3种配置方式，分别是：自适应设计、动态提供内容、单独的网址。

　　另外，Google也推出了AMP框架，可以对内容和静态文件做缓存，并有更快的性能（国内的百度和搜狗也兼容）。

　　参考文档：

　　《移动版网站搜索引擎优化(SEO)概述》https://developers.google.com/search/mobile-sites/mobile-seo/

　　《AMP》https://amp.dev/zh_cn/

第三.速度/性能直接影响SEO

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

　　TTFB是直接影响爬虫的抓取。首先，大多数爬虫仍是对网页源码进行抓取，并不做渲染；其次，每个网站的抓取配额是有限的，爬虫更高效的访问，会带来更多的收录量，从而产生流量。

　　（注：爬虫技术也在发展，目前已经可以对一部分JS内容进行识别，但因为效率较低，这部分比例还比较小。）

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

　　以下是Webmaster官方博客关于速度影响排名的文章：

　　Google继PageSpeed之后，又推出了Lighthouse项目，帮助站长优化网页性能。从我实际测试来看，Lighthouse有更强大的功能，更符合现在的网页技术，远超之前的YSlow和PageSpeed。

　　参考文档：

　　《Lighthouse介绍》https://developers.google.com/web/tools/lighthouse/

　　《Usingpagespeedinmobilesearchranking》https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

第四.页面元素有三档

　　页面元素对SEO也有影响，按照重要程度可分为三档：

　　第一档：TDK

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

　　第三档：H标签、ALT标签

　　TDK是Title,Description,Keywords这3个标签的简称，其中Title、Description最关键，直接影响SEO的搜索词和搜索结果展现（简称SERP）。

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

　　而H标签、ALT标签则是帮助搜索引擎理解网页的重点内容和图片。

　　参考文档：《在搜索结果中创建良好的标题和摘要》https://support.google.com/webmasters/answer/35624?hl=zh-Hans

第五.重要内容最好同步展示

　　Google官方文档曾说过：

大部分“蜘蛛”程序查看网站的方式与Lynx一样。如果因应用了JavaScript、Cookie、会话ID、DHTML或MacromediaFlash等技术，而造成在文本浏览器中无法看到整个网站，则“蜘蛛”程序在抓取此网站时可能也会遇到麻烦。

　　我之前参加Google会议时了解到，Googlebot已经能抓取解析简单的JS，并能通过CSS识别重要的内容。但从成本来看，对JS和CSS的解析和识别，效率还是偏低（相比于只抓源码）。所以Google仍建议重要内容用同步展示，而不是异步。

　　Google也在今年推出了动态呈现技术，作为一种临时解决方。下面是动态呈现技术的原型图：

　　参考文档：

　　《打造方便Google处理的网站的步骤》https://support.google.com/webmasters/answer/40349?hl=zh-Hans

　　《实现动态呈现》https://developers.google.com/search/docs/guides/dynamic-rendering?hl=zh-cn