浅谈在不使用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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 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 变量类型的强制转换
2009/10/23 PHP
php操作redis缓存方法分享
2015/06/03 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
php创建类并调用的实例方法
2019/09/25 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue登录注册实例详解
2019/09/14 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python列表操作实例
2015/01/14 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
英雄儿女观后感
2015/06/09 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
golang为什么要统一错误处理
2022/04/03 Golang