Dlaczego warto mieć spis treści na blogu?

Table of content, czyli spis treści to niedoceniany element strategii SEO. Pozwala uporządkować zagadnienia jakich dotyczy artykuł, pomaga czytelnikowi w odnalezieniu się w treści, a także wpływa na to jak będzie wyglądał wpis w wynikach wyszukiwarki Google. Dowiedz sią jak dodać spis treści na blogu i ciesz się czytelną stroną!

Co to jest kotwica?

Polskie określenie, czyli kotwica to dosłowne tłumaczenie z języka angielskiego, w którym opisywany przez nas rodzaj linku zwie się anchor. Kotwice nazywane są również określeniami anchor text, anchor link albo jump link, czyli link służący do przeskoczenia do konkretnej treści/danego miejsca na stronie.

Czym jest Jump Link?

Jump link jest to rodzaj kotwicy, którą wykorzystuje się najczęściej w obrębie danej podstrony. Linki skoku przydają się na stronach, na których mamy bardzo dużo treści i chcemy przekierować użytkownika do konkretnego miejsca, np. na sam dół strony albo na samą górę (przykładowo, odsyłacz "Powrót do góry"). Kliknięcie w link powoduje skok do określonego miejsca i ułatwia użytkownikowi korzystanie ze strony.

Kotwice a spis treści w artykule

Kotwice tzw. jump links świetnie sprawdzają się w długich artykułach poradnikowych, w których znajduje się wiele śródtytułów odpowiadających konkretnym zagadnieniom. Korzystając z nich można stworzyć spis treści, który wyraźnie wskaże tematy opisane w tekście, a po kliknięciu w dany element spisu przeniesie czytelnika do interesującego go miejsca.

Gdzie umieścić spis treści w artykule?

Spis treści może pojawić się bezpośrednio pod tytułem, lecz nie jest to rozwiązanie idealne, gdyż traci się wtedy potencjał miejsca tzw. above the fold, czyli tego co jest widoczne na stronie internetowej tuż po jej załadowaniu, bez konieczności przewijania w dół. Jest to najważniejsze miejsce z punktu widzenia SEO, a także użytkownika strony, dlatego warto wykorzystać je na wstęp, a dopiero po nim wstawić spis (tak jak jest to zrobione w artykule, który właśnie czytasz).

Spis treści na stronie można również umieścić w sidebarze, czyli prawej lub lewej kolumnie, obok tekstu. Takie ulokowanie może być połączone z podążaniem spisu za czytelnikiem podczas scrollowania, czyli tzw. pływający spis treści – widać go przez cały czas, nie trzeba wracać na górę strony, aby szybko przejść do innego zagadnienia. Niestety takie rozwiązanie nie sprawdzi się, gdy użytkownik strony czyta artykuł na smartfonie – wtedy pojawi się on w tradycyjnym miejscu, czyli na wstępie do artykułu.

Dlaczego warto tworzyć spisy treści w artykułach na blogu?

Dodanie spisu treści do artykułu na blogu może przynieść wiele korzyści. Jest to fajny dodatek dla czytelnika, gdyż może szybko przeskoczyć do interesującego go zagadnienia i jest to także fajny dodatek ze względu na działania związane z pozycjonowaniem strony.

Spis treści na blogu ułatwia nawigację po stronie – to główna zaleta spisu treści. Czytelnik nie musi przedzierać się przez cały artykuł, aby dowiedzieć się czy znajdzie w nim rozdział dotyczący konkretnego tematu.

Oszczędza czas czytelnika – pozwala w prosty i szybki sposób przejść do sekcji interesującej odbiorcę.

Wydłuża czas w jakim użytkownik przebywa na stronie – kluczowe są pierwsze sekundy, spis treści może zaważyć na tym czy czytelnik zostanie na naszej stronie czy będzie szukał informacji gdzie indziej.

Ułatwia szybkie odnalezienie interesującej treści na urządzeniach mobilnych, na których korzystanie z kombinacji przycisków CTRL+F jest niemalże niemożliwe.

Dobrze stworzone etykiety w kotwicach ułatwiają analitykę, np. w Google Search Console można sprawdzić jakie konkretnie tematy w artykule zainteresowały użytkowników. Z tego powodu warto tworzyć etykiety, które "coś mówią", etykiety 1, 2, 3, 4 niestety nie będą wartościowe.

Google może wyciągnąć w wynikach elementy spisu treści do linków witryny tzw. Przejdź do sekcji. Jest to dodatkowy link w meta description - jak na załączonym obrazku - widzisz te pytania pod tekstem? To elementy spisu treści, które Google wyciągnął z artykułu jako linki.

Google lubi linkowanie wewnętrzne, ponieważ oznacza to, że dba się o odbiorców treści, informacje są czytelne i uporządkowane.

O czym należy pamiętać tworząc spis treści na blogu?

Jeśli zastanawiasz się czy użyć myślnika czy podkreślnika do rozdzielania wyrazów w kotwicy, to możesz podejść do tego wizualnie. Obecnie dla Google nie ma znaczenia, który z tych znaków oddziela wyrazy w linku, lecz ma to znaczenie dla oka. Tekst_z_podkreślnikami_jest_łatwiejszy_do_odczytania niż tekst-oddzielony-myślnikami. Może to mieć znaczenie, gdy wrzucisz link na FB – ten z podkreślnikami zostanie naturalnie odczytany przez odbiorcę jak tekst ze spacjami.

Dynamicznie generowany spis treści na blogu czy tworzony ręcznie?

W Joomli i WP można używać wtyczek, które dynamicznie generują spis treści – rozwiązanie to ma zalety i wady.

Zaletą jest z pewnością to, że jeśli aktualizuje się stare artykuły na stronie, wtedy nie trzeba pamiętać o utworzonym ręcznie spisie. Jednak powinno się na to patrzeć realnie – jak często i jak wiele artykułów aktualizujesz? Zwykle rzadko wraca się do starych treści, aktualizuje się jedynie te o wysokim współczynniku wyświetleń, lecz głównie dodaje się nowe artykuły na bloga.

Oczywiście zaletą jest także wygoda i oszczędność czasu. Automatycznie generowany spis treści nie wymaga znajomości HTML, programów do edycji tekstu, makr itd.

Wadą zaś jest kolejna wtyczka, którą trzeba aktualizować i pilnować, aby nie obciążała skryptu strony.

Warto również spojrzeć na zagadnienie perspektywicznie, jeśli kiedyś zmienisz szablon, migrujesz do innego CMS, dynamicznie generowane spisy treści znikną, w ich miejscu pozostanie jedynie tag, który sprawiał, że wynik polecenia skryptu wyświetlał się jako spis.

Zaletą utworzonego ręcznie spisu treści jest to, że poprawnie utworzony spis z linkami względnymi, po migracji będzie nadal działał. Kolejnym plusem jest to, że poszczególne elementy spisu treści mogą mieć inny tekst niż śródtytuł, do którego prowadzą – można wprowadzić krótsze hasła zamiast długich nagłówków.

Jak ręcznie dodać spis treści w artykule na blogu?

Aby dodać ręcznie spis treści na bloga potrzebna jest znajomość kodu HTML, ponieważ w takim widoku dodaje się etykiety kotwic. Można przyspieszyć sobie pracę tworząc makra w Notepad++ i funkcje w Excel, które połączą fragmenty w pełny kod.

Aby ułatwić sobie pracę, warto skopiować tekst z kodu artykułu do Notepad++ (jest to darmowy notatnik rozszerzony o różne, przydatne funkcje) i włączyć widok, w którym poszczególne elementy HTML będą podświetlone różnymi kolorami (Składnia>H>HTML).

W kolejnej karcie dobrze jest wstawić listę nagłówków (śródtytułów), z których ma powstać spis treści – w tym miejscu można wykorzystać makro, aby usunąć polskie znaki, znaki przestankowe i inne znaki, podmienić odstępy na myślniki lub podkreślniki. Jednak do tych operacji potrzebne są dodatkowe umiejętności.

Możesz także utworzyć link ręcznie bez makr, czyli we wszystkich elementach spisu treści podmienić spacje na myślniki lub podkreślniki, usunąć niepotrzebne znaki i zamienić wszystkie polskie litery na ich odpowiedniki bez "ogonków i kresek".

Co ostatecznie musisz uzyskać?

Potrzebny jest Ci kod HTML ze spisem treści i kotwice do połączenia elementów spisu z miejscami, do których czytelnik ma przeskoczyć po kliknięciu w nie, czyli w tym przypadku do śródtytułów w artykule na blogu.

Kotwica składa się z odsyłacza i etykiety.

Oto przykład jak wygląda w kodzie HTML adres odsyłacza w spisie treści:

<a href="#spis_tresci_1">Spis treści 1</a>

Oto przykład jak wygląda w kodzie HTML etykieta do tego odsyłacza:

<span id="spis_tresci_1">Spis treści 1</span>

Etykiety mogą również rozpoczynać się od tagu HTML, w którym jest tekst, do którego prowadzi link np.

<h2 id="spis_tresci_1">Spis treści 1</h2>

<p id="spis_tresci_1">Spis treści 1</p>

<a id="spis_tresci_1">Spis treści 1</a>

Uwaga! Powyższe przykłady opierają się na tzw. linkach względnych, czyli link odwołuje się do kotwicy, która jest w tym samym artykule. Jeżeli Twoja strona nie obsługuje linków względnych lub chcesz odwołać się do innego artykułu niż ten, w którym jest spis treści, musisz zastosować linki bezwględne, czyli takie z pełną ścieżką dostępu:

<a href="/adrestwojejstrony.com/blog/tytul-artykulu#spis_tresci_1">Spis treści 1</a>

Oto przykład kodu HTML ze spisem treści z linkami względnymi:

<p>Spis treści:</p>
<ul>
<li><a href="#co_to_jest_kotwica">Co to jest kotwica?</a></li>
<li><a href="#czym_jest_jump_link">Czym jest Jump Link?</a></li>
</ul>
<h2 id="co_to_jest_kotwica">Co to jest kotwica?</h2>
<p>Polskie określenie, czyli kotwica (...)</p>
<h2 id="czym_jest_jump_link">Czym jest Jump Link?</h2>
<p>Jump link jest to rodzaj kotwicy (...)</p>

Jak uatrakcyjnić spis treści w artykule?

Spis treści to najczęściej lista nieuporządkowana lub uporządkowana, czyli każdy element jest w jakiś sposób wypunktowany, najczęściej za pomocą kropek (znacznik <li>) lub liczb (znacznik <ol>). Można jednak zrobić spis, w którym punktory będą oznaczone ikonkami np. fa-icon, albo innymi glifami, albo obrazkami.

Aby np. dodać ikonki fa-icon, konieczne jest zainstalowanie na stronie Font Awesome, a później już z górki, czyli pozostaje dodanie kodu w odpowiednich miejscach.

Np. w naszym spisie treści używamy fa-icon fa-arrow-circle-right w kolorze pomarańczowym:

<i class="fas fa-arrow-circle-right" style="color: #ff7302;"> </i>

Czy spis treści jest konieczny na blogu?

Dodawanie spisu treści do artykułów na blogu nie jest wymagane. Jeśli artykuł jest krótki, to nawet lepiej go pominąć, gdyż dwie pozycje w spisie treści będą wyglądały karykaturalnie. Jednak jeżeli tekst jest długi i zawiera wiele śródtytułów, warto go wzbogacić o spis tematów, w ten sposób uporządkujesz artykuł dla odbiorców i robotów.