在不使用ssr的情況下解決Vue單頁面SEO問題(2)

AlphaWallet 發布于2019-08-23 12:55 / 2958人閱讀

摘要：上一篇說了單頁面解決解決的問題只是用預處理了標簽但是依然沒有內容填充所以對于內容抓取依然有些乏力只是解決了從無到有的問題那接下來可以更進一步的預填充內容了預填充內容這里依然使用來實現首先在中拉取需要填充的數據列表或是具體內容修改拉取數據部分

上一篇說了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更好

關于首頁渲染問題推薦是用骨架屏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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