⛳
`useHead` と `useSeoMeta` の違い(Nuxt Content v3)
useHead
1. 概要
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>
useSeoMeta
2. 概要
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>
useHead
vs useSeoMeta
の違い
3. 機能 | 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