Jak rozdělit dlouhé příspěvky ve WordPressu na stránky bez vlivu na SEO

Když jsem začal blogovat, nedodržoval jsem žádná pravidla SEO, optimalizace ani nic jiného. Prostě jsem psal a hotovo. To způsobilo, že se mi nahromadily tisíce neoptimalizovaných obrázků a stovky dlouhých, velmi dlouhých článků.

Pak jsem pokračoval v publikování dalších dlouhých článků, které jsem dostatečně optimalizoval. Takže k dnešnímu dni existuje asi 100 článků s více než 1500 slovy, několik desítek s více než 3500 slovy. A mnoho dalších o více než 1000 slovech.

Řada těchto textů je označována jako"evergreen" nebo nadčasové články. Protože se jedná o ucelenější texty než typické rychlé příspěvky, jsou to obvykle odkazy, které se lépe umisťují a získávají trvalejší organický provoz. To je dobrá zpráva, špatná zpráva je, že to byly také příspěvky, které se nejhůře načítaly a které poskytovaly špatné metriky, protože Google zpracovává adresy URL podle skupin.

A to bylo třeba z mnoha důvodů napravit.

Proč rozdělovat dlouhé příspěvky?

Hlavním důvodem, proč je vhodné rozdělit dlouhé příspěvky na stránky, je snížení zátěže, zejména těch, které obsahují mnoho obrázků a/nebo videí a dalších prvků.

Kromě nezbytného zlepšení rychlosti načítání se zvýší šance na dosažení lepšího umístění nebo alespoň jeho udržení, zvýší se čas strávený návštěvníky a počet navštívených stránek za relaci snížením míry odchodu (bounce rate).

Je však třeba mít na paměti několik věcí. Zachovejte původní adresu URL, abyste nevytvářeli nové adresy URL, které by mohly rozmělnit SEO a aby Google a další prohlížeče nadále indexovaly obsah jako jeden článek.

Nejdůležitější je použít rel="next" a rel="prev" na stránce , abyste Googlu naznačili, že se jedná o sérii.

Například v příspěvku rozděleném na tři stránky musíte při návštěvě druhé stránky najít ve zdrojovém kódu uvnitř značky toto

<link rel="canonical" href="https://jrmora.com/post-ejemplo/2/" />
<link rel="prev" href="https://jrmora.com/post-ejemplo/" />
<link rel="next" href="https://jrmora.com/post-ejemplo/3/" />

Některé úvahy

Nestačí jen rozdělit články nebo získat více zobrazení stránek. Stránkování musí mít určitou logiku založenou na přirozené navigaci. K tomu se musíte vžít do kůže návštěvníka nebo procházet své stránky, jako by to byly stránky někoho jiného.

Každá podstránka by měla fungovat jako samostatná stránka nebo by jí alespoň měly předcházet informace o tom, co na ní najdete, a logický úvod k nové podstránce. Musí mít dostatečný obsah, aby nebyla považována za chudou nebo málo hodnotnou. Google penalizuje"řídký obsah".

Číslování stránek by mělo jasně naznačovat, že je článek rozdělen na stránky. Není také na škodu přidat alespoň na první stránku obsah.

Ačkoli neexistuje žádné "oficiální" pravidlo, vyhněte se nadměrnému stránkování. Obecně se doporučuje rozdělit příspěvky o rozsahu 1500/1800 slov a více na dvě nebo maximálně tři stránky.

Rozdělení příspěvku pomocí nativního bloku pro přerušení stránky v Gutenbergu

Existují různé způsoby, jak toho dosáhnout pomocí zásuvných modulů, ale jak víte, upřednostňuji používání co nejmenšího počtu zásuvných modulů.

Nejlepší možností je blok"Přerušení stránky" v systému Gutenberg.

Blok přidá do rozdělených stránek značky rel="next" a rel="prev" a "canonical", ale pokud chcete zajistit jejich zobrazení, můžete tuto funkci zahrnout do souboru functions.php své šablony.

// Añadir etiquetas rel="next" y rel="prev" para paginación con Bloque Page Break <!--nextpage--> o Salto de Página
function gp_add_pagination_rel_tags() {
    if (is_singular() && !is_front_page()) {
        global $page, $numpages, $post;
        
        // Solo si hay paginación
        if ($numpages > 1) {
            // Etiqueta rel="prev" (página anterior)
            if ($page > 1) {
                echo '<link rel="prev" href="' . get_permalink($post) . ($page - 1) . '/" />' . "\n";
            }
            
            // Etiqueta rel="next" (página siguiente)
            if ($page < $numpages) {
                echo '<link rel="next" href="' . get_permalink($post) . ($page + 1) . '/" />' . "\n";
            }
        }
    }
}
add_action('wp_head', 'gp_add_pagination_rel_tags');

Na designu záleží

Vzhled a prvky stránkování jsou velmi důležité, protože umožňují návštěvníkovi okamžitě pochopit, že článek pokračuje na dalších stránkách, a zjistit, kolik stránek obsahuje.

2 - Blok "Page Break" zobrazuje velmi základní rozvržení. Vypadá takto:

A my hledáme něco popisnějšího a vizuálně přitažlivějšího.

První obrázek se zobrazí v dolní části první stránky a druhý na následujících stránkách.

Tohoto vzhledu dosáhnete pomocí CSS, které je součástí celkového kódu, který můžete přidat do souboru functions.php. Můžete si jej rozvrhnout, jak se vám zlíbí, a přizpůsobit jej barevné paletě a designu vašeho blogu.

Kód

Zde je kód, který nyní používám.

* Je přizpůsoben mým potřebám, můžete oddělit CSS a upravit jej, přidat nebo odebrat jazyky a změnit text.

Přestože je kód určen k vyhledávání jazyků používaných v Polylangu, bude fungovat i v případě, že Polylang nepoužíváte. Jazyky však zjistí pouze v případě, že adresa URL má tuto strukturu: tusitio.com/en/

// 1. Eliminar paginaciones automáticas
function remove_all_auto_pagination() {
    if (function_exists('generate_do_post_pagination')) {
        remove_action('generate_after_entry_content', 'generate_do_post_pagination');
    }
    add_filter('wp_link_pages', '__return_empty_string');
}
add_action('wp', 'remove_all_auto_pagination', 5);

// 2. Función auxiliar para números de página
function generate_pagination_numbers($total_pages, $current_page, $base_url) {
    $numbers_html = '';
    for ($i = 1; $i <= $total_pages; $i++) {
        $page_url = ($i == 1) ? $base_url : $base_url . user_trailingslashit($i);
        
        if ($i == $current_page) {
            $numbers_html .= '<span class="current-page">' . $i . '</span>';
        } else {
            $numbers_html .= '<a href="' . esc_url($page_url) . '" class="pagination-link">' . $i . '</a>';
        }
    }
    return $numbers_html;
}

// 3. Paginación multilingüe completa
add_filter('the_content', function($content) {
    global $numpages, $post;
    
    if (!is_singular() || $numpages <= 1) return $content;
    
    $wp_query = $GLOBALS['wp_query'];
    $current_page = $wp_query->get('page') ?: 1;
    $base_url = trailingslashit(get_permalink());
    
    // Sistema de detección de idioma
    $language = 'en';
    $available_langs = ['en','fr','de','es','pt','ru','it','sv','da','fi','nb','el','ar','tr','zh','id','ja','ko','uk','pl','cs','sk','lt','et','ro','hu','nl','bg'];
    
    if (function_exists('pll_current_language')) {
        $detected_lang = pll_current_language();
        $language = in_array($detected_lang, $available_langs) ? $detected_lang : 'en';
    } else {
        $current_uri = esc_url_raw($_SERVER['REQUEST_URI']);
        foreach ($available_langs as $lang) {
            if (strpos($current_uri, '/'.$lang.'/') !== false) {
                $language = $lang;
                break;
            }
        }
    }
    
    // Textos completos para 28 idiomas (solo cambios en finlandés y ruso)
    $localized_texts = [
        'en' => ['Continue reading this post →', 'Pages of this post →'],
        'fr' => ['Continuer à lire cet article →', 'Pages de ce billet →'],
        'de' => ['Diesen Beitrag weiter lesen →', 'Seiten dieses Beitrags →'],
        'es' => ['Seguir leyendo este post →', 'Páginas de este post →'],
        'pt' => ['Continuar a ler esta publicación →', 'Páginas deste post →'],
        'ru' => ['Продолжить чтение →', 'Страницы этого поста →'],
        'it' => ['Continua a leggere questo post →', 'Pagine di questo post →'],
        'sv' => ['Fortsätt läsa detta inlägg →', 'Sidor i detta inlägg →'],
        'da' => ['Læs videre på dette indlæg →', 'Sider i dette indlæg →'],
        'fi' => ['Jatka lukemista →', 'Artikkelin sivut →'],
        'nb' => ['Fortsett å lese denne artikkelen →', 'Artikkelens sider →'],
        'el' => ['Συνεχίστε την ανάγνωση →', 'Σελίδες άρθρου →'],
        'ar' => ['تابع القراءة ←', 'صفحات المقال ←'],
        'tr' => ['Okumaya devam edin →', 'Yazı sayfaları →'],
        'zh' => ['继续阅读 →', '文章分页 →'],
        'id' => ['Lanjutkan membaca →', 'Halaman artikel →'],
        'ja' => ['続きを読む →', 'ページ移動 →'],
        'ko' => ['더 보기 →', 'ページ →'],
        'uk' => ['Читати далі →', 'Сторінки статті →'],
        'pl' => ['Czytaj dalej →', 'Strony artykułu →'],
        'cs' => ['Pokračovat ve čtení →', 'Stránky článku →'],
        'sk' => ['Pokračovať v čítaní →', 'Stránky článku →'],
        'lt' => ['Skaityti toliau →', 'Straipsnio puslapiai →'],
        'et' => ['Jätka lugemist →', 'Artikli leheküljed →'],
        'ro' => ['Continuă lectura →', 'Paginile articolului →'],
        'hu' => ['Tovább olvasom →', 'Cikk oldalai →'],
        'nl' => ['Lees verder →', 'Artikelpagina\'s →'],
        'bg' => ['Прочети още →', 'Страници на статията →']
    ];
    
    $text_index = ($current_page == 1) ? 0 : 1;
    $pagination_text = $localized_texts[$language][$text_index] ?? $localized_texts['en'][$text_index];
    
    // Construcción de la paginación
    $pagination_html = '<div class="custom-pagination-container">';
    $pagination_html .= '<div class="pagination-content">';
    $pagination_html .= '<span class="pagination-text">' . esc_html($pagination_text) . '</span>';
    $pagination_html .= '<div class="pagination-numbers">';
    $pagination_html .= generate_pagination_numbers($numpages, $current_page, $base_url);
    $pagination_html .= '</div></div></div>';
    
    return ($current_page > 1) ? $pagination_html . $content . $pagination_html : $content . $pagination_html;
}, 15);

// 4. CSS optimizado (sin referencias a fuentes)
add_action('wp_head', function() {
    echo '<style>
    /* Estilos base */
    .custom-pagination-container {
        margin: 25px 0;
        padding: 15px 10px;
        background: #f9f9f9;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        width: 100%;
    }

    .pagination-content {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 800px;
        margin: 0 auto;
    }

    .pagination-text {
        font-weight: 700;
        color: #333;
        margin-right: 10px;
        white-space: nowrap;
    }

    .pagination-numbers {
        display: inline-block;
    }

    .pagination-link,
    .current-page {
        display: inline-block;
        padding: 8px 12px;
        margin: 0 3px;
        border-radius: 4px;
        font-weight: 400;
        font-size: 15px;
        line-height: 1;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }

    .current-page {
        background: #b40006;
        color: white;
        font-weight: 700;
    }

    .pagination-link {
        background: #f5f5f5;
        color: #333;
        text-decoration: none;
    }

    .pagination-link:hover {
        background-color: #e0e0e0;
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Estilos móvil */
    @media (max-width: 600px) {
        .pagination-content {
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto;
            justify-content: flex-start;
            padding-bottom: 5px;
            -webkit-overflow-scrolling: touch;
        }
        
        .pagination-text {
            font-size: 14px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .pagination-numbers {
            display: flex;
            flex-wrap: nowrap;
            gap: 4px;
        }
        
        .pagination-link,
        .current-page {
            padding: 6px 10px;
            min-width: 32px;
            font-size: 14px;
            margin: 0;
            flex-shrink: 0;
        }
    }
    </style>';
});