单页应用SEO技术分享

　　看到一篇非常好的干货，有关单页应用SEO技术的代码实现。下面是正文：

　　

单页应用的SEO是很头疼的事情，但不是不可解决的。本文没有采用prerender.io和phantom.js的方式（至少笔者

使用的vue.js没能成功），而是采用的网上的一套通行的思路，用后端渲染的页面来“欺骗”搜索引擎，从而完成整

个SEO的逻辑，这套代码已成功实现。笔者采用的后端是Node.js框架sails.js。而不是express，当时选择sails并没

有考虑到SEO的难度，但最终巧合的是sails完全胜任后端渲染。说下本文的主要步骤和思路：

1.后端生成渲染页面  2.前端vue.js去掉url中讨厌的#   3.搭建nginx，进行代理跳转，并解决vue.js去掉#后的404问题。

好了，上代码：

第一步，后端渲染：sails.js

1.config/routes.js
1  "GET /user/mainshow": {response: 'forbidden'},
2   'GET /mainshow/:id': {
3     controller: 'UserController',
4     action: 'mainshow',
5     skipAssets: true
6     },
2./api/controllers/UserController.js
mainshow: function(req, res) {
Towrite.query('select * from writeinfo where id=?', [req.param('id')], function(err, rs) {
      if (err) {
        console.log(err);
        res.send('err3');
      } else {
        if ((rs[0]!==undefined)&&(rs[0].picktype==0)){
         res.view('mainshow', {layout: 'rootVue',title:rs[0].title,nicheng:rs[0].nicheng,detail:rs[0].content})
        }
      }
    })

  },

 

 

ejs不难写，参照sails中文文档22条views的布局和变量

http://sailsdoc.swift.ren/

第二步：去掉#号

vue2.0 的 main.js
const router = new VueRouter({

  mode: 'history',

   routes

})

 

 

第三步：搜索引擎欺骗和输url访问404的解决

nginx的配置文件，我的是/etc/nginx/conf.d的default.conf

server{}中加上

location ~* html {
    
        rewrite .* /index.html break;

        }

 

即可取消404问题，但注意传上去的index.html全部去掉./成为/（资源路径）（针对vue.js用gulp打包加密上传至nginx设置的根目录下运行的方法）

server{}中再加上

location / {
     
     set $prerender 0;
        if ($http_user_agent ~* "Baiduspider|Googlebot|360spider|Bingbot") {
            set $prerender 1;
        }
        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;
 
        if ($prerender = 1) {
           
           
            proxy_pass  你的ip地址:1337;#1337是后端sails渲染的端口（即运行的端口）
        
        }
        
   }

 

即可实现对搜索引擎的欺骗，使他看到的是后端渲染的ejs页面（ejs传到服务端view文件夹下）

这里做一些解释：vue.js在非history模式下是会有#的（url中），导致前后端视图的url不一致，会出现即使被收录点

开也是404的头疼问题，因此要改成history模式；history模式在访问时输入url就会出现404错误，因此就要做一

rewrite（也可以采用将404改成主页的做法但你将损失报404的权利）；最后用代理跳转的方式可以解决蜘蛛无法抓

取虚拟DOM的问题。如果使用的是其他前后端框架，这套代码至少history模式的思想和nginx的配置都可以用得到。

 

本文转载自http://www.itormore.com/mainshow/260

按要求知识共享许可协议
本作品采用知识共享署名-相同方式共享 3.0 中国大陆许可协议进行许可。分享、演绎需署名且使用相同方式共享 。

posted on 2016-12-11 18:12  落水浮沙  阅读(185)  评论(0)    收藏  举报

导航