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

本贴最后更新于 1996 天前,其中的信息可能已经时过境迁

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

前言

我这个博客架构使用的是前后端分离的模式,前端项目独立,后端提供数据接口,使用 Ajax 与服务器端接口交互,前端渲染接口返回的数据。这种模式非常不利于 SEO 优化,因为获取数据需要执行 js 代码,百度蜘蛛是执行不了 js 的,所以就算百度收录了我的博客,也不会有真实数据显示,显示的全是 html 里写死的一些文字。PS:据说 Google 蜘蛛是可以执行 js 的,但好像需要满足一些条件,此处不做叙述(因为我也不会)

image

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

优化前 Google 抓取的网站数据

如何优化?

使用 Prerender 做预渲染
Prerender 介绍请移步 https://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/你的网站全路径

image

Forever 守护进程

Node.js 的程序在命令窗口关闭后会停止运行,我们需要将程序加入守护进程,让它一直工作着。。。forever。。(一直工作真是太幸苦了,明年奖励敬业福一张!哈哈哈)

forever 是个 what?

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

安装 forever

详细教程请移步 https://github.com/foreverjs/forever

npm install forever -g   #安装
forever start server.js  #启动应用
forever list  #显示所有运行的服务 
forever stop server.js  #关闭应用
forever restartall  #重启所有应用

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

image

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;

测试一下

image

最终 SEO 效果

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

网站信息已被收录

  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 15 关注
1 操作
anlingyi 在 2019-05-19 12:46:20 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...