Was ist ein Content-Block?

Ein Content-Block ist eine wiederverwendbare, strukturierte Inhaltseinheit in einem CMS, etwa Hero oder FAQ. Funktionsweise, Fehler, Einfluss aufs Tempo.

Was ist ein Content-Block?

Ein Content-Block ist eine wiederverwendbare, strukturierte Inhaltseinheit in einem Content-Management-System (CMS) oder Page-Builder: ein Hero, eine Preistabelle, ein FAQ, eine Galerie oder ein Call-to-Action. Jeder Block hat festgelegte Felder und eine einheitliche Darstellung. Redakteure bauen eine Seite aus gestapelten Blöcken, statt ein großes Freitextfeld zu formatieren, sodass Inhalt und Darstellung getrennt bleiben.

So funktionieren Content-Blöcke

Ein Block besteht meist aus drei Teilen:

  • Schema: die Felder und Regeln, zum Beispiel ein Hero mit Pflichtüberschrift, Button-Beschriftung und Link.
  • Redaktionsformular: die Eingabefelder, die Redakteure ausfüllen, aus dem Schema erzeugt.
  • Darstellung: das Template oder die Frontend-Komponente, die die Daten des Blocks in HTML umsetzt.

Eine Seite ist dann eine geordnete Liste von Block-Instanzen. In Sanity ist ein Page-Builder zum Beispiel ein Array von Objekttypen, und jedes gespeicherte Element trägt seinen Typ in _type und einen eindeutigen _key (Sanity-Dokumentation). Der WordPress-Blockeditor beruht auf derselben Idee: Die Gutenberg-FAQ beschreibt, Beiträge und Seiten mit Blöcken zu schreiben und zu gestalten, die im Beitragsinhalt gespeichert werden (WordPress-Dokumentation).

Beispiel

Ein Marketing-Team braucht eine Landingpage. Es fügt einen Hero-Block, einen dreispaltigen Feature-Block, einen Testimonial-Block und einen FAQ-Block hinzu und füllt die Felder aus. Der Entwickler hat jeden Block einmal gebaut. Bei einer zweiten Landingpage nutzt das Team dieselben vier Blöcke wieder, und Layout, Überschriftenebenen und Abstände passen ohne neuen Code.

Warum Blöcke besser sind als ein großes Textfeld

  • Einheitlichkeit. Zwei Redakteure können denselben Abschnitt nicht unterschiedlich gestalten.
  • Wiederverwendung. Ein Block kann auf vielen Seiten erscheinen, und eine geteilte Instanz lässt sich einmal bearbeiten.
  • Sauberes Markup. Felder ersetzen eingefügtes HTML mit verirrten Styles.
  • Einfacheres SEO und Barrierefreiheit. Überschriftenebenen und Alt-Text-Felder lassen sich im Schema vorschreiben.
  • Strukturierte Inhalte. Das CMS kann Fragen beantworten wie: Welche Seiten nutzen eine Preistabelle?

Häufige Fehler

  • Zu viele Blocktypen. Beginnen Sie mit den wenigen, die Sie wirklich nutzen, und ergänzen Sie bei echtem Bedarf.
  • Überladene Schemas. Ein Hero mit dreißig optionalen Feldern überfordert Redakteure. Teilen Sie ihn in Varianten auf.
  • Keine Gestaltungsgrenzen. Dürfen Redakteure in jedem Block Farben und Abstände ändern, sind die Seiten wieder uneinheitlich.
  • Mehrere H1 auf einer Seite. Fünf Hero-Blöcke können fünf H1 bedeuten. Legen Sie die Überschriftenebene im Schema fest.
  • Lokalisierung vergessen. Jedes Textfeld braucht einen Wert pro Sprache.
  • Schema ändern ohne Migration. Wird ein Feld umbenannt, sind bestehende Block-Instanzen ungültig, solange sie nicht migriert werden.
  • Gewicht ignorieren. Jeder Blocktyp, den Ihr Frontend rendert, bringt Markup, Skripte und Bilder mit. Laden Sie schwere Blöcke unterhalb des sichtbaren Bereichs verzögert.

Content-Blöcke und Website-Performance

Blöcke machen Seiten leicht zusammenbaubar, und damit auch leicht überladen. Viele Blöcke auf einer Seite können sich zu mehr Skripten und Anfragen summieren, was sich in den Core Web Vitals zeigt. Auch der Aufbau der Seite zählt: siehe Static Site Generation und Server-Side Rendering. Inhalte, die Entwurf, Prüfung und Veröffentlichung durchlaufen, brauchen außerdem einen klaren Ablauf: Content-Lifecycle.

Testen Sie das Ergebnis, statt zu raten. Der Website-Speed-Test von LoadFocus zeigt, wie eine blocklastige Seite abschneidet, und das Page-Speed-Monitoring verfolgt sie nach jeder Inhaltsänderung. Bietet Ihr CMS eine REST- oder GraphQL-API, zeigt ein API-Lasttest, ob sie einen Traffic-Anstieg übersteht. Die Blog-Anleitungen zum Überwachen der Core Web Vitals und zum Verbessern des WordPress-Performance-Werts zeigen die nächsten Schritte.

Häufige Fragen: Content-Blöcke

Was ist der Unterschied zwischen Content-Block und Komponente?

Die Begriffe werden oft gleichgesetzt. Genau genommen ist der Block die CMS-Seite (Schema, Redaktionsformular und Inhalt) und die Komponente der Frontend-Code, der ihn darstellt. In vielen Setups gehören beide eins zu eins zusammen.

Sind Content-Blöcke dasselbe wie ein Page-Builder?

Nein. Blöcke sind die Inhaltseinheiten. Ein Page-Builder ist die Bearbeitungsoberfläche, mit der man sie anordnet.

Helfen Content-Blöcke dem SEO?

Sie können helfen, weil sich Überschriftenebenen, Alt-Texte und strukturierte Daten im Schema erzwingen lassen. Sie können auch schaden, etwa wenn mehrere Blöcke je eine H1 ausgeben oder schwere Blöcke die Seite verlangsamen.

Brauche ich ein Headless-CMS für Blöcke?

Nein. Auch klassische CMS wie WordPress nutzen Blöcke. Ein Headless-CMS speichert die Blöcke als Daten und lässt mehrere Frontends sie darstellen, was zum Multi-Channel-Publishing passt.

Wie viele Blocktypen sollte eine Website haben?

So wenige, wie Ihre echten Seiten brauchen. Ein neuer Blocktyp lohnt sich, wenn dasselbe Muster auf mehreren Seiten auftaucht und kein vorhandener Block passt.

Wie schnell ist Ihre Website?

Steigern Sie ihre Geschwindigkeit und SEO nahtlos mit unserem kostenlosen Geschwindigkeitstest.

Kostenloser Websitespeed-Test

Analysieren Sie die Ladegeschwindigkeit Ihrer Website und verbessern Sie ihre Leistung mit unserem kostenlosen Seitengeschwindigkeits-Checker.