MENU

【誤報】SEO│はてなブログの<h2>問題が解消！？

インターネット

さきほど、公式アプリで記事を書いている途中、思わず手が止まりました。

　大見出しが<h2>になってる！

ご存知ない方にはなんのこっちゃな話ですが、はてなブログのエディタで「大見出し」が<h3>であることは、かねてより話題になっています。
SEOに敏感な人はわざわざ<h2>に書き換える対策を施したり。

はてな記法

私は記事をスマホ用のアプリで書いています。
はてな記法ではツールを使って<h2>を記述することができないので、都度キーボードから直接見出しタグを入力します。

さきほど、記事を編集しているとつい手が滑って見出しのアイコンをタップしてしまいました。

行頭に「*（アスタリスク）」がポツンと1個。
つまり、大見出しとは名ばかりの<h3>で──

ん、んー？
見出しが<h2>になっています。

あらま、どういうこと？
そんなはずはないと、下書きとプレビューを行ったり来たりしてしまいました。

何度見ても、確かに大見出しが<h2>です。
整理するとこんな感じ。

  • BEFORE
<h2>大見出し</h2>
* 中見出し（タップ1回）
** 小見出し（タップ2回）
*** 小々見出し（タップ3回）
  • AFTER
* 大見出し（タップ1回）
** 中見出し（タップ2回）
*** 小見出し（タップ3回）

見出しの仕様が変わったのでしょうか。

Markdown

私は、時にはてな記法とMarkdownを使い分けたりもします。
こちらはどうだろうと試してみました。

Markdownでは、そもそも見出しが「#（ハッシュ）」と決まっているので、ツールのアイコンを2回タップすれば<h2>、3回タップすれば<h3>が必然的に記述されます。

しかしながら、ここにきてなにやら不思議なことが起こっています。

実際に操作していると、見出しを動的に変えようとしている節も見受けられます。

いったいなにが起きているのでしょう。
夢か幻か──はたまた<h2>問題の解消こそが私の妄想かもしれません。

このタイミングにおいて、パソコン用のエディタでプレビューが不安定なのは、気のせいかしら？

はてなブログの開発ブログを覗いてみましたが「障害・不具合」にも「機能修正・改善」にも新しいお知らせはありませんでした。

なんだかよくわからないので、ここまでにしておきます。

傾向と対策

（追記：2017年4月18日）

原因がわかりました！
先に結論から言うと、はてなブログの<h2>問題はなにも解消されていません。
すべては私の甚だしい勘違いです。

ほんの少しですがこの記事へのアクセスがあったようで、お目に留めてくださった方には大変申し訳ありませんでした。

穴があったら入りたいぐらいです。
なかったことにして記事ごと削除しようかと思いましたが、自戒として恥を忍んで、また私のようなおっちょこちょいが他にいないとも限らず、原因を明らかにして幕を引きたいと思います。

とはいえ、やや込み入って長くなるので時間のある方、興味のある方だけ先にお進みください。
結論を知ってなーんだと思われた方は回れ右です。
勘違いは主に編集モードのMarkdownが原因でした。
他の記法を使っている方が私と同じ轍を踏むことはないと思います。

状況の整理

このブログは先にご紹介した<h3>を<h2>に書き換えるスクリプトを取り入れています。
また、私は記事によって編集モードをはてな記法にしたりMarkdownにしたり。

はてな記法

今回、問題となった記事ははてな記法で書いていました。
はてな記法では、アプリの見出しのアイコンを1回タップすると「*（アスタリスク）」が1個挿入されます。
本来であれば<h3>の中見出しですが、実際には<h2>の大見出しです。
これはスクリプトの効果なので、取り立てて大騒ぎする理由なんてどこにもありませんでした。

Markdown

Markdownも同様です。
「#（ハッシュ）」が3個は<h3>なので、スクリプトが効いて<h2>になるのは然るべき挙動です。

では、なぜ私はとんでもない勘違いをしてしまったのでしょう。
今にして思えば、すべての発端はこのMarkdownでした。

スクリプトの効果

まずはこちらをご覧ください。

本来、Markdownで「###」は<h3>ですが、実際には<h2>になっています。
これは、スクリプトの効果で見出しがひとつ繰り上がるからです。

では、そもそもMarkdownにおいて<h2>の見出しである「##」を記述したらどうなるのでしょう。

おや、こちらも大見出しです。
だとすると「#」は2個でも3個でも大見出しの<h2>ということになります。

ならば、これらを併用したら？

この場合「###」はスクリプトを無視して中見出しの<h3>になります。
この現象は記述の順番に関係なく、また<h3>だけでなく<h4>でも<h5>でも起こります。
つまり、記事中のどこかに「##」があると、その記事全体がスクリプトの効果を失ってしまうようです。

ここまではご理解いただけたでしょうか。

勘違いを招いた原因

では次に、アプリのツールに着目します。

パソコン用のエディタでは見出しをプルダウンメニューの中から選択しますが、アプリではツールのアイコンをタップする回数で選びます。


# 大々見出し （タップ1回）
## 大見出し（タップ2回）
### 中見出し（タップ3回）

察しのよい方、またはMarkdownを使いこなしている方ならもうお分かりだと思います。
アプリで編集モードをMarkdownにしているなら、<h3>を<h2>に書き換える必要はないのです。
あえてスクリプトを意識すると、<h2>は「###」と記述しなければならないので、タップ1回分の手間が余計に増えてしまいます。
また、ツールのアイコンは3回タップすると1回目に戻るので、比較的よく使う<h3>の中見出しは手動にならざるを得ません。

私がスクリプトで見出しをカスタマイズしたのは3月16日でした。
しかしながら、その後もMarkdownで記事を編集するときは無意識に「##」で、つまりアプリのアイコンを2回タップして大見出しの<h2>を記述していたのです。
そうしているうちに、スクリプトの存在は記憶の底に埋もれてしまい、はてな記法で編集するときにも<h2>はキーボードから直接見出しタグを入力することが自然と当たり前になりました。
これが、今回の勘違いに至った顛末です。

まとめ

この記事を最初から読み返してみると、ツッコミどころ満載ですね。
スクリプトがあれば、はてな記法でもアプリのツールを使って<h2>を記述することはできます。
私は、時にはてな記法とMarkdownを使い分けたりもしていますが、使いこなせてはいなかったということです。
見出しを動的に変えているのは、スクリプトの効果なので当たり前です。
パソコン用のエディタでプレビューが不安定だったのは、たまたまでしょう。

1ヶ月前はカスタマイズとSEOに燃えていたので話題のスクリプトに飛び付きましたが、これが全く功を奏していなかったという衝撃かつ自嘲の事実。
もしかしたら、私にスクリプトは必要ないのかもしれません。
今やはてな記法の扱いにも慣れ、そろそろ<h2>をiPhoneのユーザー辞書に登録しようとしていた矢先でした。

いやはや、全くもってお恥ずかしい限りです。
どうして誰も言ってくれなかったの！と他力本願は冗談として、私が有名ブロガーだったらみなさんがSEOで気にしている<h2>問題にいらぬ油を注いで炎上騒ぎになるところでした。

路傍の石でよかったと胸を撫で下ろしつつ、見出しを書き換えるスクリプトを忘れていたことについて平身低頭お詫びして、この記事は終わりにします。