こんにちは、合同会社Stegのkeigoです。今回は、Nuxt OG Imageを利用したOG画像の動的生成方法を紹介します。
Nuxt OG Imageとは
Nuxt OG Imageとは、Vueテンプレートを使用してOG画像の生成が可能なNuxtモジュールのライブラリです。
完成イメージ
初期設定
インストール
npm install -D nuxt-og-image
nuxt.config
nuxt.config.tsに、modules: ['nuxt-og-image']を追記します。
export default defineNuxtConfig({
modules: ['nuxt-og-image']
})
OG画像の指定には絶対パスが必要であるため、本番公開URLを nuxt.config.ts へ記載する必要があります。
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['nuxt-og-image'],
site: {
// production URL
url: 'https://example.com/',
},
})
siteの記述で型エラーが発生した場合
一度 npm run build を実行することで解決します。
ビルドを挟むことにより、 nuxt-og-image ライブラリに含まれる型情報が、 NuxtConfig 型へ追加されます。
OG Imageを設定する
OG Imageを設定したいページで、以下のコードを記述します。
<script setup lang="ts">
defineOgImageComponent('NuxtSeo')
</script>
見てみる 👀
以上で設定は完了です！生成されるOG画像を見てみましょう。
Nuxt DevToolsで見る
デフォルトでは、Nuxt DevToolsが有効になっています。有効になっていない方は、nuxt.configにて有効にしてみましょう。
OG Imageを有効化したページで、Nuxt DevToolsを起動します。
command + Kで検索窓を開き、OGと入力してください。
すると、OG画像が表示されました！🎉
少しカスタムしてみる
第一引数で指定している NuxtSeo は、デフォルトで用意されているテンプレートです。NuxtSeoを指定している場合、以下のようにdefineOgImageComponent関数の第二引数に値を渡すことで、各項目をカスタマイズできます。
<script setup lang="ts">
defineOgImageComponent('NuxtSeo', {
title: 'Hello OG Image 👋',
description: 'Look what at me in dark mode',
theme: '#ff0000',
colorMode: 'dark',
})
</script>
おわりに
Nuxt OG Imageを使用することで、OG画像の動的生成を容易に実現できます！SEO周りに興味ある方は、Nuxt SEOというオールインワンモジュールもあるのでぜひチェックしてみてください！
Discussion