Sådan opdeler du lange WordPress-indlæg i sider uden at påvirke SEO

Da jeg begyndte at blogge, fulgte jeg ikke nogen SEO- eller optimeringsregler eller noget som helst andet. Jeg skrev bare, og det var det. Det fik mig til at akkumulere tusindvis af uoptimerede billeder og hundredvis af lange, meget lange artikler.

Derefter fortsatte jeg med at udgive andre lange artikler, som jeg optimerede lige akkurat nok. Så til dato er der omkring 100 artikler med mere end 1500 ord, flere dusin med mere end 3500 ord. Og mange andre på mere end 1000 ord.

En hel del af disse tekster er det, man kalder"evergreen" eller tidløse artikler. Da de er mere komplette tekster end det typiske hurtige indlæg, er det normalt de links, der rangerer bedre og får mere konstant organisk trafik. Det er den gode nyhed, den dårlige nyhed er, at det også var de indlæg, der blev indlæst dårligst, og som gav dårlige målinger, fordi Google behandler URL'er efter grupper.

Og det skulle ordnes, af mange grunde.

Hvorfor opdele lange indlæg?

Hovedårsagen til, at det er tilrådeligt at opdele lange indlæg i sider, er at lette belastningen, især dem, der har mange billeder og/eller videoer og andre elementer.

Ud over den nødvendige forbedring af indlæsningshastigheden vil det øge chancerne for at opnå en bedre positionering eller i det mindste bevare den, og det vil øge den tid, de besøgende bruger, og antallet af besøgte sider pr. session ved at reducere afvisningsprocenten.

Der er dog et par ting, man skal huske på. Behold den oprindelige URL, så du ikke opretter nye URL'er, der kan udvande SEO'en, og så Google og andre browsere fortsat vil indeksere indholdet som en enkelt artikel.

Det vigtigste er at bruge rel="next" og rel="prev" i for at indikere over for Google, at det er en serie.

I et indlæg, der er opdelt i tre sider, skal du for eksempel finde dette i kildekoden inde i tagget, når du besøger den anden side

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

Nogle overvejelser

Det er ikke nok bare at opdele artikler eller bare at få flere sidevisninger. Pagineringen skal have en vis logik baseret på naturlig navigation. Til det formål skal du sætte dig i den besøgendes sted eller gennemse dit websted, som om det var en andens websted.

Hver underside skal kunne fungere som en selvstændig side eller i det mindste indledes med oplysninger om, hvad man kan finde på den, og en logisk introduktion til den nye underside. Den skal have nok indhold til at blive betragtet som dårlig eller af ringe værdi. Google straffer"tyndt indhold".

Pagineringen skal tydeligt angive, at artiklen er opdelt i sider. Det er heller ikke en dårlig ting at tilføje en indholdsfortegnelse, i det mindste på den første side.

Selvom der ikke er nogen "officiel" regel, skal du undgå overdreven paginering. Det er generelt tilrådeligt at opdele indlæg på 1500/1800 ord eller mere i højst to eller tre sider.

Opdel indlæg med Gutenbergs indbyggede sideskiftblok

Der er forskellige måder at gøre det på med plugins, men som du ved, foretrækker jeg at bruge så få plugins som muligt.

Gutenbergs"Page Break"-blok er den bedste løsning.

Blokken tilføjer rel="next" og rel="prev" og "canonical"-tags til splitsiderne, men hvis du vil være sikker på, at de vises, kan du inkludere denne funktion i functions.php-filen i din skabelon.

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

Design er vigtigt

Pagineringens udseende og elementer er meget vigtige, fordi de gør det muligt for den besøgende med det samme at forstå, at artiklen fortsætter på de følgende sider, og at vide, hvor mange sider den består af.

2- Blokken "Sideskift" viser et meget grundlæggende layout. Den ser sådan her ud:

Og det, vi leder efter, er noget mere beskrivende og visuelt tiltalende.

Det første billede er det, der vises nederst på den første side, og det andet på de følgende sider.

Dette udseende opnås med den CSS, der er inkluderet i den samlede kode, som du kan tilføje til din functions.php. Du kan layoute det, som du vil, og det passer til din blogs farvepalet og design.

Kode

Her er den kode, jeg bruger nu.

*Den er tilpasset mine behov, du kan adskille CSS'en og ændre den, tilføje eller fjerne sprog og ændre teksten.

Selvom koden er beregnet til at finde de sprog, der bruges af Polylang, vil den stadig fungere, hvis du ikke bruger Polylang. Den vil dog kun registrere sprog, hvis URL'en har denne struktur: tusitio.com/da/

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