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也会随机启动。

扫描二维码关注公众号，回复： 1850207 查看本文章

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