Nuxt.jsの公式ドキュメントを見ていると、useSeoMetaというコンポーザブルがあり、気になったので調べて使ってみました。
目次
そもそもuseHeadとuseSeoMetaでメタタグ生成するのに違いがあるの？
メタタグの生成時にはuseHeadを使っているのですが、そもそもuseHeadでメタタグ生成するのとuseSeoMetaで生成するのでは何か違いがあるのか分からず、調べてみました。
結論としては、どちらもSEOに関連するメタタグを生成できますが、useSeoMetaの方がより高度なSEO対策ができるみたいです。
- useHead：Nuxt の標準的なヘッドコンポーネントでメタタグ、リンクタグ、スタイルタグなどを生成できる
- useSeoMeta：SEOに関連するメタタグを生成するための専用コンポーネントでuseHeadよりも多くの機能を提供できる
useServerSeoMetaとuseSeoMetaの違いは？
もう少し調べてみると、useServerSeoMetaというのもあり、useSeoMetaの違いを調べてみました。
useServerSeoMeta は、SSRで使用することを想定されています。サーバー側でメタタグを生成するため、パフォーマンスへの影響が少なく、カスタマイズが容易です。
useSeoMeta は、SPAで使用することを想定されています。クライアント側でメタタグを生成するため、パフォーマンスへの影響があるものの、カスタマイズが難しいというデメリットがあります。
- useServerSeoMeta：サーバー側でメタタグを生成する。つまり、ページのHTML が生成されるタイミングでメタタグが生成される
- useSeoMeta：クライアント側でメタタグを生成する。つまり、ユーザーがページを読み込むたびに、メタタグが生成される
useServerSeoMetaを使ってみる
使い方はuseHeadで使っていたときみたいに、useServerSeoMetaの中に定義されているプロパティに対する値を入れてあげるだけです。
1 2 3 4 5 6 7 8 9 10 11 12 | <script setup lang="ts"> ... useServerSeoMeta({ title: 'test_title', description: 'test_description' }) ... </script> |
パラメータは100以上あり、詳しくはこちらを参照してください。
SSGでuseServerSeoMetaを使うと
SSGでどうなるか使ってみたのですが、発見があったのでまとめておきます。
useFetchしてコンテンツを取得して生成するページに関してはuseServerSeoMetaでメタタグ生成されましたが、サービス紹介ページのようなHTMLベタばりのページをSSGした場合は、useServerSeoMetaでメタタグ生成されないことがわかりました。
てっきりSSGの処理的には全ページをサーバー側で静的ページにビルドしていると思っていました。これはSSGでgenerateしてる時に、元々静的なページに関してはサーバー側で呼び出されてないのか分からないのですが、挙動が違ったことがわかりました。
useFetchしない静的ページに関してはuseSeoMetaを使うなどの使い分けが必要なのでしょうか。この辺り詳しい人に裏側でどうなっているのか聞いてみたいです。