URL構造

最初のアプリを作成する

検索エンジン最適化

0 ポイント

レンダリングとランキング

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

いくつかの原則に従うことをお勧めします。

セマンティック：IDやランダムな数字の代わりに単語を使用する、セマンティックなURLを使用するのが最適です。例 /learn/basics/create-nextjs-app は/learn/course-1/lesson-1よりも優れています。
論理的で一貫性のあるパターン：URLは、ページ間で一貫性のある何らかのパターンに従う必要があります。たとえば、各製品に異なるパスを設定するのではなく、すべての製品ページをグループ化するフォルダを作成することをお勧めします。
キーワード重視：Googleは依然として、Webサイトに含まれるキーワードに基づいてシステムのかなりの部分を構築しています。ページの目的を理解しやすくするために、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

ブログまたはeコマースサイトの場合、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() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // Set fallback to blocking. Now any new post added post build will SSR
  // to ensure SEO. It will then be static for all subsequent requests
  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;

さらに読む

前へ次へ

コミュニティで質問することもできます。 GitHub Discussions.