HTTPステータスコードとは？

HTTPレスポンスステータスコードは、特定のHTTPリクエストが正常に完了したかどうかを示します。ステータスコードは多数ありますが、SEOの文脈で意味を持つのはほんの一握りです。

それでは、それらを見てみましょう。

200

成功ステータス応答コードであるHTTP 200 OKは、リクエストが成功したことを示します。

Googleにページがインデックスされるためには、ステータスコード200を返す必要があります。これは、オーガニックトラフィックを受け取るために、あなたのページで通常確認したいことです。これは、Next.jsがページを正常にレンダリングしたときに設定されるデフォルトのコードです。

301/308

リソースがリクエストされた場所から宛先URLに完全に移動されたことを示すリダイレクトステータス応答コードはHTTP 301 Moved Permanentlyです。

これは恒久的なリダイレクトです。一般的に、これは最も広く使用されているリダイレクトタイプです。

リダイレクトはさまざまな理由で使用できますが、主な理由は、URLが場所Aから場所Bに移動されたことを示すことです。リダイレクトは、コンテンツが一方の場所からもう一方の場所に移動された場合に、現在および潜在的なクライアントを失わず、ボットがサイトをクロールし続けられるようにするために必要です。

注：Next.jsの恒久的なリダイレクトは、デフォルトでは301ではなく308を使用します。これは新しいバージョンであり、より良いオプションと見なされています。

2つのステータスコードの主な違いは、301はリクエストメソッドをPOSTからGETに変更できるのに対し、308はできないことです。

getStaticProps()関数でリダイレクトをpropsの代わりに返すことで、Next.jsで308リダイレクトをトリガーできます。

//  pages/about.js
export async function getStaticProps(context) {
  return {
    redirect: {
      destination: '/',
      permanent: true, // triggers 308
    },
  };
}

next.config.jsで設定されたリダイレクトのpermanent: trueキーを使用することもできます。

//next.config.js
 
module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true, // triggers 308
      },
    ];
  },
};

302

一時的に宛先URLに移動されたリソースを示すリダイレクトステータス応答コードはHTTP 302 Foundです。

ほとんどの場合、302リダイレクトは301リダイレクトであるべきです。これは、ユーザーを一時的に特定のページ（例：プロモーションページ）にリダイレクトしている場合や、場所に基づいてユーザーをリダイレクトしている場合は当てはまらないことがあります。

404

クライアントエラー応答コードであるHTTP 404 Not Foundは、サーバーがリクエストされたリソースを見つけられないことを示します。

前述のように、移動されたページは新しい場所にHTTP 301ステータスコードでリダイレクトされるべきです。これが起こらない場合、URLは404ステータスコードを返す可能性があります。404ステータスコードはデフォルトで必ずしも悪いわけではありません。ユーザーがアクセスしないURLにアクセスした場合の望ましい結果ですが、ページ内で頻繁に発生するエラーであってはなりません。検索ランキングが低下する可能性があります。

Next.jsは、アプリケーション内に存在しないURLに対して自動的に404ステータスコードを返します。

場合によっては、ページから404ステータスコードを返すこともあります。これは、propsの代わりに以下を返すことで実行できます。

export async function getStaticProps(context) {
  return {
    notFound: true, // triggers 404
  };
}

pages/404.jsを作成することで、ビルド時に静的に生成されるカスタム404ページを作成できます。

例

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

410

クライアントエラー応答コードであるHTTP 410 Goneは、ターゲットリソースへのアクセスがオリジンサーバーで利用できなくなり、この条件が永続的である可能性が高いことを示します。

これはあまり頻繁には使用されませんが、ウェブサイトから削除され、もう存在しないコンテンツを探している場合に、このステータスコードを確認する価値があるかもしれません。

HTTP 410 Goneを使用すると賢明な例としては、以下のようなものがあります。

• Eコマース：在庫から恒久的に削除された商品。
• フォーラム：ユーザーによって削除されたスレッド。
• ブログ：サイトから削除されたブログ記事。

このステータスコードは、ボットがこのコンテンツをクロールするために戻るべきではないことを伝えます。

500

サーバーエラー応答コードであるHTTP 500 Internal Server Errorは、サーバーが予期しない条件に遭遇し、リクエストの履行を妨げたことを示します。

Next.jsは、予期しないアプリケーションエラーに対して自動的に500ステータスコードを返します。ビルド時に静的に生成されるカスタム500エラーページをpages/500.jsで作成できます。

例

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

503

サーバーエラー応答コードであるHTTP 503 Service Unavailableは、サーバーがリクエストを処理する準備ができていないことを示します。

ウェブサイトがダウンしており、長期間ダウンする可能性があると予測される場合に、このステータスコードを返すことが推奨されます。これにより、長期的なランキングの低下を防ぐことができます。