ニュースサイトや多くのメディアでページを分割して複数のページに分かれている記事があります。
ページが分割されているサイトを見る時に「読みやすい」と感じる一方、短い文章で分割されているとクリックするのがめんどくさく感じます。
このブログではページを分割していませんが、プラグインを使用する場合としない場合での設置を試してみました。
ページを分割するメリット
- 長い記事が読みやすくなる
- PVが増える
記事があまりに長いと読む前から圧倒され、読まずに他のサイトに逃げてしまうことがあります（笑）。
そのため、記事があまりに長くなりそうなら記事を分けるか、ページを分割すると読みやすくなると思います。
そして記事を分割することでPV数が伸び、直帰率が下がると思います。
デメリット
- ページを切り替えるのが面倒
- 伝えたい内容がつたわらない
- 悪い印象を与えるかもしれない
スマホユーザーは特に縦長のページに慣れているような気がします。
そのため、少ない文章でページが分割されて5ページくらいに分かれていると、「面倒」としか感じません。
また複数ページに分かれている記事は最初のページで離脱する人も多いと思います。
記事の冒頭に重要な部分の要約を書いておかないと、記事を分割しないよりも大事な部分を読んでもらえない可能性が高い気がします。
それ程長い記事でもないのに記事を分割して複数ページになっていると、
「そんなにPV稼ぎたいのかよ！」
と、悪い印象を与えてしまうかもしれません。
WordPressの記事を分割する方法
- nextpageタグを使う
- プラグインを使う
プラグイン「あり・なし」どちらの方法でも簡単に設置できます。
けれど全ての過去記事を複数ページに分割したい場合、手作業でタグを追加していたら大変です。
その場合はプラグインを使用したほうがいいと思います。
nextpageタグを使う
「テキストエディタ」でページを分割したい箇所に、
<!--nextpage-->
を追加します。
ただ、「ビジュアルエディタ」では動作しないので、記事をビジュアルエディタで編集する場合は他の方法で記事を分割します。
ビジュアルエディタで編集する場合
ビジュアルエディタには「ショートカットキー」が用意されています。
上記画像の「はてなボックス笑」をクリックすると「キーボードショートカット」一覧を見ることができます。
「page breakタグ」が記事を分割するタグで、「p」が割り当てられています。
「shiftキー+altキー+p」で「page breakタグ」を挿入できます。
表示の確認
テキストエディタ、ビジュアルエディタでタグを設置すると設置した箇所で記事が分割され、ページネーションが表示されています。
ページネーション（ページャー）はテーマに依存するので、cssでスタイルを整えましょう。
プラグインで実装
Automatically Paginate Postsというプラグインを使用すると、自動的にページが分割されます。
Automatically Paginate Postsの設定はプラグインの設定ページではなく、「設定」→「表示設定」でします。
- supportted post tipes -分割する投稿タイプ
- Total number of pages-分割するページ数
- approximate words per pages-分割する段落（おそらく）の指定
適応する投稿タイプ、分割するページ数、段落を指定すると自動的にページが分割されます。
分割するページ数を「２」に設定したはずなのに4ページになっています。
もしかしたらTotal number of pagesはページ数じゃないのかもしれません（笑）。
記事ごとに自動でページを分割しない設定もできます。
メリット
- 過去記事も自動的に分割される
- タグを入力する手間が省ける
記事数が多いサイトの場合は過去記事に「nextpageタグ」を入れるのは大変な作業だと思います。
プラグインを使用すると、過去記事も自動的にページが分割されるので、手間が非常に省けます。
デメリット
- 分割する場所をページごとに指定できない
自動的に設定通りページが分割される結果、分割場所が一律に決定されます。
「ここじゃねーよ（笑）」
というところでページが分割されてしまうこともあります。
広告を自動的に挿入するプラグインと同じ問題が生じます。
けれど記事数が多い場合は、やはりプラグインで実装するのが楽だと思います。
重複コンテンツの問題
「next pageタグ」を用いてページを分割すると「重複コンテンツ」と認識されてしまうことがあります。（テーマによっては対応済み）
色々調べてみた結果、分割ページの「重複コンテンツ」の問題は、「rel=next/prev」を用いて対応することをGoogleは推奨しているようです。（参照：Core Marketing Blog「ページ送りに対するSEO施工方法」）
そこで＜head＞内に、以下のコードを記述することで、「rel=next/prev」が実装されます。
<?php $pages = count( explode('<!--nextpage-->', $post->post_content) ) ; ?>
<?php if ( $pages > 1 ) { ?>
<?php if ( $page == $pages ) { ?>
<?php if ( $page == 2 ) { ?>
<link rel="prev" href="<?php the_permalink(); ?>">
<?php } else { ?>
<link rel="prev" href="<?php the_permalink(); ?>/<?php echo $page - 1; ?>">
<?php } ?>
<?php } else { ?>
<?php if ( $page == 0 ) { ?>
<link rel="next" href="<?php the_permalink(); ?>/<?php echo $page + 2; ?>">
<?php } else { ?>
<?php if ( $page == 2 ) { ?>
<link rel="prev" href="<?php the_permalink(); ?>">
<?php } else { ?>
<link rel="prev" href="<?php the_permalink(); ?>/<?php echo $page - 1; ?>">
<?php } ?>
<link rel="next" href="<?php the_permalink(); ?>/<?php echo $page + 1; ?>">
<?php } ?>
<?php } ?>
<?php } ?>
分割したページのソースを確認して、以下のように「rel=next/prev」が表示されれば大丈夫です。
<link rel="prev" href="サイトのURL">
<link rel="next" href="サイトのURL/2/">
※このブログで使用している賢威７は「賢威の設定」で設定できます。
参考記事：ONZE:「【WordPress】投稿記事を複数ページに分割する「<!–nextpage–>記法」の使い方」
まとめ
このブログでページを分割すると、PV稼ぎにしか思われないような気がします（笑）。
けれどコードを除いて3000字を超えるような記事ならば、ユーザーの利便性を考えるとページを分割したほうがいいかもしれません。
今日のたつじんへの一歩
たつじんｗ ただ自分がサイトを見る立場だと、PC表示ではページが分かれてないほうが読みやすい気がします。
スマホのみページを分割するのは実装が大変な気が。。。
