WEBサイト・ホームページ・ブログを制作したら、公開前に必ず確認するチェック項目です。WEBに関わる人なら当たり前の作業や意外と結構見逃しがちな作業までをご紹介します。
SEO対策にも大きく関わってくる項目があるので、自信のWEBサイト・ホームページ・ブログと照らし合わせながら確認してみてはいかがでしょうか。
- クラスブラウザチェック
- IEバージョンチェック
- Googleアナリティクス（アクセス解析）設定
- title・description・keywordsの見直し
- 画像にalt・width・height・title
- リンクにtitle
- お問い合わせフォームなどにnoindex・follow
- お問い合わせフォームなどに<label>タグを設定
- ドメインの「www」の有り無し統一
- TOPページの「index.html」の有り無し統一
- XMLサイトマップ
- Googleウェブマスターツール登録
- ファビコン
- スマートフォン用アイコン
- リンク切れチェック
- 404ページ
- OGP（SNS用サイト情報）
- マークアップ最適化
- Yahoo！ロコ・Googleプレイス登録
クラスブラウザチェック
確認対象はIE、Chrome、Firefox、Safariが無難でしょう。日本で認知の低いOperaは無視しても問題ないかと思います。
また、WEB制作者ならだれもが頭を悩ますIE対策。まだまだIE8以前の利用率が多いのも現状です。制作前にIEのサポートバージョンを明確にすることも、こういった確認作業の削減には有効的です。
ちなみに私が個人制作する場合は、IEのサポートバージョンをIE9以降と決めています。理由はCSS3を気にすることなく使用できるからです。ですが念の為CSSハックなどの対策は行います。
レスポンシブウェブデザインなどスマートフォンに対応する場合はシミュレーターではなく必ず実機で確認するようにしましょう。
IEバージョンチェック
クロスブラウザチェックでIEのバージョンチェックはIETesterを使って確認します。IETesterはIE5.5～最新バージョンまでを仮想環境で確認できるフリーソフトです。ちなみにWindowsのみ対応。
http://www.my-debugbar.com/wiki/IETester/HomePage
Googleアナリティクス（アクセス解析）設定
アクセス解析ツールは一番メジャーなGoogleアナリティクスを使います。管理画面からWEBサイトの登録をしてトラッキングコードを発行します。発行されたコードを全ページの<head>内に埋め込みます。
title・description・keywordsの見直し
タイトル（title）、ディスクリプション（description）、キーワード（keywords）のメタ情報の確認と再調整を行います。
制作完了後に全体のコンテンツを客観的に見直して、ユーザー視点で考えることがポイント。制作中では気づかなかった点が見えてきたりします。
画像にalt・width・height・title
制作者側がよく忘れてしまいがちの<img>タグに対する宣言です。とくにIEの場合は「width=””」や「height=””」となっていると縦横0pxと判断されて画像自体が表示されないので要注意。
altは画像に関するSEO評価にも関わってくるので必ず設定する事。titleもその画像が何の画像なのかを検索エンジンに認識させる大切な宣言なので忘れずに設定する。
リンクにtitle
画像のtitle同様にそのリンクがどこへ飛ぶのかを明記する為の宣言です。あまり長すぎてもよくないので簡潔な文章を設定します。
お問い合わせフォームなどにnoindex・follow
meta robots の noindex または follow は検索エンジンにクローリングされたくない、検索結果一覧に表示されたくないページに設定します。
お問い合わせフォームのようなユーザーにとって有意義なページだが、検索エンジンにとっては内容が薄くあまり高評価が期待できないページなどは設置するといいでしょう。
なお、noindex follow を設定したからと言って検索エンジンが完全に無視するという訳ではなく、あくまでSEO評価の対象にせず検索一覧に表示させないだけで、検索エンジンロボットはページを認識します。
お問い合わせフォームなどに<label>タグを設定
フォームのラジオボタンやチェックボタンなどはスマートフォンだと押し辛いですよね。文字自体もクリック・タップに反応させる為に<label>タグが再注目されています。
スマートフォンだけでなくPCでのUXも向上しますので、設定することをおすすすめします。
ドメインの「www」の有り無し統一
検索エンジンに対してドメインを正規化します。アクセス解析にも関わってくるので「www」の有り無しどちらが正規のドメインなのかを決めてhtaccessで301リダイレクト設定をしましょう。
TOPページの「index.html」の有り無し統一
「www」の有り無し同様にTOPページのURLを「/」のみと「/index.html」をどちらかにhtaccessの301リダイレクトで統一します。ちなみにWordPress（ワードプレス）で構築されたサイトは設定不要です。
http://www.suzukikenichi.com/blog/canonicalization-of-indexhtml-and-non-indexhtml/
XMLサイトマップ
検索エンジンにサイトのクロールを促すために必要です。ウェブマスターツールでサイトを登録する際にも必要なので必ずサーバーにアップロードします。
また、ページを新規追加したらXMLサイトマップも更新しましょう。XMLサイトマップは「XML-Sitemaps.com」から簡単に発行する事が出来ます。
http://www.xml-sitemaps.com/
Googleウェブマスターツール登録
Googleの検索エンジンにWEBサイトを登録します。今やYahoo検索もほとんどGoogleの検索エンジンを使用しています。検索結果にいち早く表示されるように必ずウェブマスターツールには登録しましょう。
この際にXMLサイトマップの確認もされます。またウェブマスターツールのFetch as Googleを使う事でクローラーの巡回を促すことが出来ます。
ファビコン
ファビコンとはブラウザタブでタイトルと一緒に表示されるとても小さいアイコンのことです。
ファビコンはSEO評価にも関係ないので正直なくてもいいのですが、サイトのクオリティを上げるなら是非設置しましょう。逆にクオリティの低いサイトはファビコンが設定されていないという判断もされたりします。
ファビコン画像のサイズは縦16px横16pxで形式はGIFがおすすめです。FirefoxならファビコンにGIFアニメーションを設定することが出来ます。
<head>内に下記を記述してファビコンを読み込みます。
<link rel="icon" href="images/favicon.gif" type="image/gif">
スマートフォン用アイコン
レスポンシブウェブデザインなどのスマートフォンにも対応しているWEBサイトなら、ホーム画面にブックマークした際のアイコンも設定するといいでしょう。
こちらもファビコン同様にあればいい程度のレベルですが、あるとないとでは結構な見栄えの差が出ます。サイズはiPad：Retinaを考慮して縦150px横150pxのPNGで作成しておけば大体のデバイスで綺麗に表示されます。
<head>内に下記を記述してファビコンを読み込みます。
<link rel="apple-touch-icon-precomposed" href="images/favicon_app.png">
http://memo.goodpatch.co/2013/03/mac-win-ios-android-app-icns-size/
http://www.webcreatorbox.com/tech/smartphone-snippets/
リンク切れチェック
Website Explorerやサイトツールでリンク切れの確認をします。SEO評価でリンク切れは大きなマイナス要素になります。新規構築以外にも定期的にチェックするなど気にかけるようにしましょう。
http://www.umechando.com/webex/
404ページ
ドメイン配下で無効なディレクトリやリンク切れなどがあった場合に備えて設定しておくといいのが404ページ、通称「404 Not Found」です。こちらはhtaccessで設定できます。WordPressの場合は「404.php」ファイルを作成するなどで設定できます。
http://www.suzukikenichi.com/blog/panda-update-may-look-at-404-error-pages/
OGP（SNS用サイト情報）
FacebookやGoogle+やmixiなどのSNSにおいて、そのページを共有する際に表示させる文言を設定する為の共通仕様です。SNSでの拡散も大切なマーケティングなので、こちらも設定しておきましょう。
マークアップ最適化
HTMLの構文チェックツールを使って、正しいHTMLソースかどうかを確認することが出来ます。サイトエラーを未然に防ぐだけではなく、マークアップを最適化することでクローラーも巡回しやすいソースコードなりSEO評価の向上も見込めます。
http://www.htmllint.net/html-lint/htmllint.html
Yahoo！ロコ・Googleプレイス登録
制作サイトが店舗の場合は、Yahoo！ロコとGoogleプレイスに登録しましょう。Yahoo・Googleそれぞれが提供している地図などのサービスと関連付けることが出来ます。YahooやGoogleどちらも無料で登録出来ます。
コメント