はてなブログに自動で目次が作成される機能、「目次記法」が実装されましたね！
「えんぷる」でも早速導入してみました。
このエントリーでは「目次記法」の使い方とその使い勝手、そしてSEO上のメリットをお伝えします。
「目次記法」は使い得ですよ！
目次記法とは
目次記法とは記事中の見出しから目次を自動的に作成するはてなブログの機能です。
僕も含め、多くのはてなブロガーが欲しかった機能なのではないでしょうか？
一方、Wordpressには自動で目次を作成するプラグインがありました。
今まではてなブログにこんな機能がなかったので「はてなブログにもないかな～」と思っていたら……。ついに実装してくれましたね！
目次記法の使い方
目次記法は「見たままモード」、「はてな記法モード」、「Markdownモード」のどのモードでも使うことができます。
具体的な使い方は公式で解説してくれているので割愛するとして、基本的にはこのように使います。
目次を挿入したい行に、次のように[:contents]と記述します。前後には文字や空白を入れず、1行で指定してください。
簡単ですね。
今までの記事に目次を作ろうと思うと全部の記事に[:contents]と書いたり、あるいはコピペしたりするのですが、見たままモードでコピペするときは注意が必要です。
みたままモードで編集するときの注意点
みたままモードの編集画面で[:contents]をコピペするとその部分のspanタグとそのstyle属性までコピーされてしまうので目次がうまく作成されません。
ここでHTML編集を確認すると目次を設置した部分がこんなコードになっています。
<p><span style=" color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff; "> [:contents] </span></p>
えらいこっちゃです。
うっかり見たままモードの編集画面で[:contents]をコピーしないように、メモ帳からコピーするなどして対処してください。
ちなみに正しいHTMLの表示はこうです。
<p>[:contents]</p>
使い勝手
肝心の使い勝手ですが、かなり使いやすいです。やはり過去の記事を編集する場合でも1行[:contents]と追記するだけなので楽ですね。
今までのエントリーが膨大な方はそれでも大変かと思います。過去記事の中でも人気のものだけに絞って他は諦める、ぐらいの方が気持ちが楽かもしれません。
今後のエントリーでは積極的に目次記法を使うといいと思います。
おすすめの目次の位置
目次記法では記事の好きなところに目次を設置できます。これが逆にユーザーの疑問を生んでいるかもしれません。というのも「目次はどこに設置するのがベストなんだろう？」と考えるユーザーが出てくるだろうと思うからです。
主に目次を記事の先頭に持ってくるのか、それとも記事の最初に書く導入文の後(最初の見出しの直前)に書くのがいいのかの二択になると思います。
僕のおすすめは記事の最初に書く導入文の後(最初の見出しの直前)です。
最初にそのエントリーにアクセスした人は突然目次を見せられても「なんのこっちゃ」と感じるのです。というか目次に目を通そうと思いません。
ブログにアクセスする人は目次よりも結論が先に欲しいからです。ユーザーは無意識にアクセスしたページに自分の欲しい情報があるかどうかを最初に探しています。
とするとユーザーが最初に欲しいのは記事のアウトラインではなく、記事の結論です。
記事の冒頭に導入文を書くのはブロガーがその記事で伝えている内容について簡単に説明するためです。
そう考えると目次は記事の最初に書く導入文の後(最初の見出しの直前)かな、と思います。これが絶対正しいとは言いませんが、個人的にはこの位置がしっくりきます。
また、今まで見てきたブログでも目次の位置は導入文の後であることが多かったように感じます。そう思うと多くのユーザーが慣れ親しんだ場所に目次を設置してあげるほうが良さそうです。
SEOに強い可能性も
目次記法で作成された目次は各見出しへのリンクになっています。つまりクリックすると該当の見出しにジャンプするのです。そして、各見出しにはアンカーが自動で設定されます。そして、このアンカーのIDには見出しの1文がそのまま指定されます。
この仕様がSEOに強くなりそうだと感じる理由です。
なぜアンカーがSEOに強いのか?
先日こんなエントリーを拝見しました。
このエントリーによると、Googleの検索結果からページ内のある部分に直接リンクが貼られるような機能があり、この機能は見出しにアンカーをつけていると有効になるそうです。
目次記法を使うとアンカーがすべての見出しに自動で付けられます。つまり、目次記法を使うだけでSEOに強くなる可能性があるということです。
使わない手はないですね。
まとめ
[:contents]という1行を挿入するだけで簡単に目次が作られるので使い勝手良し。見出しにアンカーが付けられるのでSEO良し。
使わないともったいない機能だと感じました。是非あなたも導入してみてください！
