WordPress

WordPress の目次利用でできる簡単なSEO対策

WordPress の目次利用でできる簡単なSEO対策
相談者

・うまく指定した記事内のトピックへリンクが機能しない
・サイト内で別ページの特定場所へ設定したリンクがうまく動かない

目次が自動生成されている場合、記事内でのリンク先が変更されることがあります。

これは記事のリライト時、見出しの構成に修正、追加、削除を行った際に発生しやすい現象の1つです。

本記事の内容
  • WordPress の目次自動生成機能について
  • 目次・見出しが内部SEO対策で重要な理由と設定例
  • 見出しの設定方法

目次がどうやって作られているのか、どうして大事なのがわかると、サイト全体を通じて検索対策を施せるようになります。

これから新しいページを作っていく時、またはリライトする時。

ここで紹介したテクニックを活用して、簡単だけど大事な検索対策を施し、1歩でも検索結果上位10位以内表示を目指しましょう。

この記事を書いた人

WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。

WP愛だけじゃ生きていけない😂

そよ
そよ
Vektor Passport(ライセンス期間1年)

WordPress の目次自動生成機能について

WordPress の目次自動生成について

今ではほとんどのWordPressテーマには、目次作成機能が備わっていると思います。

自動的に作ってくれるので大変便利な機能です。

もし目次機能がついてない場合は、プラグインを導入すればすぐに目次を追加することができます。

本題に入る前に、WordPress が目次を生成してくれるメリットとデメリット、目次生成の仕組みについて書いてます。興味の無い方は直接本題「重要な見出しには HTML アンカー(ID)を設定すること」へ移動してください。

WordPress 目次自動生成のメリット

WordPress テーマが目次を自動生成してくれるメリット

  • 自動で作ってくれること
  • 見出し内容の変更もすぐに反映してくれること
  • 見出しづくりを意識しなくて良い

もし目次機能がなくて、自分で目次をつくることを想像してみてください。

簡単なプログラムが書けるなら、見出しだけを抽出してリストにするだけでできますが、それができずに、「手作業」で目次を作ることを想像したら・・・?

そして、その目次の順番の変更、追加、削除という作業が発生したら・・・?😱

WordPress が無いころ、手書きでホームページを作っていた頃、目次が無いページが多かったのかな。ともあれ、工夫して見出しリストを作成して作ってました。

この目次自動生成がどれだけ便利な機能なのかわかりますよね。

WordPress 目次自動生成のデメリット

WordPress テーマが目次を自動生成してくれるデメリット

  • 場所は大体固定されている(最初のH2見出しの前、とか)
  • デザインは好みが分かれる
  • 目次リンクは「意味のないアルファベットと数字」である

デメリットらしいデメリットではないかもしれませんが、今回は3番目の目次リンクについてのお話になります。

WordPress 目次自動生成の手順

目次を自動生成するとき、大体こんな感じで作ってます。

  1. 記事内の見出し(設定によっては見出しレベル2~4)をリスト化
  2. 上から順番に番号割り振り
  3. 割り振った番号を各見出しへ割当て
  4. 割り当てられた番号を元にリンク生成
  5. リストへリンクを設定

なので、記事公開後に同一記事内で移動をする時、目次を使えばすぐに移動できます。
まあ、当たり前のことなんだけどw

事件は、記事の構成が変わった時に起きます😎

そよ

あ、記事の中に絵文字入れるの興味あれば、「WordPress で絵文字を入れるプラグイン eomoji toolbar」の記事をご参考に。

編集バーからサッと絵文字を入れられる大変便利なプラグインですよ。

記事の構成が変わったら目次はどうなる?

目次の自動生成機能の動きからなんとなくわかると思いますが、機械と人間との考え方のギャップがここで生まれます😅。

例えばこんな感じの見出しで目次を作ったとします。

例)

  • 目次のつくり方
  • 目次のメリット・デメリット
  • 目次が作れるプラグイン

これを目次の自動生成で見出しリンクを作ると、

  • 目次のつくり方(#mokuji-01)
  • 目次のメリット・デメリット(#mokuji-02)
  • 目次が作れるプラグイン(#mokuji-03)

と機械的に番号を割り振ってリンクを作成していきます。

このリンクがあるからこそ目次は目次の役割、つまりクリックするとその場所へ移動してくれるのですね。

ここで、リライトをして構成に変化がありました。

例)

  • 目次のつくり方
  • 目次のメリット・デメリット
  • もし目次を自分でつくるなら?
  • 目次が作れるプラグイン

これ、どうなるかというと、

  • 目次のつくり方(#mokuji-01)
  • 目次のメリット・デメリット(#mokuji-02)
  • もし目次を自分でつくるなら?(#mokuji-03
  • 目次が作れるプラグイン(#mokuji-04

追加されたところから番号が変化していますよね。

同じページ内で目次のリンクを使って移動するならこれでも良いです。

ですが、同じページ内からのテキストリンク、または他のページから「目次が作れるプラグイン(mokuji-03)」へ直接リンクをしていたとしたら、どうでしょうか?

これ、ご自分のテーマでも試してみてもらえると良いのですが、おそらくリンクが切れてて、リンク先のページの最上部へ移動します(エラーにはならない)。

自分のページの目次用見出しリンクの見方

自分のページの目次リンクを確認するのは簡単です。

Chrome だとこんな感じ。

  1. ページを開く
  2. 右クリックして「ページの検証」をクリック
  3. 検証エリア左上の矢印をクリック
  4. 左側の目次をクリック
  5. 右側にHTMLコードが表示されるので展開する

そよ

サンプルテーマは JIN 。JIN は RTOC というプラグインで目次を生成しています。テーマは違ってもやることは変わりません。

詳しくは「JIN は目次プラグインで目次を作ります」をご参照ください

■図解はこちら(クリックすると開く)

ページを開く

アンカーリンク名の確認方法1
STEP
1

右クリックして「ページの検証」をクリック

アンカーリンク名の確認方法2
STEP
2

検証エリア左上の矢印をクリック

アンカーリンク名の確認方法3
STEP
3

左側の目次をクリック

アンカーリンク名の確認方法4
STEP
4

右側にHTMLコードが表示されるので展開する

アンカーリンク名の確認方法5

ここでは、「#rtoc-1」がリンクだとわかりますね。これが見出しへのリンク名です。

STEP
5

ここで見つけた ID(rtoc-1) を別場所からのリンクに使います。

で、前置き長くなったけれど、こっからが本題。

この変化する ID をどうやって変化させないのか。

高度な設定の「HTMLアンカー」を設定するとこの問題を回避できます。

そよ

目次は見出しが集まっているので分かりやすいかなと。

右側の詳細が見にくい場合は、実際に左側のページ内を目的の場所まで移動して、見出しをクリックしても良いですよ。

WordPress の目次・見出しは大事な内部SEOの一つ

目次・見出しの構造は重要

WordPress で記事を書くときに必ず使う見出し。

ここへ別の場所からサッと移動できたら便利なのに、って時にも使えます。

よくあるのは、「ページの上部にある目次へもどりたい」とか。

▲目次へ戻る というリンクをクリックしたら目次へ戻ると便利ですよね。

このページでも、

興味の無い方は直接本題「重要な見出しには HTML アンカー(ID)を設定すること」へ移動してください。

というリンクをクリックしたら、自動的にここへ画面がスクロールしたきましたね。

別の記事へのリンクを設置するのも内部リンクですが、このように、ページ内の特定の場所へ移動する、というのも立派な内部リンクの一つなのです。

そよ

JIN で目次へ戻るリンクを設置する簡単な方法」では、実際に JIN で目次へ戻るリンクの作り方を説明してます。

手書きでも見出しにIDを付けていた~大事なSEO内部対策

WordPress がない時、自分たちで手書きをする時、見出しには自分たちで ID をつけていました。

目的は同じです。目次を作るときに利用するのと、内部リンクを作る時に利用するためです。

ただ違うのは、内部リンク名に意味をもたせていた、という点です。

例えばURL。

日本語厳禁、意味不明な数字URL厳禁、というのは SEO では常識です。(日本語URLは同仕様もなく意味不明なURLになる。)

それと同様に、内部リンクも意味をもたせるのが当たり前でした。

だから、「詳しくはこちら」という文字列や、「++/p?=1234」とかリンクは絶対に作りません

必ず、「WordPress で絵文字を入れるプラグイン eomoji toolbar」で紹介してます、というように意味のある文字列に、意味のあるURL(https://wptg.work/plugin/emoji-toolbar-plugin-for-easily-adding-emoji-to-wordpress/#how-to-install)を付けます

何(Googleクローラー)が、どうやってサイトやリンクを理解(English)するのかという点は、基本的なルールとしてとても大事です。

そよ

だから、同じ理屈で考えると、ドメインって特化型サイトでは超重要ですよね。

URLは短くて分かりやすいものが良いというのは正しいですが、上のように長くても意味が伝わりやすくしても順位は落ちないので、多少長くても問題ないです。

例)
Kinesis Advantage360 機能・価格の情報やレビューまとめ
(https://soyo.life/review/organize-information-and-reviews-before-buying-kinesis-advantage360/)
2~10位以内にちゃんと表示される。

HTML アンカー(ID)の設定方法

HTML アンカー(ID)を設置するのはとても簡単です

  1. 見出しを作る
  2. 見出しを選択して右側の詳細設定欄から、「高度な設定」を選ぶ
  3. HTML アンカー欄へ ID を入力する

そよ

以下、HTML アンカーの値を ID と書いてます。

これだけです。画像つき手順はこちら。

見出しを作る

アンカーHTMLの設定方法1
STEP
1

高度な設定を選ぶ

アンカーHTMLの設定方法2
STEP
2

HTML アンカー欄へ ID を入れる

アンカーHTMLの設定方法3
STEP
3

ID 命名のルール

ID 名は、自由に決めて書いてはいけません。

使える文字列は次のとおりです。

全部半角文字(これ重要)。

  • アルファベット(A~Z、a~z)
  • 数字(0~9)
  • ハイフン(-)
  • アンダーバー(_)

組み合わせの注意事項は次のとおりです。

  • 先頭は必ずアルファベット
  • アルファベットの大文字と小文字は区別する
  • 同じページ内では、同じIDは名を指定できない
  • 空白をいれない

もちろん、日本語(漢字・ひらがな・カタカナなど)はだめですよ♪

設定した見出しへの内部リンク作成方法

次に、自分が設定した ID へリンクを設置する方法です。

  1. ID 名をコピーする(入力ミス防止)
  2. リンクを貼りたい場所を選んで、リンク設定状態にする
  3. 先頭に#を入れて、その後に ID をペーストする
  4. 確定ボタンを押して終了

画像つき手順はこちらです。

ID 名をコピーする(入力ミス防止)

アンカーリンクへリンクする方法1
STEP
1

リンクを貼りたい場所を選んで、リンク設定状態にする

アンカーリンクへリンクする方法2
STEP
2

先頭に # を入れて、その後に ID をペーストする

アンカーリンクへリンクする方法3
STEP
3

確定ボタンを押して終了

アンカーリンクへリンクする方法4
STEP
4

プレビュー画面で動作を確認する

STEP
5

実際に自分のブログ記事にも内部リンクを作成してリンクできるかどうか試してみましょう!

WordPress 目次生成のFAQ

プレビューで目次が表示されません

テーマによってはプレビューで目次が表示されない場合もあります(JINとか)。

動作確認目的であるなら、すでに公開している記事で HTMLアンカー に ID を設定して挙動を確認しましょう。

ID を設定しても、ページ内の目次リンクが壊れることはありませんので安心して試してください。

HTMLアンカー設定してもうまく動きません

アンカーが動かない理由は大きく2つあります。

  1. アンカーの指定方法・アンカー名が間違っている
  2. 設定したアンカーの名前が命名規則から外れている

①は、設定しているリンクをもう一度よく確認します。全角半角、スペースなど。

②は意外と多いです。ID の命名ルールはこちらをご覧ください

HTML アンカーを正しく設定してもうまく動きません2

上記の問題を確認しても動かない場合は、テーマやプラグインが生成するIDを疑いましょう。

自分のページの目次用見出しリンクの見方 で紹介したとおりに、まず自分のページを確認します。

次にリンクで指定してる場所を探し出し、そこの ID がちゃんと指定された ID になっているかを確認しましょう。

HTMLアンカーを正しく設定してもうまく動きません(例外)

テーマによっては、自分で設定したHTMLアンカーをご丁寧にも消してくれる、または一時的に非表示になるものがあります・・・😱

そういうテーマの場合は落ち着いて対応しましょう。

  1. まず、保存します。
  2. IDを設定してすぐに保存します。
  3. ページを保存します。
  4. プレビューを表示させて移動できるか確認します。
  5. 保存します。
  6. 一度編集中のページを閉じて再度開いて設定を確認します。

ここまでやっても解決しない場合は、テーマに問題があるかもしれません。

WordPress の目次と内部リンク活用のまとめ

最初は WordPress 目次 の問題だけ書こうと思ったのに、いつの間にか HTMLやCSS、SEOの話になってしまいましたが・・・。

検索対策でもし取り組んでないのであれば、こういう簡単で小さい、でも基本的なところはしっかりと抑えておくとよいですよ。

順位を上げていけるようになります。

WordPress や HTML・CSS 、SEO の基本的な考え方を学びたいなと思ったら、下記の書籍がおすすめです♪

▼HTMLやCSSの基本的なことを学びたい(初級者)

▼WordPress の基本的なことを学びたい(初級者)

著:Mana
¥2,090 (2023/09/19 09:09時点 | Amazon調べ)

そよ

上2冊は、Webデザイン界で有名な Mana さん著。さすがに全ては身につかないけれど、最初の一冊で傍に置いておいて良いかと。

▼HTML や CSS のガイドにオススメの一冊(中級者)

▼SEO 対策の基本的なことが学べる(中級者)

著:西山 悠太朗, 著:小林 睦, 編集:丸山 弘詩
¥2,950 (2022/10/28 10:26時点 | Amazon調べ)

そよ

上2冊は、辞書的な扱い。読んでも良いけど調べたりするときに使える。SEO技術バイブルは本当にバイブル。

▼内部リンク対策に特化した本(中級者?)

著:瀧内 賢
¥1,760 (2022/10/28 10:22時点 | Amazon調べ)
そよ

技術書はどれも良い値段するんだけど、ネットで調べるよりも体系的にまとめてあるし、さっと調べられるので手元にあると便利ですよ。あと Kindle より書籍をオススメします!

分厚いので書店で確認してからでも良いかと。

最後まで読んでくださりありがとうございました。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間1年)