WordPress Header: Wie du ihn bearbeiten kannst und warum er so wichtig für deine WordPress Website ist

Der WordPress Header gehört zu jeder Website mit dazu, denn es handelt sich um den unsichtbaren Teil, wo unter anderem auch die Meta-Tags integriert werden. Wenn du dich also schon ein wenig auskennst, kannst du im WordPress Header eine Menge Optimierungen durchführen. Auch eigene Einträge sind dann keine große Sache mehr.

Schwierig ist all das nicht, du musst nur wissen, was die Einträge im Header von WordPress genau bedeuten und wie du sie ändern kannst. Entfernst du dort nämlich die falschen Einträge, kann das schnell unangenehme Konsequenzen nach sich ziehen. Grund genug für mich, dir mal ein wenig mehr über den WordPress Header zu erklären und einen Artikel zu schreiben, der dir alle offenen Fragen dazu beantwortet.

Was der Header genau ist, wo du ihn im WordPress Admin findest, welche Optimierungen dort tatsächlich Sinn ergeben und was ich dir persönlich empfehlen würde, erfährst du in den folgenden Absätzen. Zeit, einen Blick in das Innenleben deiner WordPress Website zu werfen. Was kann der WordPress Header und warum ist er so überaus wichtig?

Hier muss zunächst einmal zwischen dem visuellen Teil des Headers und dem Code-Bereich unterschieden werden. Im visuellen Teil verstecken sich oft die Logos, der Titel und Slogan des jeweiligen WordPress Blogs. Allerdings kommen diese meist aus den Einstellungen, weshalb hier nur ein Platzhalter wie »get_bloginfo« zu finden ist. Der Platzhalter ruft dann via PHP die Werte aus der Datenbank ab, also das, was du in den Einstellungen hinterlegt hast. In diesem Beispiel wären das Site Logo, Titel und Slogan.

Mir geht es hier aber eher um den Code-Bereich im WordPress Header, denn dieser ist ungleich interessanter. Im Code sind nämlich unter anderem die Meta-Tags integriert. Außerdem lassen sich problemlos weitere einfügen. Dieser Bereich ist bei einer klassischen HTML-Website der sogenannte , ein für Besucher unsichtbarer, technischer Teil, der relevant für viele grundlegende Abläufe ist.

Zuständig für den WordPress Header ist die »header.php« in eurem WordPress Theme. In dieser Datei liegen die erwähnten wichtigen Bereiche, wie Meta-Tags, integrierte CSS- und Javascript-Dateien, das Favicon (darüber hatte ich hier auch schon geschrieben) sowie weitere eventuelle Einbindungen. Aber schauen wir uns den Punkt mit den Einbindungen noch einmal genauer an.

Wer externe Inhalte laden oder integrieren möchte, kommt um die »header.php« für gewöhnlich nicht herum. Es führt einfach kein Weg daran vorbei. Klassisch sind hier die Meta-Tags zu nennen, die auch wichtig im Hinblick auf die Suchmaschinenoptimierung (SEO) sind. Welche genau genutzt werden, entscheidet jeder selbst oder übernimmt die Einstellungen des verwendeten WordPress SEO Plugins.

Weiter geht es dann mit CSS-Dateien, die für das Styling deiner Website verantwortlich sind und auch Webfonts einbetten können. Skripte erweitern hingegen den Funktionsumfang deiner WordPress Website, ebenso wie Javascript-Bibliotheken, die als Grundlage für komplexere Funktionen dienen. Auch Tracking-Pixel, die unbedingt sofort geladen werden müssen, finden meist im WordPress Header ihren Platz.

In technischer Hinsicht sind noch die HTTP Security Header zu nennen, doch die werden gar nicht direkt über die »header.php« integriert, sondern kommen über die »functions.php« oder die ».htaccess« in deinen Blog. Aber auch die wollen wir uns kurz noch einmal näher ansehen.

Mit dem eigentlichen WordPress Header, also dem aus der »header.php«, hat das hier nur noch sehr wenig zu tun. Hier geht es nämlich vielmehr um die unterschiedlichen HTTP-Header, die via Server mitgesendet werden. Fragt ein Browser nämlich eine Website an, stellt er eine sogenannte Header-Anfrage und bekommt verschiedene Header-Einträge als Antwort zurück. Zum Beispiel »Content-Type« und »Content-Encoding« oder auch »Cache-Control«, der den Browser Cache steuert. Der Browser bekommt über die Header-Einträge gewissermaßen mitgeteilt, was ihn gleich erwartet und wie er es verarbeiten sollte.

Diese sogenannten Security Header haben mit der »header.php« aber eben nicht viel gemeinsam, sind jedoch nicht weniger wichtig. Gerade in WordPress sind es oft die technisch eher verborgenen Aspekte einer Website, die eine Rolle spielen, von Nutzern aber gerne vernachlässigt werden. Oft, weil einfach das Fachwissen fehlt. Ein fataler Fehler! Die HTTP-Header sind nämlich direkt mitverantwortlich für die WordPress Security und damit für die Sicherheit deiner Website.

So gibt es Einstellungen wie den »X-Content-Type«, der das Laden von Dateiformaten unterbinden kann, wenn diese nicht bekannt sind. Es gibt aber noch viele weitere Optionen, deren einzelne Erklärungen an dieser Stelle jetzt zu weit führen würden. Wenn du meinen Caching-Artikel gelesen hast, dann kennst du vielleicht schon das Plugin W3 Total Cache, welches viele dieser Header bereits automatisch setzt. Auch einige WordPress Security Plugins übernehmen diesen Job. Empfehlenswert ist zudem das Headers Security Advanced Plugin für WordPress.

In erster Linie gilt es, den WordPress Header nicht unnötig zu überladen. Es ist fast immer eine schlechte Idee, dort einfach alles einzubinden, was einem unter die Nase kommt. Anfänger neigen aber genau dazu und binden hier viele verschiedene Webfonts und Javascript-Dateien ein, die alle cool aussehen oder tolle Effekte in die eigene WordPress Website integrieren. Das ist eher unklug.

Besser ist es, die »header.php« und damit den WordPress Header möglichst schlank zu halten und dann auch zu belassen. Der Grund dafür ist, dass der WordPress Header auf jeder deiner Seiten hinzugefügt wird. Header und Footer sind immer vorhanden und wenn diese mit unnötigen Einbindungen vollgestopft sind, schadet das der WordPress Performance und beeinträchtigt damit auch das Nutzererlebnis und die SEO-Optimierung deiner Website.

Denn alles, was du dort einbindest, muss natürlich auch entsprechend geladen und verarbeitet werden. Plugins wie Autoptimize fassen viele unterschiedliche Einträge im Header daher meist zusammen (mehrere CSS-Dateien werden zu einer großen), um lange Ladeketten zu vermeiden. Je weniger also im WordPress Header eingetragen ist, umso besser für die allgemeine Performance.

Der WordPress Header ist viel mächtiger, als es zunächst den Anschein macht. Er gibt die Anweisungen, was genau eingebunden und geladen wird, wie die Website in den Suchmaschinen aussieht, welche Webfonts das Design beeinflussen und ob Tracking-Pixel die Besucherinteraktionen haargenau messen oder eben mit leichter Verzögerung. Der Header von WordPress ist damit unglaublich mächtig.

Wenn du dich auskennst, kannst du sämtliche Einträge manuell über die »header.php« des verwendeten WordPress Themes verändern, beeinflussen und manipulieren. Kennst du dich aber nicht aus, ist jeder Eingriff in den WordPress Header gefährlich, da schon kleine Änderungen für Probleme sorgen können. Zu groß ist die Gefahr, dass die Performance negativ beeinflusst wird, es grundlegende Probleme beim Laden gibt oder die Suchmaschinenoptimierung stark unter deinen Anpassungen leidet. Im schlimmsten Fall alles auf einmal.

So mächtig der WordPress Header also auch sein mag, so sehr ist er mit der notwendigen Vorsicht zu genießen. Leichtfertig solltest du hier jedenfalls keine Änderungen vornehmen. Alles, was hier steht, hat einen triftigen Grund. Möchtest du etwas verändern, solltest du daher einiges an Hintergrundwissen parat haben und wissen, was du tust.

Meine Erklärungen haben dir aber hoffentlich dabei geholfen, den WordPress Header und seine Eigenheiten technisch ein wenig besser zu verstehen. Vielleicht bist du jetzt bereit dafür, deine eigenen Einträge hinzuzufügen.