Element untersuchen in Chrome oder Firefox

Aktualisiert am 19. September 2022

Wie ist die Homepage aufgebaut? Welche Überschriften-Hierarchie ist hinterlegt (H1-H6). Welchen Inhalt hat der Alt-Tag der Bilder?

Firefox - Element untersuchen
Element untersuchen im Firefox

Chrome & Firefox: “Element untersuchen”

Klicke mit der rechten Maustaste auf eine Seiteund wähle “Untersuchen” oder “Element untersuchen” aus. Hierdurch wird der HTML-Code des Elements angezeigt, auf das geklickt wurde.

Es wird das Element überprüft, auf das die Maus zeigt. Mit dem Pfeil-Element in der Untersuchen-Ansicht kannst du die Homepage erkunden (der aktivierte Pfeil ist blau).

Klickst du z.B. auf eine Überschrift, wird dir im Quelltext angezeigt, wie diese ausgezeichnet ist z.B.

<h1>Element untersuchen in Chrome</h1>

Klickst du auf ein Bild, kannst du feststellen, ob Alt-Tag & Title Tag verwendet wurden (lese auch: Welche Bedeutung haben Alt-Tag und Title-Tag für die Suchmaschinenoptimierung?)

Element untersuchen Shortcut

Manchmal unterbinden Websitebetreiber die Möglichkeit, die Homepage mit “Element untersuchen” näher in Augenschein zu nehmen, hierfür kannst du folgenden Shortcut nutzen:

Mac: CMD + Option + C
Windows: STRG + Umschalt + C

Welche Informationen gibt mir “Element untersuchen”?

Bild-Element untersuchen im Firefox
Element untersuchen Firefox

Hier überprüfe ich das Bild auf der Homepage und bekomme folgende Informationen

  1. Im Quelltext sehe ich, das Title- und Alt-Tag vorhanden sind, aber aus Sicht von SEO oder Barrierefreiheit wenig Information bieten
  2. Das Foto heißt “ferienhaus.jpg” – besser als img1267.jpg – aber aus SEO-Sicht suboptimaler Dateiname

Hat die Homepage eine Meta-Description & Meta-Title?

Diese Informationen sind wichtig für die Google-Suchergebnis-Seite – SERP

Auch hier überprüfe ich die Homepage mit der Untersuchen-Funktion und schaue mir den Kopfbereich an.

Element untersuchen: Meta Description vorhanden?
Suchmaschinenrelevant: die Meta-Description, Analyse mit “Element untersuchen”

Element untersuchen gibt mir folgende Rückmeldung

  1. Meta-Description vorhanden, aber zu lang (Prüfung und Vorschau des Serp-Snippets >>)
  2. Keywords: auf diesen Meta-Tag wird seit ein paar Jahren innerhalb von SEO keine Rücksicht genommen
  3. Title-Tag (1. Zeile) – hier wurde geschlampt “Test-Seite”
Aufbau eines Serp-Snippets
Ein Serp-Snippet

Gut zu wissen:
Aus dem Title-Tag, der URL (Internet-Adresse) und der Meta-Description wird die Google Suchergebnisseite aufgebaut, die sogenannte SERP – Search Engine Result Page

Den optimale Aufbau einer Meta-Description kannst du auch bei Sixtrix nachlesen >>

 


Video Kurzanleitung “Element Untersuchen”

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Simulation mobiler Geräte – Responsive Webdesign

Browserfenster verkleinern
Mit der Maus an einer Ecke des Browserfensters anfassen und die Ansicht verkleinern: Um zumindest die Basiseinstellungen festzulegen, reicht das aus.

Untersuchen – Rechte Maustaste
Es öffnet sich ein Bereich, in dem du den Quelltext der Homepage sehen kannst, über das Handy/Tablet-Symbol kannst du verschiedene Endgeräte simulieren.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

 

Weitere Möglichkeiten der Überprüfung

Benutzt deine Homepage Google Fonts?

Wenn du eine Homepage aufrufst, die Google Fonts nutzt, werden die jeweiligen Fonts vom Google Server geladen und es wird ein Kontakt zu Google Servern hergestellt. Hierbei werden unter anderem IP-Adressen ausgelesen und gespeichert.

Auch das kannst du mit “Element untersuchen” erforschen, lese hierzu den Abschnitt in diesem Artikel Google Fonts datenschutzkonform in WordPress einbinden →

Screenshot erstellen mit der Element-untersuchen-Funktion von Chrome

Bildschirmaufnahmen sind für viele Dinge praktisch – wenn du Google Chrome nutzt, hast du schon einige Funktionalitäten, um Screenshots aufzunehmen an Board →

Element untersuchen und CSS anpassen

Hier findest du einen etwas älteren Artikel von mir, wo ich im Firefox zeige, wie du eine CSS-Klasse identifizieren und anpassen kannst – zur Nutzung in deinem WordPress-Child-Theme zum Beispiel: Firefox: Element untersuchen und anpassen

 

 

5 Gedanken zu „Element untersuchen in Chrome oder Firefox“

Schreibe einen Kommentar