Hogyan osszuk fel a hosszú WordPress hozzászólásokat oldalakra anélkül, hogy befolyásolná a SEO-t

Amikor elkezdtem blogolni, nem követtem semmilyen SEO vagy optimalizálási szabályt vagy bármi mást. Csak posztoltam, és ennyi volt. Ez azt eredményezte, hogy több ezer optimalizálatlan képet és több száz hosszú, nagyon hosszú cikket halmoztam fel.

Ezután folytattam más hosszú cikkek közzétételét, amelyeket éppen eléggé optimalizáltam. Így a mai napig körülbelül 100 cikk van 1500 szónál többel, több tucat 3500 szónál többel. És sok más 1000 szónál több.

E szövegek közül jó néhány úgynevezett"örökzöld" vagy időtálló cikk. Mivel ezek teljesebb szövegek, mint a tipikus gyorsposztok, általában ezek azok a linkek, amelyek jobban rangsorolnak és állandóbb szerves forgalmat kapnak. Ez a jó hír, a rossz hír az, hogy ezek voltak azok a bejegyzések is, amelyek a legrosszabbul töltődtek be, és amelyek rossz mérőszámokat adtak, mivel a Google az URL-eket csoportok szerint dolgozza fel.

És ezt több okból is meg kellett oldani.

Miért kell a hosszú hozzászólásokat felosztani?

A fő ok, amiért célszerű a hosszú bejegyzéseket oldalakra osztani, az a terhelés csökkentése, különösen azoknál, amelyek sok képet és/vagy videót és egyéb elemet tartalmaznak.

A betöltési sebesség szükséges javításán túlmenően növeli a jobb helyezés elérésének vagy legalábbis megtartásának esélyét, és a visszafordulási arány csökkentésével növeli a látogatók által eltöltött időt és a munkamenetenként meglátogatott oldalak számát.

Van azonban néhány dolog, amit szem előtt kell tartani. Tartsa meg az eredeti URL-címet, hogy ne hozzon létre új URL-címeket, amelyek felhígíthatják a SEO-t, és hogy a Google és más böngészők továbbra is egyetlen cikkként indexeljék a tartalmat.

A legfontosabb dolog a rel="next" és rel="prev" használata a oldalon, hogy jelezze a Google számára, hogy egy sorozatról van szó.

Például egy három oldalra osztott bejegyzésben, ha a második oldalra látogatsz, ezt kell megtalálnod a forráskódban a címkén belül

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

Néhány megfontolás

Nem elég, ha egyszerűen megosztjuk a cikkeket, vagy csak azért, hogy több oldalmegtekintést érjünk el. A lapozásnak egy bizonyos logikával kell rendelkeznie, amely a természetes navigáción alapul. Ehhez bele kell képzelnie magát a látogató helyébe, vagy úgy kell böngésznie az oldalát, mintha az valaki más honlapja lenne.

Minden egyes aloldalnak önálló oldalként kell működnie, vagy legalábbis előzetesen tájékoztatást kell adni arról, hogy mit találhat rajta, és logikusan be kell vezetni az új aloldalt. Elég tartalommal kell rendelkeznie ahhoz, hogy ne lehessen szegényesnek vagy kevéssé értékesnek tekinteni. A Google büntetia "tartalmi soványságot".

Az oldalszámozásnak egyértelműen jeleznie kell, hogy a cikk oldalakra van osztva. Az sem árt, ha legalább az első oldalon tartalomjegyzéket is elhelyezünk.

Bár nincs "hivatalos" szabály, kerülje a túlzott oldalszámozást. Általában ajánlatos az 1500/1800 szavas vagy annál hosszabb bejegyzéseket két vagy legfeljebb három oldalra osztani.

Post megosztása a Gutenberg natív oldaltörés blokkjával

Ennek különböző módjai vannak a pluginok segítségével, de mint tudod, én a lehető legkevesebb plugint használom.

A Gutenberg"Oldaltörés" blokkja a legjobb megoldás.

A blokk hozzáadja a rel="next" és rel="prev" és "canonical" címkéket a megosztott oldalakhoz, de ha biztos akarsz lenni abban, hogy ezek megjelennek, akkor ezt a funkciót beillesztheted a sablon functions.php fájljába.

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

A tervezés számít

Az oldalszámozás megjelenése és elemei nagyon fontosak, mert ezek lehetővé teszik a látogató számára, hogy azonnal megértse, hogy a cikk a következő oldalakon folytatódik, és hogy tudja, hány oldalból áll.

2- A "Page Break" blokk egy nagyon egyszerű elrendezést mutat. Így néz ki:

Amit mi keresünk, az valami sokkal szemléletesebb és vizuálisan vonzóbb.

Az első kép az első oldal alján, a második pedig a következő oldalakon lesz látható.

Ezt a megjelenést a teljes kódban szereplő CSS segítségével érheted el, amelyet a functions.php fájlodhoz adhatsz hozzá. Úgy alakíthatod ki, ahogyan csak szeretnéd, és illeszkedik a blogod színpalettájához és dizájnjához.

Kód:

Itt van a kód, amit most használok.

*Az igényeimhez igazodik, a CSS-t különválaszthatja és módosíthatja, nyelveket adhat hozzá vagy távolíthat el, és megváltoztathatja a szöveget.

Bár a kód célja, hogy megtalálja a Polylang által használt nyelveket, akkor is működni fog, ha nem használja a Polylangot. Azonban csak akkor fogja felismerni a nyelveket, ha az URL a következő szerkezetű: 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>';
});