link

Logo for Seoseb

XPath für SEO - ein Einstieg

Als SEO habe ich immer wieder mit HTML-Quelltext, HTML-Elementen und deren Attributen und Werten zu tun. Angefangen bei den Basics wie Title und Description, bis zu eher komplexen Fragen, wie: auf welchen Seiten unserer Domain ist eigentlich die Komponente "XY" implementiert?

Juhuuu! Dieser Beitrag wurde im Seohouse Podcast vom 01. Oktober 2021 erwähnt.

Im Laufe meiner Arbeit kam ich an den Punkt, in dem es nicht mehr nur einfach möglich war, schnell in den Quelltext zu gucken und auf einen Blick die gesuchten Informationen zu erkennen. Dann begann die Suche nach Hilfsmitteln, die es mir erleichtern auf Elemente im Quelltext von Webseiten zuzugreifen. Einen Einstieg in die Möglichkeiten und ein paar Anwendungsfälle habe ich hier zusammengetragen.

Was ist XPath?

XPath ist eine Expression Language mit der du Teile eines XML-Dokumentes adressieren kannst. Das bedeutet, du kannst damit einen Pfad beschreiben, zu bestimmten Elementen in einer XML-Datei, um dann z.B. deren Inhalte auszulesen. Das X steht für XML, das Path für "Pfad". Der Pfad oder "Path" ist eben der Ausdruck, der genutzt wird um Elemente auszuwählen. So ein Pfad sieht vereinfacht so aus:

/Element1/Element2/Element3

Exkurs: was ist XML?

XML ist eine Auszeichnungssprache, mit der Daten ausgezeichnet und strukturiert werden können. XML ist gekennzeichnet durch seine strenge Struktur. Diese Struktur setzt sich grob aus Nodes zusammen, die durch ein öffnendes und ein schließendes Tag definiert werden. Etwa so: <artikel>"Schlechte Beispiele in Blogbeiträgen - eine Momentaufnahme"</artikel>. Nodes können ineinander verschachtelt sein, dadurch entstehen Eltern-Kind-Beziehungen. Nodes, die im gleichen Eltern-Node liegen sind Geschwister.

Nodes können Attribute besitzen, denen Werte zugewiesen werden können und sie können Text beinhalten, sogenannte Text-Nodes.

Ein Beispiel für XML, das du sicherlich schon einmal gesehen hast ist folgendes:

<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.9"> <!-- root node -->
    <url> <!-- child node -->
        <loc>https://www.seoseb.de/</loc> <!-- child node mit text node -->
        <lastmod>2021-01-01</lastmod> <!-- silbling node -->
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
    <url>
        <loc>https://www.seoseb.de/artikel/linkliste/</loc>
        <lastmod>2021-05-03</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.5</priority>
    </url>
</urlset>

XPath wurde gebaut, um sich durch diese Strukturen zu bewegen. Und das Praktische daran ist: es kann auch auf HTML-Dokumente angewendet werden. HTML5 ist ein vollwertiger XML-Dialekt.

Abfragen über XPath laufen immer entlang der Dokumentenstruktur. Nehmen wir zum Beispiel diese einfache Struktur:

  <element1>
    <kind1>
      inhalt_1
    </kind1>
    <kind2 eigenschaft="wert">
      inhalt_2
    </kind2>
  </element1>

Jetzt ist die Aufgabe: Finde den Inhalt vom Node kind2 innerhalb von element1 - der XPath-Ausdruck /element1/kind2 liefert folgendes Ergebnis: inhalt_2

Simpel, oder? Nun sind moderne HTML-Dokumente deutlich komplexer als dieses Minimalbeispiel. Aber auch bei komplexen und unklaren Strukturen kannst du einen Weg finden, deine Elemente zu finden:

So findest du den Inhalt von kind2 innerhalb von irgendeinem Eltern-Element!

  <element1>
    <kind1>
      inhalt_1
    </kind1>
    <kind2 eigenschaft="wert">
      inhalt_2
    </kind2>
  </element1>

Wenn die Struktur bekannt ist, kannst du auch direkte Positionen innerhalb von Reihenfolgen ansprechen:

Damit sollte der grundlegenden Funktion genüge getan sein.

XML & XPath sind sehr strikt Ist die HTML-Struktur nicht top, kann die XPath-Abfrage fehlschlagen. Xml und damit XPath sind Case sensitive (<div> ist nicht gleich <DIV>). Daher: immer vorher testen.

XPath für HTML - das SEO-Tool

Typische und immer wiederkehrende Fragen an ein HTML-Dokument sind zum Beispiel:

Wie du diese und andere Fragen beantwortest zeige ich dir jetzt.

XPath Syntax - Basics für HTML & SEO

Mit den folgenden Basics kommst du schon sehr weit, wenn es darum geht SEO-Fragen zu beantworten:

Ausdruck Bedeutung Beispiel
/ wählt den Wurzelknoten aus /html/head
// alle Knoten im Dokument, die (die darauffolgende) Bedingung erfüllen //p
[ ] definiert Prädikate, um spezifische Nodes oder Eigenschaften auszuwählen //a[@href='www.seoseb.de']
@ wählt Attribute aus //p[@class='content_text']
/.. wählt das Elternelement des zuvor selektierten Knotens //a[@rel='ugc']/..

XPath Anfragen aus dem SEO-Alltag

Fragen, die immer wieder beantwortet werden müssen habe ich oben bereits erwähnt, hier nun ein paar Beispiele, die ich immer wieder verwende:

Je nach Tool erhältst du einzelne Elemente oder Arrays mit mehreren Elementen zurück. In der Browser-Konsole zum Beispiel werden alle matchenden Elemente als Array zurück gegeben, in etwa in dieser Form: (7) [img, img, img, img, img, img, img] - diese Ausgabe lässt sich dann ausklappen und die einzelnen Elemente jeweils untersuchen.

XPath im SEO - Anwendungen und Tools

XPath selbst ist nur ein Teil des Spaßes. Du brauchst auch ein Tool, das die Ausdrücke für Dich verarbeitet und auf Dokumente anwendet. Ich zeige dir im Folgenden die gängigsten.

XPath im Browser

Den schnellsten Zugang zu Inhalten einer Webseite bietet der Webbrowser. Die Abfrage von Inhalten mittels XPath funktioniert dort problemlos in der Dev-Console, aber auch andere Tools stehen für den Einsatz im Browser bereit.

Xpath in der Dev-Console des Browsers

Mit folgender Tastenkombination gelangst du direkt in die Konsole der Developer Tools:

Brwoser Tastenkombination
Chrome Win/Mac Control+Shift+J  / Command+Option+J
Firefox Win/Mac Control+Shift+K / Command+Option+K
Vivaldi Win/Mac Control+Shift+J  / Command+Option+J

Dein Browser sieht dann in etwa so aus:

Google Crome Browser mit aktivierter Browser Konsole, in der ein Xpath Ausdruck zu sehen ist
So sieht der Browser mit der geöffneten Konsole aus

Praktisch an der Konsole ist, dass auch ohne absetzen des XPath (schon bevor du Enter drückst) eine Vorschau des Ergebnisses geliefert wird: die Konsole zeigt dir bereits das Array mit den passenden Nodes. So kannst du schon beim Formulieren des XPath sehen, ob du in die richtige Richtung denkst.

Vorschau des Ergebnisses einer XPath Abfrage auf der Chrome Dev-Console: 7 img Nodes in einem Array
Die Browser-Konsole zeigt das Ergebnis deiner Abfrage bereits vor dem Absetzen als Array der passenden Nodes an.

Auch wenn die Arbeit mit der Konsole sehr effizent und flexibel ist, kann sie gerade zu Beginn sehr fordernd sein. Die Konsole gibt deutlich mehr Informationen zurück als die betreffenden Nodes oder deren Text-Nodes. Daher empfehle ich gerade Einsteriger.innen lieber Browser Addons zu nutzen.

XPath Browser-Extensions

Addons gibt es wie Sand am Meer - ich arbeite in den meisten Fällen mit Chrome oder Vivaldi, der auch Chrome Addons nutzen kann. Für diese Browser empfehle ich XPather.

Für Firefox erfüllt Try XPath seinen Zweck.

Das schöne an den Addons ist, dass du ohne die Browser-Konsole auskommst und die Ergebnisse direkt übersichtlich dargestellt bekommst.

Screenshot des Xpather Addons in Chrome
Das Addon öffnet eine Eingabezeile über der aktuellen Website sowie eine Spalte am rechten Rand, für die Ausgaben der Xpath-Abfragen

So kannst du schnell XPath-Ausdrücke an verschiedenen Webseiten testen oder ihre Ergebnisse prüfen. Die Ausgaben am rechten Bildschirmrand lassen sich einfach kopieren.

XPather bietet zudem die Möglichkeit, über das Kontext-Menü XPath-Ausdrücke zu generieren. Ähnlich dem "Copy XPath" der Browser-Konsole. Markiere dazu einfach den Text, der dich interessiert und führe einen Rechtsklick auf die Markierung aus. Im Kontext-Menü findest du den Eintrag "Get unique XPath":

Screenshot des Kontext-Menüs in Chrome mit dem Eintrag _Get unique XPath_
Ein Klick auf "Get unique XPath" generiert einen XPath für das markierte Element.

Der Klick auf den Eintrag öffnet das Addon, fügt den generierten XPath in der Eingabezeile ein und Zeigt wie gewohnt die Ausgabe am rechten Seitenrand. Die so generierten XPath-Ausdrücke sind ein guter Ausgangspunkt, um mit ihnen eigene generellere Ausdrücke zu finden. Für den sofortigen Einsatz über verschiedene Dokumente hinweg eignen sie sich potenziell ebenso wenig, wie "Copy XPath". Auch hier musst du erst ausgiebig testen.

XPath Web-Services

Mit dem Browser-Addon und der Konsole kannst du den Quelltext von geöffneten Dokumenten untersuchen und abfragen darauf anwenden. Manchmal willst du aber vielleicht nur einen kleinen Teil des Quelltextes im Detail untersuchen, oder mit Dateien arbeiten, die du nicht direkt im Browser öffnen kannst.

Hier hilft dir der Webdienst xpather.com (leider nicht per https) weiter. Dieser stellt Dir eine Eingabezeile am oberen Bildschirmrand zur Verfügung und ein großes Textfeld am linken Bildschirmrand, in das du (Quell)-Text einfügen kannst.

Screenshot von xpather.com mit markiertem Quelltext und dem zugehörigen Xpath-Abfrage-Ergebnis
Im oberen Bereich erfolgt die Xpath-Eingabe, Treffer werden im Quelltext und die zugehörigen Ausgaben werden farblich hervorgehoben.

XPath in Google Sheets

Google Sheets hält die Funktion IMPORTXML() bereit, mit der man einen XPath auf ein entferntes Dokument anwenden kann, das per URL aus dem Web erreichbar ist. In der Regel sind dies Webseiten, eigene oder auch die vom Wettbewerb.

Screenshot von Google Sheets mit der Funktion IMPORTXML() und der zugehörigen Hilfe
So sieht IMPORTXML() im Einsatz aus. Auch die Großzügige Hilfe beim Eingeben der Formel ist lobend zu erwähnen.

Du kannst IMPORTXML() wie jede andere normale Funktion verwenden. Die Funktion nimmt zwei Argumente entgegen: zuerst eine URL bzw. eine Zellreferenz, in der eine URL zu finden ist und einen XPath-Ausdruck, der in doppelte Hochkomma gesetzt wird bzw. auch hier wieder eine Zellreferenz. Die offizielle Dokumentation wartet hier.

Die Formel sieht im Live-Einsatz etwa so aus: =IMPORTXML($B2;"//div[@class='search-form__total']")

Jetzt kannst du beispielsweise deine XPath-Abfragen auf eine liste von URLs anwenden und auswerten.

XPath in Excel

Natürlich kannst du XPath auch in des SEOs liebster Office-Anwendung verwenden. Allerdings ist die Funktionalität nicht ab Werk vorhanden, sondern muss über das SEO Tools for Excel Addon nachgerüstet werden.

Das Addon stellt die Funktion XPathOnUrl() zur Verfügung, mit der du ähnlich dem obigen Beispiel von Google Sheets, eine URL abfragen und eine XPath-Abfrage gegen den Response laufen lassen kannst.

Screenshot einer Excel-Tabelle mit mehreren XPathOnUrl-Funktionen und deren Ergebnissen
XPathOnUrl() in Excel - Webseiten abfragen und Daten extrahieren mit dem gewohnten Excel-Komfort

Die Formel hat folgenden Aufbau: =XPathOnUrl(url, xpath, attribute, xmlHttpSettings, mode). Sie bietet ein paar mehr Möglichkeiten als das Google-Sheets-Äquivalent, die aber nicht immer benötigt werden. In der Regel nutzt du die Formel in dieser Form: =XPathOnUrl(url, "//a[@rel='canonical']", "href").

Die Funktion ist hier ausführlich dokumentiert.

Wichtig! Sowohl IMPORTXML als auch XPathOnUrl fragen die übergebene URL per Get-Request an und verarbeiten den Response-Body. JavaScript wird nicht ausgeführt! Das bedeutet: Daten die erst nach der Ausführung von JS bereit stehen können mit diesen Funktionen nicht erfasst werden. Wenn du auf JS-Rendering angewiesen bist, ist der Frog das Mittel deiner Wahl.

XPath im Screaming Frog SEO Spider

Wenn es darum geht, eine große Zahl an (ggf. unbekannten) URLs zu verarbeiten hilft der Screaming Frog SEO Spider. Er bietet die Möglichkeit, Inhalte mit XPath zu extrahieren, oder auch nach Inhalten zu Suchen. Aktivierst du das JS-Rendering, kannst du auch nach Inhalten suchen, die auf dei Ausführung von JavaScript angewiesen sind. Am Ende können die Daten natürlich exportiert werden.

Inhalte extrahieren (scrapen) mit XPath

Die Funktion, Inhalte mittels XPath zu extrahieren findest Du im Menü unter Configuration > Custom > Extraction

Screenshot des Custom Extraction Dialoges im SEO Spider
Im Konfigurationsdialog kannst du auch wählen, was du extrahieren möchtest: z.B. das gesamte HTML Element, oder lediglich den Text-Node

Das praktische am Frog ist, dass du auswählen kannst, wie er mit dem Match deines XPath umgehen soll. Du kannst zwischen verschiedene Extraktionsmöglichkeiten wählen: enthaltenes HTML, betroffenes Element, Text im Element oder Funktionsergebnis. Gerade letzteres kann sehr hilfreich sein, da es dir z.B. ermöglicht die Elemente zu zählen, die deinen XPath matchen.

Custom Search - Suchen nach Inhalten mit XPath

Die Funktion, mittels XPath nach Inhalten zu suchen, findest du im Menü unter Configuration > Custom > Search. Die Funktion sucht nach Text oder Regulären Ausdrücken im Quelltext und kann mittels XPath auf bestimmte Elemente eingeschränkt werden. So kannst du zum Beispiel Änderungen im CTA-Text prüfen und der Funktion mitteilen, ausschließlich in CTA-Elementen zu suchen.

Screenshot des Konfigurationsdialoges für Custom Extraction im SEO Spider
Im letzten Deil des Dialoges für Custom Searches kannst du einen XPath angeben, der definiert, wo gesucht werden soll.

Anwendungen: XPath im SEO-Alltag

Ausgestattet mit den passenden Tools und Grundkenntnissen kannst du nun:

Vorgehen

Für mich hat sich folgendes Vorgehen als besonders praktisch erwiesen:

  1. suche das betreffende Element im Quelltext
  2. geh so tief wie möglich in der Struktur
    1. verlasse dich nicht auf "Kopieren: XPath"
    2. schau nach Attributen id="xy" oder rel="xy"
    3. nutze unbedingt einfache Anführungszeichen' innerhalb der Ausdrücke und doppelte " für den Xpath
    4. probiere Varianten in der Console oder auf xpather.com
    5. strebe den kürzest möglichen, relativen Pfad an
  3. teste den Xpath erst an 2 oder 3 URLs in Excel, Spreadsheets oder Screaming Frog
    1. probiere "inner HTML" und "extract HTML Element" aus
  4. Feuer frei

Snippets und Tipps

Zum Ende fasse ich noch ein paar Tipps für die vorgestellten Tools zusammen:

Seo Tools For Excel

=XPathOnUrl("http://www.web.de/";"//*[@rel='canonical']";"href")

Google Spreadsheet

=IMPORTXML("http://www.web.de/","//*[@rel='canonical']/@href")

Browser Console

$x("//*[@rel='canonical']/@href")

Cheat Sheet XPath

übergeordnetes Element - zum "Hangeln"

//*[@rel='canonical']/..

Bedingung: "enthält"

//a[contains(@href,'http://')]/@href

negierte Bedingung: "beginnt nicht mit"

//a[not(starts-with(@href,'https'))]

Abfragen kombinieren

//a[contains(@href,'http://')] | //*[contains(@href,'s-immo.de')]

Elemente an ihrer Position ansprechen

/buch/kapitel[2]/abschnitt[4]/absatz[17]

Div finden, wenn es mehrere Klassennamen hat <div class="first react-container usw-usf">

//div[contains(concat(' ',normalize-space(@class),' '),' react-container ')]

Elemente und deren Eigenschaften auf der Browser Console in einer Tabelle ausgeben

table($x("//img[@alt]"), ['alt', 'width', 'height'])
Die Ausgabe von Informationen aus XPath-Abfragen in einer Tabelle auf der Chrome Dev-Console
So sieht die Tabellenausgabe auf der Dev-Console aus. Die Tabelle lässt sich dann wunderbar kopieren & einfügen.

Campixx-Slides

Ich habe diesen Beitrag auch als Vortrag bei der SEO Campixx 2021 präsentiert. Wenn du die Slides suchst, findest du sie hier: XPath für Seo auf der SEO Campixx 2021 (PDF, 2.53 MB)


In meiner Linksammlung habe ich noch ein paar weiterführende Links zum Thema zusammengestellt.