单页面Web应用（SPA应用）SEO优化

单页Web应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

SPA被人追捧是有道理的，但是它也有不足之处。当然任何东西都有两面性，以下是卤煮总结的一些目前SPA的优缺点：优点无刷新界面，给用户体验原生的应用感觉。缺点不利于搜索引擎抓取。

SEO到底指的是什么意思？SEO是英文搜索引擎优化（Search Engine Optimization）的简称。它的目的非常简单，就是利用搜索引擎的排名原理对企业网站或者个人博客、门户或者社交论坛网站进行关键词排名。

按照百度百科对SEO的概述：搜索引擎优化，又称为SEO，即Search Engine Optimization，它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。

Angular、Vue、React，可谓妇孺皆知。随着单页面应用的普及，人们在感受其带来的完美的用户体验，极强的开发效率的同时，也似乎不可避免要去处理 SEO 的需求。Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现，虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。

这种解决方案其实是一种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

对于已有项目无需改动，服务端需要安装node、nginx。我找个一个可以使用的已有项目参考：https://github.com/lengziyu/vue-seo-phantomjs，克隆到本地。放到服务器d盘下，安装node后cmd，到你放置的目录下执行以下命令。

npm install -g express

npm install -g pm2

pm2 start server.js

upstream spider_server {
    server localhost:8081;
}
server {
    listen       80;
    server_name  localhost;
    
    location / {
      proxy_set_header  Host            $host:$proxy_port;
      proxy_set_header  X-Real-IP       $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

      if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
        proxy_pass  http://spider_server;
      }
      
      # web项目路径
      root   d:/web/dist;
      index  index.html index.htm;
    }
}

效果如下：