Comment diviser de longs articles WordPress en pages sans affecter le référencement

Lorsque j'ai commencé à bloguer, je n'ai suivi aucune règle de référencement ou d'optimisation ou quoi que ce soit d'autre. Je me contentais de publier et c'était tout. J'ai ainsi accumulé des milliers d'images non optimisées et des centaines d'articles longs, très longs.

Ensuite, j'ai continué à publier d'autres articles longs que j'ai optimisés de manière adéquate. Ainsi, à ce jour, il y a une centaine d'articles de plus de 1500 mots, plusieurs dizaines de plus de 3500 mots. Et beaucoup d'autres de plus de 1000 mots.

Un grand nombre de ces textes sont ce que l'on appelle des articles"evergreen" ou intemporels. Comme il s'agit de textes plus complets que l'article rapide typique, ce sont généralement les liens qui se classent le mieux et qui reçoivent un trafic organique plus constant. La bonne nouvelle, c'est qu'il s'agit également des articles qui se chargent le moins bien et qui donnent de mauvaises mesures, car Google traite les URL par groupes.

Et il fallait y remédier, pour de nombreuses raisons.

Pourquoi diviser les longs messages ?

La principale raison pour laquelle il est conseillé de diviser les longs articles en pages est d'alléger la charge, en particulier ceux qui contiennent beaucoup d'images et/ou de vidéos et d'autres éléments.

Au-delà de l'amélioration nécessaire de la vitesse de chargement, elle augmentera les chances d'obtenir un meilleur positionnement, ou du moins de le maintenir, et augmentera le temps passé par les visiteurs et le nombre de pages visitées par session en réduisant le taux de rebond.

Cependant, il y a quelques points à garder à l'esprit. Conservez l'URL d'origine afin de ne pas créer de nouvelles URL susceptibles de diluer le référencement et de permettre à Google et aux autres navigateurs de continuer à indexer le contenu en tant qu'article unique.

La chose la plus importante est d'utiliser rel="next" et rel="prev" dans le site pour indiquer à Google qu'il s'agit d'une série.

Par exemple, dans un article divisé en trois pages, lorsque vous visitez la deuxième page, vous devrez trouver ceci dans le code source à l'intérieur de la balise

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

Quelques considérations

Il ne suffit pas de diviser les articles ou d'augmenter le nombre de pages vues. La pagination doit avoir une certaine logique basée sur la navigation naturelle. Pour ce faire, vous devez vous mettre à la place du visiteur ou parcourir votre site comme s'il s'agissait du site d'une autre personne.

Chaque sous-page doit pouvoir fonctionner comme une page autonome ou au moins être précédée d'informations sur ce qu'elle contient et d'une introduction logique à la nouvelle sous-page. Elle doit avoir suffisamment de contenu pour ne pas être considérée comme pauvre ou de peu de valeur. Google pénalise le"content thin".

La pagination doit indiquer clairement que l'article est divisé en pages. Il n'est pas inutile non plus d'ajouter, au moins sur la première page, une table des matières.

Bien qu'il n'y ait pas de règle "officielle", évitez une pagination excessive. Il est généralement conseillé de diviser les articles de 1500/1800 mots ou plus en deux ou trois pages maximum.

Diviser le message avec le bloc de saut de page natif de Gutenberg

Il y a différentes façons de le faire avec des plugins, mais, comme vous le savez, je préfère utiliser le moins de plugins possible.

Le bloc"Page Break" de Gutenberg est la meilleure option.

Le bloc ajoute les balises rel="next" et rel="prev" et "canonical" aux pages scindées, mais si vous voulez vous assurer qu'elles sont affichées, vous pouvez inclure cette fonction dans le fichier functions.php de votre modèle.

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

Le design, c'est important

L'apparence et les éléments de la pagination sont très importants car ils permettent au visiteur de comprendre immédiatement que l'article se poursuit sur les pages suivantes et de savoir de combien de pages il se compose.

2- Le bloc "Saut de page" présente une mise en page très basique. Il se présente comme suit :

Ce que nous recherchons, c'est quelque chose de plus descriptif et de plus attrayant sur le plan visuel.

La première image est celle qui sera affichée au bas de la première page et la seconde sur les pages suivantes.

Cette apparence est obtenue grâce au CSS qui est inclus dans le code total que vous pouvez ajouter à votre fichier functions.php. Vous pouvez le mettre en page comme vous le souhaitez et il s'adapte à la palette de couleurs et au design de votre blog.

Code

Voici le code que j'utilise actuellement.

*Il est adapté à mes besoins, vous pouvez séparer le CSS et le modifier, ajouter ou supprimer des langues et changer le texte.

Bien que le code soit destiné à trouver les langues utilisées par Polylang, il fonctionnera toujours si vous n'utilisez pas Polylang. Cependant, il ne détectera les langues que si l'URL a la structure suivante : tusitio.com/fr/

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