web-dev-qa-db-ja.com

Nuxt.jsの動的メタ

だれでも動的データを含むメタ情報に関する状況を支援できますか。

問題

私たちはNuxtを使用しており、npm run generateを使用して静的ページを生成しています。このアプローチにはいくつかの問題があります。

  • クローラーがJSを実行しないため、オープングラフとTwitterメタタグを動的に更新できません

  • ビルドプロセス中の詳細ページは1回だけ生成されるため、ユーザーがURLパラメータを使用してそのページに移動するまで、関連するデータはありません（例：.
    example.com/cars/details?make=Audi&model=A6&carID=133852）その後、AJAX GET request for data

望ましい結果

すべての車の詳細ページに固有のグラフ、Twitter、その他のメタタグを開きます。

質問

生成された静的のみで望ましい結果を達成することは可能ですか？そうでない場合、プロセスはSSRまたはサーバー側で生成されたメタコンテンツでどのように見えますか？

現在、distフォルダーの構造は次のとおりです。

dist/
  ├ index.html
  ├ cars/
    ├ index.html
    └ details/
      ├ index.html
      └ payment/
        └ index.html

cars車のリストのページ

詳細車をクリックすると、選択した車の詳細ページに移動します

お支払い車購入ページ

vue.jsmeta-tagsnuxt.jsserver-side-rendering
4
user10651574

いいえ、事前にレンダリングされた静的HTMLを提供しながら、動的メタタグを提供することはできません。

Nuxtを universal モードで実行すると、APIからページデータをフェッチできます（ fetch 、 asyncDataを介して） または nuxtServerInit action ）、ページのHTMLコンテンツ（ダイナミックメタタグを含む）を生成し、ユーザーに提供します。

SSRでの簡単な使用例：

export default {
  async asyncData ({ query, store }) {
    const { make, model, cardID } = query
    // Validate query params

    // fetch data from API
    try {
      const carDetails = await store.dispatch('getCardInfo', { make, model, cardID })
      return {
         cardDetails
      }
    } catch (error) {
      // Redirect to error page or 404 depending on server response
    }
  },
  head () {
    return {
      title: this.carDetails.title,
      meta: [
        { hid: 'og-title', property: 'og:title', content: this.carDetails.title },
        // other meta
      ]
    }
  }
}

これにより、コンポーネントがレンダリングされる前にページデータが確実に読み込まれ、検索エンジンで使用するための有効なメタタグが含まれます。

補足：クエリパラメータを使用するのではなく、 動的ルート を確認することをお勧めします。これは、SEOとユーザーフレンドリーなURL（例：example.com/cars/audi/a6/133852）

3
aBiscuit