Bloggerのh1重複エラーを解決する方法【Bing Webmaster Toolsのエラー対策①】

【< h1 >が多数あります】、【画像に< alt= >がありません】、【タイトルが短すぎます】、Bingウェブマスターツールに３つもダメ出しされてしまいました。

SEOは気にしていませんが、エラー表示は気持ち悪いです。

< h1 > が多数ありますエラー

そもそも、<h1>タグなんて故意に使ったことないし、タイトルが大見出しなんだろうなと漠然と考えてました。

<h1>タグとは、Webページ全体の最も重要な「大見出し」を示すためのタグです。通常、<h1>は1ページに1つだけ使用し、ページ全体の「顔」として設定します。

ヘッダーが < h1 > になってる

気づきました。全ページでヘッダー(ブログ名)が <h1>なんです。記事ページだとブログ名も < h1 > 、ブログタイトルも < h1 > 、だから複数ありますと言われてしまうんだ！！

前回同様、Geminiに相談してみました。

• 👉わたし：「ヘッダーが < h1 > になっちゃってるけど変じゃない？」
• ✦Gemini：「少し古い設計ですが、よくある状態です」
• 👉わたし：「このままでもいいの？」
• ✦Gemini：「変ではありますが致命的な問題ではありません」
• ✦Gemini：「ただ、以下のようにコードを書き換えるのが理想的です……でもこれ、デザイン崩れが起きやすいので覚悟してくださいね？」

【問題発生】デザイン崩れの泥沼問題発生

記事ページではブログタイトルを < div > に変えるという修正。理屈では簡単だと思っていましたが、いざ反映してみると、「タイトルのガタつき」という底なし沼が待っていました。

ページをめくるたびに「ガタッ」と動く違和感

トップページから記事ページへ移動する瞬間、ブログタイトルとサブタイトルが数ピクセルだけ上下に跳ねます。

見た目は同じ文字、同じサイズなのに、タグを < h1 > から < div >  に変えただけで、ブラウザが別の種類の箱と勝手に解釈し、標準の余白をねじ込んできたのが原因でした。

「10pxの壁」に阻まれる

隙間を詰めようとCSSをいじり始めましたが、さらに泥沼でした。隙間を5pxに設定しても、なぜか10px以下になるとトップと記事でズレが広がる不思議な現象。 !important を連発しても解決せずコードは次々と複雑になっていきました。

【解決】もう１度最初からやろう

「バックアップでもとに戻すから最初からやろう」と声をかけたら、コードにコードを重ねてくるGeminiも冷静(？)になったのか、違うアイデアを出し始めました。

「見た目」をクラス名で縛り上げる

タグが < h1 > だろうが < div > だろうが、 .custom-site-title という共通のクラス名を作り、フォントサイズ、行間、色を完全に固定しました。

隙間の原因を「殺す」という選択

タイトルの下の余白をあえて「0」にしました。 今までは「タイトル下の隙間」と「サブタイトル上の隙間」の両方で距離を測っていましたが、これがズレの元凶でした。

支配権をサブタイトルに譲る

隙間のコントロールは、すべて「サブタイトル上の余白（margin-top）」に任せました。 サブタイトルは全ページ共通の < p > タグです。この１か所をいじるだけで、トップページでも記事ページでもタイトルとの隙間を調整できるようになりました。

最終的なカスタマイズコード

ほぼ丸１日Geminiとやり取りしてたでしょうか。修正したコードで確認したときは思わず声が出ました。 ページを何度切り替えてもタイトルは動きません😆

Geminiも「いやぁ、私もめちゃくちゃ勉強になりました」って言ってました。

⚠️バックアップを取ってからお試し下さい

① ブログタイトル（h1とdivの切り替え）

<b:includable id='title'>
  <b:if cond='data:view.isHomepage'>
    <h1 class='custom-site-title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
  <b:else/>
    <div class='custom-site-title'><a expr:href='data:blog.homepageUrl'><data:title/></a></div>
  </b:if>
</b:includable>

② 記事タイトル（h3からh1へ変更）

<b:if cond='data:post.title'>
  <b:if cond='data:view.isPost'>
    <h1 class='post-title entry-title'><a expr:href='data:post.url'><data:post.title/></a></h1>
  <b:else/>
    <h3 class='post-title entry-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  </b:if>
</b:if>

③CSS（ヘッダー）

    /* ----------------------------------------------------------------------------
ヘッダー（最終版）
---------------------------------------------------------------------------- */

/* ヘッダー全体 */
#Header1 {
  text-align: left;
  padding: 15px 0;
  background: $(header.background.color);
  border-top: solid 10px $(header.border.color);
  width: 100%;
}

.header-inner {
  width: 79%;
  margin: 0 auto;
}

/* ブログタイトル（PC） */
.custom-site-title, 
.custom-site-title a {
  color: $(header.title.color);
  font-family: 'Noto Sans JP', 'メイリオ', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 40px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  margin: 0;
  padding: 5px 0;
  line-height: 1.2;
  cursor: pointer;
}

/* サブタイトル（PC） */
#Header1 p {
  color: $(header.description.color);
  font-family: 'Noto Sans JP', 'メイリオ', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin: 10px auto;
  line-height: 1.5;
  display: block;
}

/* ----------------------------------------------------------------------------
レスポンシブデザイン（スマホ用）
---------------------------------------------------------------------------- */
@media (max-width: 560px) {
  #Header1 {
    text-align: center;
  }
  .header-inner {
    width: 90%;
    margin: 0 auto;
  }

  /* タイトル：高さを最小化してガタつきの種を消す */
  .custom-site-title,
  .custom-site-title a {
    font-size: 30px;
    margin: 0 auto;
    padding: 3px;
    line-height: 1.0;
  }

  /* サブタイトル：上の余白だけで「タイトルとの距離」を支配する */
  #Header1 p {
    font-size: 13px;
    margin: 10px auto 0; /* ←ここの 5px で隙間を最終決定！ */
    line-height: 1.4;
  }
}

本当に完成してよかった、これで出来ないで終わってたら立ち直れなかったかも。

【画像に< alt= >がありません】に続きます。