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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue開発ウェブサイトSEO最適化方法の詳細な説明
  • vue-cli シングルページ事前レンダリング seo-prerender-spa-plugin 操作
  • prerender-spa-plugin を通じて単一の Vue ページの SEO を最適化する方法

<<:  HTMLチュートリアル、簡単に学べるHTML言語

>>:  Docker Swarm クラスタ管理の使用と原理の分析

推薦する

組み込みオブジェクトに関するJavascriptの基礎

目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...

Vueはソースコード付きのリファレンスライブラリのメソッドを使用します

monaco-editor-vueの公式ソースコードは次のとおりです。インデックス 'mon...

「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察

最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...

DockerでRedisを使用するための詳細な手順

1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...

wgetはウェブサイト全体(サブディレクトリ全体)または特定のディレクトリをダウンロードします

wgetコマンドを使用して、親ディレクトリの下のサブディレクトリ全体をダウンロードします。親ディレク...

MySQL データ圧縮パフォーマンス比較の詳細

目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

VUEをベースにしたシンプルな学生情報管理システムの実装

目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...

MySQLの日付加算と減算関数の詳細な説明

1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...

計算機機能を実装するミニプログラム

この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...

iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...

Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集

/****************** * カーネルデバッグ技術 ****************...

Linux仮想マシンを作成し、仮想マシンネットワークを設定する方法に関するVMwareの詳細なチュートリアル

VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...

MySQLテーブルシャーディングとパーティショニングの具体的な実装方法

縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...

ハイパーリンクの表示と開き方

<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...