Prerender预渲染优化SEO

单页面应用的主要内容都依赖于JS的执行，当其首页面下载下来的时候，其实不是完整的页面，而是HTML + JS文件，浏览器提供执行环境于是页面被渲染了出来。用户在访问的时候体验会很好，但是对于搜索引擎的爬虫就不太友善了，因为他们不能执行JS，这时候Prerender就派上用场了，它可以帮忙把页面渲染完成之后再返回给爬虫工具，我们的页面也就能被解析到了。最近我尝试搭建了基于本地的Prerender + NGINX的预渲染服务，希望可以帮到大家。

前置条件

由于本地的Prerender服务需要有NodeJs环境支持，如果之前服务器环境没有NodeJs需要先进行安装，可参考官网。

安装Prerender

此处我们假定安装目录在 /opt/ 下

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

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

# 启动Server.js， 默认监听3000端口
node server.js

可以通过curl进行测试，看看返回的内容是不是解析后的内容

1 2	# 如果按照成功，通过3000端口访问后的页面内容是已经解析过的 curl http://localhost:3000/http://hostname.com/webpath

配置NGINX

我们假设项目的访问路径为 http://hostname.com/webpath/anything, 将所有/webpath/*的请求当做项目的入口地址。参考官方配置

我们只需要针对搜索引擎的访问进行Prerender预渲染，正常的浏览器访问我们避免通过Prerender进行渲染

location^~ /webpath/ {
set $prerender 0;
if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
set $prerender 1;
}

# 谷歌推荐的配置方式
if ($args ~ "_escaped_fragment_") {
set $prerender 1;
}

if ($prerender = 1) {
# 官方推荐通过$prerender变量来进行跳转来解决NGINX缓存
set $prerender "127.0.0.1:3000";

rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://$prerender;
}

# 此处，我们假设主页面html为 /index.html
try_files $uri$args /index.html;
}

在上面的NGINX配置中，我们针对请求参数包括 _escaped_fragment_ 也启用了Prerender服务，官方说明表示谷歌会通过这种方式来抓取单页面应用。而我们也可以借助这个特点很方便地测试配置是否正确：

1 2	# 不再需要直接访问 localhost:3000的地址了 curl http://hostname.com/webpath/anything?_escaped_fragment_=

在配置NGINX以前，以上返回的只是index.html的内容, 如果配置成功则会返回解析后的内容。

将Prerender加入守护进程

上面的功能虽然能运行起来了，但是Prerender服务是依赖于SSH终端的，如果这个终端被关闭，那么服务也就被关闭了，为此我们需要将Prerender加入守护进程。
我直接使用了Git上的一个Prerender守护进程模板，并将其配置成我的环境，如下：

#!/bin/sh
#
# chkconfig: 35 99 99
# description: prerender.js server for the given user
#

. /etc/rc.d/init.d/functions

APPNAME="Prerender"

# 用来运行Prerender服务的用户
USER="<user that runs prerender>"

# Node命令的路径，此处我直接配置为"node"，因为node已经加入全局变量
DAEMON="node"

# Prerender的安装目录，即是我们拷贝下来的Prerender文件夹目录，此处为 /opt/prerender
ROOT_DIR="<path to prerender>"

SCRIPT="$(basename $0)"
PIDFILE="/var/run/$SCRIPT.pid"

SERVER="$ROOT_DIR/server.js"
LOG_FILE="/var/log/prerender.log"
SHUTDOWN_WAIT=20

app_pid()
{
echo `ps -aefw | grep "$DAEMON $SERVER" | grep -v " grep " | awk '{print $2}'`
}

do_start()
{
echo -n $"Starting $SERVER: "
pid=$(app_pid)
if [ -n "$pid" ]
then
echo "$APPNAME is already running (pid: $pid)"
else
if [ ! -w $LOG_FILE ]
then
if [ ! -e $LOG_FILE ]
then
touch $LOG_FILE
fi
chown $USER $LOG_FILE
fi
echo "$APPNAME  is not running - starting it up!"
runuser  --shell=/bin/bash -l "$USER" -c "$DAEMON $SERVER >> $LOG_FILE 2>&1 &"
pid=$(app_pid)
echo $pid > ${PIDFILE}
do_status
RETVAL=$?
echo
[ $RETVAL -eq 0 ]
fi
return 0
}

do_wait()
{
echo "Waiting for process to exit";
pid=$(app_pid)
if [ -n "$pid" ]
then
let kwait=$SHUTDOWN_WAIT
count=0;
until [ `ps -p $pid | grep -c $pid` = '0' ] || [ $count -gt $kwait ]
do
echo -n -e "\nwaiting for processes to exit";
sleep 1
let count=$count+1;
done
fi
return 0
}

do_stop()
{
echo -n $"Stopping $APPNAME : "
pid=`ps -aefw | grep "$DAEMON $SERVER" | grep -v " grep " | awk '{print $2}'`
kill -9 $pid > /dev/null 2>&1 && echo_success || echo_failure
if [ -f ${PIDFILE} ]; then
rm ${PIDFILE}
fi
RETVAL=$?
echo
[ $RETVAL -eq 0 ]
}

do_status()
{
pid=$(app_pid)
if [ -n "$pid" ]
then
echo -n "$APPNAME is running (pid: $pid)"
echo_success
else
echo -n "$APPNAME is not running"
echo_failure
fi
echo
return 0
}

case "$1" in
start)
do_start
;;
stop)
do_stop
;;
status)
do_status
;;
restart)
do_stop
do_wait
do_start
;;
*)
echo "Usage: $0 {start|stop|restart|status}"
RETVAL=1
esac

exit $RETVAL

将此文件命名为 prerender, 并拷贝至 /etc/init.d/ 目录下。然后我们重新载入脚本:

# 服务新增文件可执行权限
chmod +x /etc/init.d/prerender

# 重新载入systemctl
systemctl daemon-reload

# 启动
service prerender start

后续，我们可以通过 service prerender start|stop|restart 来起停服务，同时Prerender也会随机启动。

http://codingfishman.github.io/2016/05/06/prerender%E9%A2%84%E6%B8%B2%E6%9F%93%E4%BC%98%E5%8C%96SEO/