今回は、僕が普段Wordpressサイトチェックに利用しているチェックツールをまとめてみました。
目次
コードチェックツールを使う理由
サイトのデザインは、見やすく綺麗なものに越したことはありません。
そして、できればプログラムコードも綺麗なのに越したことはありません。というのも、通常のデザインが人間用だとしたら、コードはコンピューターがサイトを理解するためのものだからです。
通常、サイトに訪れてコンテンツを読んでくれるのは人間です。けれど、そのコンテンツを読み込み、検索エンジンやSNSのシステムに反映してくれるのは、コンピューターです。
ですのでコードに不備があると、情報がうまくコンピューターに伝わらないこともありえます。(Googleのクローラーなどはエラーなどにも十分対応できていると思いますが。)
ただ、コードをチェックするといったって、目視でソースを確認していては、時間が幾らあっても足りません。
ということで今回は、(主にWordpress向けの)サイトのコードを確認するためのツールをいくつか紹介したいと思います。
コードの綺麗さにそこまでこだわる必要は、ないとは思いますが、バリデーションエラーがないサイトができると、結構気持ちが良かったりします。なんか尤もらしいことを書きましたが、ただ単に理由はそれだけだったり。
HTMLチェック
以下は、主にHTML5のコードチェックツールです。
The W3C Markup Validation Service
The W3C Markup Validation Service
W3Cによって作られた、HTML文書がHTMLやXHTML標準へ準拠しているかどうかを検証するためのサービスです。バリデーションエラーが出たからといって、検索結果などへの影響は、ほぼないとは思いますが、チェックをパスした緑色が出ると結構気持ち良いです。それだけです。
Validator.nu (X)HTML5 Validator
Validator.nu (X)HTML5 Validator
W3Cのものと機能はほぼ変わりませんが、こちらの方がデフォルト状態で問題のコード箇所をわかりやすく表示してくれます。
アウトラインチェック
HTML5のアウトラインの状態をわかりやすく表示してくれます。これを使うことにより、見出しが適切に設定されているかなどが、一目でわかります。
タグの閉じ忘れチェック
HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] – とっくりばー
HTMLのタグの閉じ忘れを検出してくれるブックマークレットです。僕もたまにするのですが、Wordpressに記事などを書いていて、タグの閉じ忘れをしてポストした時に、テーマのレイアウトが崩れてしまったりすることがあります。そういったときに、問題のタグを素早く見つけるのに役立ちます。
HTMLエラーチェッカー
こちらは、先程のブックマークレットをChrome拡張で使えるようにしたものです。
構造化データーのチェック
Testing Tool — Google Developers
ウェブマスターツールに、構造化データーのチェックツールはありますが、こちらはログインをしなくても、利用できるので手軽に使えます。パンくずリストや、hentryのチェックなどに。
SNSコードチェック
以下は、拡散用のSNS向けタグの動作をチェックするツールです。プラグインなどで、OGPなどの設定をした場合は、正常動作しているか、一度チェックしてみることをおすすめします。
Facebook OGPタグのチェック
Facebook OGPが正常動作しているかチェックしてくれるツールです。OGPタグを細かくチェックしてくれ、プレビュー機能もあるので、意図通りにカードが表示されるかもチェックできます。
一旦登録された、FacebookのOGP情報を後から修正するツールとしても使えます。
Twitter Cardタグのチェック
Card Validator | Twitter Developers
こちらは、Twitterカードのタグをチェックして、プレビューしてくれるツールです。
Facebook同様、こちらも一旦登録したTwitterカード情報を後から修正するのに利用できます。
モバイル対応チェック
コードのバリデーションとは多少違いますが、モバイルでの利便性をチェックしてくれるツールです。
モバイルフレンドリーテスト
ウェブページのコードを解析することで、ページ設計がモバイルに対して利便性が高いかをチェックしてくれます。
モバイルユーザーエクスペリエンス
こちらでも、モバイルでの利便性をチェックできます。フォントが小さすぎないか?、リンクは適切な大きさか?、リンク同士の間隔に余裕はあるか?など、モバイルでの訪問者が使いやすくなる適切な提案をしてくれます。
WordPressテーマチェック
WordPressテーマにも推奨される作法はあるようです。こちらにあるチェックツールのチェックをパスすれば、とりあえず、危険なコードや不適切なコードのチェックはできるかと思います。
WordPressテーマバリデーター
The Web Template Verification Service
WordPressテーマの作法に準じているかなどをチェックできます。危険なコードなど含まれていないかなどもある程度チェックすることができます。
WordPressテーマチェックプラグイン
WordPress › Theme Check « WordPress Plugins
上の、Wordpressテーマのバリデーションサービスと同様のチェックをプラグインから手軽に行うことができます。
サイトの高速化チェック
こちらの、ツールでチェックして出てきた提案に従って、サイトを修正したり、.htaccessの編集を行えば、ファイルキャッシュプラグイン等を使用せずとも、ある程度読み込みの早いサイトができ上がります。
PageSpeed Insights
こちらに出てくる修正提案に従ってサイトを修正すれば、訪問者にとってかなり利便性の高いサイトができ上がると思います。ある程度簡単に、手っ取り早くスコアを上げるには、.htaccessの編集がおすすめです。
おすすめの設定は以下です。
参考 .htaccess の見直しでWebページ高速化 | Thought is free
GTmetrix
GTmetrix | Website Speed and Performance Optimization
こちらは、サイト高速化の状態が、スコアとしてわかりやすく表示されます。
それぞれの指標の意味・改善方法は以下に詳しく書かれています。
参考 ウェブサイトの最適化で表示速度を高速化!「Page Speed」と「YSlow」の設定方法 – Media-Pickup
Website speed test
こちらもよく利用されている、高速化チェックツールです。GTmetrixとは少し違ったスコア基準なので、両方で試しても良いかと思います。
SEO・利便性
サイトのトータルのSEO・利便性をチェックするならNibblerがフリーではおすすめです。
SEOとマーケティングチェックツール
フリーで、一般的におすすめとされるサイトの改善点を可視化してくれるツールです。適切な改善点の提案もしてくれるので、それに従ってサイトを修正すれば、ある程度SEOにも強く、ユーザーにも優しいサイトができ上がると思います。
詳しい説明は以下です。
まとめ
冒頭にも書きましたが、バリデーションチェックなどでエラーが出たからといって、無理に直す必要はないと思います。
ただ、直せそうなところなら直しておいたほうが、ユーザーはもとより、クローラー含むBOTには優しい作りになると思います。何より、エラーを取り除くと、カーペットのコロコロをしているような感覚の気持ち良さがあります。
コードの修正が、SEOに有利かどうかは、僕はわかりません。ただ、お掃除的な感覚で、サイトのコードエラーを綺麗にするには、便利なツールだと思います。
※コードを綺麗にすることで、アクセスアップを図るなんて回りくどいことをするよりは、良い記事を定期的に生み出した方が、よっぽど効果的だと思います。