Πώς να χωρίσετε μεγάλες αναρτήσεις WordPress σε σελίδες χωρίς να επηρεάσετε το SEO

Όταν ξεκίνησα να γράφω ιστολόγια, δεν ακολούθησα κανέναν κανόνα SEO ή βελτιστοποίησης ή οτιδήποτε άλλο. Απλά έκανα αναρτήσεις και αυτό ήταν όλο. Αυτό με έκανε να συγκεντρώσω χιλιάδες μη βελτιστοποιημένες εικόνες και εκατοντάδες μεγάλα, πολύ μεγάλα άρθρα.

Στη συνέχεια συνέχισα να δημοσιεύω άλλα μακροσκελή άρθρα που βελτιστοποίησα αρκετά. Έτσι, μέχρι σήμερα, υπάρχουν περίπου 100 άρθρα με περισσότερες από 1500 λέξεις, αρκετές δεκάδες με περισσότερες από 3500 λέξεις. Και πολλά άλλα με περισσότερες από 1000 λέξεις.

Αρκετά από αυτά τα κείμενα είναι γνωστά ως"αειθαλή" ή διαχρονικά άρθρα. Καθώς πρόκειται για πιο ολοκληρωμένα κείμενα από το τυπικό γρήγορο post, είναι συνήθως οι σύνδεσμοι που κατατάσσονται καλύτερα και δέχονται πιο σταθερή οργανική κίνηση. Αυτά είναι τα καλά νέα, τα κακά νέα είναι ότι ήταν επίσης οι αναρτήσεις που φόρτωναν τα χειρότερα και που έδιναν κακές μετρήσεις επειδή η 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- Το μπλοκ "Page Break" δείχνει μια πολύ βασική διάταξη. Μοιάζει με αυτό:

Και αυτό που ψάχνουμε είναι κάτι πιο περιγραφικό και οπτικά ελκυστικό.

Η πρώτη εικόνα θα εμφανίζεται στο κάτω μέρος της πρώτης σελίδας και η δεύτερη στις επόμενες σελίδες.

Αυτή η εμφάνιση επιτυγχάνεται με το 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>';
});