ブログの記事に目次をつけたほうがいい理由

ブログの目次とは

ブログの目次とは、タイトルやリード文の下につけられているページ内リンクのことです。
ページ内リンクとは、通常のリンクが他のページへ画面が遷移するのに対して、同じページ内の特定の場所に移動するリンク機能のことです。

目次をつけたほうがいい3つの理由

欲しい情報に素早くアクセスできる

目次があることで欲しい情報に素早くアクセスできるようになります。

検索エンジンは、網羅的に書かれてある記事を高く評価しているため、検索で上位にきている記事は比較的ボリュームがあります。
そんなボリュームのある記事のなかから必要なコンテンツのみを素早く探してだすためには目次が重要な役割を担います。

記事の振り返りがしやすい

一度記事を一通り読んだあとで、一部のみを振り返りたい場合などにも目次は便利です。

検索結果に見出しが表示される場合がある

ページ内リンクを使って目次をせっていしていると、検索結果に、検索キーワードに応じて見出しとリンクが表示されるようになります。
検索ユーザーにとって満足度の高い検索結果の表示に繋げることができるようになります。

目次のつけ方

サンプルコード

HTMLとCSSのサンプルコードになります。jQueryを使えば簡単にスムーススクロールも実装できます。

<div id="toc">
	<div>目次</div>
	<ol>
		<li><a href="#toc1">はじめに</a></li>
		<li><a href="#toc2">目次とは</a></li>
		<li><a href="#toc3">目次のメリット・デメリット</a></li>
		<li><a href="#toc4">目次の設置方法</a></li>
		<li><a href="#toc5">目次のデザインパターン</a></li>
	</ol>
</div>
<h2 id="toc1">はじめに</h2>
<h2 id="toc2">目次とは</h2>
<h2 id="toc3">目次のメリット・デメリット</h2>
<h2 id="toc4">目次の設置方法</h2>
<h2 id="toc5">目次のデザインパターン</h2>

<style>
#toc {
	
}	
#toc div {
	text-align: center;
}	
#toc ol {
	
}	
#toc ol li {
	
}
</style>

WordPressの場合

WordPressであればプラグインをインストールすることで簡単に目次を作ることができます。

おすすめのプラグインは［Table of Contents Plus］というプラグインで、本文中の見出しタグをもとに目次を自動生成してくれます。
もちろん過去記事に目次を適用されます。

設定方法の解説記事もあわせてご覧ください。