Web Development

/ 0评 / 9/ 最后更新:2021-12-06
vue单页应用seo解决方案rendertron

需求场景

现在越来越多的前端项目是基于vue,react,angular做的单页应用,可是单页应用的一大痛点就是seo不友好,虽然百度统计支持单页应用,但是seo不行呀。

可行解决方案

目前有三种解决方案。方案一预渲染,方案二服务端渲染,方案三针对seo的渲染。方案一和方案二都会原有项目进行改动,其中方案二改动方案最大。所以目前来说,改动成本最小的就是方案三了。本文采用的方式就是针对seo渲染的方案三。

rendora和rendertron

目前有rendora和rendertron两种主流开源方案,rendora是基于go语言的,支持docker部署。rendertron是由google团队基于node开发的,背靠大树。从目前的star数以及更新状况来看,rendertron要更好些。rendora已经一年多没有更新,并且安装过程中有些bug还无法解决。

rendertron原理

rendertron会启动一个node项目,对请求进行拦截,如果是搜索引擎发来的请求,就会被拦截,通过puppeteer渲染想要请求的地址,并将渲染好的html返回给搜索引擎,而普通用户的请求还是转发到对应的后端服务器上

环境技术栈

操作系统ubuntu18.04
前端vue
后端接口nestjs
服务器nginx
seo预渲染rendertron

步骤一:rendertron安装启动

git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run build
npm run start

rendertron在启动过程中可能会报错,原因是puppeteer的环境没有安装完,需要参考puppeteer官方文档安装对应的包chrome-headless-doesnt-launch-on-unix
如果启动没有问题了,之后可以通过pm2加入后台进程

步骤二:配置nginx拦截搜索引擎

  location / {
        if ($http_user_agent ~* "bot|bing|yandex|duckduckgo|baiduspider|googlebot|360spider|sogou spider") {
            rewrite ^/(.*) /render/https://sz.urcloud.co/$1 break;
            proxy_pass http://127.0.0.1:3001;  #rendertron端口
        }
        try_files $uri $uri/ /index.html; 
    }
    location /api {
        proxy_pass http://127.0.0.1:3000; #后端api接口
    }

步骤三:测试搜索引擎访问和普通用户访问

通过postman在请求header中添加User-Agent:baiduspider来测试蜘蛛访问和普通用户访问,如果正常的话,可以看到搜索引擎访问返回的是渲染好的html页面。

后续说明

可以看到这样改只是修改了nginx配置以及新增了一个rendertron项目,对原有项目没有任何改动,rendertron官方是有node,python等后端语言的插件的,通过nginx转发到后端,在后端项目里面判断是否搜索引擎来决定是否转发url到rendertron项目下。这样会更好,不过对原有项目做了一些小的调整,感兴趣的同学可以去研究一下。

9

Leave a Reply

Your email address will not be published. Required fields are marked *