ブログにページ内目次リンクを貼る

ページ内リンクのSEO

書いた記事に、ページ内目次をつけることは

効果が下がっている傾向にあるとはいえ、2つの観点からSEO的にも有効です。

 

1.ページの上部にキーワードを配置できる

目次をページ上部につけることで、キーワードを上位に持ってくることが可能です。

構造化されているなら、ページの下の方にキーワードがあっても大丈夫ですが、基本的にはページの上部のほうからGoogleがクロールするので、

ページの上部に、ページに何が書いてあるかわかる施策をすることは、SEO的にも有効だと考えます。

 

2.ユーザービリティが向上する

ページに何が書かれているのか、目次を作成することは、ユーザーにとってもわかりやすい施策となります。

Googleが評価しているのは、うわべだけの対策ではなく、「ユーザーが喜ぶかどうか」なので、ユーザーにとってわかりやすいということは、SEOとしても評価される傾向にあります。

 

何が書いてあり、このページは読むべきか読まないべきかを判断することができるので、

むやみなページ離脱を防ぐことにもつながります。

 

 

ハードルが高いページ内目次移動

いざ、WordPressでページ内の見出しを目次にしようと思っても、

以下の作業が必要になるので、ハードルが高いです。

  1. 見出しを作り、アンカーをつける
  2. そのアンカーに対して、ページの上部に見出しとアンカーリンクをつける

これ、対(つい)になっている必要があるので、例えば見出しを変えたら、目次のほうも変えなければいけません。

その辺りは、ちょっと労力もかかるし大変だと思うのです。

 

便利なページ内リンクプラグイン

プラグインとしても配布されています。

Easy Smooth Scroll Links

『簡単にページ内リンクができるプラグイン「Easy Smooth Scroll Links」がスゴイ!』
https://net-biza.jp/wordpress-plugin-page-link/

ただ、

「英語の設定が苦手」とか

「ページ内リンクを簡単に貼れればそれでいい」

という場合は、もっとシンプルに実装が可能です。

 

 

今回配布するプラグインでは、見出しをつけるだけで、自動的にページ内リンクにする機能を実装しています。

目次の中のタイトルをクリックすると、ページ内の指定の場所に遷移します。


 

独自プラグインのダウンロード

弊社の開発するものは、「essence 〜エッセンス〜」という名前が付いています。

今回の「ページ内目次機能」は、「headline-essence」というプラグイン名で独自配布します。

正直、プラグインにする必要性は全くないです。
functions.phpが編集できる方は、そちらに追記してください。ここでは、functionsの調整が難しいサロン様向けに配布しています

 

ページ内リンクの設定方法

まず、ダウンロードした圧縮ファイル(.zip形式)を

プラグイン > 新規追加 からアップロードして、「有効化」してください。

 

 

このプラグインを設定すると

  • 固定ページではない、シングルページ(投稿や、カスタム投稿タイプ)である
  • 見出し1に設定されている

という条件のものに、アンカーリンクを貼るようになります。

過去の記事全てに影響するので、ご注意ください。

弊社の本家のテンプレートでは、以下の処理を行っています。

  • どの投稿タイプでこのプラグインを有効にするか決められる
  • 見出し1〜6のなかで、特定のclass名がついているものを、見出しにする

 

技術解説

このプラグインの動きと修正ポイントを解説していきます。

 

カスタム投稿タイプだけに限定したい時

プラグインの36行目で、

if(is_singular()){ 〜

という条件分岐があります。

ここで、「シングルページの場合」という条件づけをしているので、

例えば、カスタム投稿「column(コラム)」だけに適用したい場合は

if(is_singular('column')){ 〜

など、限定的な設定をしましょう。

 

特定のclassだけを処理したい時

39行目で、こちらの正規表現を使っています

preg_match_all('/<h1(.+)?>(.+)<\/h1>/u', $content, $h2_list);

ここで、見出しを1−6のどれかにして、classなどを固定したい場合は

preg_match_all('/<h[1-6] class="(.+)?headline_nav(.+)?">(.+)<\/h[1-6]>/u', $content, $h2_list);

などと書き換えます。

 

この際には、プラグインの以下の部分も修正が必要です。

43行目

list($h2_outer,$before,$h2_inner) = $h2_list;

list($h2_outer,$before,$after,$h2_inner) = $h2_list;

として、前後のclassを取得。

 

53行目の

$replace[] = sprintf('<div id="link%s" class="ancor"><h1'.$before[0].'>%s</h1></div>', $key, $val);

$replace[] = sprintf('<div id="link%s" class="ancor"><h2 class="'.$before[0].' '.$after[0].'">%s</h2></div>', $key, $val);

として、前後にclassを設定

※この時、headline_navを消さない場合は、before と afterの間に入れます。

 


など。

技術的に詳しくわからない場合は、最寄りの WEB業者さんにご相談ください。

 

 

 

スタイルの調整は、最寄りのデザイナーさんにご相談ください。

WordPress のテンプレートが崩れたり、脆弱性が発生した場合など

このプラグインを使った場合のいかなるトラブルも責任を負いかねます。
大変恐れ入りますが、自己責任のもとでご利用ください。

このページについてのお問い合わせ

必須お名前
フリガナ
必須メールアドレス
必須確認のためもう一度
メッセージ
こんなサロン開発室も読まれています