ブログの記事で最近よく目次が掲載されているのを見ると思います。
直接的なＳＥＯに対する効果があるかどうかは微妙な感じではありますが、ブログ記事を読んで下さる方のためには記事全体の構成をあらかじめ伝える役割があり記事の見易さに貢献できるツールだと思います。
ということで私は無料ブログでその導入をしました。
今回は目次の作り方についてお伝えしたいともいます。
1. 目次を作るならまずは記事を段落分けして『見出し』を作る
目次を作るならその目次に見合った『見出し』がなければなりません。
内容によっては段落も１階層だけでなく２階層、３階層とするケースもありますね。
『大見出し』
『中見出し』
『小見出し』
といった感じでしょうか？
1-1. 見出しはh2、h3といった『h』タグによって装飾
見出しは通常『h』タグによって装飾します。
h1、h2、h3といった具合に、１～６までの数字がhの後につきます。
数字が小さいほど大見出しです。
ブログの作りにもよりますが、通常はh1タグは記事のタイトルに使われますので、記事中のいちばん大きい見出しはh2タグということになります。
1-2. 『h』タグのＳＥＯ的な意味
hタグは、検索ロボットに対して『ワードの重要性』を伝える役割を担っています。
つまり記事中において『h2が最も重要なワードを含んでいる』、ということです。
検索ロボットに的確な情報を伝達して記事の評価を高めるためには、記事のタイトルと同様に『見出しにどんなワードを入れるか？』はとても重要になります。
1-3. 『h』タグの順位は順守する
h1 → h2 → h3 という順番で使用することが重要です。
h2 → h4 みたいに飛ばしてしまうのや
h3 → h4 → h2 みたいに順番が前後するのもおかしいです。
記事を読み易くするために見出しを入れているのにもかかわらず、階層がちぐはぐですと読者は混乱してしまいます。
正直なところ、見出しがちぐはぐになるくらいなら、見出しが無い方がいいかもしれません。
このことは検索ロボットに対しても当てはまります。
従ってＳＥＯ的にも「問題あり」とみなされてしまいます。
2. 見出しのデザインはＣＳＳで行うのが基本
見出しは毎記事で記載するため、ＣＳＳでデザインするのが基本です。
直接記事ページに見出しデザインのタグの記述をすると、毎回記事執筆時の手間が増えてしまいます。
また、デザインの変更をしたい場合には全てのページのタグを書き換えなければなりません。
このブログで採用したワードプレスの『テーマ』にはあらかじめ見出しデザインがＣＳＳに記述されていました。
私はこのデフォルトの見出しデザインを自分好みのデザインにＣＳＳの記述を書き換えて使っています。
こんな感じです。
3. 見出しができたら『目次』の体裁を考える
見出しを記事に作れたら目次の体裁を考えます。
このブログの目次はこんな感じですね。
ちなみに私の運営している無料ブログではこんな感じの目次になっています。
グーグルの検索結果評価基準として導入された『モバイルフレンドリー』に対応すべく始めたブログのレスポンシブデザイン化。
現在進行形で進む私のブログの改造化についてご紹介したいと思います。ブログの改造をお考えの方はご参考にして下さい。
当ブログの目次と比べるとやたら凝ってます。
無料ブログでは目次の上に記事タイトルと記事の簡単な紹介文をセットにして画像のサムネイルも表示させています。
4. 目次の構成
目次の構成は、大きく分けて「見た目」つまりデザインと「見出しへのリンク」の２つになります。
4-1. 目次のデザインについて
私の運営している２つのブログでは目次のデザインは随分異なります。
目次として成り立たせるために最低限必要な項目に絞ったのが本ブログ「シェアノート」の目次のデザインかと思います。
- 目次であることがわかる見出し
- 記事本文の見出しの記述
- 目次から該当見出しへのリンク
この3つがあれば目次としては十分です。
4-2. 見出しへのリンク
目次の見出しをクリックすると文中の見出しのところまでジャンプしてくれます。
当記事の目次の見出しををクリックしてみて下さい。
その記事のところまでジャンプしてくれますね。
私が書くブログの記事でこの機能を利用する読者がどれだけいるか、と言う点を考えると作者の自己満足とも言えますが、まぁ、ないよりは便利だと思います。
5. ワードプレスならプラグインで簡単に目次が作成できる
当ブログの目次が至ってシンプルになっているのは…
設定の仕方が良くわからないからです。(^_^;)
設定の仕方が判らないのに何故私は目次が作れるのでしょうか？
ワードプレスを利用すると面倒な作業は便利なプラグインが私の代わりにやってくれます。
Table of Contents Plusというプラグインはとてもスグレものです。
初期設定さえ済んでしまえば、hタグを付けたものを見出しと判断して自動的に目次を作成、表示してくれます。
これが無料で使えるんですからありがたい。
更に「見出しが少ない記事にわざわざ目次は必要ない」という点を考慮して、目次の作成の要否を「記事ごとに判断」してくれます。
作成要否の基準となる見出し数も設定できます。
目次表示位置も『最初の見出し(hタグ)の直前』などで指定出来ます。
つまり、プラグインを導入すると、見出しさえ作れば自動的に目次が出来上がっているのです。
これには感動しました。
何せ目次作りにはかなりの手間が掛かっていましたからね。
私の師匠のブログに設定方法も懇切丁寧に説明してくれています。
6. 無料ブログではこんな記述を毎回行っていました
私の無料ブログの目次は各ページにタグを記述することによって行っていました。
従って、この本記事に掲載した無料ブログの目次例を記述したタグだけで以下の様な量になります。
まぁ、記述に下地に色を付けて角を丸くしたボックス要素を使っている点が記述を長くしている大きな理由ではありますが、それ以外にも面倒なことがありました。
それはリンクを貼る作業です。
6-1. 記事文中へのリンクの貼り方
通常のリンクのタグは以下の様になりますね。
WordPress 目次の作り方-自動作成プラグイン Table of Contents Plus の設定方法
<a href=”http://xxxxxxx” target=”_blank”>WordPress 目次の作り方-自動作成プラグイン Table of Contents Plus の設定方法</a>
「a href=”http://xxxxxxx”」の「” ”」で囲んだところがリンク先のＵＲＬの記述になります。
記事内へのリンクはこのリンク先のＵＲＬの記述に代えて、『アンカー名』を使います。
飛ばしたい先に以下の様なタグを記述します。
<a name=”アンカー名”>飛ばしたいジャンプ先</a>
アンカー名は好きな言葉を入れて構いません。
ジャンプ先を指定したら、リンク先指定の記述をＵＲＬではなく以下の様にします。
<a href=”#アンカー名”>大見出し「その１」</a>
リンク先を見出しにした場合のタグの記載例は…
<a href=”#target1″>『ワードプレスって最高』にジャンプ</a>
↓ ここに飛びます。
何が良いかって便利なんです。
<a name=”target1″></a>
『ワードプレスって最高』
そんな気持ちになるんです。
これを実際に記述すると…
ちなみにこのやり方だと実際にはジャンプ先は指定先の「次の行」になってしまいます。
これが読者に不親切だと思ったので、無料ブログでは、こんな風な記述にして、ジャンプ先の上一行が残るようにしていました。
<a href=”#target2″>『ワードプレスって最高』にジャンプ</a>
↓ ここに飛びます。
何が良いかって便利なんです<a name=”target2″></a>。
ワードプレスって最高
そんな気持ちになるんです。
これを実際に記述すると…
このブログの体裁で唯一どうにかしたいのが、このタイトル行の下にジャンプしてしまうことです。
気持ち的にはやっぱり目次の見出しをクリックしたら、その見出しを表示させたいですよね？
気になるけど直し方がわからないので今は我慢してます。
6-2. 手間がかかって大変だったんです
無料ブログでは上記の記事内リンクの記述を毎回行っています。
大分慣れて当初よりは手際もよくなりましたが、それでも結構な手間でした。
それがワードプレスなら見出しを作れば自動的にやってくれます。
手間と言えば、通し番号を記述するぐらいです。
7. 見出しの通し番号もワードプレスなら自動化できる
尚、プラグイン『Table of Contents Plus』では自動的に通し番号を作成することも出来なくはないので、その手間も省くことも可能ではあります。
階層構造もきちんと整理して番号を振ってくれます。
ただ、文中の見出しにはその通し番号が表示されません。
従いまして目次は番号があって、実際の見出しには通し番号が振られていない、というのが私には不親切に思えて、自分で見出しタイトルに番号を自分で振っていく方法を採用しています。
コメント
はるさん
はじめまして。
人気ブログランキングからやって参りました
うみぞうと申します。
以前から目次を付けたくて
アンカーリンク設定で崩れて
挫折していたので
めっちゃめちゃ役に立ちました！
早速私のブログにも設置してみました。
嬉しいです＾＾
本当にありがとうございました！
今後とも、よろしくお願いいたします。
うみぞう
うみぞうさん、コメントありがとうございます
<(_ _)>
私の記事がさっそくお役立ちできて大変うれしいです。
是非今後も当ブログをご贔屓に(^^♪
よろしくお願いします。
[…] 1-1. 見出しはh2、h3といった『h』タグによって装飾 […]