Zenn
🐕

Nuxt3でOGPに対応しようとして苦労した話

2024/12/03に公開
SSR
Open Graph protocol
Nuxt 3
meta
tech

結論

SPAからSSRに急に変えたため色々エラーが出た。
対策（？）としてApp.vueで全体を<ClienyOnly>で囲んだら、設定したメタデータが適用されなかった（当たり前）。

<ClienyOnly>は適切に使わないといけない、各ページでメタデータを設定する場合、せめてページの箇所（<NuxtPage/>）だけでも<ClienyOnly>から除外する。

Nuxt3のSSRの問題

次の記事で書く

OGPについて

全体に共通のものはnuxt.config.tsとかに書く

nuxt.config.ts
export default defineNuxtConfig({
  app: {
      head: {
          titleTemplate: title,
          title: title,
          htmlAttrs: {
              lang: 'ja',
          },
          meta: [
              {charset: 'utf-8'},
              {name: 'viewport', content: 'width=device-width, initial-scale=1'},
              {name: 'description', content: description},
              {name: 'format-detection', content: 'telephone=no'},
              {name: 'content-language', content: 'ja'},
              {name: 'apple-mobile-web-app-capable', content: 'yes'},
              {name: 'mobile-web-app-capable', content: 'yes'},
          ],
          link: [
              {rel: 'icon', type: 'image/x-icon', href: `/favicon.ico`},
          ]
      },
  },

各ページではuseHeadを利用して設定する。動的なページ（ルーティング）に設定したい場合は、多分SSRでないと駄目。
SSRではuseAsyncDataを使用して事前データを取得する。useAsyncDataはPOSTでも使える。

書いておくべきなのは基本次のメタ情報

各ページの<script setup>
useHead({
	title: title,
	meta: [
		{name: 'description', content: description},
		{name: 'og:title', property: 'og:title', content: title},
		{name: 'og:description', property: 'og:description', content: description},
		// X(Twitter)
		{name: 'twitter:site', content: '@oshivo_ex'},
		{name: 'twitter:card', content: 'summary_large_image'},
		{name: 'twitter:title', content: title},
		{name: 'twitter:description', content: description},
	]
})

OGP確認サイト

以下など
https://rakko.tools/tools/9/

Discussion