Webサイトをテストアップした時に、何か問題がないかチェックをしなければいけません。
全てチェックするのは手間ですが、自分で納得できるサイトにするにはこの記事にある項目をチェックしておきましょう。
また、便利なチェックツールもあるので、それらもうまく活用しましょう。
公開前にチェックするべき項目
サイトを公開する前に、以下の項目をチェックしておきましょう。
- 不要なコメントアウトはないか
- 誤字脱字はないか
- Chrome、Safari、Microsoft Edge、Firefox、IE（案件による）での表示が崩れていないか
- iOSやAndroidの端末で表示が崩れていないか
- Google Analyticsのタグは埋め込んだか
- Search Consoleのタグは埋め込んだか
- OGPの設定やTwitterのシェア用のタグはあるか
- ファビコンは設定されているか
- スマホ用のアイコンは設定されているか
- titleタグは下層ページまで設定されているか
- meta要素のディスクリプションは設定されているか
- ライセンスの表記に間違いはないか
- JavaScriptは適切に動いているか
- consoleにエラーは出ていないか
結構いっぱいありますが、これらは気づきにくいポイントなので、しっかりチェックしておくようにしましょう。
不要なコメントアウトはないか
不要なコメントアウトはとても邪魔です。修正や更新作業をする時に、テキストエディタで無駄にスクロールしなくてはいけなくなります。
制作者はコメントアウトが必要なのか不要なのか判断して、不要な部分は削除しておきましょう。
誤字脱字はないか
せっかくサイトを公開したのに、誤字脱字があると残念な感じになってしまいます。
場合によっては間違った情報を閲覧者に提供してしまうかもしれません。
誤字脱字の原因がクライアントにある場合がほとんどですが、見つけてあげると仕事ができるWeb制作者という印象を与えます。
主要ブラウザのチェック
最近では各ブラウザの差異は減ってはいますが、依然として仕様の違いは残っています。
開発で使っているブラウザでちゃんと表示されたからと安心せず、Chrome、Safari、Microsoft Edge、Firefox、IE（案件による）は必ずチェックしておきましょう。
スマホでの表示確認
Google ChromeのDeveloper Toolsを使えばスマホの表示で開発することができますが、それでは完璧ではありません。
iOS SafariやAndroidのChromeでは、思わぬ仕様の違いがあります。稀にバグも存在します。
かならず実機を使ってテストするようにしましょう。
アクセス解析タグの確認
Google AnalyticsとSearch Consoleのタグはちゃんと埋め込んだか確認しましょう。
後から「計測できませんでした」なんてことになるとクライアントに怒られてしまいます。
SNSシェア用のコードは忘れていないか
SNSでシェアさせるには、必ずOGPの設定をする必要があります。
OGPとは「Open Graph protocol」の略称で、FacebookやTwitterなどで、ページのタイトルやサムネイル画像などをカード型で表示させるのに必須の設定です。
SNSでの拡散を期待しているサイトもあるでしょう。必ず確認しましょう。
ファビコンやスマホ用のアイコンは設定されているか
アイコンというのはサイトのイメージを作り出し、印象に残す効果もあります。
また、PCのブラウズにブックマークしたり、スマホのホーム画面に追加したりした時にアイコンが表示されます。
少々面倒ですが、設定を忘れない様にしましょう。
title要素の漏れはないか
title要素の文字が表示されるのはブラウズのタブの部分なので、見落としがちです。
しかし、title要素はSEO的に非常に重要な要素です。検索にヒットするかどうか、検索一覧に出る表示などに影響します。
必ず適切に設定をしておきましょう。
ディスクリプションの設定
こちらもGoogleなどの検索結果に表示される（必ずディスクリプションが表示されるとは限りませんが）項目なので、忘れずに設定しておきましょう。
JavaScriptに問題がないかチェック
たまに最終チェックの段階で、ボタンをクリックして動くはずのJavaScriptが、動作しないということがあります。
トップページでは動くけど下層ページでは動かないなど、状況によってエラーになることもあります。
問題なく動作するか確認しておきましょう。
Consoleを確認する
Google ChromeのDeveloper ToolsにConsoleの機能がありますが、ここにエラーが出ているのに気付かないこともあります。
Consoleにエラーが出ると思わぬ不具合が発生することがあります。
また、console.logなどの結果がConsoleに出ていることがあるので、消しておきましょう。
便利なチェックツール
お次は、便利なチェックツールを紹介します。
Markup Validation Service
HTMLを正しくマークアップできているかをチェックするツールです。
思わぬエラーの予防やSEO対策のためにもチェックしておきたいツールです。
CSS Validation Service
http://jigsaw.w3.org/css-validator/
CSSが適切に記述できているかチェックするツールです。
Link Checker
https://validator.w3.org/checklink
リンク切れがないかをチェックしてくれるツールです。
リンク切れがあるとユーザーが正しくページに遷移できなかったり、Googleのクローラエラーが出たりするのでチェックしておきましょう。
サイト公開後も定期的にリンク切れチェックはしておきたいですね。
構造化データテストツール
https://search.google.com/structured-data/testing-tool?hl=ja
構造化データマークアップをすることで、検索エンジンに適切にページの情報を渡すことができます。
また、検索結果のリッチスニペットに対応させるには、構造化データマークアップを施す必要があります。
リッチスニペックというのは、Googleの検索結果に出てくる補足情報のようなものです。
よく使われるのはパンくずリストですね。
このようなリッチスニペックを利用するには、schema.orgを使用するのが一般的です。
schema.orgの仕様に準拠したHTMLの書き方は以下の記事をご覧ください。
https://syncer.jp/schema-entering
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
ページの読み込み速度を向上させるために、改善点を提案してくれるツールです。
このツールの凄い所は、画像やCSS、JavaScriptを最適化後の状態でインストールできる点です。
ちなみに、Google Analyticsの「行動」→「サイトの速度」→「速度についての提案」を選択すると複数のページをまとめて計測してくれます。
GT metrix
Pagespeed Insightsは改善点を提案するツールですが、こちらは実際の体感速度に近い計測ができるツールです。
細かい改善点を見つけるために使っておきたいです。
モバイルフレンドリーテスト
スマホでの使いやすさをチェックするツールです。
現在Googleはスマホでの表示を重視しています。スマホでのユーザビリティを確認するために、チェックしておきましょう。
まとめ
全ての案件で全ての項目チェックやツールを使う必要はないと思いますが、できる限りチェックしておいた方が良いでしょう。
後からクライアントにあれこれ言われるくらいなら、未然に防ぎましょう。
ツールはガンガン使いましょう。
わざわざ自分でエラーや改善点を探すより、ツールを使った方が早いですね。細かい点を改善していきたいサイトにはうまく活用しましょう。
