Web-Scraping mit Screaming Frog anhand von Praxisbeispielen erklärt
Website-Scraping ist eine Technik, um Inhalte aus einer Website auszulesen. Mit dem Screaming Frog ist das mit ein paar Handgriffen mit der Funktion benutzerdefinierte Extraktion möglich. Damit kannst du etwa alle verwendeten Kategorien und Tags deiner Blog-Beiträge ermitteln. Auch die IDs der verbauten Marketing-Tags wie etwa für GA4 oder Google ADs kannst du damit ermitteln. In diesem Tutorial sehen wir uns an, wie benutzerdefinierte Extraktionen und damit das Web-Scraping mit dem Screaming Frog funktionieren.
Inhaltsverzeichnis
- Was ist Web-Scraping?
- Benutzerdefinierte Extraktion für Web-Scraping im Screaming Frog einrichten
- Ergebnis der benutzerdefinierten Extraktion sehen
- Praxisbeispiele für benutzerdefinierte Extraktion
- Konfiguration mit Extraktionen speichern
- Zusammenfassung
Was ist Web-Scraping?
Web-Scraping bezeichnet das massenhafte und automatisierte Auslesen von Daten oder Inhalten einer Website. Bei deiner eigenen Website kann das eine hervorragende Möglichkeit sein, um dir einen Überblick über verschiedene Aspekte deiner Website zu verschaffen. Etwa um herauszufinden:
- Ob und welcher Tag-Manager Container auf deinen Seiten eingebunden ist
- Welche Preise für deine Produkte im Shop angezeigt werden
- Eine Liste aller verwendeten Blog-Kategorien und Blog-Tags zu erstellen
Wir verwenden in diesem Blog-Beitrag das SEO-Tool “Screaming Frog”, um einige Inhalte der eigenen Website zu extrahieren.
Benutzerdefinierte Extraktion für Web-Scraping im Screaming Frog einrichten
Für das Web-Scraping mit dem Screaming Frog benötigst du die Funktion “benutzerdefinierte Extraktion”. Die Einstellungen findest du im Screaming Frog in der “Crawl-Konfiguration” im Bereich “Eigene” unter “benutzerdefinierte Extraktion”.
Crawl-Konfiguration für benutzerdefinierte Extraktionen im Screaming Frog
Dieser Konfigurationsbereich ist üblicherweise noch leer. Zur Illustration habe ich allerdings schon einige benutzerdefinierte Extraktionen eingefügt.
Um eine neue benutzerdefinierte Extraktion für das Web-Scraping zu definieren, klicke im Konfigurationsbildschirm bitte rechts unten auf “Hinzufügen”.
- Gib dann in der ersten Spalte einen frei wählbaren Namen ein wie im obigen Beispiel “GTM”, “Tag” oder“Category”. Das sind gleichzeitig die Spaltennamen, in denen du den extrahierten Text im Screaming Frog Bericht siehst.
- In der Dropdown-Liste der zweiten Spalte wählst du die Methode, mit der Screaming Frog Daten aus der Website extrahieren soll. Darauf gehe ich gleich näher ein.
- Je nach der gewählten Methode im Schritt 2 legst du in den nächsten Spalten den regulären Ausdruck, CSS-Pfad oder XPath an, mit dem Daten extrahiert werden sollen.
Mit der Schaltfläche mit der Weltkugel rufst du den visuellen Editor zum Erstellen von CSS-Pfaden oder XPath-Ausdrücken auf. Mit der nächsten Schaltfläche kannst du eine benutzerdefinierte Extraktion kopieren und mit der letzten Schaltfläche löschen.
Hast du im Konfigurationsbereich unter “Spider” und “Rendering” das Rendering aktiviert, wendet der Screaming Frog die benutzerdefinierte Extraktion auf die Seite an, nachdem das JavaScript ausgeführt und die Seite fertig gerendert (dargestellt) wurde. Sonst wird die Funktion nur auf den Quelltext der Seite angewandt.
Benutzerdefinierte Extraktion mit XPath
XPath ist eine Abfragesprache, mit der man Inhalte eines XML-Dokuments auslesen kann. Man kann XPath also in etwas mit SQL für Datenbankabfragen vergleichen.
In der Praxis verwende ich das allerdings sporadisch, da für mich CSS-Pfade und reguläre Ausdrücke ausreichen.
Benutzerdefinierte Extraktion mit regulären Ausdrücken
Reguläre Ausdrücke in benutzerdefinierten Extraktionen verwende ich vorwiegend, um Inhalte zu extrahieren, die beispielsweise in einem JavaScript enthalten sind. Oder wenn ich nicht den ganzen Text eines HTML-Attributes oder eines Textes auf der Website benötige.
Benutzerdefinierte Extraktion mit CSS-Pfaden
Ein CSS-Pfad ist ideal, wenn du ein vollständiges HTML-Attribut oder den ganzen Text eines HTML-Tags extrahieren möchtest. Etwa das ALT-Attribut eines Bildes oder den Preis eines Produktes, das in einem HTML-Tag enthalten ist.
Ergebnis der benutzerdefinierten Extraktion sehen
Nachdem du deine benutzerdefinierten Extraktionen in der Crawl-Konfiguration erstellt hast, crawle bitte deine Website. Das Ergebnis der benutzerdefinierten Extraktion siehst du dann im Bericht “benutzerdefinierte Extraktion”.
Bericht für benutzerdefinierte Extraktion im Screaming Frog
Die Spalten in diesem Bericht tragen den von dir festgelegten Namen wie etwa “GTM”, “Tag” oder “Category”, gefolgt von einer Nummer. Findet der Screaming Frog beim Crawling mehrere Elemente, für die eine Extraktion passt, erhöht sich die Nummer.
Hätte ich beispielsweise zwei Tag-Manager Container in einer Seite eingebaut, hätte ich die Spalten “GTM 1” und “GTM 2” mit den jeweiligen IDs der Tag-Manager Container.
In den nächsten beiden Spalten sehe ich die Kategorie und das Tag des Blog-Beitrags.
Praxisbeispiele für benutzerdefinierte Extraktion
Tag-Manager Container ID extrahieren
Im ersten Praxisbeispiel verwenden wir eine benutzerdefinierte Extraktion, um die IDs der eingebauten Google Tag-Manager-Container jeder einzelnen Seite zu finden.
Lege dazu eine benutzerdefinierte Extraktion mit dem Namen “GTM” an. Wähle dann aus der Dropdown-Liste die Option “Regex”. Falls du mit regulären Ausdrücken noch nicht so vertraut bist, hilft dir vielleicht mein Tutorial über reguläre Ausdrücke fürs Marketing.
Gib in der dritten Spalte bitte folgenden regulären Ausdruck an:
gtm.js\?id=(GTM-[A-Z0-9]+)Dieser reguläre Ausdruck prüft im gesamten Quelltext einer Seite inklusive Javascript, ob es einen Text gibt:
- Der mit “gtm.js” beginnt, gefolgt von einem “?” und einem “=”
- Nach dem “=” die Zeichenfolge “GTM-” enthält
- Nach der Zeichenfolge “GTM-” eine mindestens ein Zeichen, aber sonst beliebig lange Kombination von Buchstaben und Ziffern.
Der Ausdruck “GTM-” gefolgt von Buchstaben und Ziffern ist im regulären Ausdruck in Klammern angegeben. Damit gibt man in einem regulären Ausdruck eine Extraktions-Gruppe an. Damit signalisieren wir dem Screaming Frog, dass wir im Bericht genau die in Klammern angegebene Zeichenfolge sehen möchten.
Der obige reguläre Ausdruck findet etwa die folgende Zeile im HTML-Quelltext:
<script async="" src="``https://www.googletagmanager.com/gtm.js?id=GTM-A1B2C3D4``"></script>
Aufgrund der Extraktions-Gruppe liefert uns der reguläre Ausdruck der benutzerdefinierten Extraktion im Bericht den Wert “GTM-A1B2C3D4”.
Findet der Screaming Frog beim Crawlen deiner Website keinen Tag-Manager-Container, wird er möglicherweise durch deine Consent-Management-Lösung blockiert. In so einem Fall verwende bitte die formularbasierte Authentifizierung des Screaming Frog, um deine Website mit Consent zu crawlen.
Formularbasierte Authentifizierung, um Consent beim Crawling zu aktivieren
Öffne dazu die Crawl-Konfiguration und klicke in der Seitenleiste auf “Authentifizierung” und “Formularbasiert”. Klicke dann rechts unten auf “Hinzufügen”. Daraufhin wird ein Pop-up angezeigt, in dem du die URL der Startseite deiner Website angibst. Klickst du in diesem Popup auf “OK”, öffnet sich die gerade einegegebene Seite in einem Pop-Up.
Consent Pop-up im Screaming Frog akzeptieren
In diesem Pop-up bestätigst du den Consent und danach das Pop-up-Fenster der Website mit “OK”. Das Consent-Cookie speichert der Screaming Frog daraufhin für den aktuellen Crawl. Würdest du den Screaming Frog nun beenden, geht auch das Consent-Cookie wieder verloren und du musst diesen Schritt wiederholen.
IDs von Marketing-Tags mit regulären Ausdrücken extrahieren
Natürlich kannst du mit der benutzerdefinierten Extraktion des Screaming Frog nicht nur den Tag-Manager finden, sondern auch die IDs anderer Marketing-Tags. Das funktioniert genau so, wie du es im vorherigen Beispielkapitel gesehen hast.
In dieser Tabelle findest du die regulären Ausdrücke dafür.
| Marketing-Tag | Regulärer Ausdruck |
|---|---|
| Google Tag Manager | gtm.js?id=(GTM-[A-Z0-9]+) |
| GA4 | gtag/js?id=(G-[A-Z0-9]+) |
| Google ADs Conversion | gtag/js?id=(AW-[A-Z0-9]+) |
| Neues Google Tag | gtag/js?id=(GT-[A-Z0-9]+) |
| Floodlight Tag | gtag/js?id=(DC-[A-Z0-9]+) |
| Meta Pixel | fbq(['"]init['"],\s?'"['"]) |
| Pinterest Pixel | pintrk(['"]load['"], '"['"]) |
| Tik Tok Pixel | analytics.tiktok.com.*events.js?sdkid=([A-Za-z0-9]+) |
| Microsoft Clarity Tracking | clarity.ms/tag/([a-zA-Z0-9]+) |
| LinkedIn Pixel | _linkedin_partner_id\s?=\s?'"['"] |
| Die regulären Ausdrücke der obigen Liste liefern jeweils die ID des Pixels, die du dann im Bericht siehst. |
Achtung: Crawle deine Website wieder mit Consent, so wie im vorherigen Kapitel beschrieben. Falls deine Consent-Lösung deine Marketing-Tags blockiert, siehst du sie sonst nicht.
Letztes Änderungsdatum aller Blog-Beiträge finden
Als nächstes Praxisbeispiel möchten wir das Datum der letzten Änderung jedes einzelnen Blog-Beitrags herausfinden. Damit findest du heraus, welche Blog-Beiträge du vielleicht wieder einmal aktualisieren solltest.
In meinem Blog wird das letzte Änderungsdatum in einem HTML-Tag im Attribut “datetime” angegeben. Für dieses Beispiel verwenden wir einen XPath um das Datum aus dem Attribut auszulesen..
Der XPath dafür lautet:
(//time/@datetime)[1]Der XPath bedeutet:
- Finde alle
- Extrahiere den Wert des Attributes “datetime” jedes gefundenen
- Liefere den Text des* “datetime”*-Attributes des ersten gefundenen
Tags jedes Blog-Beitrags extrahieren
Ausgangssituation: In den letzten acht Jahren haben sich bei einem Blog über 250 Tags für Blog-Beiträge angesammelt. Diese Tags möchte ich aufräumen, besser strukturieren und konsolidieren. Also nutze ich das Web-Scraping des Screaming Frog, um alle Tags jedes einzelnen Blog-Beitrags zu extrahieren und übersichtlich in einer Liste darzustellen. Diese Liste kann ich dann quasi als To-do-Liste abarbeiten.
Dafür verwenden wir einen CSS-Pfad für die benutzerdefinierte Extraktion. In meinem Blog sind Tags der Beiträge als Anchor-Links in einem Span HTML-Tag mit der CSS-Klasse “Blog-meta-item--tags” enthalten. Der CSS-Selektor für die benutzerdefinierte Extraktion lautet damit:
.Blog-meta-item—tags > A
Damit liest Screaming Frog beim Crawlen den Inhalt des CSS-Pfades aus und befüllt damit eine Spalte.Bei Verwendung eines CSS-Pfades muss man allerdings angeben, was der Screaming Frog genau extrahieren soll.
Optionen für benutzerdefinierte Extraktion mit CSS-Pfaden
Wählst du in dieser Spalte die Option “Text”, wird der reine Text des Elements, dass du mit dem CSS-Pfad angegeben hast, extrahiert. Eventuell enthaltene HTML-Elemente werden dabei entfernt. Verwende diese Option immer dann, wenn du eben nur einen auf deiner Website angegebenen Text (ohne HTML) extrahieren möchtest.
Wählst du an dieser Stelle die Option “inneres HTML extrahieren”, wird das gesamte HTML des Tags extrahiert, das du mit dem CSS-Pfad angegeben hast.
Mit der Option “HTML-Element extrahieren” wird das gesamte HTML-Element extrahiert und im Bericht angezeigt.
Konfiguration mit Extraktionen speichern
Die benutzerdefinierten Extraktionen werden mit einem Profil gespeichert. Damit du sie nicht jedes Mal neu eingeben musst, speichern Sie die aktuelle Screaming Frog Konfiguration mit den benutzerdefinierten Extraktionen für deine Website.
- Klicke dazu im Screaming Frog Hauptmenü auf “Konfiguration”.
- Danach im Menü “Konfiguration” auf “Profile”.
- Dann im Untermenü auf “Speichern unter”.
Lädst du das Profil das nächste Mal, sind die benutzerdefinierten Extraktionen schon vorhanden und werden bei einem Crawl angewandt.
Zusammenfassung
Web-Scraping ist eine mächtige Funktion des Screaming Frog. Sie hilft dir, deine Website auch inhaltlich zu analysieren. Dafür benötigst du die bezahlte Version des Screaming Frog.
Definiere dazu die benutzerdefinierten Extraktionen mittels eines regulären Ausdrucks, eines XPath oder eines CSS-Pfades. Das Ergebnis siehst du dann im Bericht “benutzerdefinierte Extraktion”.
