トラブルシューティングにChromeDevToolsを使用する-Semaltプロンプト



Chrome DevToolsは、ほとんどのSEO専門家にとって異質なものではありません。一方で、それはあなたがまだ学んでいないことの一つかもしれません。 Semaltでは、クライアントのSEOニーズに対応するプロセスの一部は、Webサイトのニーズに必要な側面について教育する方法に依存しています。

SEO用のChrome開発ツールは、トラブルシューティングで使用するため重要です。 Semaltとクライアント間の簡単なコミュニケーションを可能にするために、このツールを使用してWebサイトのSEOの問題を修正する方法を紹介します。

Chrome Dev Toolsを使用すると、ウェブサイトのクロール可能性からパフォーマンスに至るまで、根本的なSEOの問題を見つけることができます。この記事では、これらのツールを使用してクライアントにより良いサービスを提供する3つの方法に焦点を当てます。

Chrome DevToolsとは何ですか?

DevToolsまたはChromeDevToolsは、Chromeブラウザに直接組み込まれているWeb開発者支援ツールのセットです。これらのツールを使用してページをその場で編集し、問題を迅速に診断します。それは私達が私達の顧客のためにより良いウェブサイトを構築するのを助けます、しかし私達はそれをより速くしそしてそれらが完璧であることを保証することができます。

Google Chromeは、SEOプロの武器の中で最も重要なツールキットの1つであることに私たちは皆同意できます。監査の自動化やSEOの問題の大規模な診断に使用するSEOソフトウェアに関係なく、ChromeDevToolsは必須です。 SEOの問題をその場でチェックする重要な方法を提供する能力のおかげで、Semaltを含む多くのSEO専門家は、何度もそれを使用しています。

Chrome DevToolsが専門家やWeb開発者を支援する多くの方法について議論するためにより多くの時間を費やすことができますが、私たちの注意はもう少し具体的なことにあります。ここでは、ChromeDevToolsを使用して問題を特定して修正したいくつかの異なるケースを紹介します。

ChromeDevToolsを使用することが悪い考えではない3つの状況を次に示します。

トラブルシューティングのためのChromeDevToolsの設定

ChromeDevToolsを使用したことがない可能性があります。ええと、それにアクセスするのは、SERPのウェブサイトをクリックして検査ボタンをクリックするのと同じくらい簡単です。 SEOの専門家として、私たちはそれよりも注意を払う必要がありますが、あなたはそれがどのように使用されるかについての考えを持っています。 Semaltでは、DOMを監視できるElementプレーンと、コンソールドロワーで他のいくつかの異なるツールを有効にするCSSの両方を使用しています。

このツールがSEOのトラブルシューティングでどのように使用されるかを段階的に説明します。

開始するには、右クリックして[検査]を選択する必要があります。デフォルトでは、要素パネルが表示されます。これにより、DOMと、ページの作成に使用されるスタイルシートの性質を垣間見ることができます。

このビューを持つことは、私たちに飛び込むべきたくさんのことを提供します。ただし、コンソールドロワーがツールキットを最大限に活用できるようにします。

設定アイコンの横に表示されるドットをクリックし、[コンソールドロワーを表示する]オプションが表示されるまで下にスクロールします。または、Escキーをクリックするだけです。

コンソールと要素パネルを有効にすると、ユーザーはDOMでレンダリングされたコードを垣間見ることができます。ユーザーには、ブラウザーでコードをペイントするために使用されたスタイルシートも表示されます。コンソールドロワーからアクセスできる他のいくつかのツールと同様に。

初めての場合、コンソールドロワーにはコンソール自体が表示されない場合がありますが、Chrome DevToolsをしばらく使用すると、コンソールドロワーにコンソール自体が表示され始めます。コンソールパネルでは、ログに記録されたメッセージを表示したり、javascriptを実行したりできます。今日はそれに飛び込みません。

代わりに、ここで検討する3つの追加ツールを示します。
これらのツールを見つけるには、さらにツールを選択し、これら3つの項目をそれぞれ選択して、コンソールドロワーにタブとして表示されるようにします。これらの3つのパネルを有効にしたら、トラブルシューティングを開始できます。

DevToolsでのユーザーエージェントの切り替え

User-Agentの切り替えは、DevToolsを使用するための最も見過ごされている方法の1つです。これは、Googlebotがサイトの情報機能をどのように認識して処理しているかについての洞察を提供するため、いくつかの異なる問題を明らかにするのに役立つ簡単なテストです。

調査SEO専門家のチームにとって、DevToolsは価値のある信頼できる拡大鏡として使用され、Webサイトの問題にズームインして、そのような問題の発生を防ぐだけでなく、そのような問題の根本原因を明らかにすることもできます。

Chrome DevToolsでユーザーエージェントを切り替えるにはどうすればよいですか?

Chromeでユーザーエージェントを切り替えるときは、コンソールドロワーの[ネットワーク条件]タブを使用する必要があります。これを行うには、[自動的に選択]のチェックを外します。これにより、Googlebotスマートフォン、Bingbot、または他の多くのユーザーエージェントを使用してコンテンツを表示し、コンテンツがどのように配信されるかを確認できます。

Googleが更新されたタイトルタグまたはメタ説明をSERPに表示しない場合、そのようなWebサイトの所有者が心配することは間違いありません。 Googleが完全に異なるタイトルタグの使用を選択した理由、またはタグの更新に失敗した理由を理解することは、行った変更が確実に実装されるようにするために重要です。

モバイル代替サイトの場合にChromDevToolを使用する

同様のケースで、ユーザーエージェントをGooglebotスマートフォンに切り替えた後、サイトがまだGooglebotの代替モバイルサイトを提供していることがわかりました。しかし、Googleはすでにモバイルファーストインデックスに切り替えていたため、モバイルサイトでの変更を処理してインデックスを作成しましたが、デスクトップバージョンのドメインに加えられた更新をキャッチできませんでした。

モバイルサイトはいくつかの遺物であると思われるかもしれませんが、実際にはまだ存在しています。

過度のサーバー保護を発見するためのChromeDevToolsの使用

ウェブ上には悪意のある人がたくさんいます。多くのハッカーや悪意のある悪党は、インターネット上のサイトに対してGoogleを使用しようとします。このため、一部のサーバースタックCDNやその他のホスティングプロバイダーは、スパムクローラーがサイトにアクセスするのを阻止することが実際の目的である場合に、Googlebotのなりすましを阻止する特定の組み込み機能を提供する場合があります。熱心な努力で、これらのサイトはGooglebotがサイトにアクセスするのをブロックしてしまう可能性があります。 「UnauthorizedRequestBlocked」というメッセージが表示されることがあります。

GoogleのSERPでこのようなメッセージが表示された場合、ブラウザが問題なくコンテンツを読み込んだとしても、ファウルが発生していることがすぐにわかります。

ユーザーエージェントの切り替え機能を使用すると、ユーザーエージェントをGooglebotスマートフォンに設定するとすぐに、サイトがそのメッセージを配信していることがわかります。

DevToolsのコアWebバイタルの診断

パフォーマンスタブは、DevToolsの最も重要な機能の1つです。これは、ページの速度とパフォーマンスに影響を与える問題をトラブルシューティングするための優れたゲートウェイとして機能します。一般的に、DevToolsは、コアWebバイタルに関して実用的な情報を提供できます。

Googleのコアウェブバイタルを形成する指標は、しばらくの間、ページの速度とパフォーマンスのレポートの一部でした。 SEOの専門家がこれらの問題を分析する方法に精通していることが非常に重要です。ウェブマスターとして、私たちは検索効率に対するコアウェブバイタルの重要性をより強く認識しています。

DevToolsの[パフォーマンス]タブを使用する場合、重要なWebメトリックの理解を深めるために一歩近づきます。

HTTPヘッダーを再確認し、未使用のコードを確認します

SEO監査でソフト404について聞いたことがありますか?ソフト404は、ブラウザに404ページが表示される場合がありますが、200OK応答コードを返します。
場合によっては、コンテンツがブラウザに期待どおりに読み込まれることがあります。ただし、HTTP応答コードに404または302エラーが表示される場合があります。また、一般的に正しくないか、期待したものではない可能性があります。いずれにせよ、すべてのページとリソースのHTTP応答コードを確認すると便利です。

DevToolsを使用して応答コードに関する貴重な情報を提供するすばらしいChrome拡張機能が多数ありますが、この情報を直接確認することができます。

この時点で、DevToolsは、ページをコンパイルするために呼び出されている個々のリソースをすべて表示します。これには、対応するステータスコードとウォーターフォールの視覚化が含まれます。

結論

Chrome DevToolsを使用すると、ウェブサイトが真の可能性に到達するのを妨げる根本的な問題を見つけて対処することができます。 DevToolsは、技術監査で特に役立ちます。これらに加えて、DevToolsを使用する際のスピードもお楽しみいただけます。 Semaltのチームは、Webブラウザーを離れることなく、Webサイトのクロールからパフォーマンスまで、チェックの問題を見つけることができます。

セマルト あなたがあなたのウェブサイトで最高のものを引き出すのを手伝うためにここにいます、そしてあなたが私たちのチームと連絡を取ることを願っています。お返事おまちしております。


mass gmail