Nuxt3 動的にmetaタグを設定 useSeoMetaの使い方

Nuxt3 useSeoMetaThis article explains how to use Nuxt3 useSeoMeta to dynamically set meta tags. The useSeoMeta function takes an object with properties such as title, description, keywords, and ogTitle. The values of these properties are used to set the corresponding meta tags.

by JanitorSep 14, 2023

Nuxt3で動的にmetaタグを設定する方法です。metaタグの設定も動的に簡単に実施することができます。

Jump Links

1. pagesフォルダにuseSeoMetaStudyフォルダを作成

2. api/getdataを作成

3. 動作確認

4. おわりに

1. pagesフォルダにuseSeoMetaStudyフォルダを作成

フォルダ名は何でも構いません。今回は「useSeoMetaStudy」というフォルダを作成しています。下の図の場合は、プロジェクト名が「nuxt3Study」で、「pages」フォルダに「useSeoMetaStudy」というフォルダを作成しています。作成したフォルダの直下にindex.vueを作成し、下記のコードをコピーアンドペーストしてください。

pages/useSeoMetaStudy/index.vue <script setup> var retUseFetch = null; retUseFetch = await useFetch( '/api/getdata', { method: 'GET' } ); useSeoMeta( { title: retUseFetch.data.value.title, description: retUseFetch.data.value.description, keywords: retUseFetch.data.value.keywords.join( "," ), ogTitle: retUseFetch.data.value.title, ogDescription: retUseFetch.data.value.description, ogImage: retUseFetch.data.value.img, } ); </script> <template> <VContainer> <div> useSeoMeta Study. </div> </VContainer> </template> <style> </style>

ソースコード内でやっていることは、「api/getdata」にデータをuseFetchで取得しに行き、useSeoMetaを使ってmetaタグに取得したデータを設定しています。

2. api/getdataを作成

index.vueで呼び出しているapiを作成します。「server/api」フォルダ（無い場合は作成）にgetdata.tsファイルを作成します。getdata.tsファイルに下記のスクリプトをコピーアンドペーストしてください。

server/api/getdata.ts export default defineEventHandler( ( event ) => { return { title: "useSeoMeta Study.", description: "この記事はuseSeoMetaの使い方の説明です。簡単にmetaタグの設定を動的に行うことが出来るのでとても便利です。", keywords: [ "Nuxt3", "useSeoMeta", "convenient" ], img: "https://comytom.com/C250.webp", } } )

スクリプト内でやっていることは、title、description、keywords、imgというプロパティを持つオブジェクトを返しています。

3. 動作確認

yarn devして、「http://localhost:3000/useSeoMetaStudy」にアクセスし、開発者ツールから要素タブを開き、headタグを見ると、下の図のように、作成したapiから返却した値がmetaタグに設定されていることがわかります。

useSeoMetaで設定が可能な一覧は下記のリンク先から確認できます。 https://github.com/harlan-zw/zhead/blob/main/src/metaFlat.ts 参考にさせて頂いたウェブサイトURL https://stackoverflow.com/questions/75983504/is-there-any-way-to-set-meta-tags-dynamically-in-nuxt-3