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

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

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

変更の経緯
最適化方針
作業内容
現状

変更の経緯

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

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

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

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

最適化方針

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

h1：記事タイトル
h2：大見出し／サイドバー要素
h3：中見出し
h4：小見出し
h5：なんていうの？ｗ

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

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

h3 → h2
h4 → h3
h5 → h4
h6 → h5

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

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

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

作業内容

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

バックアップと退避

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

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

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

一括置換

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

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

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

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

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

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

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

その他の修正

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

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

本番反映

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

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

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

現状

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

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