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

2019年8月20日

私が所属しているオンラインスクールでブログ記事を見てもらったら「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でファイルをダウンロードして検索でもしようと思ったのですが、ダウンロードしながら「ファイル多くてめんどくさい・・・」となりましたw

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

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

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

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

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

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

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

2019.8.20追記

このブログで使っているテーマ「Luxeritas」には、標準でシンタックスハイライターが付いていることを知りました。
https://thk.kanzae.net/dev/wp-themes/luxeritas/t10823/
せっかく標準で付いているので、こちらを使おうと思います。
※他の方の参考になるかもしれないので記事はそのまま残します。

Enlighterを選んだ理由

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

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

<pre><code> ~ </code></pre>

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

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

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

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

Enlighterの導入作業

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

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

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

・・・なじぇ?(^^;

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

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

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

つまり、

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

って事です。orz

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

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

めも

Posted by ikaken