【WordPress】ブログにソースコードを表示するプラグイン 4 選!

【WordPress】ブログにソースコードを表示するプラグイン 4 選!

まえがき

 ブログにソースコードを表示するプラグインを適当に検索して出てきた順に使用して比較してみます。
これまで「Highlighting Code Block」というプラグインを使ってきましたが、SEOへの影響が気になり、より良いプラグインを探すことにしました。
 SEOへの影響というのは、サイトの「読みやすさ」評価についてです。Googleの評価基準は公開されていませんが、同じ単語を繰り返したり、意味の通らない文章は評価を下げる要因になるようです。従って、プログラムソースコードを文章として評価されてしまうと、SEOに悪影響が出ることは避けられません。実際、現在私が使用している「All in One SEO」という、サイトのSEO評価を行うプラグインでも、プログラムソースコードを掲載すると、読みやすさの評価が大きく低下します。
 ソースコード掲載によるSEOへの悪影響を避けるには、ソースコードを画像として張り付けるのが一番簡単です。しかし、プログラムの解説を見に来るユーザさんにとっては、ソースコードのコピペは最も重要な要素だと思います。(私はそうです)よって、理想としては、ソースコードをコピペ可能な文章として掲載しつつ、本文とは別口として認識させる、そんな都合のよいプラグインがないもんかなぁということで、調査を行います。

調査方法

 評価基準は以下の5点とし、不明なものは”-”とします。SEOへの影響は、以下の投稿で使用したPythonコードを入力した場合のAll in One SEOの読みやすさの評価点の変化を見ます。

【Python】iloc , iat の速度比較。DataFrameの選択に使うべきは?

使いやすさは独断と偏見を基に5点満点で評価します。また、いろいろなプラグインを入れっぱなしにすると、サイトが重くなり、これもSEOを下げる要因になります。これを避けるために、掲載するのはスクリーンショットのみとしますので、ご承知おきください。

  • 対応言語数
  • 行数表示機能
  • 一括コピー機能
  • ファイルリンク機能
  • レイアウトの種類
  • SEOへの影響
  • 使いやすさ

Highlighting Code Block

 

対応言語数17種類
行数表示機能あり
一括コピー機能なし
ファイルリンク機能あり
レイアウトの種類1種類のみ(CSSクラスを追加可能)
SEOへの影響あり
使いやすさ 4点。
対応言語も多く、ソースをコピペすれば自動で色付けもしてくれます。WordPressのブロックから選択して使えるので使い勝手も良好。
タブが使用できない(自動的に半角スペースに変換される)のがちょっと使いにくいと感じるので-1点。
 Highlighting Code Block 表示例
Highlighting Code Block 表示例

Code Snippets

対応言語数?種類
行数表示機能
一括コピー機能
ファイルリンク機能
レイアウトの種類1種類のみ(CSSクラスを追加可能)
SEOへの影響
使いやすさ 2点。
対応言語という概念はなく、独自の設定を追加していくことであらゆる言語に対応可能なようです。行数表示やコピー機能なども設定によっては実現できそうですが、今回は検証していないので「?」としています。
使いこなせば柔軟性はピカイチと思われますが、設定項目がすべて英語表記であったり、サンプルソースを使用するような難解な設定があったりと、初心者には使いづらそうです。

Code Embed

対応言語数区別しない
行数表示機能なし
一括コピー機能なし
ファイルリンク機能なし
レイアウトの種類1種類のみ
SEOへの影響あり
使いやすさ 2点。
事前に設定したキーワードを、カスタムフィールドに入力したソースコードに置き換えるという仕組み。ちょっと遠回りなうえ、使用できる設定項目が通常のテキストと同じなので、あまり使用するメリットがない感じです。逆に、文章の中に自然にコードを入れたい場合にはメリットといえるかもしれません。

Code Syntax Block

対応言語数46種類
行数表示機能あり
一括コピー機能なし
ファイルリンク機能なし
レイアウトの種類4種類
SEOへの影響あり
使いやすさ 3点。
対応言語が極めて多く、WordPressデフォルトのコードスぺニットに、設定項目を追加する形なので使い勝手は悪くありません。しかし、コードスぺニット配置→設定変更という手順を毎度踏まなければならないぶん、同じくWordPressのブロックとして利用できるHighlighting Code Blockに比べるとやや手間が多めです。
 Code Syntax Block 表示例
Code Syntax Block 表示例

まとめ

 結局、現状では今まで使っていたHighlighting Code Blockが一番使いやすいという結論に達しました。慣れている分やや公正さを欠いた判定だとは思いますが、実際、何の設定もなしにWordPressのブロックからワンクリックで呼び出せるのは強いです。
 SEOへの悪影響の剣は未解決ですが、今回は保留として、引き続きユーザーフレンドリーを心がけて、ソースを積極的に掲載してゆこうと思います。