HTMLタグの見出し(Headline: h)の構成を変更した記録(h3をh2に変更)

当ブログの見出し(Headline)構成を最適化しました。
h3をh2に、h4をh3に、と、ナンバー構成の変更です。
WordPressのプラグインを利用して一括置換して、関係するcssの記述も変えておきました。
すべてステージング環境で実施後、本番環境にコピーしました。

ステージング環境での作業実施は、実は初でした。
Z.comのサービスとして利用できるものですが、これまで活用できていませんでした。
使い勝手が分かったので、今後は積極的に使っていこうと思います。

変更の経緯

いろいろとブログのお勉強を続けているつもりなのです。
アクセスアップの施策としてよく目にするものに、『HTML構造をGoogleが好むかたちに』というものがあります。

当ブログの構造もチェックしました。
問題に気づきます。
h1に記事タイトル、大見出しがh3になっていたのです!

認識に誤りがあるかもしれないのですが、現在利用しているプラグインでは、当初はh1がブログ名、h2が記事タイトルだったと思うのです。
あ、認識の乖離ってやつですw

ということで、もともとは大見出しをh3とする書き方でした。
その後、疑いもせずにh3以降の構成で書き続けておりました。
気付いてよかった。。(もっと早く気づけってw)

スポンサーリンク


最適化方針

構成を以下とする方針で、変更することにしました。

  • h1: 記事タイトル
  • h2: 大見出し/サイドバー要素
  • h3: 中見出し
  • h4: 小見出し
  • h5: なんていうの?w

記事タイトルとサイドバー要素に関しては、テーマにて実装されているもので、特にこちらで何かすべきことはありません。

現行の投稿を確認し、見出しにはh3~h6まで使っていることが分かっていました。
つまり、h3以降の既存タグの数字部分を1つずつ繰り上げる作業になります。

  1. h3 → h2
  2. h4 → h3
  3. h5 → h4
  4. h6 → h5

変更するタグは上記のとおりです。
置換の順番も上記のとおりです。

これらに加えて、cssに書いているクラスの記述と、自動挿入している見出しの設定変更が必要でした。

せっかくなので、変更作業はステージング環境を活用することにしました。

作業内容

上記の作業方針のもと、実際に手を動かしていきました。
ステージング環境は、現在利用中のサービス『Z.com WP』にて提供されているものを利用できました。
一括置換はプラグインにて実施しました。
その他の修正作業と確認は、力仕事です。

バックアップと退避

Z.comでは、サーバーのバックアップを定期的にとってくれています。
さらに、手動で好きなタイミングでのバックアップを取得できます。
ということで、まずはサーバーバックアップをとりました。
ボタン1つ押すだけです。

これで、ステージング環境を本番環境に映して何か起こっても、バックアップから戻すことができます。
バックアップからの復旧経験は何回かあります。

次に、現行の本番環境をステージング環境にコピーします。
WordPressのプラグインとして、Z.comから提供されているメニューで操作できます。
ここでも、ボタン1つ押すだけです。

一括置換

今回は、『Search Regex』プラグインを使いました。
最終更新日が古くて心配になるのですが、一括置換できるプラグインでいいものを探して、実績を重視しました。
実際、ちゃんと動きましたし。

当初、『h3』を『h2』に置換!というかたちで、開始タグと終了タグを一気に置換していました。
h4タグを置換しようとしたところ、置換結果件数が奇数に。。
(タグはペアなので、必ず偶数になるはずです)
なんでしょう。。困ります。。

どこかにあるランダムな文字列に、『h4』があるのでしょう。

件数が多くて、問題個所の発見には時間がかかると考え、片方ずつ置換することにしました。
急がば回れです。
(ここで、あらためてステージング環境に本番環境をコピーしました)

『<h3』を『<h2』と、『/h3』を『/h2』と、それぞれ置換していきました。
毎回件数も記録して、数が合っていることを確認しました。

案外細かいことをやっているのですw

直さなくてもよかったのですが、cssのクラス名に数字を入れているので、これらも一括置換しました。
これはユニーク名なので、問題になることはありません。
ただし、数が微妙に合いませんでした。
装飾がデフォルトのままの見出しがあるということですね。。

その他の修正

『CSS編集』で対象のクラス名を直しました。
力仕事です。

『TOC+』プラグインで見出しを自動挿入してますので、対象タグの調整含め、設定を変更しました。
アンカーへの直リンクがいくつかあるので、併せて確認しておきました。
力仕事です。

本番反映

ステージング環境でざっくりと表示を確認してから、本番環境にデータベースをコピーしました。
全投稿の確認は、多くて嫌でしたので、サンプルチェックということで。
あと、パスの記述がフルパスなので、ステージング環境では画像が表示されなのです。

ステージング環境から本番環境へのデータコピーは、ボタン1つ押すだけです。

本番環境へ反映後、編集画面に表示するための情報を書き換えました。

スポンサーリンク


現状

ご覧のとおりで、投稿も固定ページも、問題なく表示できています。(と思います!!)
見出しタグの構成は、既述の方針どおりになっています。
これが正解なのかどうかは分かりませんが。。

1つ課題が残っていて、『WordPress Related Posts』プラグインで入れている関連記事の見出しタグが『h3』のままです。
理想としては『h2』にすべきだと思うので、何とかして修正したいと思います。

この投稿を書いたのは・・・
Blog Master

ガジェットが大好きで、毎月何かしら買っております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンと、Pocket WiFiを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Master」をフォローしてみる
ブログ関連
「Blog Master」をフォローしてみる
wnkhs.net

コメント

タイトルとURLをコピーしました