Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラーが取得する HTML は最終データのレンダリングされたページではなくモデルページとなり、検索エンジンは要求された js の実行に戻りません。 Vue プロジェクトはすべて ajax を使用してデータを要求しており、エンジンクローラーはページに入るときにテキストコンテンツを取得できません。現在、ほとんどのソリューションはデータのレンダリングに ajax を使用せず、サーバー側レンダリング (いわゆる SSR) を使用しています。
Vue に基づく現在のソリューションは Nuxt.js です。Nuxt.js の React バージョンもあります。サーバー側レンダリングとは、サーバーがブラウザーに送信する前にページにデータを配置して、クローラーがクロールできるようにすることです。

方法 1: prerender-spa-plugin を使用してシングルページアプリケーションを複数のページにパッケージ化する

従来の Vue が vue-cli スキャフォールディングを通じて構築された後、npm run build を使用してパッケージ化し、オンラインに配置する最終的な HTML コードを生成します。
Vue で構築されたシングルページプロジェクトには、メンテナンスの容易さ、簡潔なコード、優れた開発エクスペリエンスなど、さまざまな利点があります。しかし、一部の従来のインターネット企業にとって、Vue シングルページには SEO 最適化の問題という致命的な問題があります。以下は、通常パッケージ化された Vue シングルページディレクトリと index.html のコードです。

ここに画像の説明を挿入

ディレクトリには index.html ファイルが 1 つだけあり、この html ファイルにはコンテンツがありません。vue インスタンスをマウントするために使用される、ID が app の div のみがあります。
Google検索エンジンはすでにシングルページ情報のクロールに非常によく対応していますが、Googleは海外の検索エンジンであり、国内での使用にはVPNが必要なため、考慮されていません。Baiduは中国で最も重要な検索エンジンであり、Baiduはシングルページデータをクロールできないため、このようなプロジェクトが開始されると、他の人がBaiduで検索するときにプロジェクトを見つけるのが難しくなります。現在の会社のほとんどのプロジェクトでは SEO 最適化が必要なので、この問題は私に課されました。

解決

ここで、パッケージ化時にエラーが発生した場合は、npm 経由で puppeteer をインストールする必要がある可能性があることを述べておきます (これは少し大きく、約 300 MB です)

最初のステップは、prerender-spa-pluginを介してvue.config.jsを構成することです。

npm isntall prerender-spa-plugin --save

これは、Vueがシングルページアプリケーションを複数のページにパッケージ化するために使用するサードパーティのプラグインです。インストール後、vue.config.jsで次のように設定します。

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const レンダラー = PrerenderSPAPlugin.PuppeteerRenderer;
webpack は 'webpack' を必要とします。
定数パス = require('path');
 
モジュール.エクスポート = {
    Webpack の設定: config => {
        process.env.NODE_ENV !== 'production' の場合、戻り値は次のようになります。
        戻る {
            プラグイン: [
                新しいプリレンダリングSPAPlugin({
                    // 生成されたファイルのパスは、webpakc によってパッケージ化されたパスと一致する場合もあります。
                    // 次の文は非常に重要です! ！ ！
                    // このディレクトリには 1 つのレベルしか存在できません。ディレクトリ レベルが 1 レベルを超える場合、生成中にエラー プロンプトは表示されず、事前レンダリング中に停止するだけです。
                    staticDir: path.join(__dirname,'dist'),
                    // 独自のルーティング ファイルに対応して、たとえば、a にパラメーターがある場合は、/a/param1 と記述する必要があります。
                    ルート: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'],
                    // これは非常に重要です。このセクションが設定されていない場合、プリコンパイルは実行されませんrenderer: new Renderer({
                        注入: {
                            foo: 'バー'
                        },
                        ヘッドレス: 偽、
                        // main.js の document.dispatchEvent(new Event('render-event')) では、2 つのイベント名が対応している必要があります。
                        renderAfterDocumentEvent: 'レンダリングイベント'
                    })
                })
            ]、
        };
    }
}

次に、vueルーティングモードを履歴に変更します。
最後に、このコードを mian.js エントリファイルに追加します。レンダリングイベントはvue.config.jsのrenderAfterDocumentEventに対応している必要があります。

新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App),
  マウントされた（）{
    document.dispatchEvent(新しいイベント('render-event'))
  }
}).$mount('#app')

npm run build パッケージ化後のディレクトリ構造はこのようになり、各フォルダのindex.htmlコードも
現在の HTML コードには、.vue ファイルにテンプレート関連のコードが含まれていますが、各フォルダーの index.html コードがすべての js ファイルと css ファイルを参照するという追加の問題があり、これは SEO 最適化には役立ちません。だからまだ終わってないんです。

ここに画像の説明を挿入

なぜ js と css がこんなにたくさんあるのでしょうか? vue-cli がパッケージ化するときに、.vue ファイルの各スクリプトとスタイルタグは、タグに何も書いていなくても、対応する js と css にパッケージ化されるためです。

2番目のステップは、より小さなjsファイルとcssファイルを圧縮して結合することです。

vue-cli のドキュメントを検索しましたが、関連する情報が見つからなかったので、webpack に切り替えました。
このAPIは、マージされたファイルの最小サイズを設定するために使用できます。このコードを上記のWebpack構成のプラグインに追加します。推定値は10000 = 1kbです。

webpack は 'webpack' を必要とします。
 
新しい webpack.optimize.MinChunkSizePlugin({
                    minChunkSize: 10000 // minChunkSize より小さいチャンクをマージして、チャンク サイズを指定されたサイズ制限以上に保ちます }),

その後、 npm run build同じディレクトリを使用しますが、js と css は大幅に削減されます。

ここに画像の説明を挿入

方法 2: Vue SSR (サーバーサイドレンダリング)

つまり、元々ブラウザで作成されるはずだったコンポーネントが最初にサーバー上で作成され、次に対応する HTML が生成されてブラウザに直接送信され、最後にこれらの静的タグがクライアント上で完全にインタラクティブなアプリケーションとして「アクティブ化」されます。

SPA（シングルページアプリケーション）と比較したVue SSRのメリットとデメリット
1. 利点: 検索エンジンのクローラーが完全にレンダリングされたページを直接表示できるため、SEO が向上します。

特に低速ネットワークや低速デバイス上で、コンテンツまでの時間が短縮されます。

2. デメリット
1) 開発条件により制限されます。特定のライフサイクルフックでのみ使用できるブラウザ固有のコード。一部の外部ライブラリでは、サーバーレンダリングされたアプリケーションで実行するために特別な処理が必要になる場合があります。

2) ビルドのセットアップとデプロイメントに必要な要件が増える。任意の静的ファイルサーバーにデプロイできる完全に静的なシングルページアプリケーション (SPA) とは異なり、サーバーレンダリングアプリケーションを実行するには Node.js サーバーが必要です。

3) サーバー側の負荷が増大します。 Node.js で完全なアプリケーションをレンダリングすると、静的ファイルを提供するだけの場合よりも CPU への負荷が明らかに高くなります。そのため、トラフィック量の増加が予想される場合は、それに応じてサーバーの負荷に備え、キャッシュ戦略を賢く使用してください。

Vue 開発ウェブサイトの SEO 最適化方法の詳細な説明はこれで終わりです。より関連性の高い Vue SEO 最適化コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: