提示，本文暂时对百度收录有不确定性。(google/bing等收录成功，并能正常自定义title,meta,content)

单页应用在于seo上有较大局限

• 异步加载的数据
• 异步加载的组件

实现原理

• scrapy-splash：基于docker的无头浏览器，类似phantomjs（16年已经不再更新了），同时提供api可以获取网页内容（可以把他作为一个没有界面的浏览器，会按照正常浏览器的顺序打开网页加载依赖，发送请求，渲染界面）
• nginx或其他中间件中判断当前访问的请求头为baiduspider/googlebot之类的搜索引擎头，利用proxy_pass将请求转至自己写的node服务或者响应的服务
• 我们的node服务可以执行get请求向scrapy-splash获取经nginx转向得到的页面整体，将这个页面由node返回给搜索引擎，这里还可以补充诸如301等跳转的功能，自定义强度高

实现步骤

• 1.下载docker安装～splash，参考文章最后的安装链接
• 2.执行splash,值得注意的是对于单页应用需要关闭私有模式https://splash-cn-doc.readthedocs.io/zh_CN/latest/faq.html#how-do-i-disable-private-mode

      docker run -d -p 8050:8050 --memory=4.5G --restart=always scrapinghub/splash:3.1 --disable-private-mode --maxrss 4000-d后台运行 --memory最高占用内存为4.5G --restart崩溃重启 --disable-private-mode 用于处理单页应用的私有模式 --maxrss 内存缓冲
  

• 3.开启完毕之后你可以尝试一下,检测是否能渲染百度的界面
  • http://127.0.0.1:8050/render.html?url=http://www.baidu.com
• 4.至为关键的一步nginx配置

      upstream spider_server {server localhost:3000;}server {listen       80;server_name  www.test.com;# 当UA里面含有Baiduspider,或者相关的spider的时候，流量Nginx以反向代理的形式，将流量传递给spider_server，文件相关不需要处理set $prerender 0;if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|     W3C_Validator") {set $prerender 1;}if ($args ~ "_escaped_fragment_") {set $prerender 1;}if ($uri ~* "\.(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)") {set $prerender 0;}if ($prerender = 1) {proxy_pass  http://spider_server;}root /Users/dist; # 自己的dist目录try_files $uri $uri/ @router;   # 这个是history模式需要的index index.html index.html;}

  • 4.1 如何检测这个nginx配置有没错呢，自己拿postman设置个请求头为baiduspider发给自己的80看看能否转到3000端口呗～
• 5.node服务配置
  • 这一步相对简单，主要考虑缓存与301，这样下一次搜索引擎获取页面时的相对速度就能提升

  memory-cache控制缓存释放，在首次访问时采用cache.get(req.originalUrl)对当前的链接及对应数据进行缓存在下次访问时即可弹出cache.put(req.originalUrl,result.data)
  if (无效页面) {res.redirect(301,'www.xx.com')}

  • 我们可以采用pm2对该应用进行管理（负载均衡及挂机重启）

      pm2 start xxx --max_memory_restart 99999M
  

• 6.究极重要，超级有效的是在做完以上步骤之后最好为你的网站生成一个全网的sitemap!并提交到谷歌searchconsole百度站长！谷歌生效时间估计在3天内，百度。。。我至今3个月过去还不行（评分下降/海外地址太卡/目前方案不兼容百度/被判断作弊等）。但幸运的是我司只做海外
  • 相关内容
    • npm install sitemap node-schedule 每晚定时任务生成sitemap,保证新页面及时被google收录
    • pm2 xxxx 挂掉重启

   <url><loc>https://www.xxx.com/sitemap</loc><changefreq>daily</changefreq><priority>0.8</priority>
  </url>
  

参考文献

• www.deboy.cn/prerender-v… （对搜索引擎的请求头判断后基于prerender预渲染完毕后返回给搜索引擎，同时缓存，避免下一次对服务器的访问）
• ahrefs.com/blog/zh/seo… （深入理解谷歌搜索引擎的优化策略）
• www.jianshu.com/p/e1520ea19… （splash的基本操作,及安装过程）
• splash-cn-doc.readthedocs.io/zh_CN/lates… （文档！！重点）