Next.js アプリを SEO で強化する: 静的および動的メタデータの実装-jsチュートリアル-php.cn

Next.js アプリを SEO で強化する: 静的および動的メタデータの実装

王林

リリース： 2024-08-09 10:49:40

オリジナル

496 人が閲覧しました

Boosting Your Next.js App with SEO: Implementing Static & Dynamic Metadata

今日の過酷なオンライン環境では、Next.js アプリケーションが検索エンジンに最適化されていることが不可欠です。 Next.js は強力なサーバー側レンダリングツールと静的サイト作成ツールを提供しますが、本当の強みは、アプリの検索エンジンのランキングを向上させるために静的情報と動的情報の両方を使用および維持する方法にあります。この徹底したチュートリアルを利用すると、静的情報と動的情報の両方を使用して Next.js アプリケーションを最適化し、検索エンジンのランキングとリーチを向上させることができます。

Next.js のメタデータを理解する

コードを詳しく調べる前に、メタデータとは何か、そしてそれが SEO にとって重要である理由を理解する必要があります。検索エンジンは、タイトル、説明、キーワードなどのメタデータに基づいて Web ページのインデックスを作成し、ランク付けします。メタデータを適切に管理すると、Web サイトの可視性が大幅に向上します。

Next.js プロジェクトのセットアップ

新しい Next.js プロジェクトを作成することから始めましょう。 Next.js をまだセットアップしていない場合は、次の手順に従って開始してください:

npx create-next-app my-seo-app
cd my-seo-app
npm run dev

ログイン後にコピー

これにより、SEO のベストプラクティスを実装するために使用する基本的な Next.js アプリケーションが作成されます。

静的メタデータの実装

静的メタデータは変更されないコンテンツであり、ビルド時に設定されます。 Next.js では、

コンポーネントを使用して静的メタデータを実装できます。ページに静的メタデータを追加する方法の例を次に示します:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My SEO-Optimized Next.js App</title>
        <meta name="description" content="This is a sample application optimized for SEO using Next.js." />
        <meta name="keywords" content="Next.js, SEO, Static Metadata" />
        <meta name="robots" content="index, follow" />
      </Head>
      <h1>Welcome to My SEO-Optimized Next.js App</h1>
      <p>This is the homepage of your SEO-friendly Next.js application.</p>
    </>
  );
}

ログイン後にコピー

動的メタデータの実装

一方、動的メタデータは、コンテンツまたはユーザーの操作に基づいて変化します。これは、各ページに異なるメタデータが含まれる可能性があるブログや製品リストなどのページに特に役立ちます。 Next.js を使用すると、サーバー側のレンダリングプロセス中にデータを取得することで、動的なメタデータを簡単に生成できます。

Next.js アプリに動的メタデータを実装する方法は次のとおりです:

import Head from 'next/head';

export async function getServerSideProps(context) {
  const { slug } = context.params;
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta name="keywords" content={post.keywords.join(', ')} />
        <meta name="robots" content="index, follow" />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}

ログイン後にコピー

静的メタデータと動的メタデータの結合

多くの場合、静的メタデータと動的メタデータの両方を組み合わせたい場合があります。たとえば、サイトの基本タイトルは静的ですが、コンテンツに基づいて他のメタデータを動的に生成することができます。以下に例を示します:

import Head from 'next/head';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/homepage');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <>
      <Head>
        <title>{data.title} - My SEO-Optimized Next.js App</title>
        <meta name="description" content={data.description} />
        <meta name="keywords" content={data.keywords.join(', ')} />
      </Head>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </>
  );
}

ログイン後にコピー

Next.js を使用した高度な SEO テクニック

Next.js は、基本的なメタデータ管理を超えて、SEO 戦略を強化する高度な機能を提供します。ここではいくつかのテクニックを紹介します:

正規タグ: ページに正規 URL を指定することで、重複コンテンツの問題を防ぎます。

<Head>
  <link rel="canonical" href="https://example.com/your-page" />
</Head>

ログイン後にコピー

Open Graph と Twitter Cards: Open Graph と Twitter Card のメタデータを追加することで、ソーシャルメディア共有を改善します。

<Head>
  <meta property="og:title" content="My SEO-Optimized Next.js App" />
  <meta property="og:description" content="This is a sample application optimized for SEO using Next.js." />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com" />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

ログイン後にコピー

構造化データ: JSON-LD 構造化データを実装して、検索エンジンがコンテンツをよりよく理解できるようにします。

<Head>
  <script type="application/ld+json">
    {`
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://example.com",
        "name": "My SEO-Optimized Next.js App",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://example.com/search?q={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      }
    `}
  </script>
</Head>

ログイン後にコピー

SEO のためのパフォーマンスの最適化

パフォーマンスは SEO において重要な要素です。 Google などの検索エンジンは、読み込みの速い Web サイトを優先し、Next.js はパフォーマンスを向上させるいくつかの機能を提供します。

画像の最適化: 最適化された画像の読み込みには next/image コンポーネントを使用します。

コード分割: Next.js はコードを自動的に分割し、必要なものだけを読み込みます。

静的サイト生成 (SSG): 可能であれば、SSG を使用して事前レンダリングされたページを提供し、読み込み時間を短縮します。

import Image from 'next/image';

export default function Home() {
  return (
    <>
      <Head>
        <title>Optimized Images in Next.js</title>
      </Head>
      <h1>Optimized Images</h1>
      <Image
        src="/images/sample.jpg"
        alt="Sample Image"
        width={500}
        height={500}
      />
    </>
  );
}

ログイン後にコピー

結論

Next.js アプリに SEO を実装することは、メタタグを追加するだけではありません。これには、静的メタデータと動的メタデータを組み合わせ、パフォーマンスを最適化し、構造化データやオープングラフなどの高度な機能を活用する、総合的なアプローチが含まれます。このガイドに従うことで、Next.js アプリケーションが高速かつ機能的であるだけでなく、検索エンジンで上位にランクされるようになります。

参考文献:

Next.js ドキュメント

Google の SEO スターターガイド

Schema.org 構造化データ

オープングラフプロトコル

ツイッターカード

以上がNext.js アプリを SEO で強化する: 静的および動的メタデータの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。