Technologische Neuigkeiten, Bewertungen und Tipps!

So überprüfen Sie Ihre SEO-Empfehlungen mit Chrome Entwicklungstools

Hinweis: Der folgende Artikel hilft Ihnen weiter: So überprüfen Sie Ihre SEO-Empfehlungen mit Chrome Entwicklungstools

Wir waren alle schon einmal dort. Sie als SEO haben eine Empfehlung für Ihre Website, benötigen aber einen Entwickler, der diese umsetzt.

Dies ist ein sehr häufiges Szenario, wenn man in einem Agenturmodell arbeitet und als Berater mit Kunden zu tun hat; Die tatsächlichen Änderungen nehmen wir selten selbst vor.

An diesem Punkt werden Ihre Empfehlungen hoffentlich vom Entwicklungsteam umgesetzt, und zu anderen Zeiten müssen Sie einfach in der Warteschlange warten, bis Sie an der Reihe sind! Aber nehmen wir an, Sie gehören zu den Glücklichen, die Empfehlungen schnell umsetzen können. Wenn Ihr Entwickler mitteilt, dass er Ihre Empfehlungen umgesetzt hat, wie stellen Sie dann sicher, dass die Umsetzung korrekt erfolgt ist?

Sie können nicht nur um eine mündliche Bestätigung bitten, dass die Arbeit erledigt ist, sondern Sie können sie auch selbst in die Hand nehmen und selbst überprüfen!

Die Überprüfung standardmäßiger SEO-fokussierter Updates ist normalerweise ziemlich einfach. Wenn der Client die Seitenkopie aktualisiert, können Sie sich die Seite einfach ansehen. Wenn sie den Seitentitel oder die Beschreibung aktualisieren, können Sie eines der Millionen online verfügbaren Tools verwenden, das Ihnen grundlegende Seiteninformationen anzeigt, die für einen SEO interessant sind.

Was aber, wenn Sie keinen Zugriff auf diese Tools haben? Oder die Tools funktionieren nicht oder das Ergebnis, das sie Ihnen liefern, scheint nicht richtig zu sein? Wie würden Sie vorgehen, um den Status der Seite einfach mit einem Webbrowser zu überprüfen?

Verwenden eines Webbrowsers zur Überprüfung von SEO-Updates

Nahezu jeder moderne Webbrowser verfügt über eine integrierte Funktionalität, die es Ihnen ermöglicht, einen Blick auf das Wesentliche einer Webseite zu werfen.

Bei Google Chrome, es ist „Inspizieren“. Dieses Tool öffnet ein weiteres Browserfenster, das viele Dinge im Zusammenhang mit der von Ihnen angezeigten Webseite anzeigt. Am wichtigsten für uns ist jedoch, dass es das DOM oder „Document Object Model“ zeigt.

Wenn wir dieses Tool verwenden und das DOM anzeigen, können wir den gesamten HTML-Code der Seite sehen, sodass wir sehen können, was wirklich auf der Seite ist, und uns nicht auf Tools verlassen müssen, die nicht immer 100 % genau sind.

Lassen Sie uns das DOM für Wix.com durchgehen:

Die folgenden Schritte zeigen das DOM einer Webseite:

  1. Öffnen Sie eine Webseite, klicken Sie mit der rechten Maustaste irgendwo auf die Seite und klicken Sie auf „Inspizieren“.
  2. Es öffnet sich ein Fenster, in dem das DOM der Seite sowie eine Reihe anderer Registerkarten angezeigt werden, mit denen Sie die angezeigte Seite überprüfen können.
  3. Mithilfe dieses Fensters erhalten Sie eine bessere Vorstellung davon, was ein Bot sehen könnte. In Kombination mit der Funktion „viewsource:“ erhalten Sie einen tollen Überblick darüber, was Google sieht.

Wie ist das also nützlich? Wir hatten kürzlich ein Problem, bei dem wir die Metadaten einer Website in großem Umfang aktualisieren mussten, aber keine Möglichkeit hatten, dies programmgesteuert oder manuell zu tun. Dazu wären Tausende von Seiten erforderlich gewesen, deren Tags von einer Person hart codiert werden müssten. Für den Kunden bedeutete dies eine erhebliche Ressourcenbelastung, die er vermeiden wollte. völlig verständlich.

Sie versuchten, die Tags mithilfe von JavaScript im Browser des Benutzers zu ändern, um bereits vorhandenen Code zu nutzen. In der Praxis bedeutet dies, dass die Seite den ursprünglichen HTML-Code mit einem Platzhalterseitentitel, einer Beschreibung und einem kanonischen Tag lädt und dann ein JavaScript-Skript nach der Ausführung die Metadaten auf der Seite ändert.

Bei der ersten Betrachtung der Seite, die einfach in einem normalen Browser angezeigt wurde, sah der Seitentitel korrekt aus, da das JS so schnell arbeitet, dass die erforderlichen Elemente sehr schnell aktualisiert werden. Wir stellten jedoch fest, dass verschiedene SEO-Tools, mit denen wir die Seite durchsuchten, unterschiedliche Ergebnisse meldeten, darunter:

  • Es wird kein Seitentitel gemeldet
  • Der Seitentitel wäre der Platzhaltertitel
  • Der Seitentitel wäre korrekt

Natürlich ist das nicht ideal für SEO. Wir möchten, dass die Metadaten der Seite korrekt sind, wenn die Seite dem Benutzer bereitgestellt wird und wenn Bots sie crawlen. Dies bedeutet normalerweise, dass kein zusätzliches JavaScript erforderlich ist, um Probleme zu beheben. Sogar ein oder zwei Sekunden zwischen dem Laden der Seite und der Fehlerbehebung durch Javascript sind zu lang, wenn es darum geht, dass Bots die Website crawlen.

Dies war bei der ersten Inspektion nicht offensichtlich – es handelt sich um ein recht seltenes Problem, das Sie möglicherweise erst verstehen, wenn Sie zum ersten Mal darauf stoßen. Die visuelle Überprüfung der Seite sah in Ordnung aus und die Tools lieferten uns keine konsistente Antwort. An diesem Punkt war es an der Zeit, sich nicht auf externe Tools zu verlassen und einfach in den Code der Seite einzutauchen.

Mit dem Inspect-Tool konnten wir genau sehen, was wann während des Ladevorgangs passierte.

Diese zusätzliche Ebene an Erkenntnissen und QA-Fähigkeiten ermöglichte es uns, ein Problem bei der Umsetzung unserer Empfehlungen zu identifizieren, einen Plan auszuarbeiten und den Entwicklern Feedback zu geben, damit sie das Problem beheben konnten. Ohne die Verifizierung dieser Änderungen über eine bloße visuelle Überprüfung hinaus wäre uns möglicherweise erst viel später aufgefallen, dass die falschen Metadaten gecrawlt wurden.

Tipps zur Verwendung Chrome Überprüfen Sie, ob SEO-Korrekturen überprüft wurden

Hier sind einige häufige Anwendungsfälle, bei denen Sie möglicherweise in den Code einer Seite eintauchen und überprüfen möchten, ob die Dinge so sind, wie sie sein sollten.

Metadaten überprüfen

  • Öffnen Sie die betreffende Webseite, klicken Sie mit der rechten Maustaste auf einen nicht anklickbaren Bereich der Webseite und klicken Sie auf „Inspizieren“. Wenn sich das Fenster öffnet, klicken Sie auf die Registerkarte „Elemente“ und Sie sehen den HTML-Code der Seite.
  • Von hier aus können Sie Strg + F drücken, um eine Suchleiste aufzurufen. Verwenden Sie diese Leiste, um die Metaelemente zu finden, die Sie überprüfen möchten.
  • Für Seitentitel können Sie nach „
  • Wenn Sie gefunden haben, wonach Sie suchen, überprüfen Sie, ob es tatsächlich richtig ist.

Inspektion von UX/visuellen Elementen

Sie können jedes UX- oder visuelle Element auf einer Seite überprüfen, indem Sie mit der rechten Maustaste auf das Element klicken und auf „Inspizieren“ klicken. Die Chrome-Entwicklertools werden erneut angezeigt und das Element, auf das Sie mit der rechten Maustaste geklickt haben, wird im DOM hervorgehoben.

Überprüfung von Google Analytics oder Google Tag Manager auf Seite mit Chrome Entwicklungstools

Klicken Sie wie bei anderen Metaelementen auf einen nicht anklickbaren Teil der Seite, um die Entwickler-Chrome-Tools aufzurufen.

Durchsuchen Sie den Dom entweder nach „analytics.js“, „ua-“ oder „gtm“ oder einem anderen Codeausschnitt, der sich auf Ihre Analysesuite bezieht und sich möglicherweise auf der Seite befindet.

Abschließend

Wir haben nur an der Oberfläche dessen gekratzt, womit Sie alles machen können Chrome Entwicklungstools und das DOM.

Von hier aus können Sie eine Webseite bis auf eine sehr niedrige Ebene vollständig erkunden. Gehen Sie also los und erkunden und überprüfen Sie!

Melden Sie sich für unseren Newsletter an, um weitere Beiträge wie diesen in Ihrem Posteingang zu erhalten:

Table of Contents