Warum sind Inhaltsverzeichnisse wichtig für deine Website?
Was gibt es Schöneres, als nach einer gründlichen Google Suche endlich den richtigen Beitrag gefunden zu haben? Fehlt nur noch der Klick auf den Link und Zack… versteckt sich das gesuchte Content Piece in einem ellenlangen Blogbeitrag.
Nach kurzem Suchen und Scannen des Beitrags siegt dann doch die Frustration und die Website wird wieder verlassen. Ohne Inhaltsverzeichnis und sinnvolle Zwischenüberschriften ist das Auffinden des richtigen Absatzes kaum möglich.
In Zeiten von YouTube, TikTok und vielen weiteren Plattformen mit Video-Formaten, die Wissen schnell und visuell kommunizieren, sind Blogs und andere textlastige Content-Formate eher an den Rand gerückt. Dennoch sind Blogs eines der vertrauenswürdigsten und meistgeclickten Formate auf Google (Quelle: Search Engine Journal).
Daher gibt es fast kein Unternehmen und fast keine Marketingstrategie, die nicht von Blogging und Textformaten auf ihrer Website profitieren kann.
Verbessere die Nutzererfahrung und so die Verweildauer auf deinem Blog
Steht der Blog auf der eignen Website, ist die Arbeit damit aber noch lange nicht erledigt. Regelmäßige Updates und relevante Beiträge wollen veröffentlicht werden und so langfrstig neue Leser und am besten natürlich neue Kunden auf die eigene Website gelockt werden. Das Problem bei vielen Seiten: Blogs werden stiefmütterlich behandelt, es gibt keine anständige Navigation und wichtige Inhalte sind nicht hervorgehoben.
Ein automatisches Inhaltsverzeichnis für deine Beiträge kann also zu folgenden Vorteilen führen:
- bessere Nutzererfahrung durch einfache Navigation der Beiträge
- einfaches Auffinden von wichtigen Inhalten
- bessere Lesbarkeit und geringere Überlastung durch lange Texte
- Betonung wichtiger Abschnitte und Inhalte, die du hervorheben willst
- geringere Absprungrate
- Erhöhung der Seitenaufrufe durch höhere Zufriedenheit
Durch eine einzige einfache Maßnahme erhöhst du also perspektivisch die Zufriedenheit deiner Websitebesucher und steigerst so die Verweildauer auf deinem Blog.
Zufriedenheit = Höhere Reichweite und höhere Conversion Rate
Sind Leser einmal zufrieden mit deinen Inhalten, ist es nicht verwunderlich, wenn sie regelmäßig wiederkommen und ein höheres Vertrauen zu deinem Business aufbauen. Weitere Unterseiten werden besucht und dein Unternehmen wird als relevant in deiner Branche eingestuft.
Die Wahrscheinlichkeit, dass ein Call bei dir gebucht wird, dein E-Book heruntergeladen wird oder direkt ein Produktkauf erfolgt, steigt also massiv an.
Pro-Tipp vom VE-Team: Arbeite mit Conversion Elementen in deinen Posts und fordere Leser zu Handlungen auf.
Optimiere deinen Content für Suchmaschinen (SEO)
Ein weiterer Benefit, den dein Blog durch ein Inhaltsverzeichnis erhält ist, dass Content immer gut strukturiert wird und so besser bei Suchmaschinen indexiert werden kann. Durch klare Semantik und die Signalwirkung deines Inhaltsverzeichnisses, kann Google sogenannte Jump Links zu den Suchergebnissen hinzufügen. Ein Jump Link ist quasi eine Punkt deines Inhaltsverzeichnisses, der direkt in den Suchergebnissen angezeigt wird und einen Sprung direkt zu dieser Überschrift ermöglicht.
Aktuelle Möglichkeiten für Inhaltsverzeichnisse in Webflow
Webflow bietet bis heute (Stand 10/2023) keine native Möglichkeit, ein Inhaltsverzeichnis für deine Rich Text Elemente zu generieren. Bisher ist auch nichts, auch nicht in Webflow Professional Experts Kreisen, in dieser Richtung angekündigt. Wie du aktuell dennoch ein Inhaltsverzeichnis in Webflow generieren kannst:
1. Manuelle Einrichtung
Der technisch wohl einfachste Weg, allerdings auch der fehleranfälligste, ist die manuelle Einrichtung von Inhaltsverzeichnissen für deine Rich Text Elemente. Mit Hilfe von Ankerlinks und benutzerdefinierten HTML Attributen bei den Headlines, kannst du dir so relativ einfach Inhaltsverzeichnisse selber zusammenbauen. Das Problem hierbei ist die geringe Skalierbarkeit hinsichtlich Content-lastiger Websites und CMS Collections.
2. Drittanbieter Tools
Das Problem ist natürlich schon länger bekannt und so ist es nicht verwunderlich, dass es einige Drittanbieter-Lösungen für automatische Inhaltsverzeichnisse in Webflow gibt. Die bekannteste Lösung ist die von Finsweet Attributes, benötigt allerdings minimale Erfahrung im Umgang mit Custom Data Attributes und dem Aufsetzen von Custom Code Lösungen und ist somit nicht unbedingt Beginner freundlich. Ansonsten gibt es einige weitere Lösungen wie z.B. von Letterdrop und Flowrite, allerdings erfordern auch diese Lösungen ein wenig technisches und tiefgründiges Webflow Know-How.
3. Custom Code
Custom Code in Webflow ist immer eine Sache. Die einen lieben es, die anderen sagen: “Da nutze ich schon ein no-code Tool und muss jetzt trotzdem mit Code rumhantieren.” Wenn du dich allerdings ein wenig mit Custom Code auskennst, kannst du dir entweder ein Custom JavaScript selber schreiben, welches dir Inhaltsverzeichnisse generiert oder aber externe Code-Bausteine einbetten, die dir Lösung versprechen. Das Problem hier kann die Usability für dich sein, die bei geringern Code-Kenntnissen eingeschränkt sein könnte.
Automatisches Inhaltsverzeichnis mit der Lösung von VE Resources
Der vermutlich einfachste Weg ein Inhaltsverzeichnis für Webflow Rich Text Elemente (natürlich auch für CMS Beiträge) zu generieren, ist das “Automatic ToC” von VE Resources. Einmal eingebunden, kannst du das fertige Layout ganz nach deinen Vorlieben stylen. Das Inhaltsverzeichnis zeigt automatisch alle H2 und H3 Überschriften deines Rich Texts als klickbare Links an und macht die Navigation deines Contents so zum Kinderspiel. Das Live-Beispiel kannst du dir direkt hier anschauen: https://automatic-toc-for-webflow-rich-text-ve.webflow.io/
Wie kann ich das Automatic ToC von VE Resources nutzen?
Hierfür fragst du uns einfach über resources@virtual-entity.com an. Wir können dir meistens in wenigen Tagen helfen und das Inhaltsverzeichnis nach deinen Anforderungen einbauen. Am Ende findest du die Komponente dann 100% customizable in deinem Webflow Designer und kannst alles nach belieben umstylen.
Kann ich das Inhaltsverzeichnis selber stylen?
Das Automatic ToC kommt mit minimalem eigenen Styling, sodass du es direkt verwenden kannst. Solltest du dem Inhaltsverzeichnis aber deine eigene Note verpassen wollen, findest du hier eine kleine Dokumentation darüber, wie du die Liste, die Listen-Items und die Links deines Inhaltsverzeichnisses umstylen kannst:
Step 1: Füge den Code aus dem HTML Embed: (custom code) toc_script in ein HTML Embed in einem <div> innerhalb deiner Website ein. In diesem <div> wird zukünftig das Inhaltsverzeichnis angezeigt. Gib dem <div> noch die ID: toc-wrapper, um diesen Schritt abzuschließen.
Step 2: Anschließend musst du sicherstellen, dass das Rich-Text-Element, das im Inhaltsverzeichnis zusammengefasst werden soll, einen div-Wrapper mit der ID: content hat.
Step 3: Um die Inhaltsverzeichnis-Liste zu gestalten, verwende einfach die Klasse: toc_uolist (füge diese Klasse einer beliebigen ungeordneten Liste irgendwo in deinem Webflow-Projekt an und style die Liste nach deinem Liking). Um die Listen-Items zu stylen, verwenden die Klasse: toc_item (wende sie auf ein beliebiges Listen-Item an) und die Klasse: toc_link verwendest du, um die Links im Inhaltsverzeichnis zu stylen (wende sie auf einen beliebigen Link an).
Step 4: Wenn du final noch einen “Active State” zu deinen Links hinzufügen möchtest, gib dem Link mit der Klasse: toc_link noch die Combo-Klasse: toc_is-active. Diese Combo-Klasse kannst du jetzt so stylen, wie aktive Links in deinem Inhaltsverzeichnis aussehen sollen.