Ein typisches Problem für alle, die mit Squarespace bloggen: Wie erstelle ich ein Inhaltsverzeichnis für meine langen Blogartikel? Am liebsten automatisch.
Hier sind drei Wege, wie du das lösen kannst, wobei nur eine der Lösungen - dank Plugin - automatisch funktioniert:
Und jetzt lass uns diese Möglichkeiten im Detail anschauen:
1. Inhaltsverzeichnis manuell erstellen (Anker Links)
Alles über Anker-Links kannst du im Squarespace Hilfe-Center nachlesen. Falls du relativ sicher in Squarespace bist, sind hier kurz die einzelnen Schritte für unseren konkreten Fall - nämlich Inhaltsverzeichnis im Blogartikel - notiert:
Schritt - Überschriften in Code Blöcke umwandeln. Das heißt: statt Text Block fügst du einen Code Block hinzu und schreibst dort die Überschriften so rein:
<h2 id="eindeutige-id">Deine Überschrift</h2>Schritt - Inhaltsverzeichnis-Links erstellen. Das heißt: du fügst einen Text Block ganz oben in deinem Blogartikel ein, schreibst dort die einzelnen Kapitelüberschriften untereinander und verlinkst diese zu den einzelnen Kapitelüberschriften (= eindeutigen IDs). Das sieht dann in etwa so aus:
https://beispielwebsite.com/seitenslug/#eindeutige-idSchritt - Speichern
Für mehr Details kannst du den Squarespace Hilfe-Artikel durchgehen. Dort siehst du übrigens auch, dass Squarespace selbst ein Inhaltsverzeichnis nutzt, um den langen Artikel übersichtlicher zu machen und angenehmer zum Lesen.
Screenshot im Squarespace Hilfe-Center: Die Hilfeartikel haben meist ein Inhaltsverzeichnis an der Seite, damit man sich bei langen Artikeln einfach und schnell zurechtfindet.
Cooler Nebeneffekt für SEO:
Um Ankerlinks zu verwenden, musst du deine Blog-Überschriften in einen Code Block umwandeln. Darin bekomm jede Überschrift eine eigene ID, auf die nicht nur dein Inhaltsverzeichnis verlinken kann, sondern auch Google. Das heißt, wenn jemand etwas ganz spezielles sucht worüber du in einem ausführlichen Blog-Artikel geschrieben hast, kann Google in den Suchergebnissen auf genau diese Stelle innerhalb deines Blogartikels führen. Das macht Besucher happy, Suchmaschine happy und dich happy ;-)
2. Inhaltsverzeichnis semi-automatisiert erstellen (Spreadsheet)
Diese Lösung habe ich bei Katya gefunden und wollte sie unbedingt testen. In diesem Blogartikel ist das Inhaltsverzeichnis mit ihrer Methode erstellt.
Ich muss sagen, dass ich diese Lösung eher dem fortgeschritten User empfehle. Vor allem, wenn man nichts mit CSS & HTML am Hut hat, empfindet man das wahrscheinlich als ein bisschen komplex.
Ich selbst werde diese Lösung auf jeden Fall noch ein bisschen weiter testen und ggf. für den deutschsprachigen Raum anpassen. (Und dann auf jeden Fall hier im Artikel ergänzen.) Das Ding ist nämlich: Wenn du den generierten Code aus dem Spreadsheet auf deinem Blog übernimmst, stehen teilweise noch englische Begriffe da (z.B. Content statt Inhaltsverzeichnis), die man dann auf der Website wieder korrigieren muss. Das kann ich “bequemer” machen, damit du dir einen weiteren Schritt sparst. Wir wollen ja hier effizient arbeiten, gel? 😉
Aber im großen und ganzen fand ich die Lösung echt interessant als Alternative zum kostenpflichtigen Plugin.
Okay! Und wie funktioniert das jetzt?
Ich erkläre hier kurz aus der Vogelperspektive, wie das mit diesem Spreadsheet funktioniert und empfehle dir für detaillierte Anleitung den Artikel von Katya zu lesen.
Bisschen Hintergrund-Wissen:
HTML ist für das WAS zuständig. Du sagst also: Ich möchte eine Überschrift (h1), einen Textparagraph (p) oder Links (a) darstellen.
CSS ist für das WIE zuständig. Du sagst also: Ich möchte, dass die Überschrift 30px groß und rot ist (font-size: 30px; font-color: red;)
Katyas Spreadsheet:
Du nutzt das Spreadsheet, um
den Code für die einzelnen Kapitelüberschriften zu generieren
den Code für deinen “Inhaltsverzeichnis-Block” zu generieren
in dem du die gewünschten Kapitelüberschriften in die vorgesehenen Zeilen in die Tabelle reinschreibst.
Das Spreadsheet erledigt den Rest und spuckt dir die passenden Code-Zeilen pro Kapitelüberschrift und den ganzen Code für das Inhaltsverzeichnis aus.
Im Prinzip machen wir hier das gleiche, wie vorhin manuell mit den Anker Links, nur dass du jetzt die HTML Zeilen für die Code-Blöcke nicht selbst schreiben musst, sondern nur deine Kapitelüberschrift und dann den generierten Code auf der Website einfügst.
Benutzerdefiniertes CSS:
Damit dein “Inhaltsverzeichnis-Block” auch gestyled werden kann, kopierst du den CSS Code unter Design → Benutzerdefiniertes CSS und passt den Stil so an, wie es zu deiner Website am besten passt. Das ist eine einmalige Sache und wird dann jedesmal angewendet, wenn du in einem neuen Blogbeitrag wieder so einen “Inhaltsverzeichnis-Block” hinzufügst.
That’s it. Mehr ist es eigentlich nicht. Wie gesagt detaillierte Anleitung, sowie das Google Spreadsheet und den CSS Code findest du in Katyas Artikel. Wenn du Fragen hast oder Hilfe brauchst, schreib mir gerne.
3. Inhaltsverzeichnis automatisch erstellen (Plugin)
Hierzu brauche ich nicht viel erzählen. Ein Plugin ist die schnellste und bequemste Möglichkeit ein Inhaltsverzeichnis in deinen Blogartikeln zu erstellen. Es kostet zwar ein bisschen was, aber es spart ja auch Zeit.
Mit dem Plugin musst du dann nur noch in jedem Blogbeitrag den Code-Block kopieren. Oder noch besser: eine Blogbeitrag-Vorlage anlegen, wo das Plugin drin ist und dann jeden neuen Blogbeitrag mit der Vorlage starten.
Hier ist das einzige, was ich bisher gefunden habe. (Werde diese Liste ergänzen, wenn mir wieder was über den Weg läuft)
Wenn du deine Website in Squarespace erstellt hast und dich solche Anleitungen interessieren, trage dich in meine E-Mail Liste ein. Ich schreibe einmal im Monat über Updates in SQSP, Online Marketing und die Selbständigkeit im Allgemeinen.