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

AlphaWallet 发布于2019-08-23 12:55 / 2934人阅读

摘要：上一篇说了单页面解决解决的问题只是用预处理了标签但是依然没有内容填充所以对于内容抓取依然有些乏力只是解决了从无到有的问题那接下来可以更进一步的预填充内容了预填充内容这里依然使用来实现首先在中拉取需要填充的数据列表或是具体内容修改拉取数据部分

上一篇说了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,并且隐藏掉他

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

优化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

最终效果

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

写在最后

目前还是用php来实现主要是实现起来比较简单,对于像我一样后端是php的比较友好

如果再使用node去监听个端口的话需要额外开销和额外的精力去维护

如果后端是纯node的当然用node或者直接配置个SSR更好

关于首页渲染问题推荐是用骨架屏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99088.html

在不使用ssr的情况下解决Vue单页面SEO问题

摘要：遇到的问题近来在写个人博客的时候遇到了大家可能都会遇到的问题单页面在时显得很无力，尤其是百度不会抓取动态脚本配合前后端分离无法让标签在蜘蛛抓取时动态填充单页面又是大势所趋，写起来也不止是一个爽，当然也可以选择多页面但即使是多页面在面对文章遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力，尤其是百度不会抓取动态脚本 Vue-Router...

Aceyclee 2019-07-01 10:51 评论0 收藏0
在不使用ssr的情况下解决Vue单页面SEO问题

摘要：遇到的问题近来在写个人博客的时候遇到了大家可能都会遇到的问题单页面在时显得很无力，尤其是百度不会抓取动态脚本配合前后端分离无法让标签在蜘蛛抓取时动态填充单页面又是大势所趋，写起来也不止是一个爽，当然也可以选择多页面但即使是多页面在面对文章遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力，尤其是百度不会抓取动态脚本 Vue-Router...

TerryCai 2019-07-25 14:29 评论0 收藏0
在不使用ssr的情况下解决Vue单页面SEO问题

摘要：遇到的问题近来在写个人博客的时候遇到了大家可能都会遇到的问题单页面在时显得很无力，尤其是百度不会抓取动态脚本配合前后端分离无法让标签在蜘蛛抓取时动态填充单页面又是大势所趋，写起来也不止是一个爽，当然也可以选择多页面但即使是多页面在面对文章遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力，尤其是百度不会抓取动态脚本 Vue-Router...

gxyz 2019-08-23 12:27 评论0 收藏0
在不使用ssr的情况下解决Vue单页面SEO问题(2)

摘要：上一篇说了单页面解决解决的问题只是用预处理了标签但是依然没有内容填充所以对于内容抓取依然有些乏力只是解决了从无到有的问题那接下来可以更进一步的预填充内容了预填充内容这里依然使用来实现首先在中拉取需要填充的数据列表或是具体内容修改拉取数据部分上一篇说了vue单页面解决解决SEO的问题只是用php预处理了meta标签但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无...

tomorrowwu 2019-07-01 10:54 评论0 收藏0
在不使用ssr的情况下解决Vue单页面SEO问题(3)

摘要：先说明下上一篇的方法存在作弊行为孤陋寡闻了以前没接触过这些果然不能投机取巧啊替代方法将原来放入隐藏标签的内容放到骨架屏中用预渲染这样页面就会先展示重要的内容然后再显示其他部分麻烦点的就是如果想要好看的话需要将相关的样式都粘过来写在最后虽然隐先说明下,上一篇的方法存在作弊行为孤陋寡闻了,以前没接触过这些,果然不能投机取巧啊替代方法将原来放入隐藏标签的内容放到骨架屏中用php...

fuchenxuan 2019-08-23 12:59 评论0 收藏0