SEO-freundliche Seiten erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Leistungsseite so, wie Suchmaschinen sie am besten lesen: den Seitentitel als ihre einzige Heading 1, darunter geordnete Überschriften, Alternativtext auf dem Bild und einen Button, der sagt, wohin er führt. Nutzen Sie sie als Checkliste für jede Seite, die Sie veröffentlichen. Seitentitel, Beschreibungen und URLs leben außerhalb des Builders; der letzte Abschnitt zeigt, wo.

Das Video baut die Seite „Einen Anwohnerparkausweis beantragen“ eines Stadtrats.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein Foto, das zur Leistung passt.
  • Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page), geben Sie einen klaren Title wie „Einen Anwohnerparkausweis beantragen“ ein und klicken Sie auf Save. Das Theme gibt diesen Titel als Heading 1 der Seite aus.

Schritt 1: Den Inhalt bei Heading 2 beginnen

Nutzen Sie Überschriften der Reihe nach, sodass sich die Seite wie eine Gliederung liest. Das Theme gibt den Seitentitel als Heading 1 der Seite aus, sodass der Builder-Inhalt bei Heading 2 für Hauptabschnitte beginnt, mit Heading 3 für Unterabschnitte. Nutzen Sie Heading 4 bis 6 sparsam.

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text aus dem Tab Content.
  3. Geben Sie „In fünf Minuten beantragen“ ein und wählen Sie Heading 2 aus dem Überschriften-Dropdown.
  4. Fügen Sie in einer neuen Zeile die Zusammenfassung als normalen Text hinzu: „Bewohner der Zonen A bis D können online beantragen. Genehmigungen werden innerhalb von fünf Werktagen erteilt.“ Klicken Sie auf Save.

Überlassen Sie Heading 1 dem Seitentitel. Um stattdessen eine Builder-Überschrift zur Heading 1 der Seite zu machen, blenden Sie zuerst den Titel des Themes auf dieser Seite aus. Öffnen Sie auf DXPR CMS das Bearbeitungsformular der Seite, öffnen Sie DXPR Theme Settings, haken Sie Page Title unter DXPR Hide Regions an und klicken Sie auf Save. DXPR Theme blendet den Titel auf der Startseite bereits aus. Wählen Sie eine Überschriftenebene nie nach ihrer Größe: Ändern Sie die Größe stattdessen mit Font size im Panel Style des Elements.

Schritt 2: Ein Abschnitt für die Details

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below.
  2. Klicken Sie auf + auf dem neuen Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten. Klicken Sie auf das Grid-Icon (Column layout) in der Kontrollleiste der Zeile, wählen Sie das Preset 2/3 + 1/3 und klicken Sie auf Save.

Neue Elemente landen oben in einer Spalte. Also füllen die nächsten drei Schritte die breite Spalte von unten nach oben: den Button, den Unterabschnitt, dann die Abschnittsüberschrift.

Schritt 3: Beschreibenden Linktext schreiben

Linktext sagt Suchmaschinen, worum es am Ziel geht. Vermeiden Sie „Hier klicken“ und „Weiterlesen“.

  1. Klicken Sie in der breiten Spalte auf + und wählen Sie Button.
  2. Setzen Sie Title auf „Parkausweisantrag starten“, Link auf /parking/apply und Type auf Primary, und klicken Sie dann auf Save.

Schritt 4: Ein Heading-3-Unterabschnitt

  1. Klicken Sie erneut in der breiten Spalte auf + und wählen Sie Text; er landet über dem Button.
  2. Geben Sie „Was Sie brauchen“ ein und wählen Sie Heading 3.
  3. Geben Sie die Dokumente ein, eines pro Zeile: „Adressnachweis“, „Fahrzeugschein“. Klicken Sie auf Save.

Schritt 5: Eine Heading-2-Abschnittsüberschrift

  1. Klicken Sie noch einmal in der breiten Spalte auf + und wählen Sie Text.
  2. Geben Sie „Wer beantragen kann“ ein und wählen Sie Heading 2.
  3. Fügen Sie die Regel, wer beantragen darf, in einer Zeile hinzu, und klicken Sie dann auf Save.

Schritt 6: Alternativtext zum Bild hinzufügen

Jedes Bild braucht ein Alt-Attribut, das seinen Inhalt beschreibt.

  1. Klicken Sie in der schmalen Spalte auf + und wählen Sie Image.
  2. Klicken Sie auf Select Image, durchsuchen Sie die Medienbibliothek mit Apply filters, haken Sie das Foto an und klicken Sie auf Insert selected.
  3. Öffnen Sie das Panel SEO und füllen Sie das Alt attribute aus: „Laptops, Telefone und Teetassen auf einem geteilten Holzschreibtisch“. Klicken Sie auf Save.

Schreiben Sie den Alternativtext für jemanden, der das Bild nicht sehen kann. Lassen Sie ihn nur bei Bildern leer, die reine Dekoration sind. Nutzen Sie das Title attribute nur, wenn ein Tooltip etwas hinzufügt; es ersetzt keinen Alternativtext.

Schritt 7: Speichern und Vorschau

  1. Klicken Sie in der Builder-Symbolleiste auf Save.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon), wählen Sie Preview und prüfen Sie, dass sich die Überschriften der Reihe nach lesen.

Weiter gehen

Nicht im Video gezeigt:

  • Bildgröße: Passen Sie Bilder vor dem Hochladen an die Breite an, in der sie angezeigt werden; 1200 Pixel decken eine volle Spalte ab. Lassen Sie Image width auf 100 %, lassen Sie Image height leer und halten Sie jede Datei unter 300 KB, denn Geschwindigkeit beeinflusst das Ranking.
  • Zu ignorierende Links: Fügen Sie für eine Anmeldeseite oder Ähnliches ein Link-Element hinzu, öffnen Sie sein Panel SEO und schalten Sie Tell search engines not to follow ein.
  • Textlinks: Wählen Sie in einem Text-Element die Wörter aus und nutzen Sie den Link-Button in der Symbolleiste. Halten Sie die verlinkten Wörter aussagekräftig: „die Karte der Parkzonen“, nicht „hier“.
  • Anker: Öffnen Sie More > Settings auf einem Abschnitt, setzen Sie HTML ID auf einen kurzen Kleinbuchstabennamen wie who-can-apply und verlinken Sie ihn mit #who-can-apply.

Das HTML semantisch halten

Text-, Button-, Link- und Image-Elemente erzeugen Standard-Tags <h1> bis <h6>, <p>, <ul>, <a> und <img>. Nutzen Sie diese Elemente für Inhalte. Behalten Sie das HTML-Element für Einbettungscode, den kein anderes Element erzeugen kann.

Metadaten und URLs

Seitentitel, Meta-Beschreibungen und URLs leben in Drupal, außerhalb des Builders:

  • Metatag-Modul: Setzen Sie Title-Tags, Beschreibungen und Open-Graph-Tags unter Configuration > Search and metadata > Metatag (/admin/config/search/metatag) oder pro Seite im Bearbeitungsformular der Node.
  • Pathauto-Modul: Bauen Sie saubere URLs aus Seitentiteln unter Configuration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns).

Was Sie sehen

Die Vorschau zeigt den Seitentitel als Heading 1 der Seite, dann „In fünf Minuten beantragen“ als Heading 2 mit seiner Zusammenfassung darunter. In der breiten Spalte kommt „Wer beantragen kann“ zuerst, dann „Was Sie brauchen“ mit seinen zwei Dokumenten und dem Button Parkausweisantrag starten. Das Foto sitzt in der schmalen Spalte, und sein Alternativtext bleibt unsichtbar.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Die Überschriften lesen sich in der falschen Reihenfolge. Neue Elemente landen oben in ihrer Spalte, sodass das zuletzt hinzugefügte zuerst kommt. Ziehen Sie jedes Text-Element am Zieh-Anfasser in seiner Kontrollleiste an seinen Platz.
  • Eine Überschrift wirkt zu groß oder zu klein. Ihr Theme setzt eine Größe pro Überschriftenebene. Behalten Sie die Ebene, die zur Gliederung passt, und ändern Sie Font size im Panel Style des Elements.
  • Sie finden den Alternativtext nicht auf der Seite. Alternativtext ist für Screenreader und Suchmaschinen gedacht, sodass die Seite ihn nie zeigt. Öffnen Sie stattdessen die Bildeinstellungen und prüfen Sie das Panel SEO.
  • Suchergebnisse zeigen den falschen Seitentitel. Der Builder setzt den Title-Tag nicht. Setzen Sie ihn mit dem Metatag-Modul, wie unter „Metadaten und URLs“ beschrieben.

Wie geht es weiter?