Как разделить длинные посты WordPress на страницы без ущерба для SEO

Когда я начинал вести блог, я не следовал никаким правилам SEO, оптимизации или чему-то еще. Я просто писал и все. В результате у меня накопились тысячи неоптимизированных изображений и сотни длинных, очень длинных статей.

Затем я продолжил публиковать другие длинные статьи, которые я достаточно оптимизировал. Таким образом, на сегодняшний день существует около 100 статей объемом более 1500 слов, несколько десятков - более 3500 слов. И еще много других объемом более 1000 слов.

Многие из этих текстов представляют собой так называемые"вечнозеленые" или вечные статьи. Поскольку они представляют собой более полные тексты, чем типичные быстрые посты, именно эти ссылки обычно лучше ранжируются и получают больше постоянного органического трафика. Это хорошая новость, а плохая заключается в том, что эти тексты также хуже всего загружаются и дают плохие показатели, поскольку Google обрабатывает URL по группам.

И это нужно было исправить по многим причинам.

Зачем разделять длинные посты?

Основная причина, по которой рекомендуется разделять длинные посты на страницы, - это облегчение нагрузки, особенно на те, в которых много изображений и/или видео и других элементов.

Помимо необходимого улучшения скорости загрузки, это повысит шансы на достижение лучшего позиционирования или, по крайней мере, его сохранение, а также увеличит время, проведенное посетителями, и количество страниц, посещаемых за сеанс, за счет снижения показателя отказов.

Однако есть несколько моментов, о которых следует помнить. Сохраняйте оригинальный URL, чтобы не создавать новые URL, которые могут разбавить SEO, и чтобы Google и другие браузеры продолжали индексировать контент как одну статью.

Самое главное - использовать rel="next" и rel="prev" в , чтобы указать Google на то, что это серия.

Например, в посте, разделенном на три страницы, при посещении второй страницы вам нужно будет найти в исходном коде в теге

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

Некоторые соображения

Недостаточно просто разделить статьи или просто получить больше просмотров страниц. Пагинация должна иметь определенную логику, основанную на естественной навигации. Для этого вы должны поставить себя на место посетителя или просмотреть свой сайт так, как если бы это был чужой сайт.

Каждая подстраница должна функционировать как самостоятельная страница или, по крайней мере, предваряться информацией о том, что вы на ней найдете, и логическим введением в новую подстраницу. На странице должно быть достаточно контента, чтобы она не считалась бедной или малоценной. Google наказывает за"тонкий контент".

Пагинация должна четко указывать на то, что статья разделена на страницы. Неплохо также добавить, хотя бы на первую страницу, оглавление.

Хотя "официального" правила не существует, избегайте чрезмерной пагинации. Обычно рекомендуется разбивать посты объемом 1500/1800 слов и более на две-три страницы максимум.

Разделение постов с помощью встроенного в Gutenberg блока разрыва страницы

Есть разные способы сделать это с помощью плагинов, но, как вы знаете, я предпочитаю использовать как можно меньше плагинов.

Блок"Разрыв страницы" в Gutenberg - лучший вариант.

Блок добавляет теги rel="next" и rel="prev" и "canonical" на разделенные страницы, но если вы хотите убедиться, что они отображаются, вы можете включить эту функцию в файл functions.php вашего шаблона.

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

Дизайн имеет значение

Внешний вид и элементы пагинации очень важны, поскольку они позволят посетителю сразу понять, что статья продолжается на следующих страницах, и узнать, из скольких страниц она состоит.

2- В блоке "Разрыв страницы" показан очень простой макет. Он выглядит следующим образом:

А нам нужно что-то более описательное и визуально привлекательное.

Первое изображение будет показано внизу первой страницы, а второе - на следующих страницах.

Такой внешний вид достигается с помощью CSS, включенного в общий код, который вы можете добавить в файл functions.php. Вы можете оформить его так, как вам нравится, и он будет соответствовать цветовой палитре и дизайну вашего блога.

Код

Вот код, который я использую сейчас.

*Он адаптирован под мои нужды, вы можете разделить CSS и изменить его, добавить или удалить языки и изменить текст.

Хотя этот код предназначен для поиска языков, используемых в Polylang, он будет работать так же хорошо, если вы не используете Polylang. Однако он обнаружит языки только в том случае, если URL имеет такую структуру: tusitio.com/en/

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