Obsah článku:
- Instalace pluginu WP Code
- Instalaci pluginu WP Code provedete následovně:
- Jak vytvořit table of content ve WordPressu pomocí snippetu
- Jak snippet funguje
- Proč je Table Of Content dobrý pro SEO?
- Závěr
Table of content (obsah, nebo seznam kapitol) je seznam odkazů, který ukazuje hlavní nadpisy nebo sekce v článku. Obvykle se nachází na začátku článku a umožňuje čtenářům rychle najít konkrétní část, která je zajímá. Některé pagebuildery jako Elementor nebo SeedProd mají tuto funkci pomocí widgetu nativně. Pokud ale používáte defaultní Gutenberg editor, může být pro někoho komplikované tuto funkci přidat. Proto se v tomto článku podíváme na snippet, který bude Table Of Content na začátek článků přidávat automaticky za Vás. Tento snippet je navržen tak, aby sám generoval a přidával Table Of Content na základě nadpisů (hlavně <h2> a <h3>). Pro funkčnost snippetu budete potřebovat pouze jediný, celkem všestranný plugin, WPCode.
Instalace pluginu WP Code
Abyste mohli vkládat kódy do svého webu, můžete zvolit dvě varianty. Kód vložíte natvrdo do souboru, kam patří, nebo použijete plugin, který bude části kódu vkládat do webu za běhu. Druhá variante je lepší z jednoho prostého důvodu. Je bezpečnější a zároveň se Vám kód nevymaže s každou aktualizací, která přepíše soubor s Vaším kódem.
Instalaci pluginu WP Code provedete následovně:
- klikněte si v levém menu na položku “Pluginy“
- v podmenu zvolte položku “Přidat nový“
- v pravém horním rohu si všimněte vyhledávacího pole
- napište do něj klíčovou frázi WP Code
- jakmile Vám WordPress plugin najde, nainstalujte jej a aktivujte.
Pokud by Vás zajímal kompletní článek, kde popisuji práci s tímto pluginem, podívejte se sem: Jak do WordPressu vkládat vlastní kódy.
Jak vytvořit table of content ve WordPressu pomocí snippetu
Plugin WP Code již máte nyní nainstalovaný a do levého menu Vám díky tomu přibyla položka „Code Snippets„. Klikněte na ní a zvolte z menu položku „+ Add Snippet„. V následující obrazovce klikněte na položku „Add Your Custom Code (New Snippet)„. Nejprve napište vlastní název snippetu a poté také zvolte jazyk kódu. Snippet je napsaný v PHP.
Do editoru pro vložení kódu vložte následující kus PHP kódu:
add_filter( 'the_content', function ( $content ) {
// This snippet requires the DOMDocument class to be available.
if ( ! class_exists( 'DOMDocument' ) ) {
return $content;
}
if ( !is_single() || !in_the_loop() || !is_main_query() ) {
return $content;
}
$dom = new DOMDocument();
$load_content = mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' );
if ( empty( $load_content ) ) {
return $content;
}
@$dom->loadHTML( $load_content );
$xpath = new DOMXPath( $dom );
$headings = $xpath->query( '//h2 | //h3' );
// Let's loop through all the headings and add them to the table of contents.
$headings_list = '<ul class="table-of-contents">';
foreach ( $headings as $heading ) {
$heading_id = $heading->getAttribute( 'id' );
if ( empty( $heading_id ) ) {
// Generate a heading id and add it to the heading.
$old_heading = $heading->C14N();
$heading_id = sanitize_title( $heading->nodeValue );
$heading->setAttribute( 'id', $heading_id );
$content = str_replace( $old_heading, $heading->C14N(), $content );
}
$heading_text = $heading->nodeValue;
$headings_list .= '<li><a href="#' . $heading_id . '">' . $heading_text . '</a></li>';
}
$headings_list .= '</ul>';
$content = $headings_list . $content;
return $content;
} );
Jak snippet funguje
Filtruje obsah článků:
- Snippet se připojí k filtru
the_content, který upravuje obsah příspěvku před jeho zobrazením na front-endu.
- Snippet se připojí k filtru
Kontrola podmínek:
- TOC se vygeneruje pouze:
- Na stránkách jednotlivých příspěvků (
is_single()). - Pokud je příspěvek v hlavní smyčce (
is_main_query()ain_the_loop()).
- Na stránkách jednotlivých příspěvků (
- TOC se vygeneruje pouze:
Práce s DOM:
- Používá
DOMDocument, aby načetl HTML obsahu a vyhledal nadpisy<h2>a<h3>pomocí XPath. - Pokud nadpis nemá ID, automaticky jej vygeneruje (například z textu nadpisu).
- Používá
Vytvoření TOC:
- Na základě nalezených nadpisů vytvoří HTML seznam
<ul>s odkazy (<a href="#nadpis-id">). - Tento seznam je přidán na začátek obsahu.
- Na základě nalezených nadpisů vytvoří HTML seznam
Výsledek:
- Při zobrazení článku je na jeho začátku automaticky vložen TOC, pokud článek obsahuje
<h2>nebo<h3>.
- Při zobrazení článku je na jeho začátku automaticky vložen TOC, pokud článek obsahuje
Proč je Table Of Content dobrý pro SEO?
Table of Contents (TOC) je dobrý pro SEO z několika důvodů, které pomáhají nejen zlepšit uživatelský zážitek, ale i optimalizaci pro vyhledávače:
- Zlepšuje strukturu obsahu
TOC pomáhá vyhledávačům (například Googlu) lépe pochopit strukturu článku. Když je obsah dobře strukturovaný a přehledně rozdělený do sekcí, vyhledávače mohou lépe indexovat jednotlivé části a poskytnout relevantní výsledky pro různé dotazy. - Zvyšuje míru prokliku (CTR)
Pokud se TOC používá v sitelinks (tzn. v přehledu stránek zobrazeném ve výsledcích vyhledávání), může výrazně zlepšit míru prokliku (CTR). Když uživatelé vidí, že stránka má dobře strukturovaný obsah a mohou rychle přejít na požadovanou část, budou mít větší tendenci kliknout. - Snížení bounce rate
Pokud uživatel najde relevantní sekci rychle díky TOC, může strávit více času na stránce. Nižší bounce rate je pozitivní signál pro vyhledávače, který naznačuje, že stránka má hodnotný obsah. - Zlepšuje uživatelskou zkušenost (UX)
TOC usnadňuje navigaci na stránkách, zejména pokud jsou články dlouhé. Uživatelé, kteří snadno najdou informace, které hledají, jsou více spokojeni, což přispívá k pozitivní uživatelské zkušenosti. Google stále více hodnotí uživatelskou spokojenost jako klíčový faktor pro hodnocení stránky. - Rychlý přístup k důležitým informacím
TOC zajišťuje, že čtenáři (i vyhledávače) mají rychlý přístup k hlavním tématům článku. Vyhledávače pak mohou články lépe propojit s příslušnými dotazy, čímž zvyšují relevanci výsledků. - Zvýšení šancí na Featured Snippet
Když máte TOC na stránce a vyhledávač zjistí, že je dobře strukturovaný s relevantními nadpisy, může vaši stránku vybrat pro Featured Snippet (ty zvýrazněné boxy s odpověďmi, které se zobrazují přímo ve výsledcích vyhledávání). TOC může pomoci označit hlavní body, které jsou relevantní pro dané dotazy, což zvyšuje šance na zobrazení ve Featured Snippet. - Podpora pro mobilní uživatele
Pokud je TOC interaktivní a umožňuje klikání na odkazy pro rychlou navigaci, je to užitečné i pro uživatele mobilních zařízení, kteří se snadněji dostanou k požadovaným informacím bez dlouhého rolování. - Sémantické zvýraznění nadpisů
TOC pomáhá vyhledávačům rozlišovat mezi různými úrovněmi nadpisů (H1, H2, H3) a ukazuje, jak je obsah hierarchicky organizován. Vyhledávače mohou lépe identifikovat hlavní témata a podtémata, což může pomoci v lepší indexaci a hodnocení relevantnosti stránky.
Závěr
TOC má pozitivní vliv na SEO, protože zlepšuje strukturu a navigaci článku, což nejen zvyšuje uživatelskou spokojenost, ale i zajišťuje, že vyhledávače správně indexují obsah a mohou jej zobrazit ve vyhledávacích výsledcích (například ve sitelinks nebo featured snippets). Když má váš obsah dobře strukturovaný TOC, zlepšujete šance na vyšší pozice ve vyhledávání, což může vést k větší návštěvnosti a lepšímu SEO hodnocení. Pomocí snippetu je přitom jeho přidání poměrně jednoduché.
Web je vytvářen s pečlivostí k obsaženým informacím. Snažím se poskytovat kvalitní a užitečný obsah, který ostatním pomáhá, nebo je inspiruje. Pokud jste spokojeni s mou prací a chtěli byste mě podpořit, můžete to udělat prostřednictvím jednoduchých možností.
Odebírejte Newsletter
Buďte v obraze! Připojte se k odběru newsletteru a buďte první, kdo získá nejnovější informace přímo do vaší e-mailové schránky. Sledujte aktuality, exkluzivní události a inspirativní obsah, přímo na Vašem e-mailu.
