Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden

 
Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden

Toen ik begon met bloggen, volgde ik geen SEO- of optimalisatieregels of wat dan ook. Ik postte gewoon en dat was het. Hierdoor verzamelde ik duizenden niet-geoptimaliseerde afbeeldingen en honderden lange, erg lange artikelen.

Daarna ging ik door met het publiceren van andere lange artikelen die ik net genoeg optimaliseerde. Dus tot nu toe zijn er ongeveer 100 artikelen van meer dan 1500 woorden, enkele tientallen van meer dan 3500 woorden. En vele anderen van meer dan 1000 woorden.

Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden 1

Heel wat van deze teksten zijn zogenaamde"evergreen" of tijdloze artikels. Omdat het completere teksten zijn dan de typische snelle post, zijn dit meestal de links die beter ranken en meer constant organisch verkeer ontvangen. Dat is het goede nieuws, het slechte nieuws is dat dit ook de berichten waren die het slechtst laadden en die slechte statistieken opleverden omdat Google URL's per groep verwerkt.

En dit moest worden opgelost, om vele redenen.

Waarom lange berichten opsplitsen?

De belangrijkste reden waarom het aan te raden is om lange posts op te delen in pagina's is om de belasting te verlichten, vooral die met veel afbeeldingen en/of video's en andere elementen.

Naast de noodzakelijke verbetering van de laadsnelheid, verhoogt het de kans op een betere positionering, of op zijn minst het behoud ervan, en verhoogt het de tijd die bezoekers doorbrengen en het aantal bezochte pagina's per sessie door het bouncepercentage te verlagen.

Er zijn echter een paar dingen waar je rekening mee moet houden. Behoud de oorspronkelijke URL om geen nieuwe URL's te maken die de SEO kunnen verwateren en dat Google en andere browsers de inhoud blijven indexeren als een enkel artikel.

Het belangrijkste is om rel="next" en rel="prev" te gebruiken in de om Google aan te geven dat het om een serie gaat.

Als je bijvoorbeeld in een bericht dat in drie pagina's is verdeeld de tweede pagina bezoekt, moet je dit in de broncode in de tag vinden

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

Enkele overwegingen

Het is niet genoeg om artikelen simpelweg op te splitsen of om meer paginaweergaves te krijgen. De paginering moet een bepaalde logica hebben, gebaseerd op natuurlijke navigatie. Hiervoor moet u in de huid kruipen van de bezoeker of door uw site bladeren alsof het de website van iemand anders is.

Elke subpagina moet kunnen functioneren als een op zichzelf staande pagina of op zijn minst worden voorafgegaan door informatie over wat je erop kunt vinden en een logische inleiding tot de nieuwe subpagina. De inhoud moet voldoende zijn om niet als slecht of van weinig waarde te worden beschouwd. Google bestraft"dunne inhoud".

De paginering moet duidelijk aangeven dat het artikel in pagina's is verdeeld. Het is ook geen slechte zaak om, op zijn minst op de eerste pagina, een inhoudsopgave toe te voegen.

Hoewel er geen "officiële" regel is, vermijd overmatige paginering. Het is over het algemeen aan te raden om posts van 1500/1800 woorden of meer op te delen in maximaal twee of drie pagina's.

Post splitsen met Gutenbergs ingebouwde blok voor pagina-einde

Er zijn verschillende manieren om dit met plugins te doen, maar zoals je weet gebruik ik het liefst zo min mogelijk plugins.

Het blok"Pagina-einde" van Gutenberg is de beste optie.

Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden 2

Het blok voegt rel="next" en rel="prev" en "canonical" tags toe aan de gesplitste pagina's, maar als je er zeker van wilt zijn dat ze worden weergegeven, kun je deze functie opnemen in het bestand functions.php van je sjabloon.

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

Ontwerp is belangrijk

Het uiterlijk en de elementen van de paginering zijn erg belangrijk omdat ze de bezoeker meteen duidelijk maken dat het artikel verdergaat op de volgende pagina's en dat hij weet uit hoeveel pagina's het bestaat.

2- Het blok "Pagina-einde" toont een heel eenvoudige lay-out. Het ziet er als volgt uit:

Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden 3

En wat we zoeken is iets meer beschrijvend en visueel aantrekkelijk.

Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden 4

De eerste afbeelding wordt onderaan de eerste pagina getoond en de tweede op de volgende pagina's.

Hoe je lange WordPress posts kunt opsplitsen in pagina's zonder de SEO te beïnvloeden 5

Dit uiterlijk wordt bereikt met de CSS die is opgenomen in de totale code die je kunt toevoegen aan je functions.php. Je kunt het opmaken zoals je wilt en het past bij het kleurenpalet en het ontwerp van je blog.

Code

Hier is de code die ik nu gebruik.

*Het is aangepast aan mijn behoeften, je kunt de CSS scheiden en aanpassen, talen toevoegen of verwijderen en de tekst wijzigen.

Hoewel de code bedoeld is om de talen te vinden die door Polylang worden gebruikt, zal het nog steeds werken als je Polylang niet gebruikt. Het zal echter alleen talen detecteren als de URL deze structuur heeft: tusitio.com/nl/

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

Suscríbete para recibir los post en tu email sin publicidad

Verwante artikelen

Este blog se aloja en LucusHost

LucusHost, el mejor hosting