検索順位が上がらない原因？noindexの解除漏れとH1タグの正しい使い方

「なんとなく」で済ませていませんか？SEOの基礎工事#

Webサイト制作の現場でよく耳にする「SEO対策」。被リンク獲得やコンテンツマーケティングなどの「攻め」の施策も重要ですが、それ以前に**「Googleに正しくインデックスしてもらうための設定」**という「守り」の施策ができていないサイトが散見されます。

家を建てるのに、基礎工事をおろそかにして内装にこだわるようなものです。 本記事では、エンジニアやWeb制作者がリリース前に必ずチェックすべき、noindex と H1タグ の技術的な正解を解説します。

1. noindex の解除漏れ：最大の悲劇を防ぐ#

開発環境（Staging）やテスト環境では、Googleにインデックスされないように <meta name="robots" content="noindex"> を設定するのが一般的です。 しかし、本番公開（Production Release）時にこれを削除し忘れるというミスは、SEOにおける最大の事故です。サイトが検索結果から完全に消滅します。

Next.js での制御ロジック

環境変数を使用して、本番環境以外でのみ noindex を付与するロジックを組むことを推奨します。

// src/app/layout.tsx または各ページの metadata
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Awesome Site',
  robots: {
    index: process.env.VERCEL_ENV === 'production', // 本番環境のみ true
    follow: process.env.VERCEL_ENV === 'production',
  },
}

X-Robots-Tag (HTTPヘッダー)

HTMLタグだけでなく、サーバーのレスポンスヘッダー (X-Robots-Tag: noindex) で制御されている場合もあります。ヘッドレスCMSやPDFファイルの制御でよく使われるため、ここも盲点になりがちです。

2. H1タグの論理構造：Googleへの道案内#

H1タグは、そのページの**「主語」**です。GoogleのクローラーはH1タグを見て「このページは何について書かれたページなのか」を理解します。

ルール1：1ページにH1は原則1つ

HTML5の仕様上は複数のH1が許容されていますが、SEOの観点からは**「1ページにつきH1は1つ」**がベストプラクティスです。メインテーマを1つに絞ることで、トピックの強さをGoogleに伝えます。

ルール2：ロゴではなく「ページタイトル」をH1に

トップページではサイトロゴをH1にすることが多いですが、下層ページ（記事詳細や会社概要など）でもロゴをH1にするのは間違いです。 下層ページでは、**「記事のタイトル」や「セクション名」**をH1に設定し、ロゴは <div> や <span> に格下げ（または条件分岐）すべきです。

// Headerコンポーネントの例
export const Header = ({ isTopPage }: { isTopPage: boolean }) => {
  return (
    <header>
      {isTopPage ? (
        <h1><img src="/logo.svg" alt="VIIO" /></h1>
      ) : (
        <div className="logo"><Link href="/"><img src="/logo.svg" alt="VIIO" /></Link></div>
      )}
    </header>
  )
}

3. 構造化データ (JSON-LD) でさらに情報を伝える#

HTMLタグだけでなく、schema.org に基づく構造化データを提供することで、検索結果にリッチリザルト（星評価、価格、FAQなど）を表示させることができます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEOの基礎：noindexとH1タグの正解",
  "author": {
    "@type": "Organization",
    "name": "VIIO 編集部"
  },
  "datePublished": "2024-02-20"
}
</script>

これらの「機械（クローラー）のための翻訳作業」を丁寧に行うことが、現代のSEOにおける最強の基礎工事となります。