
ブログテーマをJINで作り始めてだいぶ経過したけど、現在はプラグインでRich Table of Contents(以下RTOC)の自動目次生成を思考停止で使ってます。
コロブさんのブログ見て、できれば「SEO的にはHTMLでコード書いて作成したら良い」と書いてあったけどどうやるの?



こんにちは!あいうえおLIFE(@pledge17uchs)です。
今日はこんな疑問に答えていきます。
- WordPressで目次をプラグインなしで手作りするメリット
- WordPressで目次をプラグインなしで手作りするデメリット
- 目次をプラグインなしで手作りするやり方とテンプレート
ぼくは記事をブロックエディタで書いていますが、19記事100万ブロガーのコロブさんの記事を見てテンプレートを作って、記事を書くようになりました。
テンプレートを作らずに、書いている人は1度こちらのコロブさんの記事をどうぞ。
最後に、手作りの目次作成の手順とテンプレートを掲載したので、必ず最後までお読みください。
WordPressで目次をプラグインなしで手作りするメリット


cocoonユーザーは考えずとも、自動生成されていて、JINや他のテーマに関しては、自動生成できないので、RTOCのプラグインでやっているのではないでしょうか?
WordPressで目次を手作りできるメリットを下記で詳しく解説します。
1-1:目次から見出しへ飛ぶコードの書き方の理解ができる


RTOCプラグイン入れとく→自動でできるので、目次をポチると思考停止で見出しへ飛ぶっていう感覚ですが、それを脱却できるはず。
手作り目次のメリット
- HTMLのaタグのリンク元作り
- IDタグをつけること
- アンカリングの構成が理解できるようになる
1-2:あるあるな目次じゃないので目をひくデザイン


上記の目次デザインはかなり見受けるようになりましたね。
手作りで目次作成している人自体が少ないので、実践すれば珍しく思われること間違い無いです。
1-3:Google先生がキーワード拾いやすくなる


手作り目次でaタグ使って、href属性を用いながら、IDを書いて、H2やH3見出しにIDを指定してそろえて書くことで、Google先生のSEO評価も上がると、コロブさんも語られていました。
HTMLをしっかりと書いてあげると、言語が通じる(Web上で)。
Google先生とコミュニケーションがスムーズにいくんだと思います。
WordPressで目次をプラグインなしで手作りするデメリット


この辺は何を基準にするかによります。
ブロックエディタは確かに、直感的でわかりやすいのですが、肝心な部分は手書きできるようになりたいですよね。
そのなかでも、WordPressで目次を手作りするデメリットを下記で3つあげてみます。
2-1:ある程度HTMLの知識や慣れがないとしんどい
はじめは目次と見出しがリンクするテンプレートだけ見ても「なんのこと?」「もうやめよっかな」ってなるくらい難しく感じる。
- 「ol」と「ul」の違い
- 「li」って何?
上記が理解できないとチンプンカンプンになります。
- 前者は、1、2、3、4のように「li」でリストが順序記号ついて増えていく
- 後者は、●、●、●のように「li」でリストを丸ポチのようにふやしていくことができます
2-2:読者に困ることはない
シンプルに見やすくなるので、知りたいことがあるかないか判別しやすい。



おしゃれすぎると、逆に内容よりもデザインに目がいってしまうことが多いのでは無いでしょうか?
そうなると、内容を読み飛ばされる可能性があります。
2-3:Google先生は嫉妬するかもしれない
HTMLコードをしっかり綺麗に書いてWeb制作している人がGoogle先生は好きになるかもですが、好きすぎて逆に嫉妬してしまうかも。
あれだけすごいアルゴリズムを持っているGoogle。
嫌われるくらい、SEO評価好かれてみたいものですね。
目次をプラグインなしで手作りする手順とテンプレート


時間がない方は、ここから作業してもらうと、手作りで目次作成できると思います。
ぼくはすでに、RTOCのプラグインを削除してしまいました。
詳しく解説します。
3-1:ブロックエディタでカスタムHTMLを使用して目次作成




- 記事の場所で、目次を入れたい位置に、ブロックエディタで+ボタンを押して呼び出していきます
- カスタムHTMLのブロックをつくり、そこにHTMLコードを書きます
- コピペOKなので、HTMLコードをペーストして、サンプルの目次内容を記事内容に合わせて編集します
3-2:各見出しaタグとIDをそろえる






- 対象の見出し(H2やH3)の場所で、HTML編集を呼び出す
- HTML編集可能になるので、H2タグやH3タグのあとに、id=" "を指定していく
- 例:「目次の大見出し1」の「a href="#a1"」と、「本文の大見出し1」の「H2 id="a1"」と一致するように編集していきます
3-3:目次と見出しのHTMLはこれ
目次の手書きHTML(各見出しへ飛ばす)が下記。
<strong>Contents(目次)</strong></p>
<ol>
<li><a href="#a1">大見出し1つ目</a>
<ul>
<li><a href="#a2">1-1見出し3</a></li>
<li><a href="#a3">1-2見出し3</a></li>
<li><a href="#a4">1-3見出し3</a></li>
</ul>
</li>
<li><a href="#a5">大見出し2つ目</a>
<ul>
<li><a href="#a6">2-1見出し3</a></li>
<li><a href="#a7">2-2見出し3</a></li>
<li><a href="#a8">2-3見出し3</a></li>
</ul>
</li>
<li><a href="#a9">大見出し3つ目</a>
<ul>
<li><a href="#a10">3-1見出し3</a></li>
<li><a href="#a11">3-2見出し3</a></li>
<li><a href="#a12">3-3見出し3</a></li>
</ul>
</li>
<li><a href="#a13">まとめ|あああ</a>
</li>
</ol>
下記が「手書き目次」と一致する、記事の本文(大見出し1つ目から)のHTMLの中身。
<h2 id="a1">大見出し1つ目</h2>
<img src="画像URL" width="100%" height="100%" alt="大見出し1">
<h3 id="a2">1-1見出し3</h3>
<h3 id="a3">1-2見出し3</h3>
<h3 id="a4">1-3見出し3</h3>
<h2 id="a5">大見出し2つ目</h2>
<img src="画像URL" width="100%" height="100%" alt="大見出し1">
<h3 id="a6">2-1見出し3</h3>
<h3 id="a7">2-2見出し3</h3>
<h3 id="a8">2-3見出し3</h3>
<h2 id="a9">大見出し3つ目</h2>
<img src="画像URL" width="100%" height="100%" alt="大見出し1">
<h3 id="a10">3-1見出し3</h3>
<h3 id="a11">3-2見出し3</h3>
<h3 id="a12">3-3見出し3</h3>
<h2 id="a13">まとめ|あああ</h2>
ブロックエディタだと、HTML編集することないですが、目次と見出しだけはチャレンジしてみましょう。
まとめ|プラグイン便利だが良し悪し


ぼくも上記は同様に思っていました。
コロブさんのブログ記事を読んでHTML書いてみたらしっかりと理解できました。
まずは、下記。
- サンプルの目次と見出しがリンクするHTMLコードコピペ
- 記事中の目次に位置する部分にカスタムHTMLのブロック呼び出して、使ってみる
SWELLテーマなら、目次生成はプラグインなしですよ。
それでは、今日はここまで読んでいただき、ありがとうございました!