SEO에 영향을 주지 않고 긴 워드프레스 글을 페이지로 분할하는 방법

블로깅을 시작할 때는 SEO나 최적화 규칙 등을 전혀 따르지 않았습니다. 그냥 글을 올리기만 하면 끝이었죠. 그러다 보니 최적화되지 않은 수천 개의 이미지와 수백 개의 매우 긴 글이 쌓이게 되었습니다.

그런 다음 충분히 최적화한 다른 긴 글도 계속 게시했습니다. 그래서 지금까지 1500단어 이상의 글은 약 100개, 3500단어 이상의 글은 수십 개가 있습니다. 그리고 1000단어 이상의 다른 글도 많이 있습니다.

이러한 텍스트 중 상당수는'에버그린' 또는 시대를 초월한 아티스트라고 알려져 있습니다. 일반적인 빠른 게시물보다 더 완전한 텍스트이기 때문에 일반적으로 순위가 더 높고 지속적인 유기적 트래픽을 받는 링크입니다. 좋은 소식이지만, 나쁜 소식은 Google이 URL을 그룹별로 처리하기 때문에 이러한 글은 로딩 속도가 가장 느리고 지표가 나쁘다는 것입니다.

여러 가지 이유로 이 문제를 해결해야 했습니다.

긴 게시물을 분할하는 이유는 무엇인가요?

긴 글을 페이지로 나누는 것이 좋은 주된 이유는 특히 이미지 및/또는 동영상 및 기타 요소가 많은 글의 부하를 줄이기 위해서입니다.

로딩 속도를 개선하는 것 외에도 더 나은 포지셔닝을 달성하거나 최소한 유지할 수 있는 가능성을 높이고 이탈률을 줄여 방문자의 체류 시간과 세션당 방문 페이지 수를 늘릴 수 있습니다.

하지만 몇 가지 유의해야 할 사항이 있습니다. SEO를 희석시킬 수 있는 새 URL을 만들지 않도록 원본 URL을 유지하여 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- '페이지 나누기' 블록은 매우 기본적인 레이아웃을 보여줍니다. 다음과 같이 보입니다:

그리고 우리가 찾고 있는 것은 좀 더 설명적이고 시각적으로 매력적인 것입니다.

첫 번째 이미지는 첫 페이지 하단에 표시되는 이미지이고 두 번째 이미지는 다음 페이지에 표시되는 이미지입니다.

이 모양은 functions.php에 추가할 수 있는 전체 코드에 포함된 CSS를 사용하여 구현할 수 있습니다. 블로그의 색상 팔레트와 디자인에 맞게 원하는 대로 레이아웃할 수 있습니다.

코드

제가 지금 사용하고 있는 코드는 다음과 같습니다.

*내 필요에 맞게 조정되며, CSS를 분리하여 수정하고 언어를 추가하거나 제거하고 텍스트를 변경할 수 있습니다.

이 코드는 폴리랑에서 사용하는 언어를 찾기 위한 것이지만, 폴리랑을 사용하지 않는 경우에도 작동합니다. 그러나 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>';
});