单页面Vue网站无服务端实现静态化SEO

本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/vue_seo_spa_new_way/

思路

单页面做SEO自然很困难，因为所有的内容都是动态生成的，而爬虫不会去费劲抓回这些异步的数据。那么如果我做两个页面呢？

• 一个页面是首页 + 管理后台，首页需要实时更新，加一些meta就会被收录，且通常搜索引擎过来的流量很少是直接到首页；管理后台最适合单页面，不需要被搜索。以下称为非SEO页。
• 另一个页面是SEO页面，实质内容页，或者说是营销页。以下称为SEO页。

非SEO也就采用next-blogger现有的代码结构，全站Vue。

SEO页采用部分vue的方式，分块如下：

1. header 一些栏目的链接，设置为固定的即可
2. title，meta 在写文章时就指定，设置为固定
3. article 文章的主题内容，设置为固定
4. related article 相关文章，使用vue或者其他js，动态从服务器获取
5. comments 动态内容，使用vue或者其他js动态获取
6. category，tag 链接，动态内容，跳转到非SEO页

非SEO页与SEO页的跳转方式：

SEO页全部采用静态固定链接，在非SEO页跳转到SEO页之前，必须将该页面生成并发送到服务器

SEO页的生成：

1. 搭建vue工程做出该页面
2. 将js、css等静态文件先部署到服务器
3. 使用模板软件或者自己写函数，实现渲染功能
4. 将渲染软件部署到云函数或者本地服务器
5. 非SEO页的管理页面增加按钮，发送文章内容到渲染服务器
6. 将渲染之后的SEO页保存到静态文件托管文件服务器，发送方可以是渲染服务器，也可以是浏览器
7. 推送链接到CDN服务商
8. 检查链接是否可访问，推送链接到搜索引擎，原创内容等
9. 使用第三方内容平台的api，推送该内容到第三方内容平台，如知乎、csdn、博客园、脚本之家

技术内容与实现过程可以看使用Python jinja2和云函数做页面渲染

时间记录：

• 20190405 还需要做的事 footer的站点名称与header保持一致；header动态获取和链接； SEO页的更新： 只要将更新后的页面保存到静态文件托管服务器即可
• 20190408 完成编码并上线
• 20190619 完成编码过程博文撰写Nginx配置 我们实现页面静态化之后，如果刷新会出现404，这时候需要修改Nginx的一些配置。

Nginx的Rewrite实现router history 刷新 无404

一个典型的Nginx的配置为

[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf 
         server {
         listen 80;
         server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;
         access_log /var/log/testwx.log main;
         location / {
             try_files $uri $uri/ @router;
             index index.html;
         }
        location @router {
            rewrite ^.*$ /index.html last;
        }
}

这里的rewrite规则很重要，因为既要保证服务端在刷新时返回index.html文件内容，浏览器的地址栏又不能变。在这里解释了flag标志的含义，即last代表浏览器地址不变。在Apache中应该是PT。