Как да разделите дълги публикации в 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 е най-добрият вариант.

Блокът добавя тагове 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>';
});