Ako rozdeliť dlhé príspevky WordPress na stránky bez vplyvu na SEO

Keď som začal blogovať, nedodržiaval som žiadne pravidlá SEO, optimalizácie ani nič iné. Jednoducho som písal a to bolo všetko. To spôsobilo, že sa mi nahromadili tisíce neoptimalizovaných obrázkov a stovky dlhých, veľmi dlhých článkov.

Potom som pokračoval v uverejňovaní ďalších dlhých článkov, ktoré som dostatočne optimalizoval. Takže k dnešnému dňu existuje asi 100 článkov s viac ako 1500 slovami, niekoľko desiatok s viac ako 3500 slovami. A mnoho ďalších s viac ako 1000 slovami.

Pomerne veľa z týchto textov je známych ako"evergreen" alebo nadčasové články. Keďže ide o ucelenejšie texty ako typický rýchly príspevok, zvyčajne sú to odkazy, ktoré sa lepšie umiestňujú a získavajú stálejšiu organickú návštevnosť. To je dobrá správa, zlá správa je, že to boli aj príspevky, ktoré sa načítavali najhoršie a ktoré poskytovali zlé metriky, pretože Google spracováva adresy URL podľa skupín.

A to bolo potrebné z mnohých dôvodov napraviť.

Prečo rozdeliť dlhé príspevky?

Hlavným dôvodom, prečo je vhodné rozdeliť dlhé príspevky na stránky, je odľahčenie záťaže, najmä tých, ktoré obsahujú veľa obrázkov a/alebo videí a iných prvkov.

Okrem nevyhnutného zlepšenia rýchlosti načítania sa zvýši šanca na dosiahnutie lepšieho umiestnenia alebo aspoň jeho udržanie a zvýši sa čas strávený návštevníkmi a počet navštívených stránok za reláciu znížením miery odchodov.

Je však potrebné mať na pamäti niekoľko vecí. Ponechajte si pôvodnú adresu URL, aby ste nevytvárali nové adresy URL, ktoré by mohli oslabiť SEO a aby spoločnosť Google a ostatné prehliadače naďalej indexovali obsah ako jeden článok.

Najdôležitejšie je použiť rel="next" a rel="prev" na stránke , aby ste spoločnosti Google naznačili, že ide o sériu.

Napríklad v príspevku rozdelenom na tri stránky musíte pri návšteve druhej stránky nájsť v zdrojovom kóde vo vnútri značky

<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/" />

Niektoré úvahy

Nestačí len rozdeliť články alebo len získať viac zobrazení stránok. Stránkovanie musí mať určitú logiku založenú na prirodzenej navigácii. Na to sa musíte vžiť do kože návštevníka alebo si prezerať svoju stránku, ako keby to bola stránka niekoho iného.

Každá podstránka by mala fungovať ako samostatná stránka alebo by jej mali aspoň predchádzať informácie o tom, čo na nej nájdete, a logický úvod k novej podstránke. Musí mať dostatočný obsah, aby sa nedala považovať za chudobnú alebo málo hodnotnú. Google penalizuje"tenký obsah".

Číslovanie strán by malo jasne naznačovať, že článok je rozdelený na strany. Taktiež nie je na škodu pridať aspoň na prvú stranu obsah.

Hoci neexistuje žiadne "oficiálne" pravidlo, vyhnite sa nadmernému číslovaniu strán. Vo všeobecnosti sa odporúča rozdeliť príspevky s rozsahom 1500/1800 slov a viac na dve alebo maximálne tri strany.

Rozdelenie príspevku pomocou natívneho bloku prelomenia stránky v Gutenbergu

Existujú rôzne spôsoby, ako to dosiahnuť pomocou zásuvných modulov, ale ako viete, uprednostňujem používanie čo najmenšieho počtu zásuvných modulov.

Najlepšou možnosťou je blok Gutenberg"Page Break".

Blok pridá do rozdelených stránok značky rel="next" a rel="prev" a "canonical", ale ak chcete zabezpečiť ich zobrazenie, môžete túto funkciu zahrnúť do súboru functions.php svojej šablóny.

// 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');

Dôležitý dizajn

Vzhľad a prvky stránkovania sú veľmi dôležité, pretože umožnia návštevníkovi okamžite pochopiť, že článok pokračuje na nasledujúcich stranách, a zistiť, koľko strán ho tvorí.

2 - Blok "Page Break" zobrazuje veľmi základné rozloženie. Vyzerá takto:

A my hľadáme niečo opisnejšie a vizuálne príťažlivejšie.

Prvý obrázok sa zobrazí v dolnej časti prvej strany a druhý na nasledujúcich stranách.

Tento vzhľad sa dosiahne pomocou CSS, ktorý je súčasťou celkového kódu, ktorý môžete pridať do súboru functions.php. Môžete si ho rozvrhnúť, akokoľvek sa vám páči, a prispôsobiť ho farebnej palete a dizajnu vášho blogu.

Kód

Tu je kód, ktorý teraz používam.

* Je prispôsobený mojim potrebám, môžete oddeliť CSS a upraviť ho, pridať alebo odstrániť jazyky a zmeniť text.

Hoci je tento kód určený na vyhľadávanie jazykov, ktoré používa Polylang, bude fungovať aj vtedy, ak Polylang nepoužívate. Jazyky však zistí len vtedy, ak má adresa URL túto štruktúru: 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>';
});