在日常的工作中，大家都可能知道单页面的SEO不太友好，但是，大家有没有思考过，为什么单页面的SEO不友好呢？在单页面盛行的今天，有哪些策略可以用来规避掉这一缺点呢？想知道吗？今天盛非网络科技就来告诉你如何解决这一问题。

一  搜索引擎的工作原理

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

在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就会存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。

二  SEO介绍

SEO是搜索引擎优化(Search Engine Optimization)的英文缩写,意指在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多的流量,从而达成网站销售以及品牌建设的预期目标。

SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面,如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高访问量，最终提升网站的销售能力或宣传能力的技术。增加网站曝光率,提高整站权重，让用户更容易搜索到你的网站，进而带来客观的流量。通过这一策略引流的优点是：1. 低成本; 2. 持久性; 3. 不需要承担“无效点击”的风险。

SEO优化方向 

1网站设计优化

●网站主标题关键词优化，必须选择好关键词，一般以“一个核心词+三五个长尾词”组合成标题。

●网站布局的优化。一般来说，企业产品网站，主要是F型布局，内容繁多的网站以“扁平结构”布局为主。

●代码优化，就是板块、栏目代码，最好使用对应的简拼或者全拼。

2网站内容优化

●分析栏目关键词，有哪些长尾词，挖掘出来，做成表格的形式。然后，逐个分析长尾词都有哪些内容有关，形成二级长尾词。

●根据挖掘的长尾词，分析用户需求，挖掘与之有关的内容，整理出文章，发布在网站上，一定确保高质量文章。

三 为什么说单页面的SEO不友好？

因为单页面的情况下的页面中的很多内容都是根据匹配到的路由动态生成并展示出来的,而且很多页面内容是通过ajax异步获取的,网络抓取工具并不会等待异步请求完成后再行抓取页面内容,对于网络抓取工来说去准确模拟相关的行为获取复合数据是很困难的,它们更擅长对静态资源的抓取和分析。

四 如何解决单页面SEO不友好的问题？

明白了问题出在哪里,“搜索引擎蜘蛛”或“网络爬虫”程序更擅长对静态资源的抓取和更新,那我们就要采取相应策略生成尽可能多的静态资源,来让网络爬虫获取更多的数据,从而提升网站的搜索排名.目前市面上用的比较多的就是以下两种策略: 预渲染和SSR(服务端渲染)。

接下来，小编就来跟大家简单介绍下SEO的一些优化策略：

预渲染

预渲染是基于prerender-spa-plugin在项目构建时,通过无头浏览器模拟浏览器请求,将得到的数据插入给出的模板中，从而生成已经包含数据的html,这样有了更多的静态资源，网络爬虫可以抓取到更多的网站信息,提升网站的搜索排名。在使用react做官网时，考虑到单页面的SEO的问题和官网大多都是静态资源，采用了预渲染技术，在这里跟大家分享一下。

这里的预渲染是使用prerender-spa-plugin模块，结合webpack来生成一些路由对应的静态页面。我的项目是使用create-react-app脚手架构建的,在config-overrides.js里来进行自定义的webpack配置。

SEO有哪些优化方向 ?

服务端渲染就是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器, 服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬虫可以抓取到完整的页面信息,SSR另一个很大的作用是加速首屏渲染,因为无需等待所有的JavaScript都完成下载并执行,才显示服务端渲染的标记,所以用户会更快地看到完整渲染的页面。

1更快的构建速度,SSR是动态插入数据,并不会在构建时就去预加载数据,而是在输入url后在服务端请求,拿到返回的数据插入模板后再返回给客户端

2嵌套路由下的个性化页面加载,个性化页面无法进行预渲染,SSR可以解决

3更好的SEO

4更快地首屏加载速度(请求业务数据,和将数据render成html片段都在服务端进行了,浏览器负责加载资源,请求CDN资源,css渲染,到达时间缩短)

以下代码示例就采用最基础简洁的技术来实现一个简单的Vue SSR的示例

结合vue-server-renderer开发一个SSR项目,还是有一定挑战的,我也是折腾了一番才成功运行,会踩到的坑就是vue生成的Virtual Dom与服务端渲染的内容不匹配的问题。

遇到这个问题需要检查./entry-client.js中有没有进行状态同步

如果大家想要动手实现一个不急于Nuxt框架的SSR项目,小编建议大家可以先尝试自己实现一个小型项目，目前很多模块的版本比较低,有些新版本的api可能会有所变化，有些模块依赖node@9以下的版本，想要正确运行可能需要费点功夫，大家在学习的过程中遇到问题或者有什么建议可在评论区留言与我们沟通，希望我们都能成为更好的自己~