見た目もコードも綺麗に!WordPressサイト向けコードチェックツールまとめ。

今回は、僕が普段Wordpressサイトチェックに利用しているチェックツールをまとめてみました。

スポンサーリンク
レクタングル(大)広告

コードチェックツールを使う理由

サイトのデザインは、見やすく綺麗なものに越したことはありません。

そして、できればプログラムコードも綺麗なのに越したことはありません。というのも、通常のデザインが人間用だとしたら、コードはコンピューターがサイトを理解するためのものだからです。

通常、サイトに訪れてコンテンツを読んでくれるのは人間です。けれど、そのコンテンツを読み込み、検索エンジンやSNSのシステムに反映してくれるのは、コンピューターです。

ですのでコードに不備があると、情報がうまくコンピューターに伝わらないこともありえます。(Googleのクローラーなどはエラーなどにも十分対応できていると思いますが。)

ただ、コードをチェックするといったって、目視でソースを確認していては、時間が幾らあっても足りません。

ということで今回は、(主にWordpress向けの)サイトのコードを確認するためのツールをいくつか紹介したいと思います。

コードの綺麗さにそこまでこだわる必要は、ないとは思いますが、バリデーションエラーがないサイトができると、結構気持ちが良かったりします。なんか尤もらしいことを書きましたが、ただ単に理由はそれだけだったり。

HTMLチェック

以下は、主にHTML5のコードチェックツールです。

The W3C Markup Validation Service

The W3C Markup Validation Service

The W3C Markup Validation Service

W3Cによって作られた、HTML文書がHTMLやXHTML標準へ準拠しているかどうかを検証するためのサービスです。バリデーションエラーが出たからといって、検索結果などへの影響は、ほぼないとは思いますが、チェックをパスした緑色が出ると結構気持ち良いです。それだけです。

Validator.nu (X)HTML5 Validator

Validator.nu (X)HTML5 Validator (Living Validator)

Validator.nu (X)HTML5 Validator

W3Cのものと機能はほぼ変わりませんが、こちらの方がデフォルト状態で問題のコード箇所をわかりやすく表示してくれます。

アウトラインチェック

HTML5 Outliner

HTML5 Outliner

HTML5のアウトラインの状態をわかりやすく表示してくれます。これを使うことにより、見出しが適切に設定されているかなどが、一目でわかります。

タグの閉じ忘れチェック

HTML内タグの閉じ忘れをチェックするツール

HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] – とっくりばー

HTMLのタグの閉じ忘れを検出してくれるブックマークレットです。僕もたまにするのですが、Wordpressに記事などを書いていて、タグの閉じ忘れをしてポストした時に、テーマのレイアウトが崩れてしまったりすることがあります。そういったときに、問題のタグを素早く見つけるのに役立ちます。

HTMLエラーチェッカー

HTMLエラーチェッカー

HTMLエラーチェッカー

こちらは、先程のブックマークレットをChrome拡張で使えるようにしたものです。

構造化データーのチェック

Testing Tool — Google Developers

Testing Tool — Google Developers

ウェブマスターツールに、構造化データーのチェックツールはありますが、こちらはログインをしなくても、利用できるので手軽に使えます。パンくずリストや、hentryのチェックなどに。

SNSコードチェック

以下は、拡散用のSNS向けタグの動作をチェックするツールです。プラグインなどで、OGPなどの設定をした場合は、正常動作しているか、一度チェックしてみることをおすすめします。

Facebook OGPタグのチェック

Facebook OGPのデバッガー

Facebook Debugger

Facebook OGPが正常動作しているかチェックしてくれるツールです。OGPタグを細かくチェックしてくれ、プレビュー機能もあるので、意図通りにカードが表示されるかもチェックできます。

一旦登録された、FacebookのOGP情報を後から修正するツールとしても使えます。

今回は、一旦登録されたFacebook OGP情報を後から変更する方法です。Facebookなどで、Facebookカード情...

Twitter Cardタグのチェック

Twitter Cardsバリデーター

Card Validator | Twitter Developers

こちらは、Twitterカードのタグをチェックして、プレビューしてくれるツールです。

Facebook同様、こちらも一旦登録したTwitterカード情報を後から修正するのに利用できます。

今回は、1度登録されたTwitterカード情報を変更する方法を紹介します。1度Wordpressなどで記事をポストして、Tw...

モバイル対応チェック

コードのバリデーションとは多少違いますが、モバイルでの利便性をチェックしてくれるツールです。

モバイルフレンドリーテスト

モバイル フレンドリー テスト

モバイル フレンドリー テスト

ウェブページのコードを解析することで、ページ設計がモバイルに対して利便性が高いかをチェックしてくれます。

モバイルユーザーエクスペリエンス

PageSpeed Insightsのモバイルユーザーエクスペリエンス

PageSpeed Insights

こちらでも、モバイルでの利便性をチェックできます。フォントが小さすぎないか?、リンクは適切な大きさか?、リンク同士の間隔に余裕はあるか?など、モバイルでの訪問者が使いやすくなる適切な提案をしてくれます。

WordPressテーマチェック

WordPressテーマにも推奨される作法はあるようです。こちらにあるチェックツールのチェックをパスすれば、とりあえず、危険なコードや不適切なコードのチェックはできるかと思います。

WordPressテーマバリデーター

The Web Template Verification Service

The Web Template Verification Service

WordPressテーマの作法に準じているかなどをチェックできます。危険なコードなど含まれていないかなどもある程度チェックすることができます。

WordPressテーマチェックプラグイン

Theme Check

WordPress › Theme Check « WordPress Plugins

上の、Wordpressテーマのバリデーションサービスと同様のチェックをプラグインから手軽に行うことができます。

サイトの高速化チェック

こちらの、ツールでチェックして出てきた提案に従って、サイトを修正したり、.htaccessの編集を行えば、ファイルキャッシュプラグイン等を使用せずとも、ある程度読み込みの早いサイトができ上がります。

PageSpeed Insights

PageSpeed Insights

PageSpeed Insights

こちらに出てくる修正提案に従ってサイトを修正すれば、訪問者にとってかなり利便性の高いサイトができ上がると思います。ある程度簡単に、手っ取り早くスコアを上げるには、.htaccessの編集がおすすめです。

おすすめの設定は以下です。

参考 .htaccess の見直しでWebページ高速化 | Thought is free

GTmetrix

GTmetrix - Website Speed and Performance Optimization

GTmetrix | Website Speed and Performance Optimization

こちらは、サイト高速化の状態が、スコアとしてわかりやすく表示されます。

それぞれの指標の意味・改善方法は以下に詳しく書かれています。

参考 ウェブサイトの最適化で表示速度を高速化!「Page Speed」と「YSlow」の設定方法 – Media-Pickup

Website speed test

Website speed test

Website speed test

こちらもよく利用されている、高速化チェックツールです。GTmetrixとは少し違ったスコア基準なので、両方で試しても良いかと思います。

SEO・利便性

サイトのトータルのSEO・利便性をチェックするならNibblerがフリーではおすすめです。

SEOとマーケティングチェックツール

Nibbler - Test any website

Nibbler – Test any website

フリーで、一般的におすすめとされるサイトの改善点を可視化してくれるツールです。適切な改善点の提案もしてくれるので、それに従ってサイトを修正すれば、ある程度SEOにも強く、ユーザーにも優しいサイトができ上がると思います。

詳しい説明は以下です。

先日、Nibbler(ニブラー)という、SEOとWEBマーケティング分析サービスを見つけました。これを使ってみたら、無料なが...

まとめ

冒頭にも書きましたが、バリデーションチェックなどでエラーが出たからといって、無理に直す必要はないと思います。

ただ、直せそうなところなら直しておいたほうが、ユーザーはもとより、クローラー含むBOTには優しい作りになると思います。何より、エラーを取り除くと、カーペットのコロコロをしているような感覚の気持ち良さがあります。

コードの修正が、SEOに有利かどうかは、僕はわかりません。ただ、お掃除的な感覚で、サイトのコードエラーを綺麗にするには、便利なツールだと思います。

※コードを綺麗にすることで、アクセスアップを図るなんて回りくどいことをするよりは、良い記事を定期的に生み出した方が、よっぽど効果的だと思います。