Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO

Visitas: 36
 
Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO

Cuando empecé con esto del blog no atendía a absolutamente ninguna regla ni de SEO ni de optimización ni de nada. Posteaba y ya está. Esto provocó que acumulara miles de imágenes sin optimizar y cientos de artículos largos, muy largos.

Después seguí publicando otros artículos largos que optimizaba lo justo. Así, a día de hoy, hay unos 100 artículos con más de 1500 palabras, varias decenas de más de 3500. Y otros muchos de más de 1000.

Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO 1

Bastantes de estos textos son lo que se denomina artículos "evergreen" o lo que es lo mismo, atemporales. Al tratarse de textos más completos que el típico post rápido, suelen ser los enlaces que mejor posicionan y más tráfico orgánico constante reciben. Esa es la buena noticia, la mala es que también eran los post que peor cargaban y eso daba métricas malas porque Google procesa las URL´s por grupos.

Y esto había que arreglarlo, por muchos motivos.

¿Por qué dividir los post largos?

El motivo principal por el que es aconsejable dividir los post largos en páginas es para aligerar la carga, sobre todo aquellos que tienen muchas imágenes y/o vídeos y otros elementos.

Más allá de la necesaria mejora en la velocidad de carga, aumentarán las posibilidades de conseguir un mejor posicionamiento, o al menos de mantenerlo, y aumentará el tiempo de permanencia de las visitas y el número de páginas visitadas por sesión reduciendo la tasa de rebote.

Sin embargo, hay que tener algunas cosas en cuenta. Hay que mantener la URL original para no crear URLs nuevas que puedan diluir el SEO y que Google, y el resto de navegadores, sigan indexando el contenido como un solo artículo.

Lo más importante es que se use rel="next" y rel="prev" en el <head> para indicar a Google de que se trata de una serie.

Por ejemplo, en una entrada dividida en tres páginas, al visitar la segunda, tendrás que encontrar esto en el código fuente dentro de la etiqueta <head>

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

Algunas consideraciones

No basta con dividir los artículos sin más o sólo con la intención de conseguir más páginas vistas. La paginación debe tener cierta lógica basada en la navegación natural. Para esto debes ponerte en el lugar del visitante o navegar por tu sitio como si de una web ajena se tratara.

Cada subpágina debe poder funcionar como una página independiente o al menos estar precedida de información sobre lo que vas a encontrar en ella y una introducción lógica en la nueva subpágina. Debe tener contenido suficiente para que no sea considerado pobre o de poco valor. Google penaliza el "content thin".

La paginación debe indicar claramente que el artículo está dividido en páginas. Tampoco es mala cosa añadir, al menos en la primera página, una tabla de contenidos.

Aunque no hay una norma "oficial", evita una paginación excesiva. Se suele aconsejar dividir los post que tengan 1500/1800 o más palabras en dos o tres páginas como máximo.

Dividir post con el bloque salto de página nativo de Gutenberg

Hay distintas formas de hacer esto con plugins, pero, como ya saben ustedes, soy partidario de usar el mínimo número de plugins siempre que sea posible.

El bloque "Page Break" o "Salto de Página" de Gutenberg es la mejor opción.

Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO 2

El bloque añade las etiquetas rel="next" y rel="prev" y "canonical" a las páginas divididas, pero si quieres asegurarte de que se muestren, puedes incluir esta función en el archivo functions.php de tu plantilla.

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

El diseño importa

El aspecto y los elementos de la paginación son muy importantes porque permitirán que el visitante entienda enseguida que el artículo continúa en siguientes páginas y saber de cuántas se compone.

2- El bloque "Salto de Página" muestra una maquetación muy básica. Tal que así:

Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO 3

Y lo que buscamos es algo más descriptivo y atractivo visualmente.

Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO 4

La primera imagen es lo que se mostrará al final de la primera página y la segunda en las siguientes.

Cómo dividir entradas largas de WordPress en páginas sin afectar al SEO 5

Este aspecto se consigue con el CSS que está incluido en el total del código que puedes añadir a tu functions.php. Puedes maquetarlo como más te guste y se ajuste a la paleta de colores y diseño de tu blog.

Código

Aquí tienes el código que estoy usando ahora.

*Está adaptado a mis necesidades, puedes separar el CSS y modificarlo, añadir o quitar idiomas y cambiar el texto.

Aunque el código está pensado para que encuentre los idiomas usados por Polylang, funcionaría igualmente si no usas Polylang. Eso sí, solo detectará los idiomas si la URL tiene esta estructura: tusitio.com/es/

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

Artículos relacionados



Repositorio de documentales sobre dibujantes de cómic y humor gráfico.

Tontolares. Los titulares más gilipollas de la prensa. Envía los tuyos

Este blog se aloja en LucusHost

LucusHost, el mejor hosting