Slik deler du opp lange WordPress-innlegg i sider uten at det påvirker SEO

Da jeg begynte å blogge, fulgte jeg ingen regler for SEO eller optimalisering eller noe annet. Jeg bare postet, og det var det. Dette førte til at jeg samlet opp tusenvis av uoptimaliserte bilder og hundrevis av lange, veldig lange artikler.

Så fortsatte jeg å publisere andre lange artikler som jeg optimaliserte akkurat nok. Så til dags dato er det omtrent 100 artikler med mer enn 1500 ord, flere titalls med mer enn 3500 ord. Og mange andre på mer enn 1000 ord.

En god del av disse tekstene er det som kalles"eviggrønne" eller tidløse artikler. Ettersom de er mer komplette tekster enn det typiske raske innlegget, er det vanligvis de lenkene som rangeres bedre og får mer konstant organisk trafikk. Det er den gode nyheten, den dårlige nyheten er at de også var de innleggene som lastet dårligst og som ga dårlige beregninger fordi Google behandler URL-er etter grupper.

Og dette måtte fikses, av mange grunner.

Hvorfor dele opp lange innlegg?

Hovedgrunnen til at det er lurt å dele opp lange innlegg i sider, er for å lette belastningen, spesielt de som inneholder mange bilder og/eller videoer og andre elementer.

Utover den nødvendige forbedringen i innlastingshastighet vil det øke sjansene for å oppnå en bedre posisjonering, eller i det minste opprettholde den, og det vil øke tiden de besøkende bruker og antall sider som besøkes per økt ved å redusere fluktfrekvensen.

Det er imidlertid et par ting du må huske på. Behold den opprinnelige URL-en, slik at du ikke oppretter nye URL-er som kan svekke SEO, og slik at Google og andre nettlesere fortsetter å indeksere innholdet som én enkelt artikkel.

Det viktigste er å bruke rel="next" og rel="prev" i for å indikere for Google at det er en serie.

For eksempel, i et innlegg som er delt inn i tre sider, når du besøker den andre siden, må du finne dette i kildekoden inne i 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/" />

Noen betraktninger

Det er ikke nok å bare dele opp artikler eller bare for å få flere sidevisninger. Pagineringen må ha en viss logikk basert på naturlig navigering. For å få til dette må du sette deg inn i den besøkendes situasjon eller surfe på nettstedet ditt som om det var noen andres nettsted.

Hver underside bør kunne fungere som en selvstendig side eller i det minste innledes med informasjon om hva du finner på den og en logisk introduksjon til den nye undersiden. Den må ha nok innhold til at den ikke anses som dårlig eller av liten verdi. Google straffer"tynt innhold".

Pagineringen bør tydelig indikere at artikkelen er delt inn i sider. Det er heller ikke dumt å legge til en innholdsfortegnelse, i hvert fall på første side.

Selv om det ikke finnes noen "offisiell" regel, bør du unngå overdreven paginering. Generelt anbefales det å dele opp innlegg på 1500/1800 ord eller mer på maksimalt to eller tre sider.

Del innlegg med Gutenbergs innebygde sideskiftblokk

Det finnes ulike måter å gjøre dette på med plugins, men som du vet, foretrekker jeg å bruke så få plugins som mulig.

Gutenbergs"Page Break"-blokk er det beste alternativet.

Blokken legger til rel="next" og rel="prev" og "canonical"-tagger på de delte sidene, men hvis du vil være sikker på at de vises, kan du inkludere denne funksjonen i functions.php-filen i malen din.

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

Utseendet og elementene i pagineringen er svært viktige fordi de gjør det mulig for den besøkende å umiddelbart forstå at artikkelen fortsetter på de neste sidene og å vite hvor mange sider den består av.

2- Blokken "Sideskift" viser en svært enkel layout. Den ser slik ut:

Og det vi er ute etter, er noe mer beskrivende og visuelt tiltalende.

Det første bildet er det som vises nederst på den første siden, og det andre på de neste sidene.

Dette utseendet oppnås med CSS som er inkludert i den totale koden som du kan legge til i functions.php. Du kan sette den opp som du vil, og den passer til bloggens fargepalett og design.

Kode

Her er koden jeg bruker nå.

* Den er tilpasset mine behov, du kan skille CSS og endre den, legge til eller fjerne språk og endre teksten.

Selv om koden er beregnet på å finne språkene som brukes av Polylang, vil den fortsatt fungere hvis du ikke bruker Polylang. Den vil imidlertid bare oppdage språk hvis URL-en har denne strukturen: tusitio.com/no/

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