使用Prerender进行SEO优化

一起探讨学习

每天给大家提供技术干货

博主技术笔记 https://notes.xiyankt.com

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star https://gitee.com/bright-boy/xiyan-blog

前言

使用Angular，Vue，React进行单页网站开发，用户浏览时浏览器动态解析JS，呈现出最终的页面，用户体验比较好，网站性能也提高不少。
但网络爬虫并不会动态解析Js，访问所有URL得到的只会是项目入口文件中的代码，不能得到具体的内容，也就无法做网站SEO。
使用Prerender.io做网站预渲染，可以将网站页面渲染之后再返回给网络爬虫，间接完成网页的解析。
Prerender相较于其他的解决方案，配置相对要简单一些，不用修改项目源码，代码零侵入，是一个不错的解决方案。

目标

搭建基于Centos 7 和 Nginx 环境的Prerender渲染服务，完成Vue项目中网页的预渲染

首先注册登录 Prerender.io，并且获得个人token

https://dashboard.prerender.io/

2.根据开发文档，配置对应的中间件，如Nginx，Apache等,我这里使用Nginx配置。

3.配置Nginx中间件，参考配置如下：

https://github.com/prerender/prerender-nginx

# Change YOUR_TOKEN to your prerender token
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile           on;
    keepalive_timeout  65;

    map $http_user_agent $prerender_ua {
        default       0;
        "~*Prerender" 0;

        "~*googlebot"                               1;
        "~*yahoo!\ slurp"                           1;
        "~*bingbot"                                 1;
        "~*yandex"                                  1;
        "~*baiduspider"                             1;
        "~*facebookexternalhit"                     1;
        "~*twitterbot"                              1;
        "~*rogerbot"                                1;
        "~*linkedinbot"                             1;
        "~*embedly"                                 1;
        "~*quora\ link\ preview"                    1;
        "~*showyoubot"                              1;
        "~*outbrain"                                1;
        "~*pinterest\/0\."                          1;
        "~*developers.google.com\/\+\/web\/snippet" 1;
        "~*slackbot"                                1;
        "~*vkshare"                                 1;
        "~*w3c_validator"                           1;
        "~*redditbot"                               1;
        "~*applebot"                                1;
        "~*whatsapp"                                1;
        "~*flipboard"                               1;
        "~*tumblr"                                  1;
        "~*bitlybot"                                1;
        "~*skypeuripreview"                         1;
        "~*nuzzel"                                  1;
        "~*discordbot"                              1;
        "~*google\ page\ speed"                     1;
        "~*qwantify"                                1;
        "~*pinterestbot"                            1;
        "~*bitrix\ link\ preview"                   1;
        "~*xing-contenttabreceiver"                 1;
        "~*chrome-lighthouse"                       1;
        "~*telegrambot"                             1;
    }

    map $args $prerender_args {
        default $prerender_ua;
        "~(^|&)_escaped_fragment_=" 1;
    }

    map $http_x_prerender $x_prerender {
        default $prerender_args;
        "1"     0;
    }

    map $uri $prerender {
        default $x_prerender;
        "~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)" 0;
    }

    server {
        listen       80;
        #域名
        server_name  example.com;
        #你的dist目录地址
        root   /path/to/your/root;

        location / {
            if ($prerender = 1) {
                rewrite (.*) /prerenderio last;
            }
            try_files $uri /index.html = 404;
        }
        # 后台接口
        location /xiyan/ {
             proxy_pass http://localhost:9000/;
        }
        location /prerenderio {
            if ($prerender = 0) {
                return 404;
            }

            proxy_set_header X-Prerender-Token YOUR_TOKEN;

            proxy_hide_header Cache-Control;
            add_header Cache-Control "private,max-age=600,must-revalidate";

            #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
            resolver 8.8.8.8 8.8.4.4;
            set $prerender_host "service.prerender.io";
            proxy_pass https://$prerender_host;
            rewrite .* /$scheme://$host$request_uri break;
        }
    }
}

4. 检测nginx配置，并重启nginx

nginx -s reload

5.安装node

wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz

tar -xf node-v14.15.4-linux-x64.tar.xz

mv node-v14.15.4-linux-x64 /usr/local/node

cd /usr/bin

ln -s /usr/local/node/bin/node node

ln -s /usr/local/node/bin/npm npm

node -v 

npm -v

6.安装Prerender服务

git clone https://github.com/prerender/prerender.git

cd prerender

# Phantomjs 官方的下载地址会超时，此处重新指定其下载地址为淘宝镜像
export PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs

npm install

7.安装Chrome

cd /ect/yum.repos.d/

vim google-chrome.repo

写入配置

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

# 国内推荐
yum -y install google-chrome-stable --nogpgcheck

默认情况下，root用户不能直接运行chrome，所以可以新建另一个用户如other来运行

cd /opt/google/chrome

su other

./chrome

8.启动Prerender.io服务

nohup node ./server.js &

9.验证网站