ウェブサイトを正しくテストしてから公開する方法

ウェブサイトを立ち上げることはストレスになることがありますので、良い第一印象を与えるためにすべてが整っていることを確認したいでしょう。私たちは、ショップを開店する前に確認すべきすべてを説明します。

ブラウザとモバイルの互換性をテストする

おそらくあなたは1つのブラウザしか使用していませんが、インターネットの他の部分ではさまざまなブラウザが使用されています。あなたのサイトをChrome、Firefox、Edge、Safariでテストするべきです。特定のブラウザはCSSの処理が異なるため、サイトが同じように表示されることを確認してください。例えば、内因的および外因的なサイズ設定（

width: fit-content

Firefoxにはいくつかのバグがありますので、ブラウザがそれを扱えない場合に備えてフォールバックを用意する必要があります。

IE 11に固執している2%のユーザーをサポートするかどうかはあなた次第です。多くの近代的なCSSやJavaScript機能が壊れる可能性があり、IE用の回避策やフォールバックが必要になるかもしれません。さまざまな言語機能の互換性を確認するためにCanIUseを使用できます。例えば、

prefers-color-scheme

ウェブサイトの自動ダークテーマ用のメディアクエリは、最新のChromeとFirefoxのバージョンでサポートされていますが、IEやOpera、またAndroid用のChromeではサポートされていません。

モバイルサポートはもう一つの大きな問題で、ブラウザサポートよりも多くの作業が必要です。しかし、これは単にあなたの電話で動作することを確認する以上のことです---すべての解像度でサイトが良く見えることを確認したいでしょう。これをレスポンシブデザインと呼び、現代のウェブ開発の大きな部分です。Chromeにはこれをテストするための非常に良いツールがあります；ウェブサイト上のどこかを右クリックして「検証」を選択すると、それらを開くことができます。次に、左上隅にあるモバイルデバイスアイコンを選択し、「レスポンシブ」を選択してください。

サイト上のハンドルをドラッグしてデスクトップサイズを変更できます。そのサイズは上部にピクセル単位で表示されます。また、異なるモバイルデバイスを選択して、その解像度での外観を確認することもできます。

実際のデバイスで実際のモバイルブラウザでのテストはまだ必要です。それらは異なる特性と異なるユーザーエージェントを持っています。さらに、自分の国のオリジンを変更できるように、VPNを使用してサイトをチェックするべきです。特に、地域によって依存することがあるため、広告に異常がないか確認してください。

速度テスト

人々は信じられないほど怠惰であり、あなたのサイトはできるだけ速くなければなりません。そうすることで、彼らの注意をすぐに引き付けることができます。たとえあなたのサイトの読み込み時間がたった3秒であっても、モバイルユーザーの53％はすでにあなたのサイトを離れています。

GoogleのPageSpeed Insightsテスターを使用して、ウェブサイトの速度をテストできます。それはあなたのサイトを分析し、デスクトップとモバイルの速度の問題を解決するための推奨事項のリストを提供します。

あなたのスピードは、Googleのような検索エンジンでのランキングに直接影響するため、競争に遅れずについていくことが重要です。

Googleを喜ばせる（SEO）

SEOは複雑なテーマですが、サイトのランキングを改善するためのいくつかのヒントを紹介します。

Moz、Ahrefs、Screaming Frogのようなサービスを利用して、SEOを手動でテストすることができます。これらはあなたのウェブサイトをクロールし、分析を監視して、あなたの状況を知らせてくれます。また、スパイダーツールを使用して、壊れたリンクもチェックすべきです。壊れたリンクはSEOに悪影響を及ぼす可能性があります。
サイトにはXMLサイトマップを用意するべきです。これはGoogleがサイトをインデックスするのを助けるディレクトリとして機能します。ただし、手動で作成する必要はありません。Google XML SitemapなどのWordPressプラグインや、オンラインのジェネレーターがあります。それから、オンラインで提出するか、次の方法で利用可能にすることができます。
```
Sitemap:
```
```
robots.txt
```

あなたのファイル内の指示。

そういえば、あなたのをチェックしてください
```
robots.txt
```
```
/wp-admin
```

ファイルを使って、検索エンジンがあなたのサイトをクロールできないようにしていないことを確認してください。オプションとして、検索エンジンが無視するべき特定のルートを無効にすることもできます。

あなたのソーシャルメタデータは正しく設定する必要があります。これは、他のサイトにあなたのページをどのように埋め込むかを伝えるために特に重要です。それが記事、動画、または一般的なウェブサイトであってもです。これを生成するためにオンラインツールを使用することができます。
Googleの構造化データ機能を調べるべきです。これにより、検索での存在感を大幅に向上させることができます。たとえば、あなたのページが記事であれば、構造化データをJSON形式で含めて、Googleにヒーロー画像、見出し、リードが何かを知らせることで、Googleニュースに表示されるようにすることができます。さまざまなコンテンツタイプがあるので、必ずどこかに適合することができます。
GoogleのAccelerated Mobile Pagesを使用している場合は、それが有効であることを確認する必要があります。サイトのAMPバージョンをテストするために、彼らのオンラインテスターを使用できます。AMPページの主な要件は、実験的なものでない限り、JavaScriptが許可されていないことです。
```
amp-script
```
HTMLを検証して主要な問題がないことを確認することは良いアイデアですが、完璧なW3C検証は非常に厳しく、必ずしも完全に従う必要はありません（ほとんどのサイトは従っていません）。

アクセス可能であることを確認してください

障害者もインターネットを利用するため、あなたのサイトがスクリーンリーダーでアクセス可能であることを確認する必要があります。通常、これは画像への代替テキストの追加、サイトのランドマークを適切にマークすること、キーボードナビゲーションが正しく機能すること、ラベルが適切に設定されていることを意味します。

Khan Academyのユーザースクリプトtota11yを使用して、サイトの問題をデバッグすることができます。これにより、コーナーにボタンが表示され、コントラスト、見出しの順序、ラベルの問題などを確認でき、スクリーンリーダーがサイトをどのように表示するかを見ることができます。アクセシビリティの問題を修正するための完全なガイドを読んで、詳細を学ぶことができます。

分析ツールをインストールする

分析ツールは、あなたのウェブサイトのトラフィックを監視し、ログを記録します。スタート時からバックグラウンドでデータを収集するために、何らかのツールを運用することが重要です。トラフィックデータを収集するためにGoogle Analyticsのようなシンプルなものでも、あなたのサイトの状況を把握するのに役立ちます。