URL 構造
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;さらに学ぶ
- Next.js: ルーティング入門
- Next.js: ページ
- Next.js: ダイナミックルーティング