Next.js 開発者のための技術的SEO: ヒントとツール

技術的SEOは、Next.js サイトが簡単にインデックス化され、高速で、検索結果で競争力を持つために不可欠です。このガイドでは、多言語サイトに特に焦点を当て、SEOを次のレベルに引き上げるための戦略、ツール、実用的なスニペットを紹介します。

1. 動的メタタグとOpen Graph

Next.js 13+では、generateMetadata関数を使用してメタタグを集中管理できます：

export async function generateMetadata({ params }) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'common' });
  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      images: ['/public/placeholder.svg'],
    },
    icons: {
      icon: '/favicon.ico',
    },
  };
}

ヒント： 各言語とページのメタタグを動的翻訳を使用して更新することを忘れないでください。

2. 自動生成されたSitemapとrobots.txt

Sitemapとrobots.txtを生成するには、next-sitemapを使用します：

npm install next-sitemap

next-sitemap.config.jsを設定して言語をサポートします：

module.exports = {
  siteUrl: 'https://spinny.dev',
  generateRobotsTxt: true,
  i18n: {
    locales: ['it', 'en', 'fr', 'de', 'es', 'ar', 'hi', 'ja', 'zh'],
    defaultLocale: 'it',
  },
};

追加ツール： next-seoを試して、メタタグと構造化データの高度な管理を行いましょう。

3. 国際化 (i18n) と多言語SEO

Next.jsはローカライズされたルートをサポートしています。以下を忘れないでください：

• 各言語にhreflangタグを使用する。
• 多言語Sitemapを生成する。
• メタタグを翻訳する。

hreflangタグの例：

<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />

ベストプラクティス： 常に目に見える言語セレクターを提供し、URLの一貫性を保ちます。

4. パフォーマンスとCore Web Vitals

• Next.jsの<Image />を使用して画像を最適化します。
• レイジーローディングを有効にします。
• LighthouseとVercel Analyticsで分析します。
• 未使用のJavaScriptとCSSを最小化します。
• VercelのキャッシュとCDNを活用します。

5. 構造化データ (JSON-LD)

リッチスニペットでの可視性を向上させるために構造化データを追加します：

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BlogPosting',
      headline: 'Next.js 開発者のための技術的SEO',
      datePublished: '2025-07-28',
      author: { '@type': 'Person', name: 'Filippo Spinella' },
      inLanguage: 'ja',
    }),
  }}
/>

ヒント： 必要に応じて、パンくずリスト、記事、製品の構造化データも追加します。

6. エラー処理とカスタム404ページ

各言語にローカライズされたnot-found.tsxページを作成します。これにより、ユーザーエクスペリエンスとSEOが向上します。

ヒント： 500ページやサーバーエラーページもカスタマイズします。

7. 有用なツール

• next-sitemap：Sitemapとrobots.txt
• next-seo：高度なメタタグ管理
• Google Search Console：SEOモニタリング
• Ahrefs Webmaster Tools：技術分析
• Screaming Frog：高度なクロールツール
• Mermaid：SEOフローとアーキテクチャの可視化

8. モニタリングと分析

Google Analytics、Vercel Analyticsを統合し、Core Web Vitalsを監視します。

• Google Tag Managerを使用してタグを集中管理します。
• Sentryなどのツールを使用してアクセスログとエラーを監視します。

結論

Next.jsの技術的SEOは、メタタグ、パフォーマンス、国際化、構造化データなどの詳細に注意を払う必要があります。可能な限り自動化し、結果を継続的に監視してください！

最終チェックリスト：

• [x] 動的メタタグ
• [x] 多言語Sitemap
• [x] 構造化データ
• [x] 最適化されたパフォーマンス
• [x] アクティブなモニタリング