浅谈在不使用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判断浏览器类型的方法
Aug 07 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 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
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Python MD5文件生成码
2009/01/12 Python
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python之eval()函数危险性浅析
2014/07/03 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python实现kMeans算法
2017/12/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
openCV提取图像中的矩形区域
2020/07/21 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
旷课检讨书
2015/01/26 职场文书
婚宴领导致辞
2015/07/28 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android