原文地址:https://xeblog.cn/articles/9
前言
我这个博客架构使用的是前后端分离的模式,前端项目独立,后端提供数据接口,使用 Ajax 与服务器端接口交互,前端渲染接口返回的数据。这种模式非常不利于 SEO 优化,因为获取数据需要执行 js 代码,百度蜘蛛是执行不了 js 的,所以就算百度收录了我的博客,也不会有真实数据显示,显示的全是 html 里写死的一些文字。PS:据说 Google 蜘蛛是可以执行 js 的,但好像需要满足一些条件,此处不做叙述(因为我也不会)
下面这张图是未做优化前 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/你的网站全路径
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 了
。。。这样它就有敬业福了
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:百度蜘蛛太懒了。。。我想这个问题充钱应该就能解决吧!)
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于