Was der Quellcode mir alles über deine Website erzählt

In meinem letzten Monatsrückblick habe ich den Titel gewählt “Websites sind mein Ding”. Und kurz danach kam mir in den Sinn, dass ich wirklich einen kleinen Website-Tick habe. Ich habe eine Angewohnheit, über die ich hier schreiben möchte, weil sie den Tick wunderbar verdeutlicht:

ich gucke mit Begeisterung in den Quellcode von Websites. 

Nicht bei jeder Website. Aber wenn ich mich länger auf einer Website umsehe und bestimmte Elemente, den Aufbau oder was auch immer interessant finde, dann drücken meine Finger automatisch STRG und U.
Du kannst es ja auf einer Website ausprobieren und dir selbst angucken.

Auf was ich den Quellcode dann durchforste, das kannst du hier nachlesen. 

Quellcode: Zeichensalat oder Zeichenkombination mit Sinn?

Falls du die Tastenkombination STRG kombiniert mit U schon ausprobiert hast, denkst du vielleicht “Häh?”, wenn du den Zeichensalat im Browserfenster siehst, der sich dann geöffnet hat. Ja, das wirkt auf den ersten Blick wie Zeichensalat und auch ich kann nicht jede Zeile genau interpretieren.

Ich bin keine Webentwicklerin, die von morgens bis abends Websites baut, beherrsche aber Grundwissen in HTML und CSS, zwei der wichtigsten Auszeichnungssprachen in der Webentwicklung. Und was ich hier als Zeichensalat bezeichne, ist der sogenannte Quellcode, der die Struktur, das Design und Formatierungen für die Inhalte einer Website festlegt.

Und was mich in den Quellcode blicken lässt, ist oft pure Neugier. Nämlich die Frage: Wie machen es andere? 
Aber auch im Rahmen meiner Angebote schaue ich in die Tiefe einer Website. Zum Beispiel beim Sichtbarkeits-Check-up oder auch bei einer Website-Strategie.

Aber was lässt sich im Quellcode überhaupt sehen?

Content Management Systeme 

Fast immer finde ich im Quellcode Hinweise auf das eingesetzte Content Management System. Hier sind beispielhaft ein paar aufgezählt:

WordPress

Eines der am häufigsten verwendeten Content Management Systeme (CMS) ist WordPress. Und WordPress ist schnell entlarvt. Wenn es nicht bereits als Name ganz ausgeschrieben irgendwo in den Kommentaren im Quellcode auftaucht, erkennt man es an typischen Ordnerbezeichnungen, die die Inhalte auf dem Server verwalten, allen voran der Ordner wp-content.

Wenn du dich fragst, wo das zu finden sein soll, dann kommt hier die nächste Tastenkombination: STRG und F. Damit öffnest du die Suchzeile, gibst wp-content in das Suchfeld ein und dir wird angezeigt, ob diese Zeichenkombination vorkommt oder nicht. Bei fast jeder zweiten Website wirst du fündig werden, denn ca. 43 Prozent aller Websites weltweit sind mit WordPress umgesetzt.

Baukastensysteme

Die Baukastensysteme WIX und Jimdo lassen sich auch sehr leicht erkennen. Bei WIX steht schon sehr weit oben im Quellcode Wix.com Website Builder und bei Jimdo Jimdo Creator. Zusätzlich erkennt man dieses CMS an den Quelladressen, von denen Inhalte geladen werden, und die immer mit jim beginnen. 

Typo3

Der nächste Kandidat, Typo3, geizt auch nicht mit Hinweisen auf seinen Einsatz. This website is powered by TYPO3 steht als Kommentar ganz weit oben im Quellcode. Klar, ein System lebt davon, dass es häufig zum Einsatz kommt. Und wenn so neugierige Menschen wie ich schauen, wie andere ihre Website-Projekte umsetzen, könnte ich vielleicht positiv inspiriert in mein nächstes Projekt starten und auch auf Typo3 setzen.

Für die meisten Websiteprojekte ist Typo3 allerdings überdimensioniert und setzt mit TypoScript auch noch mal auf eine ganz eigene Konfigurationssprache, für die es entsprechend spezialisierte Experten braucht.

Drupal

Manchmal lässt auch das Design bereits Rückschlüsse auf ein Content Management System zu. Sehr beeindruckt war ich daher vor Jahren, als auf einer Messe ein Webentwickler bereits beim Aufrufen der Startseite meines damaligen Arbeitgebers sagte, “Aha, mit Drupal umgesetzt”. Noch bevor er überhaupt in den Quellcode geschaut hatte. Auf meine Nachfrage, wie er das erkannt hat, meinte er, das an bestimmten typischen Elementen auf der Website sehen zu können. Und ja, ich kenne es, wenn bei WordPress bestimmte Pagebuilder zum Einsatz kommen, kann man das häufig schon erahnen, ohne in den Quellcode zu gucken.

Drupal kann man ansonsten natürlich ebenfalls im Quellcode erkennen. Erste Anhaltspunkte sind die Ordnerstrukturen, ganz eindeutig wird es, wenn man nach drupal mit der Suchfunktion forscht. An irgendeiner Stelle wird man es ausgeschrieben finden. 

Darüber hinaus lassen sich auch Shopsysteme in der Regel schnell im Quellcode identifizieren.

Pagebuilder und Themes

Auch Pagebuilder zeigen sich im Quellcode. Wenn WordPress zum Einsatz kommt, arbeiten viele Agenturen und auch Menschen, die sich selbst um ihre Website kümmern, mit einem Pagebuilder, meist mit Divi oder Elementor. Diese funktionieren ähnlich wie die Baukastensysteme und stellen fertig designte Inhaltselemente zur Verfügung, die sich auch ohne Programmierkenntnisse bedienen und zu einer fertigen Website zusammenstellen lassen. Die Begriffe Divi oder Elementor tauchen dann im Quellcode auf, z.B. in Ordnerpfaden. 

Der Quellcode von WordPress verrät in der Regel auch das eingesetzte Theme. Themes sind fertige Standard-Designs, die entweder von WordPress.org selbst oder von kommerziellen Anbietern zur Verfügung gestellt werden. Manche kostenlos, andere gegen Lizenzgebühr. Diese Themes lassen sich weiter individualisieren, können aber bereits als fertiges Design sofort zum Einsatz kommen. Finde doch mal heraus, welches Standard-Theme ich verwende: STRG und U und dann forschen.

Warum Standard-Themes gerade zu Business-Beginn so praktisch sind

Standard-Themes sind super praktisch gerade beim Start eines Business. Dann ist meist noch kein üppiges Budget für ein schickes, individuelles Design vorhanden. Und das ist gut so. Denn meist ist das zu diesem Zeitpunkt noch gar nicht angezeigt und auch besser nicht der erste Schritt.

Auf der Reise in das eigene Business startet man in der Regel mit einer steilen Entwicklungskurve; Positionierung und Personal Branding entstehen nicht von heute auf morgen, sondern in einem längeren Prozess.

Wer sich dann bereits auf ein starres Corporate Design festgelegt hat, dass vielleicht in einem Jahr gar nicht mehr zu Positionierung und Angebot passt, wird sich unter Umständen ärgern, weil schon so viel Geld in die Website geflossen ist und dadurch länger als nötig an einem Design festhalten und Weiterentwicklung verzögern.

Eine Website mit Standarddesign ist schneller umgesetzt und damit deutlich günstiger zu haben. Besonders zu empfehlen, wenn es zum Beispiel vor allem erst mal darum geht, einen Blog zu starten.

Die Spuren deines Marketings

Der Quellcode verrät einiges über die Marketingaktivitäten oder zumindest die Grundlagen, die schon da wären, um Marketing gezielt zu betreiben. 

Tracking von Besucherzahlen

Das Script für Tracking ist im Quellcode enthalten und zeigt zudem auf, welcher Anbieter gewählt wurde. Allen voran ist Google Analytics zu finden. Aber auch andere Tools wie Matomo oder das WordPress Plugin Koko Analytics. 

Für das Marketing- und Werbeuniversum von Google ist das Ganze dann gerne ergänzt oder ersetzt durch den Google Tag Manager. Manchmal lassen sich auch Facebook-Pixel finden, falls sie direkt auf der Website eingebunden sind. 

Und natürlich findet sich in einem ordentlichen Quellcode der Cookie-Banner, der namentlich genannt wird und die ganzen Trackingaktivitäten steuert und ggf. deaktiviert, wenn ein Besucher auf Ablehnen klickt.
Das ist dann sehr zum Leidwesen von kleinen Blogs mit VG Wort Pixel, die so keine Tantiemen für ihre Blogartikel erhalten können, weil der Zählpixel die Websitebesuche nicht zählen darf. Dieser Zählpixel ist ebenfalls sichtbar. Erst neulich las ich einen herzigen Artikel zum Thema, warum man bei kleinen Blogs doch Cookies bitte akzeptieren soll. 

Der Einsatz eines Landingpage-Anbieters ist ebenfalls erkennbar. Das in der Regel aber auf der Seite selbst schon, ganz ohne Quellcode. 

SEO und GEO

Die ersten Hinweise auf SEO finden sich bereits ganz oben im Quellcode: aussagekräftiger Title, knackige Description und Schema-Markup bzw. strukturierte Daten für Suchmaschinen und KI-Bots. Ob die Überschriften sinnvoll eingesetzt sind, lässt sich ablesen oder der strategische Einsatz von Bildbeschreibungen. Eingesetzte SEO Plugins bei WordPress offenbaren ihren Einsatz auch sehr bereitwillig.

Google Verification

Um manche Dienste von Google nutzen zu können, ist manchmal eine Verifizierung auf der Website hinterlegt, die den Website-Inhaber gegenüber Google ausweist. Dieser Verifizierungscode ist dann im Quellcode zu sehen.

WordPress Plugins und ein Sicherheitshinweis

Insbesondere beim CMS WordPress zeigen sich viele Plugins sichtbar im Quellcode. Das können SEO-Plugins wie Yoast sein, Cookie Banner oder Sicherheitsplugins wie Wordfence. Auch das häufig eingesetzte Plugin für Kontakformulare Contact Form 7 ist zu erkennen. 

Ich denke, das macht klar, warum eine regelmäßige Website-Pflege unabdingbar ist. Denn nicht nur meine neugierige Nase kann diese Infos einsehen. Auch automatisierte Bots durchforsten das WWW tagtäglich mit unlauteren Absichten. Finden sie Plugins mit bekannten Schwachstellen und du spielst nicht regelmäßig die Sicherheitsupdates ein, ist der nächste Hackerangriff nicht weit. 

Wenn man ein Sicherheitsplugin installiert hat, kann man diese stetigen Angriffe auch sehen. Es ist unglaublich, wie viele versteckte Angriffe im Hintergrund auf Websites TÄGLICH laufen.

Google Fonts

Ein Nebenbefund beim Quellcode-Check ist übrigens, ob jemand Google Fonts nutzt. Das ist manchmal direkt auf der Website selbst zu sehen, weil Google Fonts von den Standardschriften eines Browsers bzw. Betriebssystems abweichen und schicker aussehen.

Der Quellcode verrät mir dann aber, ob diese Schriften lokal eingebunden sind oder dynamisch vom Google Server nachgeladen werden. Letzteres ist zwar rechtlich gesehen möglich, muss aber entsprechend konfiguriert und die Einwilligung über den Cookiebanner abgefragt werden, da man sonst schnell mit der DSGVO im Konflikt steht. Beim Nachladen der Schrift wird die IP-Adresse der Websitebesucher in die USA gefunkt. Ich hoffe dann, dass die Websitebetreiber wissen, was sie tun. Bei Kundinnen würde ich es zur Sprache bringen. 

Damit beende ich die Auflistung. Möglich, dass ich das ein oder andere vergessen habe, aber ich denke, für einen ersten Überblick reicht es auch so. 

Quellcode am Smartphone einsehen

Die Tastenkombination, um den Quellcode einzusehen, funktioniert natürlich nur am Laptop oder PC. Aber auch auf dem Smartphone kann man den Quellcode einsehen. Dazu tippt man in der Adresszeile im Browser vor der eigentlichen Adresse noch view-source: ein und, voilà, willkommen im Zeichensalat, äh, Quellcode. 

Was mir der Blick in den Quellcode bringt 

Und was bringt dieses Wissen, das mir der Blick in den Quellcode offenbart? Zum einen stillt es meine Neugier. Aber natürlich ist es auch darüber hinaus hilfreich. Wenn zum Beispiel der Relaunch einer Website im Raum steht, ist es gut zu wissen, was die technische Ausgangslage ist. Dann kann man gezielt klären, ob sich damit weiterarbeiten lässt und was ggf. als technische Neuerung bedacht werden muss. Eingesetzte Themes können zum Beispiel andeuten, ob eine Website schon länger im Einsatz ist. Auch kann ich sehen, welche Grundlagen für Marketing schon gelegt sind, also Tracking und Verifizierung oder SEO-Tools, mit denen weitergearbeitet werden kann.

Wenn ich einen Sichtbarkeits-Check-up durchführe oder eine Website-Strategie erarbeite, dann gehört es für mich dazu, mal eben in den Quellcode einer bereits existierenden Website zu schauen. Denn viele Fragen können Kundinnen mir adhoc gar nicht beantworten. Es ist oft nicht nötig, dass ich einen Zugang zum Redaktionssystem brauche, um Fragen auch selbst beantworten zu können. Der Quellcode verrät mir bereits einige Antworten auf meine Fragen.

Mein Tick hat also durchaus auch seine praktischen Seiten.

Und nun du? Welchen Tick hast du aus deiner Profession heraus entwickelt? Schreibe es gerne in die Kommentare.