ご存知のとおり、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 クラスタ管理の使用と原理の分析
目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...
monaco-editor-vueの公式ソースコードは次のとおりです。インデックス 'mon...
最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...
1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...
wgetコマンドを使用して、親ディレクトリの下のサブディレクトリ全体をダウンロードします。親ディレク...
目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...
1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...
目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...
1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...
この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...
現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...
/****************** * カーネルデバッグ技術 ****************...
VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...
縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...
<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...