Page Builder: Übereinanderliegende Ebenen eines Website-Systems

Was Page Builder tun

Ein Page Builder ersetzt den Standard-Editor durch eine visuelle Oberfläche. Seiten werden aus Abschnitten, Spalten und Elementen zusammengesetzt. Bekannte Page Builder für WordPress sind Elementor, Divi, WPBakery, Beaver Builder, Bricks und Oxygen. Der Block-Editor von WordPress, auch Gutenberg genannt, hat sich in den letzten Jahren ebenfalls zu einem leistungsfähigen Gestaltungswerkzeug entwickelt.

Die typischen SEO-Probleme

Zusätzlicher Code

Viele Page Builder erzeugen verschachtelte Strukturen mit vielen Container-Elementen. Ein einfacher Textabsatz kann in fünf oder mehr verschachtelten Elementen stecken. Das vergrößert das HTML und kann die Darstellung verlangsamen.

Zusätzliche Dateien

Page Builder laden eigene CSS- und JavaScript-Dateien, oft auf jeder Seite, auch wenn nur ein Bruchteil der Funktionen genutzt wird. Dazu kommen Schriften, Symbolsätze und Animationsbibliotheken.

Überschriften nach Aussehen

Weil Überschriften in Page Buildern frei gestaltet werden können, wählen viele Nutzer die Ebene nach Größe statt nach Struktur. Das führt zu mehreren H1 oder zu Überschriften ohne logische Reihenfolge.

Inhalte in Reitern, Schiebereglern und Akkordeons

Inhalte in solchen Elementen werden von Google berücksichtigt, wenn sie im HTML stehen. Problematisch sind Elemente, die Inhalte erst per JavaScript nachladen.

Bindung an das Werkzeug

Inhalte werden in einem eigenen Format gespeichert. Wer den Page Builder deaktiviert, sieht oft nur noch Kurzcodes statt Inhalte. Ein Wechsel ist dann aufwendig.

Messbare Auswirkungen

Bereich Typische Auswirkung
Größe des HTML oft deutlich größer als bei schlanken Themes
Anzahl der geladenen Dateien höher durch eigene CSS- und JS-Dateien
Largest Contentful Paint kann durch große Hintergrundbilder und Schieberegler leiden
Interaction to Next Paint kann durch viel JavaScript leiden
Cumulative Layout Shift kann durch nachladende Elemente steigen

Die tatsächlichen Werte hängen stark von Version, Einstellungen und Hosting ab. Aktuelle Versionen der großen Page Builder sind deutlich schlanker als noch vor einigen Jahren.

Einstellungen, die helfen

  1. Leistungsfunktionen aktivieren: Viele Page Builder bieten Optionen, CSS und JavaScript nur bei Bedarf zu laden, Symbolsätze zu reduzieren und optimiertes DOM zu nutzen.
  2. Schriften lokal und sparsam: höchstens zwei Schriftfamilien, lokal eingebunden.
  3. Animationen sparsam: jede Animation kostet Rechenzeit, besonders auf Smartphones.
  4. Keine Schieberegler im sichtbaren Bereich: Sie verzögern den Aufbau des wichtigsten Inhalts und werden kaum genutzt.
  5. Bilder in passender Größe: Hintergrundbilder werden oft in voller Auflösung geladen.
  6. Caching und Optimierung: Ein Caching-Plugin oder serverseitiges Caching verbessert die Ladezeit erheblich.
  7. Überschriften bewusst setzen: eine H1, danach logische Gliederung. Die Gestaltung erfolgt über CSS, nicht über die Ebene.

Eine einfache Prüfung: Öffnen Sie eine Seite und schauen Sie sich mit einer Browsererweiterung die Überschriftenstruktur an. Viele Page-Builder-Seiten haben mehrere H1 oder springen von H2 zu H5. Das lässt sich in wenigen Minuten korrigieren.

Wann ein Wechsel sinnvoll ist

  • Die Ladezeit ist trotz Optimierung deutlich schlechter als bei Wettbewerbern.
  • Ein Relaunch steht ohnehin an.
  • Die Website soll langfristig wachsen und von mehreren Redakteuren gepflegt werden.
  • Der Page Builder wird nicht mehr gepflegt oder verursacht Konflikte mit Updates.

Mögliche Alternativen sind der Block-Editor mit einem Block-Theme, schlankere Page Builder oder ein individuell entwickeltes Theme. Ein Wechsel ist ein Relaunch und sollte entsprechend geplant werden, siehe Website-Relaunch.

Aus der Praxis

Eine Kanzlei-Website mit rund 60 Seiten war mit einem älteren Page Builder gebaut. Die Startseite lud über 90 Dateien und hatte auf dem Smartphone einen Largest Contentful Paint von über fünf Sekunden. Statt eines Relaunchs habe ich die Leistungsfunktionen des Page Builders aktiviert, den Schieberegler im Kopfbereich durch ein statisches Bild ersetzt, zwei Animationsbibliotheken entfernt, die Schriften lokal eingebunden und serverseitiges Caching eingerichtet. Der Wert sank auf unter zwei Sekunden, ohne dass die Gestaltung sichtbar verändert wurde.

Page Builder und Barrierefreiheit

Viele Page Builder erzeugen Elemente, die für Bildschirmleser schwer zu erfassen sind: Schaltflächen ohne Beschriftung, Überschriften nur nach Aussehen, Reiter und Akkordeons ohne korrekte Auszeichnung. Seit dem Barrierefreiheitsstärkungsgesetz sind viele digitale Angebote für Verbraucher zur Barrierefreiheit verpflichtet. Eine Prüfung der wichtigsten Seiten mit einem Werkzeug für Barrierefreiheit zeigt, wo nachgebessert werden muss. Viele der nötigen Korrekturen verbessern gleichzeitig die Verständlichkeit für Suchmaschinen.

Globale Stile und Vorlagen

Ein häufiges Problem in Page-Builder-Websites sind Seiten, die einzeln gestaltet wurden, jede mit eigenen Abständen, Schriften und Farben. Das erhöht den Code-Umfang und erschwert die Pflege. Globale Stile und wiederverwendbare Vorlagen für Seitentypen, etwa Leistungsseite, Standortseite und Ratgeber, sorgen für ein einheitliches Erscheinungsbild und schlankeren Code. Sie erleichtern zudem, SEO-Elemente wie Überschriftenstruktur, Breadcrumbs und Kontaktbereiche überall gleich umzusetzen.

Vor einem Wechsel des Page Builders

Wer von einem Page Builder zu einem anderen oder zum Block-Editor wechseln möchte, sollte zuerst eine vollständige Liste aller Seiten mit ihren Inhalten, Titeln, Beschreibungen und URLs erstellen. Inhalte werden beim Wechsel oft nicht automatisch übernommen und müssen neu aufgebaut werden. Die URLs sollten gleich bleiben, damit keine Weiterleitungen nötig sind.

Kurz beantwortet

Ist Elementor schlecht für SEO?

Nicht grundsätzlich. Mit aktuellen Versionen, aktivierten Leistungsfunktionen und gutem Hosting lassen sich gute Werte erreichen. Ohne Optimierung sind Elementor-Seiten oft langsamer als nötig.

Ist der Block-Editor besser als ein Page Builder?

Der Block-Editor erzeugt meist schlankeren Code und ist Teil von WordPress, also ohne zusätzliche Abhängigkeit. Für sehr individuelle Gestaltungen sind Page Builder aber oft bequemer.

Können Page Builder Inhalte vor Google verstecken?

Nur, wenn Inhalte erst per JavaScript nach einer Nutzeraktion geladen werden. Inhalte in Reitern oder Akkordeons, die im HTML stehen, sind für Google sichtbar.

Mehmet Oruc

Inhaber von SEOKönig · Ihr Personal SEO · Suchmaschinenoptimierung seit 30 Jahren

Informatikstudium, eigene Webkataloge und Suchmaschinen programmiert und verkauft, später Branchenportale, Onlineshops und rund 1.000 Webinstallationen für Kunden umgesetzt. Seit zwei Jahren arbeitet er intensiv mit KI-Systemen. Sein Schwerpunkt: komplexe Websites, die in vielen Städten und Themenfeldern gleichzeitig ranken müssen. Jeder Ratgeber entsteht aus dieser Projektpraxis und wird überarbeitet, sobald sich die Suchsysteme ändern.

Mehr über SEOKönig