Vue の単一ページで SEO を実行できますか?

Vue の単一ページで SEO を実行できます。方法: 1. SSR サーバー レンダリング。検索エンジン クローラーが完全にレンダリングされたページを直接表示できるため、コンテンツの到着が速くなります。2. 静的で、ページの読み込みが速くなります。3. Prerender-spa-plugin。4. Phantomjs を使用して、クローラーを処理します。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

ご存知のとおり、Vue SPA のシングルページ アプリケーションは SEO に適していません。もちろん、対応するソリューションはあります。最近研究され使用されている SEO ソリューションをいくつか紹介します。SSR と静的化は Nuxt.js に基づいています。

1. SSR サーバー レンダリング;
• 2. 静的;
• 3. Prerender-spa-plugin;
• 4. Phantomjs を使用してクローラーを処理します。

1.SSR サーバー レンダリング

サーバー レンダリングについて: Vue 公式 Web サイトによると、Vue バージョンの要件とサーバーの特定の要件があり、それをサポートする必要があります。 Node.js環境。

SSR 使用のトレードオフ:

開発条件によって制限され、ブラウザ固有のコードは特定のライフサイクル フック関数 (ライフサイクル フック) でのみ使用できます。 ); 一部の外部拡張ライブラリ (外部ライブラリ) は、サーバー レンダリング アプリケーションで実行するために特別な処理を必要とする場合があります;
• 環境とデプロイメントの要件が高く、Node.js サーバーの実行環境が必要です;
Inトラフィックが多い場合は、それに応じてサーバー負荷を準備し、キャッシュ戦略を賢明に採用してください。

利点:

検索エンジンのクローラーが完全にレンダリングされたページを直接表示できるため、SEO が向上します。
• アクセスまでの時間が短縮されます。 -コンテンツ、特に遅いネットワーク状況や動作が遅いデバイスの場合。

欠点：（開発中に遭遇した落とし穴） 1. 1 セットのコードと 2 セットの実行環境では、サーバー上にウィンドウが表示されないなど、さまざまな問題が発生します。サイド、ドキュメントオブジェクト、処理方法は判断を追加することです。クライアントの場合は実行されます:

if(process.browser){
 console.log(window);
}

は dom 操作を含む npm パッケージを参照します。 例:

wowjs 、import メソッドは使用できません。

if (process.browser) {
     var { WOW } = require('wowjs');
     require('wowjs/css/libs/animate.css');
 }

2.Nuxt asyncData メソッドを使用します。ページを初期化する前にデータを取得します。ただし、

ページ コンポーネントに対してのみです。 呼び出し: ## asyncData の #

// 并发加载多个接口：
  async asyncData ({ app, query }) {
    let [resA, resB, resC] = await Promise.all([
      app.$axios.get('/api/a'),
      app.$axios.get('/api/b'),
      app.$axios.get('/api/c'),
     ])
     
     return {
       dataA: resA.data,
       dataB: resB.data,
       dataC: resC.data,
     }
  }

パラメータを次から取得します:

1.获取动态路由参数，如：

/list/:id' ==>  '/list/123

接收：

async asyncData ({ app, query }) {
  console.log(app.context.params.id) //123
}
2.获取url?获取参数，如：

/list?id=123

接收：

async asyncData ({ app, query }) {
  console.log(query.id) //123
}

3.

v-if

構文を使用する場合、オンラインでデプロイするときに次のエラーが発生する可能性もあります: <pre class="brush:js;toolbar:false;">Error while initializing app DOMException: Failed to execute &amp;#39;appendChild&amp;#39; on &amp;#39;Node&amp;#39;: This node type does not support this method. at Object.We [as appendChild]</pre>github nuxt

issue No. 1552

によると、v-if を v-show 構文に変更する必要があることが示されています。 4. 落とし穴が多すぎるので、そのままにしておいて、後で更新してください。

2. 静的化

静的化は Nuxt.js をパッケージ化するもう 1 つの方法であり、Nuxt.js のイノベーションであり、ページの読み込みが非常に速くなります。

Nuxt.js が静的パッケージングを実行すると、動的ルーティングは無視されます。

-| pages/
---| index.vue
---| users/
-----| _id.vue

最初に静的ページを生成するために動的ルーティングが必要な場合は、動的ルーティング パラメーターの値を指定し、routes 配列で構成する必要があります。

// nuxt.config.js
module.exports = {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

パッケージを実行すると、パッケージ化されたページが表示されます。

しかし、ルーティング動的パラメータの値が固定ではなく動的である場合は、どうすればよいでしょうか?

Promise オブジェクト タイプを返す関数を使用します。

• コールバックが callback(err, params) である関数を使用します。

• // nuxt.config.js
  import axios from 'axios'
  
  export default {
    generate: {
      routes: function () {
        return axios.get('https://my-api/users')
        .then((res) => {
          return res.data.map((user) => {
            return {
              route: '/users/' + user.id,
              payload: user
            }
          })
        })
      }
    }
  }

これで、次のように

/users/_id.vue

から payload にアクセスできるようになります。製品の詳細など、動的ルーティングのパラメータは数万にも及ぶ場合があります。すべての ID を返すにはインターフェイスが必要です。その後、パッケージ化中に ID がトラバースされ、ローカルでパッケージ化されます。製品が変更されたり、棚から削除されたりした場合は、再パッケージ化する必要があります。また、数量が多い場合、パッケージングは​​非常に遅く、非現実的です。 利点:

純粋な静的ファイル、アクセス速度が超高速;

SSR と比較して、サーバー負荷の問題がありません;

• 静的 Web ページはハッカーの攻撃には適しておらず、より安全です。
• 不足:

動的ルーティング パラメーターが多数ある場合は適用されません。

3. プリレンダー prerender-spa-plugin
• いくつかのマーケティング ページ (/、/about、/contact など) の SEO を改善するためだけに使用する場合。 ) の場合は、「プリレンダリングが必要」を選択できます。 Web サーバーを使用して HTML をリアルタイムで動的にコンパイルする代わりに、プリレンダリングはビルド時に特定のルートの静的 HTML ファイルを生成するだけです。利点は、プリレンダリングの設定がより簡単で、フロントエンドを完全な静的サイトとして扱えることです。

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

vue cli 3

vue.config.js

構成:

$ cnpm install prerender-spa-plugin --save

main.js に追加: <pre class="brush:js;toolbar:false;">const PrerenderSPAPlugin = require(&amp;#39;prerender-spa-plugin&amp;#39;); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require(&amp;#39;path&amp;#39;); module.exports = { configureWebpack: config =&gt; { if (process.env.NODE_ENV !== &amp;#39;production&amp;#39;) return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,&amp;#39;dist&amp;#39;), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: [&amp;#39;/&amp;#39;, &amp;#39;/product&amp;#39;,&amp;#39;/about&amp;#39;], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: &amp;#39;bar&amp;#39; }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event(&amp;#39;render-event&amp;#39;))，两者的事件名称要对应上。 renderAfterDocumentEvent: &amp;#39;render-event&amp;#39; }) }), ], }; } }</pre>注: ルーターで設定する必要があります

モード: "履歴"

。

パッケージ化後のファイルを確認し、/index.html フォルダーにパッケージ化できます (例:

about

=> about/) index.html 、これには HTML コンテンツが含まれます。 利点:

変更は小さいため、プラグインを導入するだけで完了します;

• 短所:

• 无法使用动态路由；
• 只适用少量页面的项目，页面多达几百个的情况下，打包会很很很慢；

4.使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

具体代码戳这里：vue-seo-phantomjs。
要安装全局phantomjs，局部express，测试：

$ phantomjs spider.js 'https://www.baidu.com'

如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
启动之后或者用postman在请求头增加User-Agent值为Baiduspider，效果一样的。

部署上线
线上要安装node、pm2、phantomjs，nginx相关配置：

upstream spider_server {
  server localhost:3000;
}

server {
    listen       80;
    server_name  example.com;
    
    location / {
      proxy_set_header  Host            $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开发完成的项目，这是不二之选。

不足：

• 部署需要node服务器支持；
• 爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；
• 如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，解决方法是判断访问的IP，是否是百度官方爬虫的IP。

总结

如果构建大型网站，如商城类，别犹豫，直接上SSR服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
如果只是个人博客、公司官网这类，其余三种都可以。
如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，请使用Phantomjs。

【相关推荐：vuejs视频教程、web前端开发】

以上がVue の単一ページで SEO を実行できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。