前言
我这个博客架构使用的是前后端分离的模式, 前端项目独立, 后端提供数据接口, 使用 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 环境的可以去这里把项目下载下来 下载地址 https://github.com/prerender/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: 百度蜘蛛太懒了... 我想这个问题充钱应该就能解决吧!)
来源: https://juejin.im/post/5c7ce4b5f265da2dbc59ab2a