详解在不使用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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
canvas绘制多边形
Feb 24 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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内存缓存实现方法
2015/01/24 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python CSV模块使用实例
2015/04/09 Python
python删除列表中重复记录的方法
2015/04/28 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
九州传奇上机题
2014/07/10 面试题
《绿色蝈蝈》教学反思
2014/03/02 职场文书
快递员岗位职责
2014/09/12 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
撤诉状格式范本
2015/05/19 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书