您现在的位置是：首页 > 利用phantomjs来实现无需SSR的VUE网站SEO支持

利用phantomjs来实现无需SSR的VUE网站SEO支持

默认 2020-06-23 00:00 共2449人围观 来源：原创
seo   phantomjs  
简介

       Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
       这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

配置NPM将以下代码写入~/.npmrc

home=https://npm.taobao.org
registry=https://registry.npm.taobao.org
phantomjs_cdnurl https://npm.taobao.org/dist/phantomjs

安装phantomjs

注意在ubuntu1604发现不加--unsafe-perm会报权限不足错

sudo npm install -g phantomjs@2.1.1 --unsafe-perm
npm install -g pm2

安装vue-seo-phantomjs

# 克隆项目到本地
$ git clone https://github.com/lengziyu/vue-seo-phantomjs.git
# 安装express
$ cd vue-seo-phantomjs && npm i

测试是否可以

phantomjs spider.js 'https://www.baidu.com'

如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
启动之后或者用postman在请求头增加User-Agent值为Baiduspider，效果一样的。

部署上线
线上要安装node、pm2、phantomjs，nginx相关配置：

upstream spider_server {
  server localhost:3000;
}

server {
    listen       80;
    server_name  example.com;

    location / {
      proxy_set_header  Host            $host:$proxy_port;
      proxy_set_header  X-Real-IP       $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

      if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
        proxy_pass  http://spider_server;
      }
    }
}

 

优势：

  • 完全不用改动项目代码，按原本的SPA开发即可，对比开发SSR成本小不要太多；
  • 对已用SPA开发完成的项目，这是不二之选。

不足：

  • 部署需要node服务器支持；
  • 爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；
  • 如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，解决方法是判断访问的IP，是否是百度官方爬虫的IP。
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3cn0udci9ym88

相关文章

文章评论

栏目导航

点击排行

友情链接

官方微信