Så här delar du upp långa WordPress-inlägg i sidor utan att påverka SEO

När jag började blogga följde jag inte några SEO- eller optimeringsregler eller något annat. Jag bara postade och det var det. Det ledde till att jag samlade på mig tusentals bilder som inte var optimerade och hundratals långa, mycket långa artiklar.

Sedan fortsatte jag att publicera andra långa artiklar som jag optimerade precis tillräckligt. Så hittills finns det cirka 100 artiklar med mer än 1500 ord, flera dussintals med mer än 3500 ord. Och många andra med mer än 1000 ord.

En hel del av dessa texter är vad som kallas"evergreen" eller tidlösa artiklar. Eftersom de är mer kompletta texter än det typiska snabba inlägget är det vanligtvis de länkar som rankas bättre och får mer konstant organisk trafik. Det är den goda nyheten, den dåliga nyheten är att de också var de inlägg som laddades sämst och som gav dåliga mätvärden eftersom Google bearbetar webbadresser i grupper.

Och detta måste åtgärdas, av många skäl.

Varför dela upp långa inlägg?

Det främsta skälet till att det är lämpligt att dela upp långa inlägg i sidor är för att minska belastningen, särskilt de som har många bilder och/eller videor och andra element.

Utöver den nödvändiga förbättringen av laddningshastigheten kommer det att öka chanserna att uppnå en bättre positionering, eller åtminstone behålla den, och kommer att öka den tid som besökarna tillbringar och antalet sidor som besöks per session genom att minska avvisningsfrekvensen.

Det finns dock några saker att tänka på. Behåll original-URL:en för att inte skapa nya URL:er som kan späda ut SEO:n och för att Google, och andra webbläsare, ska fortsätta att indexera innehållet som en enda artikel.

Det viktigaste är att använda rel="next" och rel="prev" i för att visa Google att det är en serie.

Till exempel, i ett inlägg som är uppdelat på tre sidor, när du besöker den andra sidan, måste du hitta detta i källkoden inuti taggen

<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ågra överväganden

Det räcker inte att bara dela upp artiklar eller bara för att få fler sidvisningar. Pagineringen måste ha en viss logik baserad på naturlig navigering. För detta måste du sätta dig själv i besökarens skor eller surfa på din webbplats som om det vore någon annans webbplats.

Varje undersida ska kunna fungera som en fristående sida eller åtminstone föregås av information om vad du hittar på den och en logisk introduktion till den nya undersidan. Den måste ha tillräckligt med innehåll för att inte anses vara dålig eller av ringa värde. Google straffar"tunt innehåll".

Pagineringen ska tydligt visa att artikeln är indelad i sidor. Det är inte heller fel att lägga till en innehållsförteckning, åtminstone på första sidan.

Även om det inte finns någon "officiell" regel bör du undvika överdriven paginering. Det är i allmänhet tillrådligt att dela upp inlägg på 1500/1800 ord eller mer på högst två eller tre sidor.

Dela inlägg med Gutenbergs inbyggda block för sidbrytning

Det finns olika sätt att göra detta med plugins, men som du vet föredrar jag att använda så få plugins som möjligt.

Gutenbergs"Page Break"-block är det bästa alternativet.

Blocket lägger till rel="next" och rel="prev" och "canonical"-taggar på de delade sidorna, men om du vill se till att de visas kan du inkludera den här funktionen i filen functions.php i din mall.

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

Designfrågor

Pagineringens utseende och element är mycket viktiga eftersom de gör det möjligt för besökaren att omedelbart förstå att artikeln fortsätter på följande sidor och att veta hur många sidor den består av.

2- Blocket "Sidbrytning" visar en mycket grundläggande layout. Det ser ut så här:

Och vad vi letar efter är något mer beskrivande och visuellt tilltalande.

Den första bilden är den som kommer att visas längst ned på första sidan och den andra på följande sidor.

Detta utseende uppnås med CSS som ingår i den totala koden som du kan lägga till i din functions.php. Du kan layouta den hur du vill och den passar din bloggs färgpalett och design.

Kod

Här är den kod jag använder nu.

* Den är anpassad till mina behov, du kan separera CSS och ändra den, lägga till eller ta bort språk och ändra texten.

Även om koden är avsedd att hitta de språk som används av Polylang, fungerar den fortfarande om du inte använder Polylang. Den kommer dock bara att upptäcka språk om URL:en har denna struktur: tusitio.com/sv/

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