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 クラスタ管理の使用と原理の分析

推薦する

Nginx proxy_redirect の使用方法の詳細な説明

今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...

CentOS での MySQL ワークベンチのインストールと設定のチュートリアル

この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...

WeChatアプレットコンポーネント開発:視覚的な映画座席選択機能

目次1. はじめに1. コンポーネントデータ2. コンポーネントページのレイアウト1. ロゴエリアの...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...

フロントエンドの vue+express ファイルのアップロードとダウンロードの例

新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

MacでのMySQL5.7.22のインストール手順

1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...

MySQLテーブル構造を変更するコマンドを表示する

簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...

VMware ESXi のインストールと使用記録(ダウンロード付き)

目次1. ESXiをインストールする2. ESXiをセットアップする3. ESXiを起動するESXi...

角度付き双方向バインディングの詳細な説明

目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...

CSS3の3D効果を使って立方体を作成する

CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...

ウェブ開発者はIE7とIE8の共存を懸念している

今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...

Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策

目次シナリオ解決してみる解決するシナリオ今日、コンポーネントの双方向データバインディングにv-mod...

CSS ピクセルとさまざまなモバイル画面適応の問題に対する解決策

ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...