Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

ご存知のとおり、Vue SPA シングルページアプリケーションは SEO に適していません。もちろん、対応するソリューションはあります。情報を検索すると、おそらく次の 4 つの方法があります。（私は最初のオプションと3番目のオプションのみを使用しました）

1.Nuxtサーバーサイドレンダリングアプリケーションの展開（SSRサーバーレンダリング）

サーバーレンダリングについて: Vue の公式サイトによると、Vue のバージョンとサーバーには要件があり、nodejs 環境をサポートする必要があります。
SSR を使用する場合のトレードオフ:
開発上の制約により、ブラウザ固有のコードは特定のライフサイクルフックでのみ使用できます。一部の外部ライブラリでは、サーバーレンダリングされたアプリケーションで実行するために特別な処理が必要になる場合があります。
環境とデプロイメントの要件が高く、Node.js サーバーの動作環境が必要です。
トラフィックが多い場合は、適切なサーバー負荷を準備し、キャッシュ戦略を賢く採用してください。

利点:

検索エンジンのクローラーが完全にレンダリングされたページを直接表示できるため、SEO が向上します。
特に低速ネットワークや低速デバイス上で、コンテンツまでの時間が短縮されます。

デメリット: (開発中に遭遇した落とし穴)

1. 1セットのコードに対して2つの実行環境があると、さまざまな問題が発生します。たとえば、サーバー側にウィンドウやドキュメントオブジェクトがない場合、判断を追加してクライアント側の場合のみ実行することが解決策です。

if (プロセス.ブラウザ) {
 コンソールログ(ウィンドウ);
}

wowjs などの DOM 操作を含む npm パッケージを参照する場合、import メソッドは使用できません。代わりに、以下を使用します。

if (プロセス.ブラウザ) {
  var { WOW } = require('wowjs');
  'wowjs/css/libs/animate.css' が必要です。
 }

2.Nuxt asyncData メソッドは、ページを初期化する前にデータを取得しますが、ページコンポーネントの呼び出しにのみ制限されます。

// 複数のインターフェースを同時にロードします:
 非同期 asyncData ({ アプリ、クエリ }) {
 [resA, resB, resC] = Promise.all([ を待つ
  app.$axios.get('/api/a')、
  app.$axios.get('/api/b')、
  app.$axios.get('/api/c')、
  ])
   
  戻る {
  データA: resA.data、
  データB: resB.データ、
  データC: resC.data、
  }
 }

3. v-if 構文を使用する場合、オンラインでデプロイするときに次のエラーが発生することもあります。

アプリの初期化中にエラーが発生しました DOMException: 'Node' で 'appendChild' を実行できませんでした: このノードタイプはこのメソッドをサポートしていません。
Object.We [appendChildとして]

github nuxt の問題 1552 によると、v-if 構文を v-show 構文に変更する必要があります。

2.Nuxt静的アプリケーションのデプロイメント

Nuxt.js が静的パッケージを生成する場合、動的ルートは無視されます。

-| ページ/
---| インデックス.vue
---| ユーザー/
-----| _id.vue

動的ルーティングを使用して静的ページを生成するには、動的ルーティングパラメータの値を指定し、ルート配列で設定する必要があります。

// nuxt.config.js
モジュール.エクスポート = {
 生成する：
 ルート: [
  '/users/1',
  '/users/2',
  '/ユーザー/3'
 ]
 }
}

パッケージを実行すると、パッケージ化されたページが表示されます。
しかし、ルーティングの動的パラメータの値が固定ではなく動的である場合はどうすればよいでしょうか?
Promise オブジェクト型を返す関数を使用します。
コールバックが callback(err, params) であるコールバック関数を使用します。

// nuxt.config.js
'axios' から axios をインポートします
 
エクスポートデフォルト{
 生成する：
 ルート: 関数 () {
  axios.get('https://my-api/users') を返します
  .then((res) => {
  res.data.map((user) => { を返します。
   戻る {
   ルート: '/users/' + user.id,
   ペイロード: ユーザー
   }
  })
  })
 }
 }
}

これで、次のように /users/_id.vue からペイロードにアクセスできるようになります。

非同期 asyncData ({ パラメータ、エラー、ペイロード }) {
 if (payload) return { user: payload }
 そうでない場合は { user: await backend.fetchUser(params.id) } を返します。
}

動的ルーティングに製品の詳細などの多くのパラメータがある場合、その数は数千または数万に達する可能性があります。すべての ID を返し、パッケージング時に ID をトラバースしてローカルでパッケージングするためのインターフェイスが必要です。製品が変更されたり、棚から削除されたりした場合は、再度パッケージングする必要があります。数量が多い場合は、パッケージングも非常に遅くなり、非常に非現実的です。

利点:

純粋な静的ファイル、超高速アクセス速度。
SSR と比較すると、サーバー負荷の問題は発生しません。
静的な Web ページはハッカーの攻撃を受けにくく、より安全です。

不十分：

動的ルーティングパラメータが多数ある場合には適用されません。

3. 事前レンダリング prerender-spa-plugin

いくつかのマーケティングページ (/、/about、/contact など) の SEO を改善するためだけに使用している場合は、おそらく事前レンダリングが必要です。ウェブサーバーを使用して HTML を動的にオンザフライでコンパイルする代わりに、事前レンダリングではビルド時に特定のルートの静的 HTML ファイルを生成するだけです。利点は、事前レンダリングの設定が簡単になり、フロントエンドを完全に静的なサイトとして提供できることです。

$ cnpm インストール prerender-spa-plugin --save

vue cli 3 vue.config.js 構成:

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

main.js に以下を追加します。

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

注意: ルーターで mode: "history" を設定する必要があります。
パッケージ化後のファイルを確認し、HTML コンテンツを含むフォルダー /index.html をパッケージ化できます (例: about => about/index.html)。

利点:

変更は小さく、プラグインを導入するだけで完了です。

不十分：

動的ルーティングは使用できません。
ページ数が少ないプロジェクトにのみ適しています。ページ数が数百ページになると、パッケージ化に非常に時間がかかります。

4. Phantomjsはクローラーを処理する

Phantomjs は、WebKit カーネルをベースにしたヘッドレスブラウザです。つまり、UI インターフェースがなく、単なるブラウザですが、クリックやページめくりなどの人間が行う操作はプログラミングで実装する必要があります。

「PhantomJS は開発終了を発表しましたが、すでに Vue の SEO 要件を満たしています。」

このソリューションは、実際にはバイパスメカニズムです。原理は、アクセスのソース UA が Nginx 構成を通じてクローラーアクセスであるかどうかを判断することです。クローラーアクセスである場合、検索エンジンのクローラーリクエストはノードサーバーに転送され、その後 PhantomJS を使用して完全な HTML を解析し、クローラーに返します。
phantomjs をグローバルにインストールし、ローカルで実行してテストするには:

$ phantomjs spider.js 'www.baidu.com'

コマンドラインに大量の HTML が表示されたら、おめでとうございます。PhantomJS をマスターしたことになります。

起動後、または Postman を使用してリクエストヘッダーに Baiduspider の User-Agent 値を追加した後でも、効果は同じです。

展開と起動

node、pm2、phantomjs、nginx 関連の設定をオンラインでインストールするには:

アップストリームスパイダーサーバー{
 サーバー localhost:3000;
}
 
サーバー{
 聞く 80;
 サーバー名 example.com;
  
 位置 / {
  proxy_set_header ホスト $host:$proxy_port;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
  if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
  proxy_pass http://spider_server;
  }
 }
}

利点:

プロジェクトコードを変更する必要はまったくなく、元の SPA に従って開発するだけです。SSR の開発と比較して、コストはそれほど高くありません。
これは、SPA を使用して開発されたプロジェクトに最適な選択肢です。

不十分：

デプロイメントにはノードサーバーのサポートが必要です。
リソースはクローラーに返された後にのみ読み込まれるため、クローラーアクセスは Web ページアクセスよりも遅くなります。
悪意を持ってサーバーを模倣してループで大量にクロールすると、サーバー負荷の問題が発生します。解決策は、アクセスしたIPがBaiduの公式クローラーのIPであるかどうかを判断することです。

要約する

ショッピングモールのような大規模なウェブサイトを構築する場合は、ためらわずに、直接 SSR サーバーレンダリングに進んでください。もちろん、それに応じた落とし穴があなたを待っています。コミュニティがより成熟し、英語が上手であれば、すべての問題は解決できます。

個人のブログや会社のウェブサイトであれば、他の 3 つでも問題ありません。

これで、Vue シングルページ SEO の 4 つのソリューションに関するこの記事は終了です。Vue シングルページ SEO に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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