详解在不使用ssr的情况下解决Vue单页面SEO问题


Posted in Javascript onNovember 08, 2018

遇到的问题:

近来在写个人博客的时候遇到了大家可能都会遇到的问题

Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本

Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充

Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面

但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面

SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么

都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐

当然预渲染也不能解决这个问题

那么问题来了,我只是想让百度抓取下我的动态文章,但是配置个繁琐的SSR并不是最好选择

我的解决办法:

既然只是想让百度抓取下我的动态文章,其实就是让蜘蛛抓取我的静态页面时候,html的meta标签是已经填充好的

那么就很简单了,我们只需要实现一个极其简单的阉割版的SSR不就好了么

PS:我百度了很久没有找到相关的文章,不知道是不是我百度的姿势不对?

具体思路:

因为我的服务器后端语言是php,service是nginx,所以我这里展示的所有后端代码都是基于php,大家当然可以选择nodejs或者其他的语言去实现,这里提供个简单的思路

上面说到我们要实现个阉割版SSR,其实就是在服务器有请求过来的时候在静态html的meta标签上填充好数据然后返回给请求端

这里的实现都是基于已经构建好的Vue单页面,所以请先构建好一个Vue单页面

先把构建好的dist下的index.html改造下

在顶部将变量拿取到,因为接口都是现成的,所以偷个懒直接调取接口

<?php

$valDescription = '前端入门,进阶总结记录,个人日志博客,分享web学习经验的小窝。';
$valKeywords = 'web窝,前端,vue,js,博客,JavaScript,css,入门,教程';
$valTitle = 'web窝';

/**
 * 发送HTTP请求方法
 * @param string $url  请求URL
 * @param array $params 请求参数
 * @param string $method 请求方法GET/POST
 * @return array $data  响应数据
 */
function http_Req($url, $params, $method = 'GET', $header = array("Content-type: text/html; charset=utf-8"), $multi = false){
  if($method == 'POST'){
    $header = ["Content-type: application/x-www-form-urlencoded"];
  }
  $opts = array(
    CURLOPT_TIMEOUT    => 30,
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_SSL_VERIFYHOST => false,
    CURLOPT_HTTPHEADER   => $header
  );
  /* 根据请求类型设置特定参数 */
  switch(strtoupper($method)){
    case 'GET':
      $opts[CURLOPT_URL] = $url . '?' . http_build_query($params);
      break;
    case 'POST':
      //判断是否传输文件
      $params = $multi ? $params : http_build_query($params);
      $opts[CURLOPT_URL] = $url;
      $opts[CURLOPT_POST] = 1;
      $opts[CURLOPT_POSTFIELDS] = $params;
      break;
    default:
      throw new Exception('不支持的请求方式!');
  }
  /* 初始化并执行curl请求 */
  $ch = curl_init();
  curl_setopt_array($ch, $opts);
  $data = curl_exec($ch);
  $error = curl_error($ch);
  curl_close($ch);
  if($error) throw new Exception('请求发生错误:' . $error);
  return $data;
}
//分割当前请求的路径
$urlExp = explode('/',$_SERVER['REQUEST_URI']);
//如果当前的路径是文章内容
if(count($urlExp)>2 && $urlExp[1] == 'article'){
//请求当前文章的标题和描述
  $ret = json_decode(http_Req('http://127.0.0.1/api/Blog/getsinglelist',['tuid'=>$urlExp[2]],'POST'),true);
  $valKeywords = $ret['info'][0]['tt'].','.$valKeywords;
  $valDescription = $ret['info'][0]['txt'].' - '.$valTitle.','.$valDescription;
  $valTitle = $ret['info'][0]['tt'].' - '.$valTitle;
}
?>

将拿到的数据输出到meta标签上

<meta name="description" content="<?php echo $valDescription; ?>"/>
<meta name="keywords" content="<?php echo $valKeywords; ?>"/>

 
<title><?php echo $valTitle; ?></title>

然后把文件名改为index.php

写的很糙,反正就只有这一个功能,先扔到这

我的service是nginx,Vue-Router是history模式,所以当有html请求过来的时候我把所有原先转向index.html的请求都转向到了index.php

这样就实现了个阉割版的SSR

效果就像这样 web窝

每篇文章刷新的时候相应的meta标签都会提前填充好数据

配合nginx实现Vue-Router的history模式

当然只有history模式才有SEO的意义

只需要将nginx配置里原先转向index.html的地方改为index.php即可,Apache同理

location / {
  index index.php;
  alias /var/www/html/blog/;
  try_files $uri $uri/ /index.php;
}

关于后端接口请求的问题

因为我自己就一台服务器,后端语言是php

php所用的框架也需要伪静态

所以我的解决方式是用nginx配置根据二级域名,去代理所访问的路径

类似静态资源访问的都是cdn的二级域名,接口的请求访问的都是api的二级域名

server {
  listen    80;
  listen   443 ssl;
  server_name cdn.linkvall.cn;
  root     /var/blog;
}
server {
  listen    80;
  listen   443 ssl;
  server_name api.linkvall.cn;
  root     /var/api;
}

当然你可以简单的用请求的路径去配置

server {
  listen    80;
  listen   443 ssl;
  server_name cdn.linkvall.cn;
  root     /var;

 
location ~ ^/api/ {
alias /var/api;
}

 
location ~ ^/blog/ {
alias /var/blog/;
}
}

这样就可以把各自的资源路径区分开

写在最后

本来是打算用nodejs实现的,写一个npm包,跑一个node进程,然后nginx把请求反向代理到node端口,这样看上去更优雅

不过转念一想我的后端是php,直接代理到这个php文件可以省去写npm包的时间,就是构建好的html还要每次都更改下有一点点费劲,而且不优雅

这里更多的是提供一个思路,后面有时间了或许我会写一个npm包优雅的实现它

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
js脚本实现数据去重
Nov 27 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 #Javascript
Angular设置别名alias的方法
Nov 08 #Javascript
vue-cli安装使用流程步骤详解
Nov 08 #Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 #Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 #Javascript
Vue实现简易翻页效果源码分享
Nov 08 #Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 #Javascript
You might like
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Python内置数据类型详解
2014/08/18 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
学前教育专业毕业生自荐信
2013/10/03 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
医院病假条怎么写
2015/08/17 职场文书