Vue の単一ページで SEO を実行できますか?-フロントエンドQ&A-php.cn

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

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

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

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

2. 静的;
3. Prerender-spa-plugin;
4. Phantomjs を使用してクローラーを処理します。

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

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

SSR 使用のトレードオフ:

環境とデプロイメントの要件が高く、Node.js サーバーの実行環境が必要です;

利点:

アクセスまでの時間が短縮されます。 -コンテンツ、特に遅いネットワーク状況や動作が遅いデバイスの場合。

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

/list/:id&#39; ==>  &#39;/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
}

ログイン後にコピー

v-if

構文を使用する場合、オンラインでデプロイするときに次のエラーが発生する可能性もあります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">Error while initializing app DOMException: Failed to execute &#39;appendChild&#39; on &#39;Node&#39;: This node type does not support this method. at Object.We [as appendChild]</pre><div class="contentsignin">ログイン後にコピー</div></div>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: [
      &#39;/users/1&#39;,
      &#39;/users/2&#39;,
      &#39;/users/3&#39;
    ]
  }
}

ログイン後にコピー

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

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

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

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

// nuxt.config.js
import axios from &#39;axios&#39;

export default {
  generate: {
    routes: function () {
      return axios.get(&#39;https://my-api/users&#39;)
      .then((res) => {
        return res.data.map((user) => {
          return {
            route: &#39;/users/&#39; + user.id,
            payload: user
          }
        })
      })
    }
  }
}

ログイン後にコピー

/users/_id.vue

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

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

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

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

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

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

モード: "履歴"

。

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

about

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

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

短所:

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

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

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

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

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

$ phantomjs spider.js &#39;https://www.baidu.com&#39;

ログイン後にコピー

如果见到在命令行里出现了一推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;
      }
    }
}

ログイン後にコピー

优势：