浅谈在不使用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 导出table内容到Excel的简单实例
Nov 19 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
javaScript语法总结
Nov 25 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
layui弹出层效果实现代码
May 19 Javascript
Vue插槽原理与用法详解
Mar 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 破解防盗链图片函数
2008/12/09 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php 文件上传实例代码
2012/04/19 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php验证码生成代码
2015/11/11 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
js树形控件脚本代码
2008/07/24 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
中学教师师德师风承诺书
2015/04/28 职场文书
辞职信格式范文
2015/05/13 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang