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

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

それらを見ていきましょう。

200

HTTP 200 OK 成功ステータスレスポンスコードは、リクエストが成功したことを示します。

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

301/308

HTTP 301 Moved Permanently リダイレクトステータスレスポンスコードは、リクエストされたリソースが確定的に移動先URLに移動したことを示します。

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

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

注: Next.jsの恒久的リダイレクトは、より新しいバージョンでより良い選択肢とされる308をデフォルトで使用します。

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

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

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

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

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

302

HTTP 302 Found リダイレクトステータスレスポンスコードは、リクエストされたリソースが一時的に移動先URLに移動したことを示します。

ほとんどの場合、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, // 404をトリガー
  };
}

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

例：

// pages/404.js
export default function Custom404() {
  return <h1>404 - ページが見つかりません</h1>;
}

410

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

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

HTTP 410 Gone を使用することが賢明な例には以下があります：

Eコマース: 在庫から永久に削除された商品
フォーラム: ユーザーによって削除されたスレッド
ブログ: サイトから削除されたブログ投稿

このステータスコードは、ボットに対してこのコンテンツをクロールするために再び訪れるべきではないことを伝えます。

500

HTTP 500 Internal Server Error レスポンスコードは、サーバーがリクエストを満たすのを妨げる予期しない状態に遭遇したことを示します。

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

例：

// pages/500.js
export default function Custom500() {
  return <h1>500 - サーバー側でエラーが発生しました</h1>;
}

503

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

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

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

200

301/308

302

404

410

500

503

On this page