「GoogleBotは優秀なので、サーバーサイドレンダリングしなくてよい」
という嘘はやめてくれよ。

まだ vue.js 使ってる人が少ないからか、SEO気にする人はSSRするからか知らんが
情報がねぇ！

ということで、検索エンジン対策。

注意したいのは、スマホでもPCでも正常に動くのに、BOTんときだけエラーを吐く。
という場合。
かなりの確率である。

・モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja

ここでデータが表示されるかどうか。
まぁ、表示されんでしょうね。

analyticsは、ライブラリを使わず以下の方法で行うでないとエラーが出る

firewallを切る

サーバーの firewall は切っておく。
デバッグで googlebot を呼びまくることになるので、
firewallがBOTをブロックしてしまう。


systemctl stop firewalld

使えないライブラリ

・day.jsは使えるわ。。。
以下の感じで使う。

app.js


import 'dayjs/locale/ja';
import dayjs from 'dayjs';
dayjs.locale('ja');
Vue.prototype.$dayjs = dayjs;

this.$route.replace も使えない

this.$route.push で乗り切ろう

name というのが使えない

配列内に name というのがあるとバグるので、name2 とかにしておく。

foreach 文が使えない

ようは新しい構文は使えないみたい。

検索エンジンは chrome41

今回はら larave5.7 をバックエンドに利用。
ようはこのバージョンに合わせないと無理。
ということで

まずは

を参考にインスコ。

それが終わったら、以下の設定。
chrome 41 でも理解できるようにソースを吐けよと。

webpack.mix.js


const mix = require('laravel-mix');
require('laravel-mix-polyfill');



mix.webpackConfig({

    output: {
        chunkFilename: 'js/chunks/[name]-[hash].js',
//chunkFilename: 'js/chunks/[name].js',
        publicPath: '/'
            }
});


//読み込みたいフォルダを指定しておく
mix.js('resources/js/app.js', 'public/js','public/js/chunks/').version()
     .autoload({
         "vue": ['Vue', 'window.Vue']
     })

   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: {"chrome":"41","firefox": "50", "ie": 11}
  })



    .sass('resources/sass/app.scss', 'public/css');
~

な。ここまでやってコツコツやってく。
特にルーティングしている場合は1ファイルずつちゃんとチェックしていこうな。

完成

ページの読み込みに関する情報もチェック。

ということで、乙！

vue.js 検索エンジン対策 モバイルフレンドリーエラー