浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)


Posted in Javascript onNovember 08, 2018

上一篇说了vue单页面解决解决SEO的问题

只是用php预处理了meta标签

但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题

那接下来可以更进一步的预填充内容了

预填充内容

这里依然使用php来实现

首先在php中拉取需要填充的数据,列表或是具体内容

修改拉取数据部分

$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);
  if($ret){
    $valKeywords = $ret['info'][0]['tt'].','.$valKeywords;
    $valDescription = $ret['info'][0]['txt'].' - '.$valTitle.','.$valDescription;
    $valTitle = $ret['info'][0]['tt'].' - '.$valTitle;
    $info = $ret['info'][0]['info'];
    $textData = @file_get_contents("你的文章路径") ?? $valDescription;
  }else{
    $textData='none';
  }
}

if(!$textData){
  //列表页拉取列表
  $ret = @json_decode(http_Req('http://127.0.0.1/api/Blog/getlist',['page'=>1,'type'=>0],'POST'),true);
  if($ret){
    $textData = '';
    foreach ($ret['info'] as $key=>$val) {
      $textData.='标题:'.$val['tt'].'.';
      $textData.='描述:'.$val['txt'].'.';
      $textData.='创建时间:'.$val['ctime'].'.';
      $textData.='浏览次数:'.$val['fl'].'.';
    }
  }
}

然后在html部分输出相关内容

在body下放一个div,并且隐藏掉他

<div class="pre-view" style="position:absolute;z-index: -99999;opacity: 0;top: -9999px;left: -9999px">
  <?php echo $textData; ?>
</div>

这样爬虫就可以抓取到我们的内容并且不影响前端渲染

优化vue构建

之前的构建是在构建完成后修改html为php,有点蠢

这里改下webpack的配置就好了

修改 build/webpack.prod.conf

new HtmlWebpackPlugin({
 filename: config.build.index,
 //这里改为index.php
 template: 'index.php',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  // more options:
  // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
}),

修改 config/index.js

build: {
 // Template for index.html
 // 这里改为index.php
 index: path.resolve(__dirname, '../dist/index.php'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: 'http://cdn.linkvall.cn/',

 productionSourceMap: true,

 devtool: '#source-map',

 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],

 bundleAnalyzerReport: true
}

这样构建时候的入口文件就变成index.php,构建完成的页面入口也为index.php

最终效果

等爬虫更新后就搜到我们的文章了

浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)

写在最后

  • 目前还是用php来实现主要是实现起来比较简单,对于像我一样后端是php的比较友好
  • 如果再使用node去监听个端口的话需要额外开销和额外的精力去维护
  • 如果后端是纯node的当然用node或者直接配置个SSR更好
  • 关于首页渲染问题推荐是用骨架屏

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

Javascript 相关文章推荐
js停止输出代码
Jul 20 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #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
You might like
牡丹941资料
2021/03/01 无线电
PHP制作图型计数器的例子
2006/10/09 PHP
PHP入门
2006/10/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python使用Matplotlib绘制分段函数
2018/09/25 Python
python读取图片任意范围区域
2019/01/23 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
介绍一下except的用法和作用
2015/01/22 面试题
教师师德师风个人整改方案
2014/09/18 职场文书
授权委托书怎么写
2014/09/25 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
求职自我评价怎么写
2015/03/09 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
iPhone13将有八大升级
2021/04/15 数码科技