「h1タグが2つあるよ」と指摘受けて調べてみたらCrayon Syntax Highlighterのせいだった

私が所属しているオンラインスクールでブログ記事を見てもらったら「h1タグが2つあるよ」と指摘を受けました。

記事内でh1タグを使った記憶がないので、調べてみたらプラグインの「Crayon Syntax Highlighter」が悪さをいていたようです。

Crayon Syntax Highlighterってなに？

シンタックスハイライターとは、プログラムコードなどを分かりやすく表示するための機能です。

Crayon Syntax Highlighterは、いくつかあるシンタックスハイライタープラグインの中でも有名なプラグインの一つです。

しかし、更新が数年前に止まってしまっており、現在ではあまり使われていません。

私は昔導入して以来、入れ替えがめんどくさいので放置していました。（＾＾；

なぜh1タグが2つあるといけないの？

WordPressの「見出し」で設定するh1タグ（見出し1）は、記事のタイトルと認識されるため、同じ記事内に複数あるとgoogleさんがどれがタイトルか分からなくて混乱するそうです。（評価が下がる）

記事タイトルがh1タグになっています。

記事内の見出しはh2タグ（見出し2）から使いましょう。

h1タグが2つある状況と原因の調査

ブラウザでソースを表示してh1タグがあるか確認しました。

具体的には、私はChromeを使っているので、右クリックの「ページのソースを表示」でソースを表示して、Ctrl＋fで「h1」を検索しました。

そうすると、記事のタイトル以外に2つのh1タグがある事が分かりました。

さて、h1タグが複数ある事は確認できました。

次は「何が悪さをしているか？」です。

最初に思い付いたのは「どっかのテンプレートにh1タグが入ってしまっているのではないか？」という事でした。

で、FTPでファイルをダウンロードして検索でもしようと思ったのですが、ダウンロードしながら「ファイル多くてめんどくさい・・・」となりましたｗ

次にプラグインを疑いました。

試しに全てのプラグインを止めてソースを確認すると、h1タグがタイトル用の1つだけになりました。

そこから、ひとつづつプラグインを有効にしていき、Crayon Syntax Highlighterを有効にした時点でh1タグが3つになりました。

Crayon Syntax Highlighterの代わりに何を使うか

色々調べた結果、2つの候補に絞りました。

• JavaScriptライブラリ「highlight.js」
• プラグイン「Enlighter – Customizable Syntax Highlighter」

最終的にはプラグインのEnlighterを選んだのですが、機会があったらhighlight.jsも使ってみたいです。

Enlighterを選んだ理由

まず、JavaScriptライブラリのhighlight.jsは軽量で対応言語も多く、とても評価の高いライブラリの様です。

また導入方法も、ヘッダ部分に数行のコードを書いて、ハイライトしたいソースコードを

<pre><code>　～　</code></pre>

で囲むという超お手軽作業です。（言語は自動認識、指定も出来る）

にもかかわらず、Enlighterを選んだのは次の2点がポイントでした。

• ヘッダいじるのめんどくさい。
• Enlighterだったら<pre>で囲むだけなので記事の修正要らないんじゃね？（後に修正が必要な事が分かる・・・）

つまり、「楽したい！」が最大の理由ですｗ

Enlighterの導入作業

プラグインの「新規追加」で「Enlighter」を検索、一応評価を見てから「インストール」「有効化」しました。

で、ワクワクしながら記事を見てみると、

うん、ハイライトされてないねｗ

・・・なじぇ？（＾＾；

結論から言うと「perタグのclass属性がCrayon用になっていた」という事でした。

Crayon Syntax Highlighterでは、perタグのclass属性で言語の指定が出来るようになっています。

Enlighterでも出来るのですが、それの仕様が異なるためEnlighterではそのまま使えないのです。

つまり、

結局、記事修正必要じゃん！

って事です。orz

でも、見た目もシンプルで好みなので、Enlighterを使い続けようと思います。

記事はボチボチ修正していきます・・・