SEO: URL 構造 | Next.js

URL構造はSEO戦略において重要な要素です。GoogleがSEOの各要素にどの程度の重みを置いているかは公表していませんが、優れたURL構造は最終的なランキング要因としての大小に関わらず、ベストプラクティスとされています。

以下の原則に従うことをお勧めします：

意味的（セマンティック）: IDやランダムな数値ではなく、単語を使用したURLが理想的です。例: /learn/basics/create-nextjs-app は /learn/course-1/lesson-1 よりも優れています
論理的で一貫したパターン: URLはページ間で一貫したパターンに従うべきです。例えば、各製品ごとに異なるパスを持つよりも、すべての製品ページをグループ化したフォルダを持つ方が良いでしょう
キーワード重視: Googleは依然としてシステムの重要な部分をウェブサイトに含まれるキーワードに基づいています。URLにキーワードを使用することで、ページの目的を理解しやすくすることができます
パラメータベースではない: URL構築にパラメータを使用することは一般的に良いアイデアではありません。ほとんどの場合、意味的ではなく、検索エンジンが混乱してランキングを下げる可能性があります

Next.jsにおけるルート定義方法

Next.jsはページの概念に基づいたファイルシステムルーティングを使用しています。pagesディレクトリにファイルを追加すると、自動的にルートとして利用可能になります。pagesディレクトリ内のファイルとフォルダは、最も一般的なパターンを定義するために使用できます。

いくつかのシンプルなURLと、Next.jsルーターに追加する方法を見てみましょう：

ホームページ: https://www.example.com → pages/index.js
一覧ページ: https://www.example.com/products → pages/products.js または pages/products/index.js
詳細ページ: https://www.example.com/products/product → pages/products/product.js

ブログやECサイトでは、URLのスラグとして製品IDやブログ名を使用したい場合があります。これはダイナミックルーティングと呼ばれます：

製品ページ: https://www.example.com/products/nextjs-shirt → pages/products/[product].js
ブログページ: https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

ダイナミックルーティングを使用するには、productsやblogsサブフォルダ内のページ名に角括弧を追加します。

以下はSSGを使用して最適化されたページの例です：

// pages/blog/[slug].js
 
import Head from 'next/head';
 
export async function getStaticPaths() {
  // 外部APIエンドポイントを呼び出して投稿を取得
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();
 
  // 投稿に基づいてプリレンダリングするパスを取得
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // fallbackをblockingに設定。ビルド後に追加された新しい投稿は
  // SEOを確保するためにSSRされます。その後はすべてのリクエストで静的になります
  return { paths, fallback: 'blocking' };
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}
 
export default BlogPost;

以下はSSRを使用した別の例です：

// pages/blog/[slug].js
 
import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}
 
export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
export default BlogPost;

URL 構造

Next.jsにおけるルート定義方法

さらに学ぶ

On this page