浅谈在不使用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分页脚本
May 21 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
BootStrap 导航条实例代码
May 18 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
面试常见的js算法题
2017/03/23 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python异常处理总结
2014/08/15 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
综合办公室主任岗位职责
2014/04/13 职场文书
治安消防安全责任书
2014/07/23 职场文书
文明单位汇报材料
2014/12/24 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang