SPA单页面应用、先后端分离项目SEO优化的方法

原文地址：https://xeblog.cn/articles/9

前言

我这个博客架构使用的是先后端分离的模式，前端项目独立，后端提供数据接口，使用Ajax与服务器端接口交互，前端渲染接口返回的数据。这种模式很是不利于SEO优化，由于获取数据须要执行js代码，百度蜘蛛是执行不了js的，因此就算百度收录了个人博客，也不会有真实数据显示，显示的全是html里写死的一些文字。PS:听说Google蜘蛛是能够执行js的，但好像须要知足一些条件，此处不作叙述（由于我也不会）

下面这张图是未作优化前Google收录我网站时的信息

如何优化？

使用Prerender作预渲染 Prerender介绍请移步 prerender.io/

安装Prerender

Prerender是一个基于Node.js的程序，安装Prerender以前须要有Node.js环境。安装Node.js的过程此处不作叙述。。。哈哈哈。。嗝。

安装Prerender并启动

没有git环境的能够去这里把项目下载下来 下载地址

git clone https://github.com/prerender/prerender.git
cd prerender
npm install
#启动server.js， 默认监听3000端口
node server.js
复制代码

执行下面的代码，若是返回的是解析后的数据，恭喜你启动成功了

curl http://localhost:3000/你的网站全路径
复制代码

Forever 守护进程

Node.js的程序在命令窗口关闭后会中止运行，咱们须要将程序加入守护进程，让它一直工做着。。。forever。。（一直工做真是太幸苦了，明年奖励敬业福一张！哈哈哈）

forever 是个 what?

A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).

安装forever

详细教程请移步 github.com/foreverjs/f…

npm install forever -g   #安装
forever start server.js  #启动应用
forever list  #显示全部运行的服务 
forever stop server.js  #关闭应用
forever restartall  #重启全部应用
复制代码

咱们只需进入到 prerender 根目录下 使用 forever start server.js 命令就ok了 。。。这样它就有敬业福了

Nginx配置

咱们须要对百度、Google之类的蜘蛛请求作单独处理，让请求代理到 prerender，而对于普通用户的请求则直接访问原地址

主要配置以下

location / {
	# 表示是否须要代理
	set $prerender 0;
	# 代理地址
	set $prerender_url "http://127.0.0.1:3000";

	# 判断请求是否来自蜘蛛，若是是则表示须要代理
	if ($http_user_agent ~* "baiduspider|Googlebot|360Spider|Bingbot|Sogou Spider|Yahoo! Slurp China|Yahoo! Slurp|twitterbot|facebookexternalhit|rogerbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
 		set $prerender 1;
 	}
 
	if ($prerender = 1) {
		proxy_pass $prerender_url;
		rewrite ^(.*)$ /https://$host$1 break;
	}
}
复制代码

配置好后，使用 nginx -s reload 重载配置文件

稍后咱们测试一下效果

测试

正经常使用户访问测试：使用 curl 你的网站全路径 命令

如图，没有解析出真实数据

Google蜘蛛访问测试：使用 curl -H 'User-agent:Googlebot' 你的网站全路径 命令

解析成功！

文章地址REST风格

/articles/?id=xxx 这种风格的url对于蜘蛛们来讲并不友好，它们喜欢这样的 /articles/xxx

我是利用Nginx的rewrite重写功能实现REST风格的。 主要配置以下

rewrite ^(.*)/articles/(\d+)$ /articles/?id=$2 break;
复制代码

修改一下代理块，让蜘蛛访问rest url的时候改变一下跳转的url

/articles/xxx 访问的其实仍是 /articles/?id=xxx

利用Nginx的url重写功能，将请求跳转到真实地址，而浏览器的地址栏不会改变url

# 蜘蛛访问处理
if ($prerender = 1) {
	proxy_pass $prerender_url;
	rewrite ^(.*)/articles/(\d+)$ /https://$host/articles/?id=$2 break;
	rewrite ^(.*)$ /https://$host$1 break;
}
#正经常使用户访问REST地址的处理
rewrite ^(.*)/articles/(\d+)$ /articles/?id=$2 break;
复制代码

测试一下

最终SEO效果

Google效果特别好，Google蜘蛛简直太勤奋了，很是敬业！(PS:百度蜘蛛太懒了。。。我想这个问题充钱应该就能解决吧！)