弧度SEO网站优化技巧.网络源码程序分享

当前位置:首页 > 随笔杂谈 > ·

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

  我这个博客架构使用的是前后端分离的模式,前端项目独立,后端提供数据接口,使用Ajax与服务器端接口交互,前端渲染接口返回的数据。这种模式非常不利于SEO优化,因为获取数据需要执行js代码,百度蜘蛛是执行不了js的,所以就算百度收录了我的博客,也不会有真实数据显示,显示的全是html里写死的一些文字。PS:据说Google蜘蛛是可以执行js的,但好像需要满足一些条件,此处不做叙述(因为我也不会)
  
  下面这张图是未做优化前Google收录我网站时的信息
  SPA单页面应用、前后端分离项目SEO优化的方法
  如何优化?
  
  使用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:百度蜘蛛太懒了。。。我想这个问题充钱应该就能解决吧!)

版权保护: 转载请保留链接: https://www.huduseo.com/seozd/451.html

1 条回应

注册为本站用户,登录后才可以发表评论!

  1. 6662019-6-21 · 3:07

    长沙弧度SEO轻博客,陪你看看SEO优化区块!长沙SEO【网站优化技术】_长沙网络推广_长沙弧度seo网络公司