ブログを始めたとき、私はSEOや最適化のルールなど何も守らなかった。ただ投稿して終わりでした。そのため、最適化されていない画像が何千枚も、長い記事が何百本も溜まっていった。
その後、十分に最適化した他の長い記事を掲載し続けた。現在までに、1500語以上の記事が約100本、3500語以上の記事が数十本。その他にも1000ワード以上の記事がたくさんある。
これらのテキストのかなりの数は、"エバーグリーン"または時代を超越した記事として知られているものです。これらは典型的なクイックポストよりも完全なテキストであるため、通常、より良くランク付けされ、より恒常的なオーガニックトラフィックを受け取るリンクである。これは良いニュースだが、悪いニュースは、GoogleがURLをグループ別に処理するため、読み込みが最も悪く、悪い指標を与える記事でもあるということだ。
そして、多くの理由から、これは修正されなければならなかった。
なぜ長い記事を分割するのか？
長い記事をページに分割することが望ましい主な理由は、特に画像や動画などの要素が多い記事の負担を軽くするためです。
必要な 読み込み速度の改善だけでなく、より良いポジションを獲得する、あるいは少なくともそれを維持する可能性を高め、直帰率を減らすことで訪問者の滞在時間を増やし、1セッションあたりの訪問ページ数を増やす。
ただし、いくつか注意すべき点がある。SEOを薄める可能性のある新しいURLを作らないように、また、Googleや他のブラウザがコンテンツを1つの記事としてインデックスし続けるように、元のURLを維持すること。
最も重要なことは、 、rel="next "とrel="prev "を使って、それがシリーズであることをGoogleに示すことである。
例えば、3つのページに分かれた投稿の場合、2ページ目にアクセスする際には、ソースコードのタグの中に次のように記述する必要がある。
<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/" />いくつかの検討事項
単に記事を分割したり、ページビューを増やすだけでは不十分だ。ページネーションは、自然なナビゲーションに基づいた一定のロジックを持たなければならない。そのためには、訪問者の立場になって考えるか、他人のウェブサイトであるかのようにサイトを閲覧する必要がある。
各サブページは、独立したページとして機能するか、少なくともそのページで何が見られるかについての情報と、新しいサブページへの論理的な導入が先にあるべきである。貧弱、あるいは価値が低いと見なされるには、十分なコンテンツがなければならない。グーグルは「コンテンツが薄い」とペナルティを与える。
ページネーションは、記事がページごとに分かれていることを明確に示すべきである。また、少なくとも最初のページに目次を加えるのも悪くない。
公式」ルールはありませんが、過度なページ分割は避けましょう。一般的に、1500/1800ワード以上の投稿は、最大2～3ページに分割することが望ましい。
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- 「改ページ」ブロックは非常に基本的なレイアウトを示している。次のようになります：
そして、私たちが求めているのは、より説明的で視覚に訴えるものだ。
最初の画像は最初のページの下部に表示されるもので、2つ目の画像は次のページに表示されるものである。
この外観は、functions.phpに追加できるコードに含まれるCSSによって実現されます。好きなようにレイアウトでき、あなたのブログのカラーパレットやデザインにフィットします。
コード
これが今使っているコードだ。
*CSSを分離して修正したり、言語を追加したり削除したり、テキストを変更したりすることができます。
このコードはPolylangで使われている言語を見つけることを意図していますが、Polylangを使っていなくても動作します。ただし、URLが次のような構造の場合のみ言語を検出します：tusitio.com/ja/
// 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>';
});
