詳しくはこちら
Webサイトを制作した時にチェックしたい項目
世の中にはたくさんのWebサイトが存在します。
そして、それらを制作するのはWebデザイナーやコーダーです。
今回は、そのWebデザイナーやコーダーがWebサイトを制作した際にするべきこと、チェックしたいことを紹介します。
私自身、普段無意識に行なっていることもありますし、かつ、まだまだ知識不足な点もあるので、本記事に記載していること以外にもサイト制作時にするべき項目はあると思います。
なので、本記事はあくまで「こういう点を気をつければいいのか」程度に読んで頂ければと思います。
SEO
noindex, nofollowの解除
検索結果に表示させない手法として、metaタグのnoindexやnofollowを用いることがあります。
本番公開前はこの設定をしていても問題ないのですが、本番公開後にも設定していると検索結果に表示されません。
なので、noindexやnofollowは必ず解除しましょう。
パンくずリストの作成
パンくずリストは、Googleなどのブラウザのクローラに対して、Webサイトの構造を伝えるためにサイト上に設置することを推奨されています。
もちろん、ユーザービリティの観点からしても作成したほうが良いと思います。
昨今のGoogleのクローラは、ある程度サイトのマークアップに不備があっても、それを考慮してSEOが評価されると言われていますが、一般的に「パンくずリストは作成したほうが良い」と言われているので、特別な事情が無いのであれば作成したほうが良いでしょう。
サイトマップの作成
サイトマップは、サイトの全ページのリンクをまとめたページです。
こちらもパンくずリストと同様、Googleなどのブラウザのクローラに良い影響を与えるとされています。
ユーザー向けのサイトマップはhtmlで、クローラ向けのサイトマップはxml形式で作成しましょう。
titleタグ, meta descriptionタグの設定
titleタグとmeta descriptionタグもパンくずリストなどと同様、SEOに影響を与えるので設定をしましょう。
これらは検索結果に表示される文言にも反映されます。
meta canonicalタグ（URLの正規化）
URLの正規化の処理を正しく行っていないと、せっかく作成したコンテンツが検索結果の上位に表示されません。
このURLの正規化に関してはこちらのサイトで詳しく解説されています。
https://www.gyro-n.com/seo/hack/canonical/
バリデートエラーのチェック
HTMLを正しくマークアップすることはSEOの評価に繋がります。
こちらも、昨今のGoogleのクローラはマークアップに不備があっても（h1タグが無くても自動で判別してくれるらしい…）、ある程度自動で判断してくれるらしいですが、正しくマークアップすることに越したことはありません。
正しくマークアップ出来ているかどうかは、W3Cのバリデータチェックなどで判断すると良いでしょう。
https://validator.w3.org/#validate_by_input
マーケティング
Googleアナリティクス
昨今はGoogleアナリティクスでサイトのPV（ページビュー）やUU（ユニークユーザー）などを計測する企業も多いでしょう。
もし、クライアントがGoogleアナリティクスを導入していなかったら、提案してあげると良いでしょう。
Google Search Console
Google Search Consoleはサイトの流入キーワードや異常を検知してくれるツールです。
こちらもGoogleアナリティクスと同様、クライアントが導入していなかったら提案してあげると良いでしょう。
計測タグ系
サイトの運用年数が長ければ長いほど、GTMやYTMなどの計測タグや成果タグなど、様々な外部のタグが埋め込まれています。
もし、現在使われていないタグがあったら削除しましょう。
（もちろん、クライアントに確認は取りましょう）
使われている計測タグが多ければ、一元管理するために「Google タグ マネージャー」を利用するのも良いでしょう。
OGPの設定
OGPを設定すると、TwitterやFacebookなどのSNSでシェアした際にタイムラインに表示される内容をカスタマイズすることが出来ます。
詳しくはこちらのサイトで解説されています。
https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html
コーディング後のチェック
urlにパラメーターがついても正しく処理が行われるか
パラメーターとはhttps://domain/about/?hoge=111の?hoge=111に当たります。
JavaScriptやPHPで「URLを取得して○○をする」のような処理をしている場合、パラメーターが付いていない時には正しく動いても、パラメーターが付いているとエラーになることがあります。
チェックが漏れやすい項目なので、実装する際にパラメーターを意識してコードを書くようにしましょう。
ページャーの2ページ目以降が表示されるか
ページャーが存在するページは、CMSを使った「お知らせ」や「ブログ」などの場合が多いかと思います。
1ページ目は正しく表示されるけど、2ページ目が表示されない…ということはよくあります。
なので、ページャーが存在するページがある場合、2ページ目以降も表示されるか必ず確認をしましょう。
フォームのバリデーションを設定したか
セキュリティの観点から、フォームのバリデーションが正しく設定されているかどうかは必ず確認しましょう。
昨今は様々なライブラリがあるので、それらを使うのも良いでしょう。
また、バリデーションはフロントサイドとサーバーサイド両方設定するようにしましょう。
（最低限サーバーサイドは必須です）
これらについては、以前別の記事で少しだけ紹介しましたので、よかったらご覧下さい。
404ページを作成したか
404ページは間違ったURLにアクセスされると表示されるページです。
このような細かい積み重ねでユーザービリティは向上するので、出来る限り作成するようにしましょう。
スマホでのフォームのフォントサイズ
スマホでフォームのテキストボックスのフォントサイズが15px以下だと、入力時に画面がズームされてしまい、ユーザービリティを損ねてしまいます。
なので、スマホのテキストボックスのフォントサイズは16px以上にしましょう。
以前、こちらの記事でも紹介しましたので、よかったらご覧下さい。
コメントの削除
HTMLなどのコメントは全部削除する必要は無いですが、明らかに自分用のコメントは納品前や本番公開前には削除しましょう。
本番環境でのチェック
フォームからメールが届くかどうか
お問い合わせなどのフォームに内容を入力して送信したらメールが届くかなど、思い通りの動きをするかどうかのチェックをしましょう。
テスト環境では動いていたのに、本番環境では動かないのようなことはよくあることですね…。
サイトをSSL化したか
SSL化することでサイトのセキュリティや信頼性が向上するので、出来る限りSSL化するようにしましょう。
リダイレクト系
httpにアクセスしたらhttpsにリダイレクトさせるなどの設定をしましょう。
他にも、wwwありでアクセスしたらwwwなしにリダイレクトさせるなどもあります。
リダイレクトを設定する際に、301、302も意識するようにしましょう。
これらに関しては、こちらの記事で解説されています。
https://www.sakurasaku-labo.jp/blogs/301_redirect
サイトスピード改善
画像のファイルサイズ圧縮
画像のファイルサイズを小さくすることで、サイトの表示スピードが向上します。
私はこちらのサイトをよく使っています。
https://www.iloveimg.com/ja/compress-image
また、SVGを取り入れるのも良いでしょう。
.htaccessでgzip圧縮
GoogleのPageSpeed Insightsで指摘される項目のひとつです。
gzip圧縮に関しては、こちらのサイトで解説されています。
https://www.seo-pro.jp/seo/psi-gzip
WordPress系
ログイン画面のURLを変更
WordPressで制作したサイトは、何も設定をしていないとドメインの後に/wp-admin/のように入力してアクセスするとログイン画面に遷移してしまいます。
この状態だと、セキュリティ的によろしくないので、必ずログイン画面のURLを変更しましょう。
変更方法は2種類あります。
- .htaccessで変更
- プラグインで変更
以前、.htaccessでログイン画面のURLを変更する記事を書いたので、よかったらご覧下さい。
ユーザー名がバレないようにする
先程のログインURLと同様、何も設定をしていないとドメインの後に/?author=1のように入力してアクセスすると、ユーザー名が表示されてしまいます。
こちらも対策は出来ますので、しっかりと設定をしましょう。
https://www.webdesignleaves.com/pr/wp/wp_user_enumeration.html
まとめ
サイトを制作する際にチェックするべき項目は毎回変わると思います。
特にサイトの挙動の確認やセキュリティ系はしっかりとチェックして、対応していなかったらしっかりと対応しましょう。
関連記事
