Verwenden von Chrome DevTools zur Fehlerbehebung - Semalt-Eingabeaufforderungen



Chrome DevTools ist den meisten SEO-Profis nicht fremd. Für die Kunden hingegen ist es möglicherweise eines der Dinge, die Sie noch nicht gelernt haben. Nun, bei Semalt hängt ein Teil unseres Prozesses zur Erfüllung der SEO-Anforderungen unserer Kunden davon ab, wie wir Sie über die notwendigen Aspekte der Anforderungen Ihrer Website informieren.

Chrome Dev Tools für SEO ist wichtig, da wir es bei der Fehlerbehebung verwenden. Um eine einfache Kommunikation zwischen Semalt und unseren Kunden zu ermöglichen, möchten wir Ihnen zeigen, wie wir dieses Tool verwenden, um SEO-Probleme auf Ihrer Website zu beheben.

Mit Chrome Dev Tools können wir zugrunde liegende SEO-Probleme lokalisieren, die von der Durchforstbarkeit einer Website bis zu ihrer Leistung reichen. In diesem Artikel werden drei Möglichkeiten hervorgehoben, wie wir diese Tools verwenden, um unseren Kunden einen besseren Service zu bieten.

Was ist Chrome DevTools?

DevTools oder Chrome DevTools ist eine Reihe von Webentwickler-Hilfetools, die direkt in den Chrome-Browser integriert sind. Wir verwenden diese Tools, um Seiten im laufenden Betrieb zu bearbeiten und Probleme umgehend zu diagnostizieren. Das hilft uns, bessere Websites für unsere Kunden zu erstellen, aber wir können dies schneller tun und sicherstellen, dass sie perfekt sind.

Wir sind uns alle weitgehend einig, dass Google Chrome eines der wichtigsten Toolkits im Arsenal eines jeden SEO-Profis ist. Unabhängig von der SEO-Software, mit der Sie Audits automatisieren oder SEO-Probleme in großem Maßstab diagnostizieren, bleibt Chrome DevTools ein Muss. Dank seiner Fähigkeit, entscheidende Möglichkeiten zur Überprüfung von SEO-Problemen im laufenden Betrieb bereitzustellen, haben viele SEO-Experten, einschließlich Semalt, diese immer wieder verwendet.

Wir könnten mehr Zeit damit verbringen, die vielen Möglichkeiten zu diskutieren, wie Chrome DevTools Fachleuten und Webentwicklern helfen kann, aber unsere Aufmerksamkeit liegt auf etwas Spezifischerem. Hier möchten wir Ihnen einige verschiedene Fälle vorstellen, in denen wir uns auf Chrome DevTools verlassen haben, um ein Problem zu ermitteln und zu beheben.

Hier sind drei Situationen, in denen Chrome DevTools keine schlechte Idee wäre:

Einrichten von Chrome DevTools zur Fehlerbehebung

Möglicherweise haben Sie noch nie versucht, Chrome DevTools zu verwenden. Der Zugriff darauf ist so einfach wie das Klicken auf eine Website in SERP und das Klicken auf eine Inspektionsschaltfläche. Als SEO-Profis müssen wir vorsichtiger sein, aber Sie haben die Idee, wie es verwendet wird. Bei Semalt verwenden wir sowohl die Elementebene, mit der wir das DOM beobachten können, als auch das CSS, mit dem einige andere verschiedene Werkzeuge in der Konsolenschublade aktiviert werden können.

Wir führen Sie Schritt für Schritt durch die Verwendung dieses Tools bei der SEO-Fehlerbehebung.

Um zu beginnen, sollten Sie mit der rechten Maustaste klicken und dann inspizieren auswählen. Standardmäßig wird das Elementfenster angezeigt. Auf diese Weise erhalten Sie einen Einblick in das DOM und die Art des Stylesheets, das beim Erstellen der Seite verwendet wird.

Diese Ansicht bietet uns viele Dinge, in die wir eintauchen können. Wir ermöglichen es der Konsolenschublade jedoch, das Toolkit voll auszunutzen.

Klicken Sie auf die Punkte neben dem Einstellungssymbol und scrollen Sie nach unten, bis Sie auf die Option Konsolenschublade anzeigen stoßen. Alternativ klicken wir einfach auf die Escape-Taste.

Wenn die Konsole und das Elementfenster aktiviert sind, können Benutzer einen Blick auf den Code werfen, der im DOM gerendert wurde. Benutzer sehen auch die Stylesheets, mit denen der Code im Browser gezeichnet wurde. Neben mehreren anderen Tools, auf die Sie über die Konsolenschublade zugreifen können.

Für Anfänger zeigt die Konsolenschublade möglicherweise nicht die Konsole selbst an. Nachdem Sie die Chrome DevTools eine Weile verwendet haben, zeigt die Konsolenschublade die Konsole selbst an. In Ihrem Konsolenfenster können Sie protokollierte Nachrichten anzeigen und Javascript ausführen. Darauf würden wir heute nicht eingehen.

Stattdessen werden wir uns drei zusätzliche Tools ansehen:
Um diese Werkzeuge zu finden, wählen Sie weitere Werkzeuge aus und wählen Sie jedes dieser drei Elemente so aus, dass sie als Registerkarten in der Konsolenschublade angezeigt werden. Nachdem wir diese drei Bereiche aktiviert haben, können wir mit der Fehlerbehebung beginnen.

Wechseln des Benutzeragenten in DevTools

Das Wechseln von User-Agent ist eine der am meisten übersehenen Möglichkeiten, DevTools zu verwenden. Dies ist ein einfacher Test, der uns dabei geholfen hat, verschiedene Probleme aufzudecken, da er Aufschluss darüber gibt, wie Googlebot die Informationsfunktionen auf einer Website sieht und verarbeitet.

Für unser Team von investigativen SEO-Fachleuten wird DevTools als würdige und vertrauenswürdige Lupe verwendet, mit der wir Probleme auf einer Website vergrößern können, um nicht nur die Entwicklung solcher Probleme zu verhindern, sondern auch die Hauptursachen für solche Probleme aufzudecken.

Wie können Sie Ihren User Agent auf Chrome DevTools umschalten?

Wenn Sie Ihren Benutzeragenten in Chrome wechseln, müssen Sie die Registerkarte "Netzwerkbedingungen" in Ihrer Konsolenschublade verwenden. Deaktivieren Sie dazu die Option "Automatisch auswählen", mit der Sie den Inhalt mit dem Googlebot-Smartphone, Bingbot oder einer Reihe anderer Benutzeragenten anzeigen können, um zu sehen, wie Ihr Inhalt bereitgestellt wird.

In einem Fall, in dem Google das aktualisierte Titel-Tag oder die Meta-Beschreibung in SERP nicht anzeigt, ist der Eigentümer einer solchen Website zweifellos besorgt. Es ist wichtig zu verstehen, warum Google ein völlig anderes Titel-Tag verwendet oder das Tag nicht aktualisiert hat, um sicherzustellen, dass die von Ihnen vorgenommenen Änderungen implementiert werden.

Verwenden von Chrom DevTool für einen Fall einer mobilen alternativen Site

In einem ähnlichen Fall stellten wir nach dem Wechsel des Benutzeragenten zum Googlebot-Smartphone fest, dass die Website immer noch eine alternative mobile Website für Googlebot bereitstellt. Da Google bereits auf Mobile-First-Indizierung umgestellt hatte, wurden die Änderungen auf der mobilen Website verarbeitet und indiziert, die an der Desktop-Version der Domain vorgenommenen Aktualisierungen konnten jedoch nicht erfasst werden.

Sie können annehmen, dass mobile Websites ein Relikt sind, aber sie existieren tatsächlich noch.

Verwenden von Chrome DevTools beim Erkennen übereifrigen Serverschutzes

Es gibt viele Personen mit böswilligen Absichten im Web. Viele Hacker und böswillige Schurken versuchen, Google gegen Websites im Internet einzusetzen. Aus diesem Grund bieten einige Server-Stack-CDNs und andere Hosting-Anbieter möglicherweise bestimmte integrierte Funktionen an, die Googlebot-Spoofs verhindern, wenn sie tatsächlich verhindern möchten, dass Spam-Crawler Zugriff auf die Site erhalten. In einer übereifrigen Anstrengung können diese Websites Googlebot daran hindern, Zugriff auf die Website zu erhalten. Manchmal sehen Benutzer Nachrichten mit dem Status "Nicht autorisierte Anforderung blockiert".

Wenn wir auf solche Nachrichten in Google SERP stoßen, wissen wir sofort, dass ein Foul vorliegt, obwohl der Browser den Inhalt ohne Probleme lädt.

Mithilfe der User-Agent-Umschaltfunktion können wir feststellen, dass die Site diese Nachricht bereitstellt, sobald wir den User-Agent auf Googlebot Smartphone einstellen.

Diagnose der wichtigsten Web-Vitale in DevTools

Die Registerkarte Leistung ist eine der wichtigsten Funktionen der DevTools. Es dient als hervorragendes Gateway für die Fehlerbehebung bei Problemen, die die Seitengeschwindigkeit und -leistung beeinflussen. Generell kann DevTools einige umsetzbare Informationen bieten, wenn es um die wichtigsten Web-Vitale geht.

Die Metriken, die die Core Web Vitals von Google bilden, sind seit einiger Zeit Teil von Berichten zur Seitengeschwindigkeit und Leistung. Es ist sehr wichtig, dass SEO-Experten mit der Analyse dieser Probleme vertraut sind. Als Webmaster sind wir uns der Bedeutung der wichtigsten Web-Vitale für die Sucheffizienz bewusster geworden.

Wenn Sie die Registerkarte Leistung in DevTools verwenden, kommen wir dem besseren Verständnis wichtiger Webmetriken einen Schritt näher.

Überprüfen Sie Ihre HTTP-Header und überprüfen Sie den nicht verwendeten Code

Haben Sie jemals von Soft 404s in Ihren SEO-Audits gehört? Nun, weiche 404s sind Fälle, in denen der Browser möglicherweise eine 404-Seite anzeigt, aber einen 200-OK-Antwortcode zurückgibt.
In einigen Fällen wird der Inhalt möglicherweise genau wie erwartet in den Browser geladen. Der HTTP-Antwortcode zeigt jedoch möglicherweise einen 404- oder 302-Fehler an. Es kann auch im Allgemeinen falsch sein oder nicht das, was Sie erwartet haben. In beiden Fällen ist es hilfreich, den HTTP-Antwortcode für jede Seite und Ressource anzuzeigen.

Zwar gibt es eine Vielzahl erstaunlicher Chrome-Erweiterungen, mit denen Sie mithilfe von DevTools wertvolle Informationen zu Antwortcodes erhalten, mit denen Sie diese Informationen direkt überprüfen können.

Zu diesem Zeitpunkt zeigt DevTools alle einzelnen Ressourcen an, die zum Kompilieren der Seite aufgerufen werden. Dazu gehören die entsprechenden Statuscodes und die Wasserfallvisualisierung.

Fazit

Mit Chrome DevTools können Sie die zugrunde liegenden Probleme finden und beheben, die Ihre Website daran hindern, ihr wahres Potenzial auszuschöpfen. DevTools sind besonders nützlich bei Ihren technischen Audits. Darüber hinaus genießen Sie Geschwindigkeit bei der Verwendung von DevTools. Ohne unsere Webbrowser zu verlassen, kann sich unser Team bei Semalt befähigt fühlen, Probleme beim Crawlen einer Website und deren Leistung zu erkennen.

Semalt ist hier, um Ihnen zu helfen, das Beste aus Ihrer Website herauszuholen, und wir hoffen, dass Sie mit unserem Team in Kontakt treten. Wir freuen uns von Ihnen zu hören.


mass gmail