T-CREATOR

Nuxt useHead／useSeoMeta 定番スニペット集：OGP／構造化データ／国際化メタ

Nuxt useHead／useSeoMeta 定番スニペット集：OGP／構造化データ／国際化メタ

Nuxt 3 で Web アプリケーションを開発する際、SEO 対策は避けて通れない重要な要素です。検索エンジンに正しく情報を伝え、SNS でのシェア時に美しいカードを表示させるには、適切なメタタグの設定が欠かせません。

Nuxt 3 では、useHeadとuseSeoMetaという 2 つの強力な Composable が用意されており、これらを使いこなすことでメタタグ管理が格段に簡単になります。本記事では、OGP（Open Graph Protocol）、構造化データ、国際化メタタグといった実務で必須となるスニペットを、すぐに使える形でご紹介していきますね。

useHead と useSeoMeta 使い分け早見表

#用途使用する Composable主な設定項目
1SEO メタタグuseSeoMetatitle、description、keywords
2OGP タグuseSeoMetaogTitle、ogDescription、ogImage、ogType
3Twitter カードuseSeoMetatwitterCard、twitterSite、twitterImage
4構造化データ（JSON-LD）useHeadscript 要素（type: application/ld+json）
5canonical タグuseHeadlink 要素（rel: canonical）
6hreflang タグ（国際化）useHeadlink 要素（rel: alternate、hreflang）
7ファビコン・スタイル設定useHeadlink 要素、style 要素
8外部スクリプト読み込みuseHeadscript 要素（src 指定）

OGP 設定早見表

#プロパティ名設定値の例用途・説明
1titleサイト・ページのタイトル検索結果に表示される基本タイトル
2description120 文字程度の説明文検索結果のスニペット
3ogTitleSNS 用タイトルSNS シェア時のタイトル
4ogDescriptionSNS 用説明文SNS シェア時の説明
5ogImagehttps://example.com/og-image.jpgSNS シェア時の画像（1200×630px 推奨）
6ogTypewebsite / article / productコンテンツタイプ
7ogUrlhttps://example.com/pageページの正規 URL
8twitterCardsummary_large_image / summaryTwitter カードタイプ
9twitterSite@your_accountサイトの Twitter アカウント
10articlePublishedTime2024-01-01T00:00:00Z記事の公開日時（article タイプ時）

構造化データ（JSON-LD）早見表

#スキーマタイプ@type主要プロパティ用途
1記事Articleheadline、image、datePublished、authorブログ記事・ニュース記事
2ブログ投稿BlogPostingheadline、image、datePublished、authorブログ記事（Article の特化版）
3パンくずリストBreadcrumbListitemListElement（position、name、item）ページ階層の表示
4商品Productname、image、offers（price、priceCurrency、availability）EC サイトの商品ページ
5組織Organizationname、url、logo、sameAs企業・団体情報
6人物Personname、url、image、jobTitle著者・スタッフ情報
7レビューReviewreviewRating、author、reviewBody商品・サービスのレビュー
8FAQFAQPagemainEntity（Question、Answer）よくある質問ページ

国際化メタタグ早見表

#設定項目設定値の例用途・説明
1hreflang（日本語）ja日本語ページを示す
2hreflang（英語）en英語ページを示す
3hreflang（中国語）zh中国語ページを示す
4hreflang（米国英語）en-USアメリカ英語（地域指定）
5hreflang（英国英語）en-GBイギリス英語（地域指定）
6hreflang（簡体字）zh-CN中国本土の中国語
7hreflang（繁体字）zh-TW台湾の中国語
8x-defaultデフォルト言語の URLどの言語にも該当しない場合の代替
9ogLocaleja_JP / en_US / zh_CNOGP での言語・地域指定

背景

Nuxt 2 から Nuxt 3 への進化

Nuxt 2 では、headオプションやvue-metaを使ってメタタグを管理していました。しかし、型安全性や開発体験の面で改善の余地がありました。

Nuxt 3 では、Composition API ベースのuseHeadとuseSeoMetaが導入され、TypeScript との相性も抜群です。これにより、メタタグの管理がより直感的で安全になりました。

以下の図は、Nuxt 2 と Nuxt 3 におけるメタタグ管理の変遷を示しています。

mermaidflowchart TB
    nuxt2["Nuxt 2"] -->|headオプション| vm["vue-meta"]
    vm -->|レンダリング| html2["HTML出力"]

    nuxt3["Nuxt 3"] -->|Composable| uh["useHead"]
    nuxt3 -->|Composable| usm["useSeoMeta"]
    uh -->|統合| unhead["@unhead/vue"]
    usm -->|統合| unhead
    unhead -->|レンダリング| html3["HTML出力<br/>（型安全）"]

    style nuxt3 fill:#42b883
    style unhead fill:#00dc82

図で理解できる要点：

  • Nuxt 2 ではvue-metaを経由していた
  • Nuxt 3 では@unhead​/​vueによる統一的な管理
  • 型安全性が大幅に向上

Nuxt 3 のメタタグ管理の特徴

Nuxt 3 では、@unhead​/​vueというライブラリが内部で使われており、以下のような利点があります。

  • リアクティブな更新: データの変更に応じて自動的にメタタグが更新される
  • 型安全性: TypeScript による補完とエラーチェック
  • パフォーマンス: SSR 時の最適化された処理

これらの特徴により、開発者はより少ないコードで、より高品質な SEO 対策を実現できるようになりました。

課題

メタタグ管理における 3 つの主要課題

実際の開発現場では、以下のような課題に直面することが多いです。

1. OGP 設定の複雑さ

Twitter カードと Facebook 用の OGP では、微妙に異なるプロパティが必要です。また、画像サイズや URL の指定など、細かい仕様を覚える必要があります。

2. 構造化データの記述方法

Google 検索でリッチリザルトを表示させるには、JSON-LD 形式の構造化データが必要ですが、その記述方法は複雑で、手書きではミスが発生しやすいです。

3. 国際化対応の難しさ

多言語サイトでは、各言語のページを相互にリンクするhreflangタグが必要ですが、その設定は煩雑になりがちです。

以下の図は、これらの課題とその影響を整理したものです。

mermaidflowchart TD
    challenge["メタタグ管理の課題"] --> ogp["OGP設定の複雑さ"]
    challenge --> sd["構造化データの記述"]
    challenge --> i18n["国際化対応の難しさ"]

    ogp --> ogp1["Twitter/Facebook<br/>仕様の違い"]
    ogp --> ogp2["画像サイズ要件"]
    ogp --> ogp3["必須/任意<br/>プロパティの把握"]

    sd --> sd1["JSON-LD構文エラー"]
    sd --> sd2["スキーマ仕様の理解"]
    sd --> sd3["検証ツールの活用"]

    i18n --> i181["hreflangタグの設定"]
    i18n --> i182["言語コードの正確性"]
    i18n --> i183["代替URL管理"]

    style challenge fill:#ff6b6b
    style ogp fill:#ffd93d
    style sd fill:#ffd93d
    style i18n fill:#ffd93d

図で理解できる要点：

  • 3 つの主要課題が存在
  • それぞれに細かい技術的要件がある
  • 体系的なアプローチが必要

課題が引き起こす問題

これらの課題を放置すると、以下のような問題が発生します。

  • SNS でシェアされても画像が表示されない
  • 検索結果に魅力的なリッチスニペットが表示されない
  • 多言語サイトで重複コンテンツとみなされる

結果として、せっかく良いコンテンツを作っても、その価値が十分に伝わらない可能性があります。

解決策

useHead と useSeoMeta の使い分け

Nuxt 3 では、用途に応じて 2 つの Composable を使い分けることで、効率的にメタタグを管理できます。

useHead の役割

useHeadは、<head>要素内のあらゆる要素を管理できる汎用的な Composable です。メタタグだけでなく、タイトル、スクリプト、スタイルシートなども設定できます。

useSeoMeta の役割

useSeoMetaは、SEO 関連のメタタグに特化した Composable です。型安全性が高く、OGP や Twitter カードの設定が簡潔に書けます。

以下の図は、2 つの Composable の使い分けを示しています。

mermaidflowchart LR
    req["要件"] --> check{"SEO関連<br/>メタタグ？"}

    check -->|Yes| usm["useSeoMeta"]
    check -->|No| uh["useHead"]

    usm --> usm1["OGP"]
    usm --> usm2["Twitterカード"]
    usm --> usm3["基本メタタグ"]

    uh --> uh1["title要素"]
    uh --> uh2["script要素"]
    uh --> uh3["link要素"]
    uh --> uh4["構造化データ"]

    style usm fill:#42b883
    style uh fill:#00dc82

図で理解できる要点：

  • SEO メタタグならuseSeoMetaを選択
  • それ以外はuseHeadを使用
  • 役割が明確に分離されている

基本的な設定パターン

以下は、それぞれの Composable の基本的な使用例です。

useSeoMeta の基本形

typescript// SEO関連のメタタグを設定
useSeoMeta({
  title: 'ページタイトル',
  description: 'ページの説明文',
  ogTitle: 'OGPタイトル',
  ogDescription: 'OGPの説明文',
  ogImage: 'https://example.com/image.jpg',
});

この例では、useSeoMetaを使って基本的な SEO メタタグを設定しています。プロパティ名が直感的で、TypeScript の型補完も効くため、間違いが起きにくいです。

useHead の基本形

typescript// より汎用的な設定
useHead({
  title: 'ページタイトル',
  meta: [
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1',
    },
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
});

useHeadでは、オブジェクト形式で様々な要素を設定できます。メタタグは配列形式で複数指定することも可能です。

2 つの Composable を組み合わせる

実際のアプリケーションでは、両方を組み合わせて使うことが多いです。

typescript// コンポーネント内での使用例
const route = useRoute();

// SEOメタタグ
useSeoMeta({
  title: '商品詳細ページ',
  ogType: 'product',
});

// その他のhead要素
useHead({
  link: [
    {
      rel: 'canonical',
      href: `https://example.com${route.path}`,
    },
  ],
});

この例では、useSeoMetaで SEO 関連を、useHeadで canonical タグを設定しています。役割を分けることで、コードの可読性が向上しますね。

具体例

OGP 設定の完全なスニペット

SNS でシェアされた際に美しいカードを表示するための OGP 設定です。

基本的な OGP 設定

typescript// pages/index.vue
<script setup lang="ts">
useSeoMeta({
  // 基本情報
  title: 'サイトのタイトル',
  description: 'サイトの説明文。120文字程度が推奨されます。',

  // OGP基本設定
  ogTitle: 'SNS用タイトル',
  ogDescription: 'SNSでシェアされた時の説明文',
  ogType: 'website',
  ogUrl: 'https://example.com/',
  ogImage: 'https://example.com/og-image.jpg',
})
</script>

このコードは、Facebook や LINE などでシェアされた際の表示を制御します。ogImageは 1200×630 ピクセルの画像を指定するのが一般的です。

画像サイズの詳細指定

typescript// OGP画像の詳細設定
useSeoMeta({
  ogImage: 'https://example.com/og-image.jpg',
  ogImageWidth: '1200',
  ogImageHeight: '630',
  ogImageType: 'image/jpeg',
  ogImageAlt: '画像の代替テキスト',
});

画像のサイズとタイプを明示することで、SNS プラットフォームがより適切に画像を処理できます。アクセシビリティのため、代替テキストも忘れずに設定しましょう。

Twitter カード対応

typescript// Twitter用の追加設定
useSeoMeta({
  // Twitter Card
  twitterCard: 'summary_large_image',
  twitterSite: '@your_twitter_account',
  twitterCreator: '@author_account',
  twitterTitle: 'Twitter用タイトル',
  twitterDescription: 'Twitter用の説明文',
  twitterImage: 'https://example.com/twitter-image.jpg',
});

Twitter では、summary（小さい画像）またはsummary_large_image（大きい画像）のカードタイプを選択できます。大きい画像の方が目を引きやすいですね。

動的な OGP 設定

typescript// pages/articles/[id].vue
<script setup lang="ts">
const route = useRoute()
const articleId = route.params.id

// APIから記事データを取得
const { data: article } = await useFetch(`/api/articles/${articleId}`)

// 記事データに基づいてOGPを設定
useSeoMeta({
  title: article.value?.title,
  description: article.value?.summary,
  ogTitle: article.value?.title,
  ogDescription: article.value?.summary,
  ogImage: article.value?.coverImage,
  ogType: 'article',
  articlePublishedTime: article.value?.publishedAt,
  articleModifiedTime: article.value?.updatedAt,
  articleAuthor: article.value?.author.name,
})
</script>

このコードは、記事の詳細ページで動的に OGP を設定する例です。useFetchで取得したデータをそのままメタタグに反映できるため、コードがシンプルになります。

構造化データ（JSON-LD）のスニペット

Google の検索結果にリッチスニペットを表示するための構造化データ設定です。

記事（Article）の構造化データ

typescript// 構造化データの型定義
interface ArticleSchema {
  '@context': string;
  '@type': string;
  headline: string;
  image: string[];
  datePublished: string;
  dateModified: string;
  author: {
    '@type': string;
    name: string;
  };
}

まず、TypeScript で構造化データの型を定義します。これにより、必須プロパティの漏れを防げます。

typescript// 構造化データの生成
const articleSchema: ArticleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: article.value?.title || '',
  image: [article.value?.coverImage || ''],
  datePublished: article.value?.publishedAt || '',
  dateModified: article.value?.updatedAt || '',
  author: {
    '@type': 'Person',
    name: article.value?.author.name || '',
  },
};

型定義に基づいて、実際のデータオブジェクトを構築します。記事データから必要な情報を抽出していますね。

typescript// useHeadで構造化データを設定
useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify(articleSchema),
    },
  ],
});

useHeadのscript要素として、JSON-LD 形式の構造化データを挿入します。childrenプロパティに JSON 文字列を指定することがポイントです。

パンくずリスト（BreadcrumbList）の構造化データ

typescript// パンくずリストの型定義
interface BreadcrumbSchema {
  '@context': string;
  '@type': string;
  itemListElement: Array<{
    '@type': string;
    position: number;
    name: string;
    item?: string;
  }>;
}

パンくずリストの構造化データ用の型を定義します。ユーザーの現在位置を検索エンジンに伝えるために重要です。

typescript// パンくずリストデータの生成
const breadcrumbSchema: BreadcrumbSchema = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    {
      '@type': 'ListItem',
      position: 1,
      name: 'ホーム',
      item: 'https://example.com/',
    },
    {
      '@type': 'ListItem',
      position: 2,
      name: 'ブログ',
      item: 'https://example.com/blog',
    },
    {
      '@type': 'ListItem',
      position: 3,
      name: article.value?.title || '',
    },
  ],
};

階層構造を配列で表現し、各階層にpositionを指定します。最後の要素にはitem（URL）を指定しないのがポイントですね。

typescript// パンくずリストを設定
useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify(breadcrumbSchema),
    },
  ],
});

商品（Product）の構造化データ

typescript// 商品の構造化データ
const productSchema = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: product.value?.name,
  image: product.value?.images,
  description: product.value?.description,
  brand: {
    '@type': 'Brand',
    name: product.value?.brand,
  },
  offers: {
    '@type': 'Offer',
    price: product.value?.price,
    priceCurrency: 'JPY',
    availability: 'https://schema.org/InStock',
  },
};

useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify(productSchema),
    },
  ],
});

EC サイトでは、商品情報の構造化データを設定することで、価格や在庫状況が検索結果に表示されるようになります。

複数の構造化データを同時に設定

typescript// 記事とパンくずを同時に設定
useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify(articleSchema),
    },
    {
      type: 'application/ld+json',
      children: JSON.stringify(breadcrumbSchema),
    },
  ],
});

複数の構造化データは、script配列に複数のオブジェクトを追加することで設定できます。それぞれが独立した<script>タグとして出力されますね。

国際化メタタグのスニペット

多言語サイトで必須となるhreflangタグの設定方法です。

基本的な hreflang 設定

typescript// nuxt.config.ts での多言語設定
export default defineNuxtConfig({
  i18n: {
    locales: ['ja', 'en', 'zh'],
    defaultLocale: 'ja',
  },
});

まず、Nuxt の国際化設定で対応言語を定義します。@nuxtjs​/​i18nモジュールを使用する前提です。

typescript// pages/index.vue
<script setup lang="ts">
const { locale, locales } = useI18n()
const route = useRoute()

// 現在のパスを取得
const currentPath = route.path

// 各言語のURLを生成
const alternateLinks = locales.value.map(loc => ({
  rel: 'alternate',
  hreflang: loc.code,
  href: `https://example.com/${loc.code}${currentPath}`
}))
</script>

useI18nから言語情報を取得し、各言語版の URL を生成します。すべての言語に対して代替 URL を提供することが重要です。

typescript// hreflangタグを設定
useHead({
  link: [
    ...alternateLinks,
    {
      rel: 'alternate',
      hreflang: 'x-default',
      href: `https://example.com/ja${currentPath}`,
    },
  ],
});

生成した代替リンクをuseHeadで設定します。x-defaultは、どの言語にも該当しない場合のデフォルト言語を指定しますね。

動的ルートでの国際化メタタグ

typescript// pages/articles/[id].vue
<script setup lang="ts">
const { locale, locales } = useI18n()
const route = useRoute()
const articleId = route.params.id

// 記事データを取得（多言語対応）
const { data: article } = await useFetch(
  `/api/articles/${articleId}?lang=${locale.value}`
)

// 各言語版のメタタグ設定
useSeoMeta({
  title: article.value?.title,
  description: article.value?.summary,
  ogLocale: locale.value === 'ja' ? 'ja_JP' :
            locale.value === 'en' ? 'en_US' : 'zh_CN',
})

動的ルートでは、現在の言語に応じた記事データを取得し、ogLocaleで OGP の言語も明示します。

typescript// 言語ごとの代替URL
const alternateLinks = locales.value.map((loc) => ({
  rel: 'alternate',
  hreflang: loc.code,
  href: `https://example.com/${loc.code}/articles/${articleId}`,
}));

useHead({
  link: alternateLinks,
});

記事ページでも同様に、各言語版へのリンクを設定します。検索エンジンは、これにより言語ごとの適切なページを判別できますね。

地域別の言語設定

typescript// 同じ言語でも地域が異なる場合
const regionalLinks = [
  {
    rel: 'alternate',
    hreflang: 'en-US',
    href: 'https://example.com/en-us',
  },
  {
    rel: 'alternate',
    hreflang: 'en-GB',
    href: 'https://example.com/en-gb',
  },
  {
    rel: 'alternate',
    hreflang: 'zh-CN',
    href: 'https://example.com/zh-cn',
  },
  {
    rel: 'alternate',
    hreflang: 'zh-TW',
    href: 'https://example.com/zh-tw',
  },
];

useHead({
  link: regionalLinks,
});

英語や中国語など、地域によって異なるバージョンを提供する場合は、en-USやzh-CNといった地域コード付きの言語タグを使用します。

実践的な組み合わせ例

以下は、これまでのスニペットを組み合わせた、実務で使える完全な例です。

ブログ記事ページの完全設定

typescript// composables/useBlogSeo.ts
export const useBlogSeo = (
  article: Ref<Article | null>
) => {
  const route = useRoute();
  const { locale } = useI18n();

  // 基本的なSEOメタタグ
  useSeoMeta({
    title: article.value?.title,
    description: article.value?.summary,
    ogTitle: article.value?.title,
    ogDescription: article.value?.summary,
    ogImage: article.value?.coverImage,
    ogType: 'article',
    ogUrl: `https://example.com${route.path}`,
    articlePublishedTime: article.value?.publishedAt,
    articleModifiedTime: article.value?.updatedAt,
    twitterCard: 'summary_large_image',
  });
};

再利用可能な Composable として、ブログ SEO 設定をまとめます。これにより、各ページで同じコードを書く必要がなくなります。

typescript// Composableの続き（構造化データ）
export const useBlogSeo = (
  article: Ref<Article | null>
) => {
  // ... 前述のコード

  // 構造化データ
  const articleSchema = computed(() => ({
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: article.value?.title,
    image: [article.value?.coverImage],
    datePublished: article.value?.publishedAt,
    dateModified: article.value?.updatedAt,
    author: {
      '@type': 'Person',
      name: article.value?.author.name,
    },
  }));
};

computedを使うことで、記事データが更新されたときに自動的に構造化データも更新されます。

typescript// Composableの続き（その他のhead要素）
export const useBlogSeo = (
  article: Ref<Article | null>
) => {
  // ... 前述のコード

  useHead({
    script: [
      {
        type: 'application/ld+json',
        children: () => JSON.stringify(articleSchema.value),
      },
    ],
    link: [
      {
        rel: 'canonical',
        href: `https://example.com${route.path}`,
      },
    ],
  });
};

canonical タグも忘れずに設定します。関数形式でchildrenを指定することで、リアクティブな値を扱えますね。

ページでの使用方法

typescript// pages/blog/[slug].vue
<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug

// 記事データ取得
const { data: article } = await useFetch(`/api/articles/${slug}`)

// SEO設定を適用
useBlogSeo(article)
</script>

<template>
  <article>
    <h1>{{ article?.title }}</h1>
    <p>{{ article?.content }}</p>
  </article>
</template>

実際のページでは、Composable を呼び出すだけで、すべての SEO 設定が適用されます。コードが非常にシンプルになりましたね。

以下の図は、メタタグがどのように適用されるかのフローを示しています。

mermaidflowchart TD
    page["ページコンポーネント"] -->|データ取得| api["API"]
    api -->|記事データ| page

    page -->|データ渡し| comp["useBlogSeo<br/>Composable"]

    comp -->|SEOメタ| usm["useSeoMeta"]
    comp -->|構造化データ| uh["useHead"]
    comp -->|canonical等| uh

    usm -->|レンダリング| head["HTMLヘッダー"]
    uh -->|レンダリング| head

    head -->|出力| html["最終HTML<br/><head>...</head>"]

    style comp fill:#42b883
    style html fill:#00dc82

図で理解できる要点：

  • ページから Composable にデータを渡す
  • Composable 内で複数の API を呼び出し
  • 最終的に HTML ヘッダーとして出力される

EC サイト商品ページの設定

typescript// composables/useProductSeo.ts
export const useProductSeo = (
  product: Ref<Product | null>
) => {
  const route = useRoute();

  useSeoMeta({
    title: `${product.value?.name} | ショップ名`,
    description: product.value?.description,
    ogType: 'product',
    ogImage: product.value?.images[0],
    productPrice: product.value?.price.toString(),
    productCurrency: 'JPY',
  });
};

商品ページ用の Composable では、ogTypeをproductに設定し、価格情報も含めます。

typescript// 商品の構造化データ
export const useProductSeo = (
  product: Ref<Product | null>
) => {
  // ... 前述のコード

  const productSchema = computed(() => ({
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.value?.name,
    image: product.value?.images,
    description: product.value?.description,
    sku: product.value?.sku,
    brand: {
      '@type': 'Brand',
      name: product.value?.brand,
    },
    offers: {
      '@type': 'Offer',
      price: product.value?.price,
      priceCurrency: 'JPY',
      availability: product.value?.inStock
        ? 'https://schema.org/InStock'
        : 'https://schema.org/OutOfStock',
      url: `https://example.com${route.path}`,
    },
  }));

  useHead({
    script: [
      {
        type: 'application/ld+json',
        children: () => JSON.stringify(productSchema.value),
      },
    ],
  });
};

商品の在庫状況も構造化データに含めることで、検索結果に在庫情報が表示される可能性が高まります。

まとめ

Nuxt 3 のuseHeadとuseSeoMetaを使いこなすことで、SEO 対策が格段に効率化されます。本記事でご紹介したスニペットをまとめると、以下のようになります。

使い分けの原則

useSeoMetaは、OGP、Twitter カード、基本的な SEO メタタグに特化した型安全な Composable です。一方、useHeadは、構造化データ、canonical タグ、その他の head 要素全般を扱います。

OGP 設定のポイント

画像サイズ（1200×630px 推奨）、必須プロパティ（title、description、image、url）を漏れなく設定することが重要です。Twitter カードはsummary_large_imageを使うことで、視覚的なインパクトを高められますね。

構造化データの実装

記事、商品、パンくずリストなど、コンテンツタイプに応じた適切なスキーマを選択しましょう。TypeScript の型定義を活用することで、必須プロパティの漏れを防げます。

国際化対応の実践

hreflangタグで各言語版を相互にリンクし、x-defaultでデフォルト言語を明示します。地域別の言語設定が必要な場合は、en-USやzh-CNといった詳細な言語コードを使用しましょう。

Composable での再利用

実務では、Composable として切り出すことで、コードの重複を避け、メンテナンス性を高められます。computedを活用してリアクティブな構造化データを実現することもポイントです。

これらのスニペットを活用することで、検索エンジンに正しく情報を伝え、SNS での拡散効果を最大化し、ユーザーにとって価値のある検索体験を提供できます。SEO 対策は一朝一夕には成果が出ませんが、適切な設定を継続することで、着実にトラフィックの増加につながっていくでしょう。

ぜひ、これらのスニペットをプロジェクトに取り入れて、より多くのユーザーにコンテンツを届けてくださいね。

関連リンク

Nuxtの記事Nuxt

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る