Jak podzielić długie posty WordPress na strony bez wpływu na SEO?

Kiedy zacząłem blogować, nie przestrzegałem żadnych zasad SEO, optymalizacji ani niczego innego. Po prostu publikowałem i tyle. To spowodowało, że zgromadziłem tysiące niezoptymalizowanych zdjęć i setki długich, bardzo długich artykułów.

Następnie kontynuowałem publikację innych długich artykułów, które zoptymalizowałem w wystarczającym stopniu. Tak więc do dnia dzisiejszego istnieje około 100 artykułów zawierających ponad 1500 słów, kilkadziesiąt zawierających ponad 3500 słów. I wiele innych o długości ponad 1000 słów.

Wiele z tych tekstów to tak zwane"wiecznie zielone" lub ponadczasowe artykuły. Ponieważ są to bardziej kompletne teksty niż typowy szybki post, są to zazwyczaj linki, które mają lepszą pozycję w rankingu i otrzymują więcej stałego ruchu organicznego. To dobra wiadomość, zła jest taka, że były to również posty, które ładowały się najgorzej i które dawały złe wskaźniki, ponieważ Google przetwarza adresy URL według grup.

A to musiało zostać naprawione z wielu powodów.

Po co dzielić długie posty?

Głównym powodem, dla którego zaleca się dzielenie długich postów na strony, jest zmniejszenie obciążenia, zwłaszcza tych, które zawierają wiele obrazów i/lub filmów oraz innych elementów.

Oprócz niezbędnej poprawy szybkości ładowania, zwiększy to szanse na osiągnięcie lepszego pozycjonowania lub przynajmniej jego utrzymanie, a także wydłuży czas spędzany przez odwiedzających i liczbę stron odwiedzanych podczas jednej sesji poprzez zmniejszenie współczynnika odrzuceń.

Należy jednak pamiętać o kilku rzeczach. Zachowaj oryginalny adres URL, aby nie tworzyć nowych adresów URL, które mogą osłabić SEO, a Google i inne przeglądarki będą nadal indeksować zawartość jako pojedynczy artykuł.

Najważniejszą rzeczą jest użycie rel="next" i rel="prev" w , aby wskazać Google, że jest to seria.

Na przykład, w poście podzielonym na trzy strony, odwiedzając drugą stronę, będziesz musiał znaleźć to w kodzie źródłowym wewnątrz tagu

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

Kilka uwag

Nie wystarczy po prostu podzielić artykuły lub po prostu uzyskać więcej odsłon. Paginacja musi mieć pewną logikę opartą na naturalnej nawigacji. W tym celu musisz postawić się w sytuacji odwiedzającego lub przeglądać swoją witrynę tak, jakby była witryną kogoś innego.

Każda podstrona powinna być w stanie funkcjonować jako samodzielna strona lub przynajmniej być poprzedzona informacją o tym, co użytkownik na niej znajdzie oraz logicznym wprowadzeniem do nowej podstrony. Musi mieć wystarczająco dużo treści, by nie została uznana za ubogą lub mało wartościową. Google karzeza "cienką treść".

Paginacja powinna wyraźnie wskazywać, że artykuł jest podzielony na strony. Nie zaszkodzi też dodać, przynajmniej na pierwszej stronie, spis treści.

Chociaż nie ma "oficjalnej" reguły, unikaj nadmiernej paginacji. Ogólnie zaleca się dzielenie postów o długości 1500/1800 słów lub więcej na dwie lub maksymalnie trzy strony.

Podziel post za pomocą natywnego bloku podziału strony Gutenberga

Istnieją różne sposoby na zrobienie tego za pomocą wtyczek, ale jak wiesz, preferuję używanie jak najmniejszej liczby wtyczek.

Blok"Podział strony" Gutenberga jest najlepszą opcją.

Blok dodaje znaczniki rel="next" i rel="prev" oraz "canonical" do podzielonych stron, ale jeśli chcesz upewnić się, że są one wyświetlane, możesz dołączyć tę funkcję do pliku functions.php szablonu.

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

Wygląd i elementy paginacji są bardzo ważne, ponieważ pozwolą odwiedzającemu natychmiast zrozumieć, że artykuł jest kontynuowany na kolejnych stronach i dowiedzieć się, z ilu stron się składa.

2- Blok "Podział strony" pokazuje bardzo podstawowy układ. Wygląda on następująco:

Szukamy czegoś bardziej opisowego i atrakcyjnego wizualnie.

Pierwszy obraz będzie wyświetlany na dole pierwszej strony, a drugi na kolejnych stronach.

Wygląd ten uzyskuje się dzięki CSS, który jest zawarty w całym kodzie, który można dodać do functions.php. Możesz go ułożyć w dowolny sposób i dopasować do palety kolorów i projektu swojego bloga.

Kod

Oto kod, którego teraz używam.

*Jest dostosowany do moich potrzeb, można oddzielić CSS i modyfikować go, dodawać lub usuwać języki i zmieniać tekst.

Chociaż kod ma na celu znalezienie języków używanych przez Polylang, nadal będzie działał, jeśli nie używasz Polylang. Wykryje on jednak języki tylko wtedy, gdy adres URL ma następującą strukturę: 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>';
});