目次
【コンテンツ】Webサイト公開前のテストアップでチェックすべき5つの項目
コンテンツにおけるWebサイト公開前のテストアップで、チェックすべき項目には以下の5つが挙げられます。
- 誤字脱字や表記ゆれ
- titleとdescriptionの入力
- リンク切れ
- 画像のalt属性
- ダミー画像
上記の項目をチェックせずに公開しミスが発覚すると、修正作業やトラブルに発展する恐れがあり大変です。また適切なコンテンツが表示されないことで、ユーザーの早期離脱を招く恐れもあります。ここではそれぞれの項目を詳しく解説します。
1.誤字脱字や表記ゆれ
Webサイトにおけるコンテンツを公開する前には、必ず誤字脱字や表記ゆれをチェックしましょう。表記ゆれとは、同一コンテンツ内で同じ語句が異なった文字表記になっていることを指します。
「出来るとできる」や「WebとWEB」のように、同じ語句が同一コンテンツ内で異なった表記なっていると、コンテンツの質が低いと見なされる可能性が高くなります。目視だけでなく文章校正ツールを活用してチェックするのも良いでしょう。
2.titleとdescriptionの入力
公開予定のページで正しいtitleとdescripitionが設定・入力されているかを必ずチェックしましょう。titleとdescriptionは検索画面結果に表示されます。検索画面上に表示されたtitleとdescriptionを見て、ユーザーがページをクリックするかどうか決めるため、重要な項目です。
それぞれ見落としがないか、ページ内容と齟齬はないかを見ていきます。チェックしやすいように、titleやdescripitionを一覧でまとめておくといいでしょう。
3.リンク切れ
リンク切れとは、コンテンツ内に設置しているリンクにアクセスできない状態をいいます。
リンク切れがあると、検索エンジンが検索の順位を決めるための要素をサイトから収集するロボットである「クローラー」がサイト内を十分に巡回できないため、Googleの検索エンジンにWebページ情報を登録してもらえない可能性が高くなります。
ユーザーに対しても、せっかくクリックしたのにリンク先が見られないと閲覧ストレスを感じやすいものです。こうした事態を防ぐために、リンクをクリックして正しく遷移するか確認しましょう。リンク切れチェックツールを使うのもおすすめです。
4.画像のalt属性
alt属性とは、画像の代替テキストのことです。alt属性が入力されていれば、情報をテキストや音声で得られます。
そのためインターネット接続が悪く画像の表示がされない場合や、画像の認識が難しい方がサイトを閲覧する場合に有用です。alt属性は画像検索でも読み取られるため、入力し忘れのないようにチェックしましょう。
ソースを表示し入力を一つひとつ確認することもできますが、altチェックツールを利用すれば簡単にチェック可能です。
5.ダミー画像
Web制作の初期には、画像を入れる部分に適当な素材（アタリ画像）を入れるケースがあります。公開前にアタリ画像のままで公開すれば、目的と違った画像が表示されてしまいます。
そのため、ダミー画像がないかや、ウォーターマークの入った画像がないかを確認しましょう。公開前のチェックが簡単にできるよう、制作時に分かりやすい目印を入れておくと安心です。
【表示・動作】Webサイト公開前のテストアップでチェックすべき5つの項目
表示・動作において、Webサイト公開前のテストアップでチェックすべき項目は、以下の5つが挙げられます。
- ブラウザごとの見た目の崩れ
- 404ページの表示
- レスポンシブ対応
- 表示速度の遅延
- SNSシェアボタンやフォーム関連の動作
Webサイトが完成したらコンテンツのチェックだけでなく、表示や動作の確認も必要です。ここではそれぞれの詳細を解説します。
1.ブラウザごとの見た目の崩れ
ブラウザやデバイスごとに、Webサイトの見た目が異なって表示される場合があります。そのため、ブラウザごとの見た目の崩れがないか、チェックすることも必要です。主なブラウザの種類には、以下のようなものがあります。
- Windows（Microsoft Edge）
- Mac（Safari）
- スマートフォン(google chromeなど)
ユーザーによって使用するブラウザやデバイスは異なります。全てのブラウザ・デバイスで確認するのは難しいものの、最低でも主要なブラウザ・デバイスでの表示・動作チェックは必ず行いましょう。
2.404ページの表示
404ページは、サイト上に存在しないURLにアクセスした際にエラーを表すページです。
404ページの作り忘れがないか、分かりやすい404ページになっているかをチェックしましょう。404ページにトップページにつながるリンクを入れておくと、ユーザーが迷わずに済むでしょう。
3.レスポンシブ対応
レスポンシブ対応とは、使用している端末に合わせて表示を最適化することをいいます。パソコンやスマホでの表示はもちろん、ブラウザの幅でも表示が崩れないかをチェックします。
実際に端末を操作しながら目視でチェックしましょう。レスポンシブ対応の確認が簡単に行えるツールを利用するのもおすすめです。
4.表示速度の遅延
表示速度が遅いと、ユーザーが離脱しやすくなります。SEOの観点からも、表示速度は速い方が高い評価が得やすいとされています。そのため、こまめにWebサイトの表示速度を確認し、遅い場合は改善を試みましょう。
プログラム過多になっている場合や、画像や動画などのデータが重たい場合は表示速度が遅くなりやすい傾向にあります。表示速度が遅い場合は改善の必要がありますが、後から改善するのは大変な場合もあるため、できるだけWebサイト制作前に検討するのがおすすめです。
5.SNSシェアボタンやフォーム関連の動作
WebサイトにSNSのシェアボタンやフォームの設定をしている場合、実際にボタンをクリックしてSNSやフォームが立ち上がるかを確認しましょう。
実際にSNSのシェアボタンを押したり、フォームを入力し、正しく動作できるかのチェックも必要です。その際、画像の見え方がおかしくないかもチェックしましょう。
【サーバー・SEO】Webサイト公開前のテストアップでチェックすべき10の項目
サーバー・SEOにおいて、Webサイト公開前のテストアップでチェックすべき項目は、以下の10個が挙げられます。
- 301リダイレクト設定
- 予期せぬリダイレクト処理
- SSL設定
- faviconの設定
- サイトマップの送信
- Googleアナリティクスの設置
- Google Search Consoleの設置
- XSSやSQLインジェクションの対策
- OGPの設定
- 外部サービス利用のエラー
Webサイトの制作後、サーバー面やSEO対策面でもチェック項目が多々あり、サイト公開後の運営や集客にも関わる内容です。ここではそれぞれの詳細を解説します。
1.301リダイレクト設定
301リダイレクト設定とは、Webサイトの移転に伴いURLを変更した時に、新しいURLに転送する設定です。301リダイレクトの設定は、ユーザーの使いやすさのためはもちろん、SEO対策にも有効とされています。
リダイレクト設定がされていないと、新しいサイトをGoogleから別のサイトだとみなされ、リニューアル前に培ったドメインの強さが引き継がれなくなります。そのためリダイレクト設定を行い、旧サイトから新サイトへの移行をGoogleに知らせつつ、評価の引き継ぎも行いましょう。
2.予期せぬリダイレクト処理
予期していなかったサイトにリダイレクトされる場合があるため、予期せぬリダイレクト処理についての確認も必要です。既存サイトの改修時「.htaccess（ドットエイチティーアクセス）」に、リダイレクト処理が記載されていることがあります。
「.htaccess」は、Webサーバーの動作をディレクトリ（ファイル格納の入れ物のこと）単位で制御するためのファイルです。予期せぬリダイレクト処理がされていたら、修正しましょう。
3.SSL設定
SSLとは、インターネット上で通信を暗号化して送受信する仕組みをいいます。SSL設定により、第三者が傍受・改ざんできないように、情報の送受信が可能です。
URLがhttpではなく、httpsであればSSL設定ができている証拠です。Google chromeの場合、URLの左に鍵マークがあればSSL設定ができています。「保護されていない通信」と表示された場合、SSL設定はできていません。
SSL設定はSEO対策にも有効とされており、セキュリティ対策とSEO対策どちらのためにもSSL設定のチェックは必ず行いましょう。
4.faviconの設定
favicon（ファビコン）とは「Favorite icon」の略称で、ブラウザのタブなどに表示される画像を指します。faviconはスマホのお気に入り登録で表示されるアイコンでもあります。
favicon用の画像は、できるだけシンプルなものを選び、正方形で32px×32pxで制作するか、複数サイズのアイコンをico形式で1つのファイルにまとめたマルチアイコンで制作するのがいいでしょう。WordPressであれば512px×512px以上の正方形画像を作成するのがおすすめです。
5.サイトマップの送信
Googleがサイトマップを使用できるよう、サイトマップの送信を行いましょう。サイトマップの送信によりインデックス（検索エンジンにWebページが登録されること）登録が可能になるため、Googleにクロールしてもらいやすくなります。
「Google XML Sitemap」といったツールを利用すれば、簡単にサイトマップの作成・送信が可能です。
参考：https://ja.wordpress.org/plugins/google-sitemap-generator/
6. Googleアナリティクスの設置
Googleアナリティクスとは、Googleが無料で提供しているアクセス解析ツールです。Googleアナリティクスを設置すれば、アクセス状況のチェックからユーザーの基本属性やWebサイトの成果状況の把握が可能です。
Googleアナリティクスの設置後は、分析設定に問題がないかの確認も欠かさないようにしましょう。
7. Google Search Consoleの設置
Google Search Consoleとは、Google検索結果でのサイトパフォーマンスを分析できる無料ツールです。
Google Search Consoleの利用により、検索エンジンでの検索順位や表示回数、クリック数やクリック率などが確認できます。Webサイトの集客に欠かせないツールであるため、登録しておきましょう。
8.XSSやSQLインジェクションの対策
XSSとは、攻撃者がWebサイトの脆弱性を利用して悪質なサイトへ誘導するスクリプト（プログラム）を仕掛け、ユーザーの個人情報を詐取する攻撃をいいます。
SQLインジェクションとは、外部から不当なSQL文を送信することにより、アプリケーションのデータベースを不正に操作して攻撃する方法を指します。Webサイト公開後は上記のようなサイバー攻撃を受けないために、しっかりとしたセキュリティ対策を行いましょう。
9.OGPの設定
OGPとは「Open Graph Protocol」の略で、SNSでシェアした際に設定したサイトのタイトルや画像、URLなどの詳細情報を正しく伝えるためのHTML要素をいいます。
OGPを設定すれば、SNSでシェアされたときにユーザーへの訴求力が高まります。OGP設定後はデバッグツールを利用し、正しく表示されるかをチェックしてみてください。
10.外部サービス利用のエラー
WebサイトではGoogleマップや関連サイトなど、外部サイトに遷移する場合もあります。外部サービスは突然の仕様変更もあるため、その都度エラーが出ていないか確認するようにしましょう。
まとめ
Webサイト公開前には、今回紹介したようにチェックする項目がたくさんあります。確認項目が多くて面倒に感じるかもしれませんが、ユーザーの早期離脱やサイバー攻撃の防止、SEO効果を狙いながら安心してサイトを運営するには公開前のチェックが必要不可欠です。
Webサイト公開前のチェックを怠ると、公開後に修正対応をしなければならないためより手間がかかるでしょう。今回紹介したチェック項目が参考になれば幸いです。
