`useHead` と `useSeoMeta` の違い(Nuxt Content v3)

2025/01/29に公開

1. useHead

概要

useHead は、ページの <head> に設定するメタタグやタイトル、スクリプト、スタイルなどを自由に追加・カスタマイズできる関数です。

特徴

  • メタデータ以外も設定可能(例: script, link, style など)
  • 動的に変更可能
  • 上書きルールが複雑(キー名が重複すると後のものが適用される)

使い方

<script setup>
import { useHead } from '#app'

useHead({
  title: 'My Custom Page Title',
  meta: [
    { name: 'description', content: 'This is my custom page description' },
    { property: 'og:title', content: 'My OG Title' }
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ]
})
</script>

2. useSeoMeta

概要

useSeoMeta は、SEO に関連するメタタグを簡潔に設定するための関数です。

特徴

  • SEO向けのメタタグをシンプルに記述できる
  • useHead よりも簡単で直感的
  • 特定のキー(title, description, og:title など)が自動で適切な属性にセットされる
  • 上書きルールが明確(後から設定したものが適用される)

使い方

<script setup>
import { useSeoMeta } from '#app'

useSeoMeta({
  title: 'My SEO Title',
  description: 'This is an SEO-friendly description',
  ogTitle: 'My Open Graph Title',
  ogDescription: 'This is an OG description',
  ogImage: 'https://example.com/og-image.jpg',
  twitterCard: 'summary_large_image'
})
</script>

3. useHead vs useSeoMeta の違い

機能 useHead useSeoMeta
設定可能な項目 任意の <head> 要素 SEO 関連のメタタグのみ
記述の簡潔さ 煩雑(オブジェクト配列) シンプル(プロパティ指定)
SEO向けの最適化 手動で記述が必要 自動で適切な属性に変換
上書きルール 上書きルールが複雑 明確なルール(後の値が適用)
動的更新 可能 可能

4. どちらを使うべきか?

  • SEO対策が目的ならuseSeoMeta
  • ページの <head> に細かく制御を加えたいならuseHead
  • 両方を併用することも可能
    • useSeoMeta で SEO に関するメタタグをセット
    • useHead でその他の <head> 要素を追加

併用例

<script setup>
import { useHead, useSeoMeta } from '#app'

useSeoMeta({
  title: 'SEO Optimized Title',
  description: 'This is an optimized description',
  ogTitle: 'My Open Graph Title',
  ogImage: 'https://example.com/og-image.jpg',
  twitterCard: 'summary_large_image'
})

useHead({
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ],
  script: [
    { src: 'https://example.com/script.js', async: true }
  ]
})
</script>

結論

  • SEO関連のメタタグのみをシンプルに設定するなら useSeoMeta
  • ページ全体の <head> を制御するなら useHead
  • 状況に応じて両方を組み合わせるのがベスト 🚀

Discussion