こんにちは、CGP WebチームのSKKです。
長い制作期間を経てようやく完成したWebサイト。
公開の瞬間は誰でもテンションが上がるはずです。でも本当にそのまま公開して
しまって大丈夫…？

丁寧に作り上げたつもりでもダミーの画像やテキストが残っていたり、リンクが外れていたり…思わぬミスで公開後に慌ててしまった経験をお持ちの方も多いのではないでしょうか。（私は何回もあります…！）
特にWebサイトでは裏側のソースコードやエラー時の表現など、パッと見ただけでは気付かない部分にも調整必須の項目が隠れています。そのような部分にミスがあった場合、公開後長らく誰も気付かないないまま放置なんてことも…。そして、そんな「隠れミス」ほどSEO（Search Engine Optimization：検索エンジン最適化）に影響することも多く、知らないうちに検索順位を下げる要因になっている可能性もあります。
そこで、Webチームでは公開前にチェックシートを使って、関係者でミスが起こりやすい箇所を再度確認するようにしています。
今回はその中でも特にミスが起こりやすく、 あまりWebに詳しくない方でも確認可能な項目をまとめてみました。

サイト情報に関する項目3つ

SEOや流入に関わるものも多く、チェック必須の項目です。

1.titleとdescriptionは正しく入力されているか？

上の画像のように検索結果に「タイトル」と「説明文」として表示される部分です。このほか、titleはブラウザのタブ部分に表示されたり、ページをブックマークした際に名前として抽出される部分でもあります。
titleとdescriptionは検索エンジンがとても重要視する要素で、検索でヒットさせたいキーワードを含めることでSEOを効果的に進めることができます。なお、titleは全角30文字程度、descriptionはPCで100文字程度、スマホで60文字程度がよいとされており、長すぎる文章は調整が必要です。

チェックにはChromeの拡張ツール「META SEO inspector」が便利
ソースから確認することもできますが、いちいちソースを開くのは手間ですよね。「META SEO inspector」は確認したいページ上でツールバーのアイコンをクリックすることで確認できるのでオススメです。
ページごとに目を通して、適切なtitleとdescriptionが入っているかを確認しましょう。

META SEO inspector – Chrome ウェブストア

2.OGPは設置しているか？

FacebookやmixiなどのSNSでページをシェアする際、上の画像のように自動でタイトルやサムネイル画像、概要などのページ情報が表示されるかと思います。
OGPはこのページ情報に意図したものを表示させる仕組みです。制作現場では特にこのサムネイル画像のことを「OGP画像」と読んでいます。何も設定をしていないと、リンク先と関係のないサムネイルや概要が入ってしまうことがあり、せっかくシェアをされてもそこからの流入や拡散の効果が薄まってしまいます。
実際にページをシェアしてみて、任意の情報が表示されるかを確認します。ただし、ここで注意したいのがベーシック認証などで非公開としているサイトでは、SNS側からうまく情報が取得できない点です。その場合は開発者にテスト可能な状態に設定を変更してもらう必要があり、SNSを活用したキャンペーンサイトなどのように、シェアがサイト内でよほど重要な要素でない場合には公開後にすぐテストをする流れでもよいかと思います。

3.faviconは設置されているか？

制作が後回しになりがちなfaviconも要チェックポイントです。

サイトを閲覧した際、タブに表示される画像です。サイトの機能やSEOには直接影響がない箇所ではありますが、サイトの見栄えとして忘れたくないポイントです。
Chromeでは正しく表示されていてもInternet Explorerでは読めていないなど、ブラウザによって差異が出る場合があるので対応のブラウザでひと通りチェックします。

ページの表示や機能に関する項目4つ

基本的な項目から、画像情報まで今一度チェックします。

4.仮、サンプル、ダミーのテキストや画像は残っていないか？

基本的な確認事項ではありますが、うっかりミスが起きやすい項目です。
特に写真で有料素材を使用する場合、制作のなかで購入前の画像をダミーとして進めることもあるかと思いますが、パッと見ただけではダミー画像であることに気付きにくく注意が必要です。ダミー画像を設置する際には画像内にダミーマークを記載するなど、見逃さないための進め方の工夫も重要です。

ダミーとして設置した画像にはダミーマークを。

5. リンク先は正しいか？

リンク切れや間違ってリンク先を指定している箇所がないかを確認します。もちろん一つひとつ実際にクリックして見ていくこともできますが、ツールを使用することで効率的に進めることができます。

リンク切れにはWebツール「Online Broken Link Checker」が便利
ページ数が少ないサイトであれば、サイトまるごとリンク切れをチェックできるツールが便利です。「Online Broken Link Checker」の他にも色々なサイトが提供をしています。

http://www.brokenlinkcheck.com/

「Find broken links」ボタンをクリックすると、30ページ程度のサイトで1、2分でリンク切れしている箇所を表示してくれます。

リンク先の確認には拡張ツール「web developer」が便利。
「web developer」を使用すれば、ページ上のリンク部分に飛び先のURLを表示させることができます。
ツールをインスロールし、ツールバーから「情報」の「リンクのパスを表示」を選択することで表示できます。ページごと、表示されたURLが飛び先として正しいかを確認していきます。

Mozilla：Web Developer :: Add-ons for Firefox
Google：Chrome ウェブストア

6 . パンくずリストは正しく記述されているか？

パンくずリストとは、ユーザーが閲覧しているページがどの階層のどのページなのかを分かりやすくするためのものです。細かい部分ではありますが、パンくずリストはSEOにも一定効果があるとされているので忘れずチェックします。

パンくずリスト。ページ上部で表現されることが多い。

7.すべての画像にaltは正しく設定されているか？

altとはHTML上で画像に対して指定することができる代替テキストです。
普段は画面上に表示されないテキストですが、以下のような場面で使用されます。

• 目が不自由で音声ブラウザを使用している場合、画像の代わりに読まれる。
• 回線の事情などにより画像が表示されない場合に、画像の代わりに表示される。
• 検索エンジンに画像の内容を伝える。（SEO）

そのため、すべての画像にaltが必要ということではなく、「ページとして読んでもらう必要がある」ことが判断ポイントになります。

altが必要な画像と必要のない画像

altは「web developer」で確認
リンクチェックと同様、altの確認には拡張ツール「web developer」が便利です。ツールバーで「画像」、「alt属性値」からページ上にaltのテキストを表示できます。

エラー時の表現に関する項目1つ

8.404エラー時の画面は用意されているか？

404とは、指定したページが存在しない時に表示される画面です。

CGPWEBではこのような表現をしています。

トップに戻るボタンを設置したり、サイトマップを表示させるなど、行き止まりのページにならないような配慮がされているかも確認しましょう。

今回あげた項目は一般的なサイトにおいて確認すべき基本的な項目です。
サイトの機能や対応デバイス、ブラウザによって確認する項目は追加、変更されます。事前に関係者間でそれぞれ見るべき範囲を確認のうえ、制作者だけでなく営業担当や発注者も含めて、複数人でチェックできるような体制がとれるとよいですね！

SKK
大学ではデザイン学部に所属。情報デザインを専攻し、グラフィック、映像デザインの演習を通してデザインの基礎を学ぶ。
2013年4月、大学卒業と同時にシータス＆ゼネラルプレスに入社。同年10月よりWebチームの一員に。
日々奮闘中の駆け出しディレクター。