ご存知のとおり、Vue SPA シングルページ アプリケーションは SEO に適していません。もちろん、対応するソリューションはあります。情報を検索すると、おそらく次の 4 つの方法があります。 (私は最初のオプションと3番目のオプションのみを使用しました) 1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)サーバー レンダリングについて: Vue の公式サイトによると、Vue のバージョンとサーバーには要件があり、nodejs 環境をサポートする必要があります。 利点:検索エンジンのクローラーが完全にレンダリングされたページを直接表示できるため、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 構文を使用する場合、オンラインでデプロイするときに次のエラーが発生することもあります。
github nuxt の問題 1552 によると、v-if 構文を v-show 構文に変更する必要があります。 2.Nuxt静的アプリケーションのデプロイメントNuxt.js が静的パッケージを生成する場合、動的ルートは無視されます。 -| ページ/ ---| インデックス.vue ---| ユーザー/ -----| _id.vue 動的ルーティングを使用して静的ページを生成するには、動的ルーティング パラメータの値を指定し、ルート配列で設定する必要があります。 // nuxt.config.js モジュール.エクスポート = { 生成する: ルート: [ '/users/1', '/users/2', '/ユーザー/3' ] } } パッケージを実行すると、パッケージ化されたページが表示されます。 // 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 をトラバースしてローカルでパッケージングするためのインターフェイスが必要です。製品が変更されたり、棚から削除されたりした場合は、再度パッケージングする必要があります。数量が多い場合は、パッケージングも非常に遅くなり、非常に非現実的です。 利点:
不十分:
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" を設定する必要があります。 利点:変更は小さく、プラグインを導入するだけで完了です。 不十分:動的ルーティングは使用できません。 4. Phantomjsはクローラーを処理するPhantomjs は、WebKit カーネルをベースにしたヘッドレス ブラウザです。つまり、UI インターフェースがなく、単なるブラウザですが、クリックやページめくりなどの人間が行う操作はプログラミングで実装する必要があります。 「PhantomJS は開発終了を発表しましたが、すでに Vue の SEO 要件を満たしています。」 このソリューションは、実際にはバイパス メカニズムです。原理は、アクセスのソース UA が Nginx 構成を通じてクローラー アクセスであるかどうかを判断することです。クローラー アクセスである場合、検索エンジンのクローラー リクエストはノード サーバーに転送され、その後 PhantomJS を使用して完全な HTML を解析し、クローラーに返します。 $ 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 の開発と比較して、コストはそれほど高くありません。 不十分:デプロイメントにはノード サーバーのサポートが必要です。 要約するショッピングモールのような大規模なウェブサイトを構築する場合は、ためらわずに、直接 SSR サーバー レンダリングに進んでください。もちろん、それに応じた落とし穴があなたを待っています。コミュニティがより成熟し、英語が上手であれば、すべての問題は解決できます。 個人のブログや会社のウェブサイトであれば、他の 3 つでも問題ありません。 これで、Vue シングルページ SEO の 4 つのソリューションに関するこの記事は終了です。Vue シングルページ SEO に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Docker Swarm クラスタ管理の使用と原理の分析
今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...
この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...
目次1. はじめに1. コンポーネントデータ2. コンポーネントページのレイアウト1. ロゴエリアの...
SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...
新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...
1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...
基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...
1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...
簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...
目次1. ESXiをインストールする2. ESXiをセットアップする3. ESXiを起動するESXi...
目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...
CSS3 の 3D 効果を使用して立方体を作成する方法を学ぶと、3D シーンの回転と変位のプロパティ...
今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...
目次シナリオ解決してみる解決するシナリオ今日、コンポーネントの双方向データバインディングにv-mod...
ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...