Nuxt.js SEO 最適化ガイド

2026年8月1日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 Nuxt.js SEO 最適化の基本戦略
2 プロジェクト構成確認と初期設定
- 2.1 nuxt.config.tsの基本構成チェック
- 2.2 ルートファイルとコンポーネント階層の可視化
3 動的メタタグ生成の実装方法
- 3.1 head()関数でのタイトル・ディスクリプション設定
- 3.2 useAsyncDataによるデータ取得とメタ情報更新
4 SSR/SSGによるクローラー対応
- 4.1 nuxt.config.tsでのtarget指定と選定根拠
5 URL構造とナビゲーションの最適化
- 5.1 ファイルベースルーティングの命名規則
- 5.2 パラメータ付きURLの canonicalタグ設定
6 画像最適化とLazy Loading実装
- 6.1 @nuxt/imageモジュールによる画像最適化
- 6.2 Lazy Loadingの実装例（Intersection Observer非推奨）
7 Google Search Consoleとの連携手順
- 7.1 サイトマップ自動生成設定
- 7.2 構造化データテストツールの活用
  - 7.2.1 OGPタグの実装例
  - 7.2.2 JSON-LDの実装例
8 まとめと今後のステップ

スポンサードリンク

Nuxt.js SEO 最適化の基本戦略

Nuxt.jsを用いたウェブサイトのSEO対策では、技術的設定とコンテンツ品質の両立が鍵となります。検索エンジンは動的なページ生成やURL構造、メタ情報などに注目し、ユーザー体験を重視した評価を行います。特にSSG/SSRによるクローラー対応や画像最適化は、実務で頻繁に課題となるポイントです。以下では、プロジェクトの初期設定からGoogle Search Console連携まで、具体的な手順を解説します。

プロジェクト構成確認と初期設定

Nuxt.jsプロジェクトのSEO対応状況を把握するには、まず基本的なファイル構成と設定内容の確認が不可欠です。特にnuxt.config.tsやルートファイルの設計次第で、後続の最適化作業に大きな影響が出ます。

nuxt.config.tsの基本構成チェック

Nuxt.jsプロジェクトではnuxt.config.tsで全体的な設定を定義しますが、SEO対応には以下の項目が重要です。

導入文:
このセクションでは、Nuxt.jsプロジェクトの初期構成におけるSEO関連設定について解説します。特にnuxt.config.tsでの基本設定とルートファイルの設計が後続の最適化に与える影響を説明します。

target指定: 'static'（SSG）または'server'（SSR）を選択し、静的生成や動的レンダリングの戦略を明確化
headメタ情報: サイトタイトルやOGPなど基本的なメタタグが定義されているか確認

例: nuxt.config.tsに以下のように設定することで、全ページで共通するメタ情報を自動生成できます。

export default defineNuxtConfig({
  head: {
    title: 'My Nuxt Site',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
})

export default defineNuxtConfig({

head: {

title: 'My Nuxt Site',

meta: [

{ charset: 'utf-8' },

{ name: 'viewport', content: 'width=device-width, initial-scale=1' }

]

}

})

ルートファイルとコンポーネント階層の可視化

ルートページ（pages/index.vue）や動的ルート（pages/[id].vue）が適切に構成されているか、プロジェクト全体を確認しましょう。

導入文:
このセクションでは、Nuxt.jsのルートファイルとコンポーネント階層の設計がSEOに与える影響について説明します。

nuxt generateで静的サイト生成を行うと、出力されるファイル構造からURL設計の可視化が可能です
一部のコンポーネントが動的にレンダリングされず、SEO対応外になっている可能性があるため、ルート階層を再確認

動的メタタグ生成の実装方法

ページごとにユニークなメタ情報を生成することで、検索エンジンに正確なコンテンツ内容が伝わりやすくなります。Nuxt.jsではhead()関数やライフサイクルフックで動的に設定できます。

head()関数でのタイトル・ディスクリプション設定

<script setup>で定義するuseHead()メソッドを使い、ページごとに異なる情報を指定します。

導入文:
このセクションでは、useHead()を使用した動的メタ情報生成の実装方法について解説します。

&lt;script setup&gt;
import { useHead } from '@vueuse/head'

useHead({
  title: '記事タイトル',
  meta: [
    { name: 'description', content: 'このページの説明文' },
    { property: 'og:title', content: 'OGP用タイトル' }
  ]
})
&lt;/script&gt;

import { useHead } from '@vueuse/head'

useHead({

title: '記事タイトル',

meta: [

{ name: 'description', content: 'このページの説明文' },

{ property: 'og:title', content: 'OGP用タイトル' }

]

})

</script>

useAsyncDataによるデータ取得とメタ情報更新

asyncData()はNuxt 3で非推奨となったため、代わりにuseAsyncData()を使用します。

導入文:
このセクションでは、useAsyncData()を使ってAPIから取得したデータを元にメタ情報を動的に変更する方法を解説します。

&lt;script setup&gt;
import { useRoute } from 'vue-router'
import { useAsyncData } from '#imports'

const route = useRoute()

const { data: article } = await useAsyncData(() =&gt; {
  return fetch(`/api/articles/${route.params.id}`)
    .then(res =&gt; res.json())
})

useHead({
  title: article.title,
  meta: [
    { name: 'description', content: article.summary }
  ]
})
&lt;/script&gt;

import { useRoute } from 'vue-router'

import { useAsyncData } from '#imports'

const route = useRoute()

const { data: article } = await useAsyncData(() => {

return fetch(`/api/articles/${route.params.id}`)

.then(res => res.json())

})

useHead({

title: article.title,

meta: [

{ name: 'description', content: article.summary }

]

})

</script>

SSR/SSGによるクローラー対応

Nuxt.jsはSSR（Server-Side Rendering）やSSG（Static Site Generation）を活用することで、検索エンジンがページコンテンツを正確に取得できるようになります。

nuxt.config.tsでのtarget指定と選定根拠

nuxt.config.tsでtarget: 'static'またはtarget: 'server'を設定し、生成方式を決定します。

導入文:
このセクションでは、SSGとSSRの選定基準とそれぞれのプロジェクト規模への適応方法を解説します。

ターゲット	説明	SEO対応のメリット
`static` (SSG)	ビルド時に全ページを静的HTMLで生成	クローラーが迅速にインデックス可能、パフォーマンス向上
`server` (SSR)	リクエストごとにサーバーから動的に生成	動的なコンテンツやパラメータ付きURLにも対応

選定根拠:

SSG: 静的ページが多数かつ更新頻度が低いプロジェクト（ブログ、FAQなど）に適す。
SSR: リアルタイムデータが必要なアプリケーションやパラメータ付きURLが多い場合に有効。

URL構造とナビゲーションの最適化

検索エンジンはURLの設計が重要視します。短く意味のあるURL構造を維持し、ページ間リンクの構造を整理することで、SEO効果が高まります。

ファイルベースルーティングの命名規則

Nuxt.jsではpages/ディレクトリ内のファイル名でURLが決定されるため、以下のルールに従って設計しましょう。

導入文:
このセクションでは、Nuxt.jsにおけるURL構造の最適化方法とナビゲーション設計の要点を解説します。

短く明確なスラッシュ区切り: /about/teamは/about/team.vueと定義
動的パラメータ: /posts/[id].vue → URL: /posts/123
拡張子の省略: pages/about/index.vue → URL: /about

パラメータ付きURLの canonicalタグ設定

パラメータ付きURL（例: /search?query=SEO）は、重複インデックスを防ぐためにタグを指定します。


導入文:

このセクションでは、パラメータ付きURLに canonicalタグを設定する方法とその意義について解説します。


		
		
			
			

			
			&lt;link rel=&quot;canonical&quot; href=&quot;https://example.com/search&quot;&gt;

			
				
					
				
					1
2
				
						&lt;link rel=&quot;canonical&quot; href=&quot;https://example.com/search&quot;&gt;
 
					
				
			
		



画像最適化とLazy Loading実装
高品質なコンテンツを提供するには、画像の負荷軽減が不可欠です。Nuxt.jsではモジュールやIntersection Observerで効率的なロードを実現できます。
@nuxt/imageモジュールによる画像最適化
@nuxt/imageモジュールを使うと、画像圧縮やリサイズ処理を自動化できます。  
導入文:

このセクションでは、@nuxt/imageモジュールのインストール・設定方法とLazy Loading機能について解説します。


インストール: npm install @nuxt/image

設定例:

   ts

   modules: [

     '@nuxt/image'

   ],

   image: {

     domains: ['example.com'],

     // Lazy Loadを自動的に有効化

     lazy: true

   }

画像タグの書き方: vue <img :src="https://example.com/images/photo.jpg`" alt="説明文">

Lazy Loadingの実装例（Intersection Observer非推奨）

Nuxt 3ではIntersection Observerを直接使用する必要がなく、@nuxt/imageで自動的にLazy Loadされます。

導入文:
このセクションでは、@nuxt/imageモジュールによる自動Lazy Loading機能の利用方法と、手動実装での冗長性について説明します。

Google Search Consoleとの連携手順

検索エンジンへの登録からクローラー監視までの一連の流れを確認しましょう。

サイトマップ自動生成設定

Nuxt.jsではnuxt generateで自動的にサイトマップが生成されます。

導入文:
このセクションでは、Google Search Consoleと連携するためのサイトマップ生成方法と構造化データテストツールの活用について解説します。

手動作成: /sitemap.xmlを作成し、nuxt.config.tsに以下を追加
ts export default defineNuxtConfig({ sitemap: { hostname: 'https://example.com', routes() { return ['/about', '/contact'] } } })

構造化データテストツールの活用

Google Search Consoleでは、構造化データテストツールでJSON-LDやOGPタグを検証できます。

導入文:
このセクションでは、構造化データ（OGP・JSON-LD）を正しく実装するための具体的な例とテスト手順を説明します。

OGPタグの実装例

&lt;script setup&gt;
import { useHead } from '@vueuse/head'

useHead({
  meta: [
    { property: 'og:title', content: '記事タイトル' },
    { property: 'og:description', content: 'OGP用説明文' },
    { property: 'og:image', content: 'https://example.com/images/ogp.jpg' }
  ]
})
&lt;/script&gt;

import { useHead } from '@vueuse/head'

useHead({

meta: [

{ property: 'og:title', content: '記事タイトル' },

{ property: 'og:description', content: 'OGP用説明文' },

{ property: 'og:image', content: 'https://example.com/images/ogp.jpg' }

]

})

</script>

JSON-LDの実装例

&lt;script setup&gt;
import { useHead } from '@vueuse/head'

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        &quot;@context&quot;: &quot;https://schema.org&quot;,
        &quot;@type&quot;: &quot;Article&quot;,
        &quot;headline&quot;: &quot;記事タイトル&quot;,
        &quot;description&quot;: &quot;記事の説明文&quot;,
        &quot;image&quot;: &quot;https://example.com/images/article.jpg&quot;
      })
    }
  ]
})
&lt;/script&gt;

import { useHead } from '@vueuse/head'

useHead({

script: [

{

type: 'application/ld+json',

innerHTML: JSON.stringify({

"@context": "https://schema.org",

"@type": "Article",

"headline": "記事タイトル",

"description": "記事の説明文",

"image": "https://example.com/images/article.jpg"

})

}

]

})

</script>

まとめと今後のステップ

Nuxt.jsのSEO対応は技術的設定とコンテンツ品質を両立させる必要があります。動的なメタ情報やSSR/SSGの選択、画像最適化などを手順通り実施することで、検索順位向上が期待できます。

今後のステップ:

useAsyncData()や@nuxt/imageモジュールの活用をプロジェクトに即座に適用
構造化データ（OGP・JSON-LD）のテストを定期的に行い、不具合の早期発見
プロジェクト規模に応じたSSG/SSR選定基準を明確化し、SEO戦略の最適化を実施

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Nuxt.js

comment コメントをキャンセル

: Nuxt.js

Nuxt3 Rendering Mode Selection & Deployment Settings for SEO Optimization

Nuxt3プロジェクトにおけるSEO最適化の第一歩はレンダリングモード選定。SSR/SSG/Hybridの特徴とNitroによるパフォーマンス向上策、動的ルート対応の構造化データ実装を解説。

: Nuxt.js

Nuxt 3で静的サイト生成の準備と手順 | ガイド

Node.jsインストールからnpm run generateまでのステップバイステップガイド。静的サイト生成モードの設定と動的ルート対策も解説しています。

: Nuxt.js

Nuxt3にTailwind CSS v4を導入する手順と設定方法

Nuxt3プロジェクトでTailwind CSS v4を導入する際の初期設定からカスタマイズまでの手順、およびNuxt UIとの併用時の注意点を解説します。

: Nuxt.js

Nuxt.js 3.5で静的サイトを構築する手順と実環境構築ガイド

Nuxt.js 3.5における静的サイト生成（SSG）の設定手順、nuxt.config.tsでのカスタマイズ方法とCI/CD連携例を解説。

: Nuxt.js

Nuxt の標準 meta 管理と最新 SEO プラグイン徹底比較

Nuxt 標準 API の useHead と useSeoMeta は便利ですが、JSON‑LD や動的 OGP 生成など高度な SEO 要件には対応しきれません。

2026ノーコード市場の動向とBubble選定ポイント

Nuxt.jsをVercelでデプロイする手順 | 初心者向けガイド