Cara membagi postingan WordPress yang panjang menjadi beberapa halaman tanpa mempengaruhi SEO

Ketika saya mulai ngeblog, saya tidak mengikuti aturan SEO atau pengoptimalan atau apa pun. Saya hanya memposting dan hanya itu saja. Hal ini menyebabkan saya menumpuk ribuan gambar yang tidak dioptimalkan dan ratusan artikel yang sangat panjang.

Kemudian saya terus menerbitkan artikel panjang lainnya yang saya optimalkan secukupnya. Jadi, sampai saat ini, ada sekitar 100 artikel dengan lebih dari 1500 kata, beberapa lusin dengan lebih dari 3500 kata. Dan banyak lagi yang lebih dari 1000 kata.

Cukup banyak dari teks-teks ini yang dikenal sebagai artikel"evergreen" atau artikel yang tidak lekang oleh waktu. Karena mereka adalah teks yang lebih lengkap daripada posting cepat pada umumnya, mereka biasanya merupakan tautan yang memiliki peringkat lebih baik dan menerima lebih banyak lalu lintas organik yang konstan. Itu kabar baiknya, kabar buruknya adalah bahwa mereka juga merupakan postingan yang memuat terburuk dan memberikan metrik yang buruk karena Google memproses URL berdasarkan kelompok.

Dan hal ini harus diperbaiki, karena berbagai alasan.

Mengapa harus membagi tulisan yang panjang?

Alasan utama mengapa disarankan untuk membagi tulisan panjang menjadi beberapa halaman adalah untuk meringankan beban, terutama yang memiliki banyak gambar dan/atau video dan elemen lainnya.

Selain peningkatan yang diperlukan dalam kecepatan pemuatan, hal ini akan meningkatkan peluang untuk mencapai posisi yang lebih baik, atau setidaknya mempertahankannya, dan akan meningkatkan waktu yang dihabiskan oleh pengunjung dan jumlah halaman yang dikunjungi per sesi dengan mengurangi rasio pentalan.

Namun, ada beberapa hal yang perlu diingat. Pertahankan URL asli agar tidak membuat URL baru yang dapat melemahkan SEO dan Google, serta browser lain, akan terus mengindeks konten sebagai satu artikel.

Yang paling penting adalah menggunakan rel="next" dan rel="prev" pada untuk menunjukkan kepada Google bahwa ini adalah sebuah seri.

Misalnya, dalam postingan yang dibagi menjadi tiga halaman, ketika mengunjungi halaman kedua, Anda harus menemukannya di kode sumber di dalam tag

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

Beberapa pertimbangan

Tidaklah cukup hanya dengan membagi artikel atau hanya untuk mendapatkan lebih banyak tampilan halaman. Penomoran halaman harus memiliki logika tertentu berdasarkan navigasi alami. Untuk itu, Anda harus menempatkan diri Anda pada posisi pengunjung atau menjelajahi situs Anda seolah-olah itu adalah situs web orang lain.

Setiap sub-halaman harus dapat berfungsi sebagai halaman yang berdiri sendiri atau setidaknya didahului dengan informasi tentang apa yang akan Anda temukan di dalamnya dan pengantar yang logis ke sub-halaman baru. Sub-halaman tersebut harus memiliki konten yang cukup agar tidak dianggap buruk atau bernilai rendah. Google menghukum"konten tipis".

Penomoran halaman harus secara jelas menunjukkan bahwa artikel tersebut dibagi ke dalam beberapa halaman. Bukan hal yang buruk juga untuk menambahkan, setidaknya pada halaman pertama, daftar isi.

Meskipun tidak ada aturan "resmi", hindari penomoran halaman yang berlebihan. Umumnya disarankan untuk membagi tulisan yang terdiri atas 1500/1800 kata atau lebih menjadi maksimum dua atau tiga halaman.

Membagi postingan dengan blok pemisah halaman asli Gutenberg

Ada berbagai cara untuk melakukan ini dengan plugin, tetapi, seperti yang Anda ketahui, saya lebih suka menggunakan sesedikit mungkin plugin.

Blok"HentianHalaman" dari Gutenberg adalah pilihan terbaik.

Blok ini menambahkan tag rel="next" dan rel="prev" serta "canonical" ke halaman yang dipisah, namun jika Anda ingin memastikan tag-tag tersebut ditampilkan, Anda bisa menyertakan fungsi ini di dalam berkas functions.php pada templat Anda.

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

Desain itu penting

Tampilan dan elemen pagination sangat penting karena akan memungkinkan pengunjung untuk segera memahami bahwa artikel berlanjut pada halaman berikutnya dan mengetahui berapa banyak halaman yang ada di dalamnya.

2- Blok "Page Break" menunjukkan tata-letak yang sangat mendasar. Tampilannya seperti ini:

Dan yang kami cari adalah sesuatu yang lebih deskriptif dan menarik secara visual.

Gambar pertama adalah gambar yang akan ditampilkan di bagian bawah halaman pertama dan gambar kedua pada halaman berikutnya.

Tampilan ini dicapai dengan CSS yang disertakan dalam kode total yang dapat Anda tambahkan ke functions.php. Anda dapat mengaturnya sesuka Anda dan menyesuaikannya dengan palet warna dan desain blog Anda.

Kode

Ini kode yang saya gunakan sekarang.

*Disesuaikan dengan kebutuhan saya, Anda dapat memisahkan CSS dan memodifikasinya, menambah atau menghapus bahasa dan mengubah teks.

Meskipun kode ini ditujukan untuk menemukan bahasa yang digunakan oleh Polylang, kode ini tetap akan berfungsi jika Anda tidak menggunakan Polylang. Namun, kode ini hanya akan mendeteksi bahasa jika URL-nya memiliki struktur seperti ini: 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>';
});