vue seo 最適化 (vue を使用した後、検索エンジンの SEO 最適化を行う方法は?)

Vue を使用した後、検索エンジンの SEO 最適化を行うにはどうすればよいでしょうか?

検索エンジン最適化 (SEO) とは、検索エンジンからの無料のトラフィックを増やし、イメージをより良く表示するために、検索エンジンの自然な検索結果 (非営利のプロモーション結果) 内の Web ページの数とランキングを増やすために行われる最適化動作を指します。

SEM (検索エンジンマーケティング) には、SEO と有料の商業プロモーションの最適化の両方が含まれます。

この記事では、主にフロントエンドコードで SEO を行う方法と、シングルページプロジェクトで SEO を実装する方法について説明します。

SEO を理解するには、まず検索エンジンの仕組みを理解する必要があります。原理は比較的複雑ですが、プロセスは次のように簡略化されています。

ウェブコンテンツをクロールする

一般的に、クローラーは、あるページから開始して、そこから他のページへのリンクを抽出し、それを次のリクエストの対象として使用して、プロセスを繰り返しながらページコンテンツをクロールします。したがって、優れた SEO を実現するには、主要な Web サイトに外部リンクを設定する必要があります。これにより、Web サイトが検索エンジンボットによってクロールされる可能性が高まります。

ウェブコンテンツを分析する

クローラーは HTML を取得すると、そのコンテンツを分析します。一般的に、不要なものを削除し、単語をセグメント化し、データベースを再開する必要があります。インデックスデータベースとは何ですか?簡単に言えば、単語がどの文書に出現するか、出現回数、出現場所などを記録します。履歴書インデックスデータベースはなぜ必要なのでしょうか?素早く検索するためのものです。

検索と並べ替え

検索では、入力したキーワードに基づいて対応するインデックスデータベースを照会し、結果を処理して並べ替えます。

ウェブサイトの構造

ウェブサイトの構造は明確である必要があります。一般的なウェブサイトの構造はツリー型になっており、ホームページ→チャンネルページ（一覧ページ）→記事ページ（詳細ページ）の3つの階層に分かれているのが一般的です。

ウェブサイトの構造はフラットである必要があります。構造層が少ないほど良いです。一般的には、3 層を超えないようにしてください。検索エンジンは通常、第 3 層以降は深くクロールを続けたくありません。 Nuggets や Snowball などのほとんどの Web サイトは 2 層の Web サイト構造になっており、ホームページとチャンネルページは同じページになっています。

ナビゲーション

ページのナビゲーションはシンプルにする必要があります。ナビゲーションにより、検索エンジンはウェブサイトの構造を認識できるだけでなく、ウェブサイト構造における現在のページのレベルも認識できるようになります。提案：

すべてのページにナビゲーションが含まれています。
コンテンツが多い Web サイトの場合は、パンくずナビゲーションを使用できます。
リンクはテキストリンクである必要があります。画像の場合は、alt 属性を使用して、リンク先を検索エンジンに伝える必要があります。

正規 URL

標準化され、シンプルでわかりやすい URL を使用すると、検索エンジンがコンテンツをより適切にクロールできるようになります。提案：

同じページは 1 つの URL にのみ対応します。 301 を使用して複数の URL をリダイレクトできます。
URL は、Web ページの内容と Web サイトの構造情報を反映できます。たとえば、www.a.com/blog、www.a.com/blog/123、www.a.com/article などです。
URL はできるだけ短くしてください。
動的 URL に含まれる変数パラメータの数を最小限に抑えるようにしてください。

サイトマップを送信する

サイトマップは、サイト上のどのページがクロール可能であるかを検索エンジンに通知し、検索エンジンがよりインテリジェントにサイトをクロールできるようにします。

ロボット.txt

検索エンジンがウェブサイトをクロールするときに最初にアクセスするファイルは robots.txt です。このファイルでは、スパイダーにアクセスさせたくない Web サイトの部分を宣言します。この方法により、ウェブサイトのコンテンツの一部または全部が検索エンジンによってアクセスされなくなり、検索エンジンに含まれなくなります。また、robots.txt を通じて、検索エンジンが特定のコンテンツのみを含めるように指定することもできます。

適切なHTTPリターンコード

検索エンジンの処理ロジックは、戻りコードによって異なります。

サイトが一時的に閉鎖されていてウェブページを開けない場合は、503 ステータスを使用することをお勧めします。 503 は、Baidu スパイダーに、ページが一時的にアクセスできないので、しばらくしてからもう一度お試しください、と伝えます。
Baidu スパイダーがサイトのクロールに過度の負担をかけている場合は、404 を使用しないようにしてください。503 を返すことも推奨されます。このようにして、Baidu スパイダーはしばらくしてからこのリンクを再度クロールしようとします。その時点でサイトがアイドル状態であれば、クロールは正常に行われます。
一部のウェブサイトでは、レビュー済みのコンテンツや一定期間にわたって蓄積された新しいユーザーページなど、コンテンツの一部のみが Baidu に含まれることを期待しています。この場合、新しく公開されたコンテンツは一時的に 403 に戻り、確認または処理後に通常のステータスの戻りコードに戻すことをお勧めします。
サイトを移行する場合やドメイン名を変更する場合は、301 リターンを使用してください。

適切なタイトル

タイトルは検索エンジンに Web ページの主な内容を伝えます。

各 Web ページには一意のタイトルが必要です。すべてのページでデフォルトのタイトルを使用することは避けてください。
タイトルは明確かつ簡潔で、Web ページの最も重要なコンテンツを含み、Web ページのコンテンツに関係のない情報を記載してはなりません。
ユーザーは通常、左から右に閲覧するため、重要なコンテンツはタイトルの先頭に配置する必要があります。

Baidu が提案した説明:

ホームページ：ウェブサイト名またはウェブサイト名_サービス紹介/製品紹介
チャンネルページ: チャンネル名_ウェブサイト名
記事ページ: 記事タイトル_チャンネル名_ウェブサイト名

適切な説明

説明は、Web ページのコンテンツの簡潔な要約です。このタグの有無はウェブページの重みには影響せず、検索結果サマリーの選択対象としてのみ使用されます。 Baidu の推奨事項:

すべてのページで同じ説明を使用することを避けるために、各 Web ページに異なる説明を作成します。
説明は、Web サイトのホームページ、チャンネルページ、製品パラメータページなど、概要のない Web ページに最適です。
ウェブページを正確に説明し、キーワードを詰め込まず、長さを適度に保ちます

セマンティック HTML

HTML セマンティクスでは、タグと属性を使用してコンテンツを記述します。したがって、 HTML セマンティクスは SEO の基礎となります。一般的なアドバイス:

HTML構造を明確かつ簡潔に保つ
ジャンプにはタグを使用してください。js を使用しないでください。
代替説明付きの画像
記事はタグで運ばれる
...

現在、SEO サポートがより優れたプロジェクトソリューションは、サーバー側レンダリングを使用することです。したがって、プロジェクトに SEO 要件がある場合は、サーバー側レンダリングの方が適切なソリューションとなります。

フロントエンドとバックエンドが分離されたシングルページプロジェクトをすでに採用していて、Web サイトのコンテンツを取得して表示するために AJAX を必要としない場合は、prerender-spa-plugin プラグインを試すことができます。このプラグインは、パッケージ化プロセス中にヘッドレスブラウザーを介してページをレンダリングし、対応する HTML を生成するのに役立つ Webpack プラグインです。もちろん、このソリューションは静的ルーティングに適しており、ルートの数は膨大ではありません。

コンテンツが AJAX によって動的に取得される場合は、Vue シングルページプロジェクトで prerender を試すことができます。これは、ヘッドレスブラウザーを介してページをレンダリングし、HTML を返すのに役立つ事前レンダリングサービスです。このソリューションは、prerender-spa-plugin と非常によく似ています。どちらもヘッドレスブラウザを使用してページをレンダリングします。違いはレンダリングのタイミングです。 prerender-spa-plugin はパッケージ化プロセス中にレンダリングするため、静的ルートのみをレンダリングできますが、prerender はリクエスト時にレンダリングするため、動的ルートをレンダリングできます。以下では、プリレンダリングソリューションに焦点を当てます。

プリレンダリングの使用

1. インストール

$ npm プリレンダリングをインストール
コードをコピー

2. server.js サービスを起動する

const prerender = require('prerender');
const server = プリレンダリング();
サーバーを起動します。
コードをコピー

3. テスト

http://localhost:3000/render?url=https://www.example.com/
コードをコピー

上記の 3 つの手順を実行すると、事前レンダリングサービスが開始され、「www.example.com/」のコンテンツが返されます。全体のプロセスは比較的簡単です。 github の公式サイトでも、prerender-node (Express)、nginx.conf など、多くのミドルウェアが紹介されています。では、これらと prerender にはどのような関係があるのでしょうか。ミドルウェアを直接使用することは可能ですか?事前レンダリングの仕組みは次のとおりです。

プリレンダリングソリューションの原理

まず、サーバーはページのリクエストを受信し、そのリクエストが検索エンジンのクローラーからのものであるかどうかを判断します。そうでない場合は、通常のシングルページプロジェクトの動作モード (クライアント側レンダリング) に従って、シングルページプロジェクトの HTML を直接返します。そうであれば、リクエストをプリレンダリングサービスに転送します。プリレンダリングサービスでは、ヘッドレスブラウザーを通じてプリレンダリングが実行され、レンダリングが完了した後にコンテンツが返されるため、クローラーはコンテンツを含む HTML を取得できます。プリレンダリングミドルウェアは、リクエストが検索エンジンクローラーからのものであるかどうかを判断し、リクエストを転送するために使用されます。

プリレンダリングサービスにはヘッドレスブラウザが含まれていないため、Chrome ブラウザを自分でインストールする必要があることに注意してください。したがって、プログラム全体を実行するには 3 つの部分が必要です。

Chromeブラウザ
プリレンダリングサービス
プリレンダリングミドルウェア

では、プリレンダリングサービスはどのようにしてページのレンダリングが完了したことを知るのでしょうか? Prerender サービスは、未処理のリクエストの数をカウントして、ページの読み込みが完了したかどうかを判断します。未処理のリクエスト数がゼロになると、サーバーはしばらく待機してから (デフォルトでは 500 ミリ秒)、HTML を保存します。

プリレンダリングのベストプラクティス

実際には、事前レンダリングによってレンダリングされたページをリクエストすると、最良で約 2 秒、最悪の場合は最大 8 秒かかります。一般的に、リクエスト時間は 3 秒以内が最適です。そこで、私は以下の側面から、プリレンダリングの最適化方法の検討を始めました。

リソース要求時間を短縮

プリレンダリングのレンダリング時間に影響するリソースには、主に js リクエストリソースと api リクエストリソースが含まれます。 API リクエスト時間は通常バックエンドによって決まるため、私が検討しているのは js リソースリクエスト時間をどのように短縮するかということです。通常、プリレンダリングサービスによってレンダリングされるリソース要求アドレスは、ページ要求 URL によって決定されるため、通常はオンラインアドレスになります。プリレンダリングサービスを Web サイトのサーバーに展開し、プリレンダリングサービスがローカルでリソースを要求できるようにすると、リソース要求時間を短縮できます。

オンラインサービスで CDN が有効になっている場合、リソースをローカルに保持するもう 1 つの利点は、CDN トラフィックを節約できることです。

プリレンダリングオプションの最適化

プリレンダリングはいくつかのカスタマイズオプションを提供します

pageDoneCheckInterval: このパラメータは、ページ要求が完了したかどうかを確認するための事前レンダリングのタイマー時間です。デフォルトは 500 ミリ秒です。つまり、500 ミリ秒ごとに、未完了のリクエストの数がゼロかどうかを確認します。チェックの頻度を上げるために 100ms に変更しました。

waitAfterLastRequest: このパラメーターは、最後のリクエストが完了した後の待機時間です。デフォルトは500ミリ秒です。これは主に、リクエストが完了した後、ページの更新とレンダリングに時間がかかるためです。すぐに戻ると、要求されたデータが時間内にレンダリングされない可能性があります。時間を200msに変更しました。

プリレンダリングプラグイン

httpHeaders - 適切なHTTPステータスコードを返します

返される HTML の HTTP ステータスコードを変更するには、httpHeaders プラグインを追加します。追加方法は次のとおりです

var prerender = require('prerender');
var server = プリレンダリング()
server.use(prerender.httpHeaders());
サーバーを起動します。
コードをコピー

識別して事前レンダリングするでページから返される HTTP ステータスコードを設定するタグ。


コードをコピー

301リダイレクトを設定する必要がある場合は、次のようにします。



コードをコピー

blockResources — 画像リソースを待つ必要はありません

事前レンダリングは、未完了のリクエストの数に基づいてレンダリングが完了したかどうかを判断します。ただし、検索エンジンに返す HTML では、js によって動的に追加された DOM をレンダリングするだけで済みます。実際、レンダリングインターフェイスによって返される CSS や画像をレンダリングする必要はありません。レンダリング中に prerender がこれらのリソースを要求するかどうかを確認しましょう。 prerender は印刷要求を有効または無効にできます。有効化の方法は次のとおりです。

 var server = プリレンダリング({
 ログリクエスト: true
});
コードをコピー

オンにすると、CSS と画像リソースを含むリクエストがコンソールに表示されます。

 2019-07-17T04:34:03.180Z - 47 http://xxx.com/css/chunk-f4a02584.da8dca38.css
2019-07-17T04:34:03.180Z {
 出典: 'ネットワーク'、
 レベル: 'エラー'、
 テキスト: 'リソースの読み込みに失敗しました: net::ERR_INVALID_ARGUMENT',
 タイムスタンプ: 1563338043130.37、
 URL: 'http://xxx.com/wefid/css/chunk-f4a02584.da8dca38.css',
 ネットワークリクエストID: '1000039068.65' 
}
2019-07-17T04:34:03.924Z + 3 http://xxx.com/img/erweima_wx.a84d82ef.jpg
2019-07-17T04:34:03.924Z + 4 http://xxx.com/img/erweima_wb.06971584.png
コードをコピー

プリレンダリングはなぜこれらのリソースを待機するのでしょうか?プリレンダリングサービスには、Prerender.com という別の強力な機能があり、インターフェイスを通じて次の情報を返すことができます。

ウェブページのHTMLファイル
ウェブページのスクリーンショット（ビューポートまたは全画面）
ウェブページのPDFファイル
ウェブページのHARファイル
独自のJavaScriptを実行し、JSONとHTMLを返します

当然ながら、これらの機能を使用するには、必要な CSS または画像リソースを読み込む必要があります。そうしないと、Web ページの表示に問題が発生します。現時点では、SEO 要件を満たすだけでよく、Prerender.com の機能が必要ない場合は、blockResources プラグインが役立ちます。プラグインは次のように追加されます。

 var prerender = require('prerender');
var server = プリレンダリング()
server.use(prerender.blockResources());
サーバーを起動します。
コードをコピー

blockResources プラグインを使用した後、画像リソースとフォントリソースは中止されます。

レンダリング終了時間をカスタマイズする

事前レンダリングの戻りのタイミングをより細かく制御して、早く終了するか遅く終了するかを制御したい場合は、このフラグ window.prerenderReady を使用できます。

まず、window.prerenderReady を false に設定する必要があります。 prerender は、window.prerenderReady が false であることを検出すると、結果を返す前に true に設定されるまで待機します。

コードをコピー

レンダリングが終了すると、通常はインターフェースリクエストが完了し、レンダリングが完了した後になります。

ウィンドウのレンダリング準備が完了している必要があります。
コードをコピー

これにより、レンダリングの終了タイミングをより細かく制御できるようになります。

キャッシュを有効にする

ここでのキャッシュには 2 つの側面があります。1 つは HTTP キャッシュ (ブラウザキャッシュ) であり、もう 1 つはレンダリング結果のキャッシュです。

まず、HTTP キャッシュにより、プリレンダリングサービスはリソース要求を頻繁に開始する必要がなくなり、転送時間が節約されます。これについては詳しく説明しません。ここでお話ししたいのは、レンダリング結果のキャッシュについてです。プリレンダリングミドルウェアは、redis または memcached の 2 つのキャッシュメソッドを提供します。 Redis を例に挙げます。

 $ npm インストール redis
コードをコピー var redis = require("redis"),
クライアント = redis.createClient();

prerender.set('beforeRender', function(req, done) {
	client.get(req.url, 完了);
}).set('afterRender', function(err, req, prerender_res) {
	クライアント側でreq.urlを設定し、prerender_res.bodyを記述します。
});
コードをコピー

beforeRender フックと afterRender フックを使用すると、頻繁に変更されるコンテンツについてはキャッシュしないか、短時間キャッシュし、あまり変更されないコンテンツについては長時間キャッシュするなど、きめ細かい制御を行うことができます。キャッシュを有効にすると、戻り時間が短縮されるだけでなく、サーバーへの負荷も軽減されます。

統計と監視

統計と監視はミドルウェアの afterRender で実行できます。

 prerender.set('afterRender', 関数(err, req, prerender_res) {
 もしエラーが起きたら
 // エラー監視コードをここに記述します // ...
 // 戻る
 }
 {headers: req_headers, originalUrl} = req とします
 {ヘッダー: res_headers, body} = prerender_res とします
 // 以下はリクエストの関連情報を保存して返すことができる統計コードです})
コードをコピー

まとめ

上記の最適化方法（レンダリング終了時間のカスタマイズとキャッシュの有効化を除く）により、HTML リクエスト時間を約 2.5 秒に安定させました。

フロントエンドコーディング SEO について私が言いたいことは以上です。要するに、