Spis treści w WordPress – sposób prosty i przyjazny SEO

Spisem treści w kontekście stron internetowych zwykliśmy nazywać listę linków w jej treści, która pełni rolę dodatkowej nawigacji. Linki tego typu odnoszą się bardzo często do bieżącej strony wyświetlonej w przeglądarce i za pomocą hash-linka przenoszą użytkownika do poniżej „zakotwiczonego” miejsca. Spis treści znacząco poprawia User Experience, tym bardziej jeżeli mamy do czynienia z obszernym artykułem lub złożoną podstroną danego serwisu.

Spis treści często możemy spotkać w artykułach blogowych ale nic nie szkodzi na przeszkodzie aby stosować je także na stronach produktowych czy na stronie typowo technicznej (np. polityka prywatności lub regulamin). W tym wpisie pokażę jak tworzyć spisy treści w edytorze blokowym WordPress.

Tworzenie spisu treści w WordPress bez wtyczki

Na początku wybierzmy te obszary, do których chcemy umieścić link w spisie treści. Większość bloków pozwala na przypisanie kotwicy HTML. W aktualnej wersji WordPress pole to jest widoczne na prawym pasku bocznym po rozwinięciu panelu Zaawansowane:

Nadawane w tym miejscu nazwy muszą być zgodne z analogicznymi wymogami jak w przypadku adresów URL. Dobrą praktyką jest nieużywanie znaków specjalnych, diakrytyzowanych a także dużych liter. WordPress spróbuje nas wyręczyć i automatycznie przerabia wpisywane tam frazy aby te odpowiadały wymogom adresów URL.

Kiedy wszystkim blokom przyporządkujemy kotwice HTML – najczęściej są to nagłówki h2 lub h3, możemy przystąpić do tworzenia spisu treści. W dowolnym miejscu na stronie – a najlepiej po wstępie do artykułu – należy dodać listę numerowaną bądź punktowaną. Wszystkie lub wybrane elementy z tej listy mogą być teraz linkiem do wcześniej utworzonych kotwic:

Zalety umieszczania spisu treści we wpisach i stronach

Umieszczanie spisów treści w na obszernych stronach i we wpisach ma wiele zalet:

• znacznie ułatwia znalezienie najważniejszych informacji z perspektywy użytkownika,
• wyszukiwarki mogą umieścić najważniejsze pozycje ze spisu w wynikach wyszukiwania co może zwiększyć klikalność naszej strony w SERPach,
• spis treści umożliwia w całkowicie naturalny sposób „upchnąć” więcej słów kluczowych w treści artykułu,
• dodatkowe kotwice umożliwiają precyzyjniejsze linkowanie wewnętrzne w innych artykułach – wówczas nie musimy linkować do artykułów tylko do poszczególnych bloków – to znacznie poprawia User Experience i czas spędzany na naszej stronie internetowej.

Oczywiście, korzyści te są zauważalne wtedy, kiedy spis treści nie zdradza znamion spamu i nie dodajemy go „na siłę” tylko tam gdzie faktycznie ma on sens. Komicznie wygląda spis treści, który zajmuje powiedzmy 1/4 obszaru wpisu lub odnosi się do każdego nagłówka h2 lub h3. Nie powinno się go dodawać do wpisów krótkich lub takich gdzie musimy dosłownie wymyślać jak podzielić wpis aby możliwe było zastosowanie spisu treści.

Kiedy sensownie dzielimy wpis na poszczególne rozdziały wyszukiwarka może wykorzystać wybrane pozycje i zaprezentować je już w wynikach:

Sytuacja taka jest bardzo korzystna, bo zwiększa to kilkalność naszej strony a to naturalnie zwiększa ruch, reputację i pozycje naszego serwisu.

Korzyści z ręcznego tworzenia spisu treści w WordPress

Mimo, że istnieje wiele wtyczek, które automatyzują ten proces, takie „ręczne” tworzenie spisu treści ma wiele zalet. Po pierwsze: nie instalujemy wtyczki, która może działać w nieoczekiwany sposób, po którejś z aktualizacji tej wtyczki, po aktualizacji samego WordPressa bądź zmiany wersji PHP. Po drugie: stworzony przez nas spis treści jest spójny wizualnie i nie dodaje własnych stylów CSS i ikon, które znacząco obniżają wydajność strony internetowej. Po trzecie: mamy wpływ na to jakie frazy są umieszczone zarówno w kotwicach jak i w spisie treści. Nie wszystkie elementy muszą być klikalne, możemy dodawać komentarze i pomijać niektóre nagłówki. To umożliwia nam urozmaicić i zdywersyfikować frazy użyte w treści artykułu co ma zazwyczaj pozytywny wpływ na SEO i wspiera pozycjonowanie na długi ogon słów kluczowych co fachowo określamy jako pozycjonowanie long-tail.

Tworzenie własnej wtyczki do tworzenia automatycznego spisu treści

Ręczne tworzenie spisu treści to według mnie najlepsza metoda na umieszczenie spisu treści, który wygląda i działa tak jak tego chcemy. W skrajnych sytuacjach możemy stworzyć własną wtyczkę WordPress do tworzenia spisu treści. Może to być własny blok Gutenberga, lub shortcode, który po prostu będzie parsował kod HTML w poszukiwaniu nagłówków h2 i h3. Na podstawie ustalonych przez nas reguł generuje on automatycznie kod HTML spisu treści, który umieszczamy w osobnym bloku.

Aby tego dokonać, wystarczy pobrać treść bieżącego wpisu i stworzyć nowy obiekt klasy DomDocument():

$current_content = get_post_field('post_content', get_the_ID());
$dom = new DomDocument();
@$dom->loadHTML('<?xml encoding="utf-8" ?>'.$current_content);
$h2h = $dom->getElementsByTagName('h2');

Następnie, tworzymy kod HTML spisu treści na podstawie odczytanych nagłówków:

<ol>
<?php 
foreach ( $h2h as $h2 ) {
   $attributes = $h2h -> attributes;
   if (strlen( $h2->getAttribute("id")) > 1 ){ ?>
      <li><a href="#<?php echo $h2->getAttribute("id"); ?>"><?php echo $h2->nodeValue ?></a></li> 
   <?php }
} ?> 
</ol>

Dzięki takiemu podejściu, nadal mamy wpływ na frazy użyte w kotwicach HTML bo generujemy tylko te pozycje, którym nadano unikalne kotwice HTML w edytorze blokowym.

Podsumowanie

Jak widać dodanie spisu treści w artykułach WordPress jest możliwe bez używania jakichkolwiek wtyczek. Ręczne tworzenie spisu treści ma wiele zalet i samo w sobie jest świetnym sposobem na zaktualizowanie naszych wpisów. W szczególnych przypadkach można stworzyć własną wtyczkę, która będzie automatycznie tworzyć spis treści na podstawie opublikowanej treści i umieszczonych w niej nagłówków.