Як розбити довгі пости 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 слів або більше на дві-три сторінки максимум.

Розділений пост з рідним блоком розриву сторінки Гутенберга

Існують різні способи зробити це за допомогою плагінів, але, як ви знаєте, я віддаю перевагу використанню якомога меншої кількості плагінів.

Блок Гутенберга"Розрив сторінки" - найкращий варіант.

Блок додає теги 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>';
});