Bitte lesen Sie zunächst unsere allgemeine Erläuterung zum Backend der TYPO3 v12.

System

Entwicklungsumgebung Website:

Frontend: https://dosb.kultsrv.de/

Backend: https://staging.dosb.de/typo3/

Die Logins werden separat verschickt.

Bildformate

Sie erhalten eine Liste mit allen Bildelementen und den entsprechenden Bildformaten, in denen diese ins Backend hochgeladen werden müssen.

Navigation

Die Navigation setzt sich aus dem Seitenbaum zusammen, ausgenommen sind dabei die Inhalte, die in Ordnern liegen. Falls eine Seite aus dem Seitenbaum nicht in der Navigation auftauchen soll, kann dies in den Seiteneinstellungen konfiguriert werden (Access > Page enabled in menus).

Jede statische Seite verfügt über eigenen Seiteneinstellungen

Footer

Der Footer kann redaktionell bearbeitet werden. Wählen Sie dazu im Ordner “Global” den Ordner “Globale Elemente”. Dort finden Sie ein Content Element “Footer” in dem in verschiedenen Tabs alle Inhalte aus dem Footer bearbeitet werden können.

Im Content Element "Footer" können alle Daten im Footer bearbeitet werden

Seiten

Die Erläuterung zur Anlage neuer Seiten sowie zur Bearbeitung der Seiteneinstellungen entnehmen Sie bitte der allgemeinen Einführung in TYPO3 V12.

Nachdem Sie eine Seite angelegt haben, können Sie diese mit Inhalt füllen. Dazu stehen Ihnen verschiedenen Content Elemente zur Verfügung, die im weiter unten erläutert werden.

Content Elemente

Die statischen Seiten werden mit verschiedenen zur Verfügung stehenden Content Elementen und Plugins aufgebaut. Wenn Sie über den Button “+ Create new content” ein neues Content Element anlegen erscheint eine Auswahlmaske mit verschiedenen Reitern.

• DOSB Contact addresses: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

• DOSB Contact Persons: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

• DOSB Downloads: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

• News system: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

• Form elements: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

• Mask elements: Die Übersicht zeigt alle redaktionellen Content Elemente, wie beispielweise Text, Bild, Akkordeon. Ein Großteil der Mask Elements wurde beispielhaft auf der Textbildstandard-Seite eingesetzt (https://staging.dosb.de/text-bild-standard)

• Plugins: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

• Special elements: Diese Elemente benötigen Sie nicht zur redaktionellen Pflege der Seiten.

Übersicht über alle Content Element, die zur redaktionellen Pflege der Website bereitstellen

Text

Das Element Text nutzen Sie, um einen Text (optional mit Headline) über ¾ der Content-Breite abzubilden. Ein Beispiel finden Sie hier.

Standardmäßig wird der Text mittig über ¾ der Seite ausgespielt. Wollen Sie ein Seitenlayout in dem der Text etwas weiter links ausgespielt wird (siehe hier), gehen Sie in die Seiteneinstellungen und dort auf den Tab “Appearance”. Hier finden Sie das Dropdown “Layout”. Hier können Sie zwischen verschiedenen Darstellungsoptionen wählen.

Von "Container sm" zu "Container xl" wird der Inhalt zunehmend weiter links auf der Seite ausgespielt.

Buttons

In verschiedenen Elementen habe Sie die Möglichkeit innerhalb eines Texteditors Buttons einzusetzen. Die Erstellung von Buttons erfolgt in zwei Schritten. Zunächst fügen Sie im Texteditor den gewünschten Buttontext ein, markieren und verlinken diesen.

Zum Verlinken, markieren Sie das entsprechende Wort und klicken Sie auf das Link-Symbol

Im Link Browser setzen Sie den gewünschten Link. Entweder auf eine interne Seite, die Sie aus dem Seitenbaum wählen, eine Datei aus Ihrer Filelist, eine externe URL, eine E-Mail-Adresse oder eine Telefonnummer.

Für das verlinkte Wort können Sie im Anschluss einen Style auswählen. Dafür stehen Ihnen “Button”, “Button filled”, “Arrow Link” und “External Link” zu Verfügung.

Mit dem Style bestimmen Sie, welche Art von Button sie einsetzen

Text-Image

Mit dem Element Text-Image stellen Sie ein Bild mit Text rechts oder links neben dem Bild dar. Im Tab “General” können Sie dem Element eine Headline hinzufügen. Im Tab “Text” kann der Text hinzugefügt werden und im Tab “Image” wählen Sie das entsprechende Bild aus der Fileliste aus und bestimmen, ob das Bild in der Anordnung rechts oder links positioniert sein soll. Ein Beispiel für beide Varianten finden Sie hier.

Das Bild kann entweder rechts oder links neben Text positioniert sein

Image

Soll ein großes Bild eingesetzt werden, ohne dass Text links oder rechts daneben steht, dann wählen Sie das Content Element “Image”. Dort können Sie ein ein entsprechendes Bild auswählen und Optional eine Headline darüber einfügen. Ein Beispiel im Frontend finden Sie hier.

Nach hinzufügen des Bildes haben Sie die Möglichkeit die Bild-Informationen aufzuklappen und eine Description (Caption) zu setzen. Diese wird im Frontend automatisch als Bildunterschrift des jeweiligen Bildes angezeigt.

Jedes Bild kann mit einer Bildunterschrift versehen werden

Image Gallery

Wollen Sie nicht ein großes Bild, sondern gleich mehrere in einer Bildergalerie abbilden, steht Ihnen das Content “Image Gallery” zur Verfügung. Die Anlage erfolgt analog zu “Images”. Ein Beispiel im Frontend finden Sie an dieser Stelle.

Text-Image Gallery

Mit dem Content-Element “Text-Image Gallery” können Sie mehrere Bilder samt Text in einer Galerie darstellen. Ein Beispiel im Frontend finden Sie hier. Im Tab “Gallery” können Sie durch Klicken auf “+ Create new item” einen neuen Text-Bild-Slide erstellen und dann wie bereits bekannt ein Bild aus der Filelist wählen und einen Text hinzufügen.

Video

Um ein Video einzufügen, wählen Sie das Content-Element “Video”. Sie können dem Video eine Headline und eine einleitende Erklärung voranstellen. Zur Einbindung des Videos hinterlegen Sie die entsprechende Youtube-URL. Aus der Fileliste wählen Sie außerdem ein Preview-Bild für das Video. Dieses wird auf der Website angezeigt, bis das Video über den Playbutton gestartet wird. Der Playbutton legt sich automatisch über das Preview-Bild und muss nicht extra hinzugefügt werden. Ein Beispiel finden Sie hier.

Ein Preview-Bild wird angezeigt, bis das Video aktiv vom Nutzer gestartet wird

Presenter Home

Dieses Element sollte ausschließlich auf der Startseite eingesetzt werden. Sie werden es in der weiteren Content-Pflege nicht benötigen.

Presenter

Der Presenter dient als optischer Einstieg in die jeweilige Seite. Hier sollte ein Bild in guter Auflösung hochgeladen werden, um eine gute Qualität zu gewährleisten. Die Anlage erfolgt analog zu “Images”.

Link list

Mit dem Element “Link list” können Sie eine Liste mit beliebig vielen Links anlegen. Diese kann horizontal oder vertikal ausgerichtet sein. Die Links können durch “Link style” in verschiedenen Button-Formatierungen eingesetzt werden. Ein Beispiel finden Sie auf der Textbildstandardseite.

Eine Link Liste kann horizontal und vertikal ausgerichtet werden

Testimonials

Um Zitate abzubilden, wählen Sie das Content Element “Testimonials”. Dort können Sie beliebig viele Items hinterlegen, die im Frontend in Form eines Sliders dargestellt werden. Hinterlegen Sie nur ein Item, entfällt die Sliderfunktion. Pro Item (= pro Zitat) können Sie die Daten der Person (im Beispiel Name, Funktion und Unternehmen) und den Fließtext definieren.

Im Backend können beliebig viele Items (=Zitate) angelegt werden

Accordion

Im “Accordion” können Sie ein Akkordeon aufbauen, das aus beliebig vielen Accordion-Items besteht. Jedes Item braucht ein “Label” (der Text, der angezeigt wird, wenn das Element zugeklappt ist). Der Inhalt eines Items kann mit Text und Bild gestaltet werden. Den Text können Sie dabei frei editieren und beispielsweise Verlinkungen oder Buttons einsetzen. Ein Beispiel für ein Akkordeon finden Sie hier.

Beispielhafte Pflege eines Accordeon-Items

Key Facts

Durch das Content Element “Key Facts” können Sie einen Banner mit Slider-Funktion über die gesamte Breite der Seite erstellen. Ein Beispiel finden Sie hier. Sind weniger als vier Items gepflegt entfällt die Slider-Funktion. Für jedes Item können Sie einen Titel und einen Subtitel anlegen.

Table

Durch das Element “Tabelle” kann eine Tabelle angelegt werden mit beliebig vielen Zeilen (Row) und Spalten (Column). Ein Beispiel für eine Tabelle finden Sie hier. Im ersten Schritt legen Sie durch “+ Create new row” eine neue Zeile an, in der Sie dann wiederum beliebig viele Spalten anlegen können durch Klicken auf “+ Create new column”.

Anlegen von Zeilen und Spalten erfolgt durch "+ Create new row" bzw. "+ Create new column"

Info Box

Die “Info Box” ist eine Highlight Box in der Inhalte hervorgehoben dargestellt werden können. Inhaltlich kann die Info Box aus einer Headline, einem Subtitle und einem Text aufgebaut werden. Ein Beispiel finden Sie auf der Textbildstandardseite.

Subpage Teaser

Mit dem Content-Element “Subpage Teaser” können Teaser erstellt werden, die eine kurze Vorschau zu einer verlinkten Seite zeigen. Sie werden ab einer bestimmten Anzahl im Slider ausgespielt. Aufgebaut werden die Teaser durch ein Vorschaubild, dass sie aus der Filelist auswählen können, einen Titel, einen Subtitle und einen Link. Ein Beispiel finden Sie hier.

Module

Kontaktadressen Modul

Zur Anlage oder Bearbeitung von Kontaktadressen öffnen Sie den Ordner “Kontaktadressen” im Seitenbaum. Inhalte, die in Modulen verwaltet werden bearbeiten Sie grundsätzlich immer in der Ansicht “List” (vgl. Pfeil links auf dem nachfolgenden Screenshot).

Module werden immer in der List-Ansicht gepflegt

Sie bekommen dann eine Liste mit allen Kontaktadressen-Items angezeigt. Jedes Item steht für eine Kontaktadresse.

Kontaktadresse anlegen

Eine neue Kontaktadresse legen Sie an, indem Sie auf den Button “+ New record” klicken:

Über "New Record" erstellen Sie ein neues Item

In der Kontaktadresse wählen Sie zunächst eine “Contactdesignation” und legen die Adress-Details an. Zusätzlich kann ein Freitext angelegt werden.

Die Kontaktadressen-Darstellung finden Sie im Frontend hier. Ein Beispiel für eine Kontaktadressen-Detailseite hier.

Einbindung Kontaktadressen

Um die Kontaktadressen auf einer Seite darzustellen, müssen Sie nun im Backend wieder auf die “Page” Darstellung wechseln. Hier können Sie dann durch Klicken auf “+ Create new content” ein neues Content Element auf der Seite hinzufügen. Wählen Sie im erscheinenden Fenster “DOSB Contact addresses” und folgend “Contact adresses List”:

Im Tab “Plugin” können Sie dem Element nun eine Headline geben und die Plugin-Referenzen festlegen. Legen Sie durch Klicken auf “Page” den Verweis zur “Detail page” fest, indem Sie im Dialogfenster die passende Kontaktadressen-Detailseite auswählen:

Wählen Sie dazu im Seitenbaum die richtige Detailseite aus und fügen Sie diese, durch Klicken auf den Button der oben erscheint “+ Seitenname”, hinzu.

Nun müssen noch Kontaktadressen referenziert werden. Durch Klicken auf “Page” unter “Record Storage Page” kann im Seitenbaum der Order “Module” und dann “Kontaktadressen” ausgewählt werden. Wählen Sie diesen wieder aus, durch den Button “+ Kontaktadressen” oben im Fenster.

Ansprechpartner Modul

Die Anlage und Bearbeitung der “Ansprechpartner” Items funktioniert analog zu den Kontaktadressen. Bei der Anlage haben Sie hier zusätzlich die Möglichkeit Bilder einzubinden, die Sie in der Filelist aussuchen können. Außerdem können Social Media Kanäle und Download-Dateien hinzugefügt werden, die (z.T. auf der Detailseite) ausgespielt werden.

Einbindung Ansprechpartner

Die Einbindung der Ansprechpartner erfolgt analog zum Kontaktadressen-Modul. Lediglich bei der Auswahl der Verweise auf “Detail page” und “Record Storage Page” müssen die passenden Detailseiten/Module ausgewählt werden.

Außerdem haben Sie im Ansprechpartnermodul verschiedene Darstellungsmöglichkeiten. Die Listen-Darstellung sehen Sie hier. Die Teaser-Darstellung finden Sie hier. Und die Single-Select-Darstellung hier.

Download Modul

Die Anlage und Bearbeitung der “Download” Items funktioniert analog zu den Kontaktadressen. Bei der Anlage haben Sie hier zusätzlich die Möglichkeit Bilder einzubinden, die Sie in der Filelist aussuchen können. Außerdem können die Items Kategorien zugeordnet werden.

Einbindung Downloads

Die Einbindung der Downloads erfolgt analog zum Kontaktadressen-Modul.

Lediglich bei der Auswahl der Verweise auf “Detail page” und “Record Storage Page” müssen die passenden Detailseiten/Module ausgewählt werden.

Außerdem haben Sie im Downloadmodul verschiedene Darstellungsmöglichkeiten. Die Listen-Darstellung sehen Sie hier. Die Teaser-Darstellung finden Sie hier. Und die Single-Select-Darstellung hier.

Wissensthemen Modul

Die Anlage und Bearbeitung der “Wissensthemen” Items funktioniert analog zu den Kontaktadressen.

Bei der Anlage haben Sie hier zusätzlich die Möglichkeit einen Teaser-Text und einen Freitext hinzuzufügen. Außerdem können Sie Bilder einbinden, die Sie in der Filelist aussuchen können und Sie haben die Möglichkeit die Items in Kategorien zuzuordnen. Weiterhin können Verwandte Themen, Verwandte Ansprechpersonen und Verknüpfte Downloads eingepflegt werden.

Einbindung Wissensthemen

Die Einbindung der Wissensthemen erfolgt analog zum Kontaktadressen-Modul.

Lediglich bei der Auswahl der Verweise auf “Detail page” und “Record Storage Page” müssen die passenden Detailseiten/Module ausgewählt werden.

Außerdem haben Sie im Wissensthemenmodul verschiedene Darstellungsmöglichkeiten. Die Listen-Darstellung sehen Sie hier. Die Teaser-Darstellung finden Sie hier. Und die Single-Select-Darstellung hier.

Jedes Wissenthemen-Item hat eine Detailseite, auf der die eingepflegten Elemente angezeigt werden. Beispielhaft finden Sie hier eine Detailseite.

Stellenangebote Modul

Für die Anlage der Stellenangebote muss zwischen Intern und Extern unterschieden werden.

Dafür finden Sie im Seitenbaum im Ordner “Stellenangebote” die Unterordner “Intern” und “Extern”. Die Anlage und Bearbeitung der “Stellenangebote” Items funktioniert analog zu den Kontaktadressen.

Stellenangebote werden unterteilt in Extern und Intern.

Bei der Anlage haben Sie hier die Möglichkeit einen Titel des Stellenangebots hinzuzufügen, sowie die Organisation, PLZ und Einstelldatum/Enddatum anzugeben. Die Stellenangebot-Items können außerdem Kategorien zugeordnet werden, um sie leichter filtern zu können.

Bei den Externen Stellenangeboten kann zusätzlich noch ein PDF hochgeladen werden, welches Sie aus der Filelist aussuchen können, eine Email und eine Location angegeben werden.

Einbindung Stellenangebote

Die Einbindung der Stellenangebote erfolgt analog zum Kontaktadressen-Modul.

Lediglich bei der Auswahl der Verweise auf “Detail page” und “Record Storage Page” müssen die passenden Detailseiten/Module ausgewählt werden.

Hier finden Sie die Darstellung der Stellenangebote im Frontend. Jedes Stellenangebot-Item hat eine Detailseite, auf der die eingepflegten Elemente angezeigt werden. Beispielhaft finden Sie hier eine Detailseite.

News Modul

Die Anlage und Bearbeitung der “News” Items funktioniert analog zu den Kontaktadressen.

Bei der Anlage haben Sie hier zusätzlich die Möglichkeit das Item zu einem Top-News Item zu machen. Außerdem können Sie einen Teaser-Text und einen Freitext hinzuzufügen und Bilder einbinden, die Sie in der Filelist aussuchen können. Weiterhin kann ein Erstellungsdatum ausgewählt werden und eine Verwandte News verlinkt werden.

Unter dem Reiter “Inhalte” können noch weitere Inhalte auf die Detailseite eingepflegt werden und unter dem Reiter “Autor” kann ein Redakteur mit Name und Bild-Referenz hinzugefügt werden.

Unter dem Reiter "Autor" kann ein Redakteur der News angelegt werden.

Zuletzt haben Sie noch die Möglichkeit, das News-Item bestimmten Kategorien unterzuordnen, um es damit leichter auffindbar zu machen.

Einbindung News

Die Einbindung der News-Items erfolgt analog zum Kontaktadressen-Modul. Lediglich bei der Auswahl der Verweise auf “Detail page” und “Record Storage Page” müssen die passenden Detailseiten/Module ausgewählt werden.

Außerdem haben Sie im Newsmodul die Darstellungsmöglichkeiten: Listen-Darstellung, Top-News und Featured-News. Jedes News-Item hat eine Detailseite, auf der die eingepflegten Elemente angezeigt werden.

Termine Modul

Für die Anlage der Termine muss zwischen Internen und Externen unterschieden werden. Dafür finden Sie im Seitenbaum zwei Ordner mit den Titeln “Termine extern” und “Termine intern”. Weiterhin funktioniert die Anlage und Bearbeitung der “Termine” Items analog zu den Kontaktadressen.

Bei der Anlage haben Sie hier zusätzlich die Möglichkeit weitere Elemente durch “Inhaltselemente” und “+ Neu anlegen” hinzuzufügen. Außerdem können Sie die Termine Kategorien unterordnen, um Sie im Frontend durch Filter leichter auffindbar zu machen.

Einbindung Termine

Die Einbindung der Termine erfolgt analog zum Kontaktadressen-Modul. Lediglich bei der Auswahl der Verweise auf “Detail page” und “Record Storage Page” müssen die passenden Detailseiten/Module ausgewählt werden.

Außerdem haben Sie im Terminmodul verschiedene Darstellungsmöglichkeiten. Die Listen-Darstellung sehen Sie hier. Und eine Single-Select-Darstellung hier.

Formulare

Formular erstellen

Zum Erstellen oder Bearbeiten eines Formulars navigieren Sie im Seitenbaum zu “Formularen”, um die Übersicht aller bereits erstellten Formulare darzustellen. Um ein neues Formular zu erstellen klicken Sie oben auf “+ Neues Formular erstellen”.

Um ein Formular zu Erstellen klicken Sie im Seitenbaum auf "Formulare"

Im Dialogfenster, das sich öffnet, haben Sie die Möglichkeit zwischen einer (bereits angelegten) Formularvorlage und einem leeren Formular zu wählen. Ein leeres Formular bietet die Möglichkeit, ein neues Formular von Grund auf neu zu konfigurieren/zusammen zu stellen, während in einer Formularvorlage bestimmte Felder vordefiniert sind. Sie können trotzdem noch beliebig abgeändert, gelöscht, bearbeitet und umsortiert werden.

Wählen Sie im Dialogfenster zwischen einem leeren Formular oder einer bereits angelegten Formularvorlage.

Geben Sie im nächsten Dialogfenster den gewünschten Namen für das Formular an und klicken Sie auf “Weiter”. Überprüfen Sie die Daten und klicken nochmal auf “Weiter”. Anschließend gelangen Sie zum Konfigurator für das Formular, indem Sie die Möglichkeit haben, das Formular beliebig zusammen zustellen.

1. Mit dem Button “Neues Element erstellen” haben Sie die Möglichkeit ein gewünschtes Layout zu wählen, welches Sie durch einen zweiten Schritt (erneutes Klicken auf den Button) mit Elementen füllen können.

2. Mit dem Button “Neuen Schritt erstellen” haben Sie die Möglichkeit dem Formular eine zweite “Seite” hinzuzufügen. Dies kann nützlich sein, um ein langes Formular auf mehrere Schritte aufzuteilen, um es übersichtlich und kurz zu halten oder um dem User im letzten Schritt eine Zusammenfassung seiner Inputs auszuspielen oä.

3. Die beiden Toggel-Button mit den Dokument-Icons geben die Möglichkeit, zwischen der Bearbeitungsansicht und der Frontend-Ansicht zu wechseln. Sie können hier also im Bearbeitungsprozess anschauen, wie das Formular gerade aussieht.

1. Hier haben Sie die Möglichkeit Layout/Elemente anzulegen 2. Hier besteht die Möglichkeit das Formular in mehrere Schritte aufzuteilen 3. Hier kann die Ansicht des Formulars von Bearbeitung zu FE-Darstellung getoggled werden

Bei Klick auf die Elemente haben Sie in der rechten Spalte die Möglichkeit weitere Anpassungen an das jeweilige Feld vorzunehmen. Hier kann das Label, die Beschreibung, der Platzhalter und der Standardwert geändert werden. Außerdem kann das Feld zu einem Pflichtfeld geändert werden und ein gewünschter Validator hinzugefügt werden.

Durch Klicken auf ein Element haben Sie die Möglichkeit das ausgewählte Feld weiter zu konfigurieren.

Formular einbinden

Um ein Formular im Frontend einzubinden navigieren Sie im Seitenbaum zu “Seite” und wählen dann die gewünschte Seite aus. Fügen Sie ein neues Element hinzu über den Button “+ Neuen Inhalt erstellen”. Im Dialogfenster klicken Sie auf “Formulare” und wählen Sie dann “Formular” aus.

Um ein Formular einzubinden fügen Sie ein neues Inhaltselement auf der Seite hinzu und wählen "Formulare".

Im Reiter “Allgemein” kann eine Headline für das Formular festgelegt werden. Im Reiter “Plug-In” können Sie unter “Formulardefinition” das richtige Formular aus dem Dropdown-Menü auswählen. Ein Beispiel im Frontend finden Sie hier.

Wählen Sie das richtige Formular im Reiter "Plug-In" aus.

Exkurs SEO:

Welche Metadaten müssen gepflegt werden?

Es gibt viele verschiedene Metadaten, von denen allerdings nur ein Bruchteil im SEO-Alltag von höchster Relevanz sind. Die Tags werden in der Regel für jede einzelne (Unter-)Seite individuell gesetzt. Im folgenden werden die drei essentiellen Elemente erklärt, die auf jeder Website gesetzt sein sollten.

Title

Der Titel einer Seite wird mit dem title-Tag gesetzt. Dieser "Name" der Seite wird z.B. in den Suchergebnissen bei Google oder als Label in einem Browser-Tab genutzt. Er ist aus SEO-Sicht der relevanteste aller Meta-Tags und sollte mit größter Sorgfalt gewählt werden. Dabei gilt zu beachten:

• Jede Seite sollte einen einzigartigen,** aussagekräftigen** Titel erhalten, der den Inhalt prägnant mit 50-60 Zeichen (inkl. Leerzeichen) beschreibt.

• Der Titel sollte das spezifische Ziel-Keyword der Seite natürlich einbinden und ideal möglichst weit vorne platzieren.

• Der Wiedererkennungswert der gesamten Website kann durch ein einheitliches Branding (z.B. die Unternehmensbezeichnung/Marke/Dienstleistung) am Ende des Titels gesteigert werden.

Zur Strukturierung des Titels können teilweise Sonderzeichen eingesetzt werden, bei übermäßigem Gebrauch entfernen Google und Co. diese allerdings teilweise wieder. Weitgehend sicher sind z.B. | (Pipe) und - (Gedankenstrich). Je nach Inhalt der Website kann es sich auch anbieten, den Titel als Frage (oder Antwort) zu formulieren, welche die potenzielle Suchanfrage des Nutzers widerspiegelt.

Zu oberflächlich? Hier geht es zum "Deep Dive"!

Description

Neben dem Titel gilt die Meta-Description als zentrale Säule der SEO. Laut Google ist sie kein aktiver Ranking-Faktor, aber sie hat massiven Einfluss auf die Klickrate - schließlich gibt sie dem Nutzer Auskunft darüber, ob eine Seite die Antworten parat hält, die er sucht. Entsprechend sollte hier primär darauf geachtet werden, eine für die Zielgruppe ansprechende Description zu verfassen. Folgende Aspekte sollten bei der Erstellung beachtet werden:

• Die perfekte Description entspricht dem AIDA-Prinzip: Attention, Interest, Desire, Action; also Aufmerksamkeit gewinnen, Interesse & Verlangen erzeugen und zur Handlung auffordern.

• Die Description beschreibt strukturiert und prägnant den Inhalt der Zielseite mit 140-160 Zeichen (inkl. Leerzeichen).

• Durch spezifische Keywords ist direkt ersichtlich, welche Kernthemen auf der Seite behandelt werden.

• Zentrale Begriffe oder Synonyme, die im Titel keinen Platz gefinden, sollten möglichst weit vorne platziert werden.

• Die potenzielle Suchanfrage wird aktiv adressiert und der Nutzer durch einen ansprechenden CTA am Ende der Description zum Klick aufgefordert.

• Durch den behutsamen Einsatz von Sonderzeichen und ggf. Emojis kann die Description Aufmerksamkeit erregen und aus der Masse hervorstechen.

Wie beim title-Tag können Sonderzeichen eingesetzt werden, jedoch besteht immer das Risiko, dass Suchmaschinen diese als "Spam" herausfiltern. Behutsam eingesetzt können Icons u.ä. jedoch helfen, die Description zu strukturieren. Eine einfache Möglichkeit hierzu bietet der Snippet Generator von Systrix.

Für den CTA sollten aktive, auffordernde Verben wie "erfahren", "entdecken", "kaufen", "downloaden", "informieren" etc. verwendet werden.

Wichtig ist auch, in der Description nichts falsches zu versprechen. Die sogenannte Bounce Rate (Absprungrate) beschreibt das Nutzerverhalten, aus den Suchergebnissen eine Website zu öffnen und schon nach wenigen Sekunden zurück zu den Ergebnissen zu "springen", weil die Website nicht den versprochenen Inhalt vermittelt. Dieser wichtige Ranking-Faktor, quasi die "Ehrlichkeit" der Website, darf nicht unterschätzt werden.

Metadaten für Bilder

Bilder können und sollten mit dem alt-Tag sowie ergänzend mit dem title-Tag beschrieben werden. Sinnvoll ist auch, Bilder und anderen Medien vor dem Upload aussagekräftig zu benennen.

Der alt-Tag hat hohe SEO-Relevanz, den er gibt den Suchmaschinen Auskunft über den Inhalt des Bildes. (Mittels KI werden die Algorithmen immer besser, Bilder selbst "lesen" zu können, aber bis dahin brauchen sie noch Unterstützung beim "sehen".) Auch bei technischen Schwierigkeiten oder bei der Nutzung von Screen Readern wird der alt-Text genutzt, um Informationen zu dem eingebunden Bild anzubieten.

Der title-Tag hingegen ist primär für den Nutzer von Relevanz. Er wird z.B. als Tooltip ausgespielt, wenn ein Nutzer mit dem Mauszeiger über ein Bild hovert.

SEO: Weiterführende Links

• Snippet Optimizer - testen Sie hier die Ausgabe von title- und desc-Tag bei Google

• Snippet Generator - ein einfache Werkzeug zur Erzeugung von mit Symbolen angereicherten Snippets

• Sonderzeichen - ein Überblick über mögliche Sonderzeichen

• Open Graph Tags - ein Überblick über die Aussteuerung von Website-Links auf Social Media Plattformen

• Ryte Wiki - umfangreiches Glossar zu allen relevanten SEO-Aspekten (und mehr)

• Meta Tags - eine umfassende Liste von nutzbaren Metadaten

• Yoast Focus-Keyphrase - wie man das perfekte Keyword wählt