皆さん、アウトライン意識してますか？？？
この記事を書くことになった元ネタはコチラ。
この記事を読んで勉強になったのは以下のこと。
- h1タグは複数あってもよい
- imgタグでもaltを書いてれば問題ない
今まであまり意識しておらず、この機会に自分のブログのアウトラインを調べてみました。
見出し
アウトラインって何？
アウトラインとは、HTML5で書かれたページの概要を示すものです。端的に言えば「webページの目次」です。
書籍の目次ってこんな風になっていますよね（今手元にある「印西地方史よもやま話」で例えます）。
印西地方史よもやま話 刊行に寄せて 第一章 黎明から戦国へ 1 印西台地の黎明 2 下総国・印旛郡・印西荘 ・・・ 第二章 村のきまりと暮らし 1 検地と村の成立 2 村のきまりと暮らし ・・・ ・・・ あとがき
こうした[タイトル]→[章]→[段落]という構成になっていると、どういった書籍か掴みやすいですね。
この構成のwebページ版がアウトラインというものなんです。
誰のためのアウトライン？
思うのは「見た目良く作ればいいんじゃないか？」ということ。見た目が分かりやすい構成になっていればそれでいいんじゃないか、というのは当然の疑問かと思います。
現状は、アウトライン自体は読む人のためではなく、Googleなどの検索エンジンのためのものとなっています。構成がしっかりしていると、検索エンジンはページ構成が把握しやすくなります。
そして、そんな分かりやすいページだと検索エンジンに評価されやすい、と言われています。
いずれは「見た目」で分かりやすさを評価する日が来るかもしれませんが、現状ではアウトラインが重要な要素になっています。
どうやってアウトラインが決まるの？
何気なく使っている「見出し」。これがアウトラインを決める重要なポイントです。
「見出し」をつかうとhタグで囲まれます。
先ほどの「印西地方史よもやま話」で例えてみましょう。hタグはこのようになります（あくまでイメージ、紙の本だからね）。
<h1>印西地方史よもやま話</h1> <h2>刊行に寄せて</h2> <h2>第一章 黎明から戦国へ</h2> <h3>1 印西台地の黎明</h3> <h3>2 下総国・印旛郡・印西荘<h3> ・・・ <h2>第二章 村のきまりと暮らし</h2> <h3>1 検地と村の成立</h3> <h3>2 村のきまりと暮らし</h3> ・・・ ・・・ <h2>あとがき</h2>
hタグ以外にもアウトラインを決める要素はあります。詳しく知りたい方は、こちらの記事をご覧ください。
自分のサイトのアウトラインを調べてみた
ようやく本題。
このブログはWordPressというブログを書くためのシステムを利用しています。WordPressではアウトラインは（自分でゴリゴリとカスタマイズしない限り）テーマに依存することになります。
で、このブログは「マテリアル」というテーマを使用しています。ほぼノーカスタマイズです。そこで、冒頭で書いたアウトラインはどうなっているのかな、ということを調べてみることにしました。
調査方法
Chromeブラウザの「HTML5 Outliner」というプラグインを使用します。
準備
1.ここにアクセスします
2.[CHROMEに追加]をクリックします
3.[拡張機能を追加]をクリックします
4.ブラウザの右上に「HTML5 Outliner」のアイコンが表示されます
5.「HTML5 Outliner」のアイコンをクリックするとこんな風にアウトライン表示されます
調査して気づいたこと
トップページ
トップページ一番上に「No text content inside h1」と表示されています。これは、Chromeプラグインの「HTML5 Outliner」の機能として、ヘッダーに画像が使われている場合にこうなってしまうようです。
このブログも画像を使用しているので「No text content inside h1」となってしまいまいした。画像を使用した場合、冒頭で紹介したとおりalt要素を記述していれば問題ありません。（テーマに依存しますが、おそらくどのテーマでもそこは考慮されていると思います。）
ブログ名が第一階層、そして「new Post」「カテゴリー名」が第二階層、各記事タイトルが第三階層となっています。
ちょっと気になるのは、カテゴリー下の「シェアする」「プロフィール」なども第二階層となっていること。見た目上はサイドバーにあるこもありますが、「new Post」「カテゴリー名」と同じ階層となっています。（もっともスマホで見る場合はサイドバーは画面下部になりますし、これ自体に問題があるわけでもないと考えています）
各記事
一番上が「Untitled BODY」となっているのは、BODYタグの最初の文字、つまりブログ名の部分がhタグではないないからだと考えています（間違っていたらご指摘ください）。各記事のページで最初に出てくるhタグは記事タイトル部分です。写真で言うと「【ブックマーク必須！】印西・千葉ニュータウンのブログ紹介」という部分。ここが第一階層。
さて、そこから記事内容がどこまでか、がアウトラインからは分かりにくいですね。ここが気になるところ。
WordPressテーマ「マテリアル」の作者であるNobuo_CREATEさんが、マテリアルの前に作ったテーマ「principle」のサイトに理由が書いてありました。
Principleでは、せめてサイドバーウィジェットが記事中に埋もれたような状態にならないように、サイドバーウィジェットの見出しにはh2を使っています。
もしサイドバーウィジェットの見出しがh4だと、例えば記事中の最後の見出しがh3だった場合、その直下のレベルにサイドバーウィジェットが潜り込んでしまうからです。
なるほど、納得。引用はPrincipleですが、おそらく「マテリアル」は「Principle」と同じ設計思想かと思います。
引用元にもある通り、回避するにはsectionタグを使用する必要があります。
はてなブログも調べてみた
とあるブログの管理者の許可を得て、はてなのアウトラインも調べてみました。テーマはデフォルト、カスタマイズしていない状態です。
こちら記事ページのアウトラインです。
第一階層が[ブログ名]、第二階層が[ブログ説明]、そして同じく第二階層に[記事タイトル]となっています。しかし、hタグについては
- [ブログ名][記事タイトル]がh1
- [ブログ説明]がh2
なんですね。これがはてなブログ仕様。設計思想的には
- ブログ名は最重要
- 記事タイトルも、もちろん最重要
- ブログの説明が次点で重要
- あとは本文次第
ということになるでしょうか。ただし、はてなブログの謎仕様で本文中の大見出しはh3タグとなっており、h2にするにはhtmlエディタから手動で変更する必要があります。もしくはマークダウン式で記述するか・・・。
まとめ
アウトラインを調べてみて、思ったことをまとめると以下の通りです。
- トップ名ページのブログ名「わにゴコロ」がh1となっているが、検索を考えるとキャッチフレーズのほうがよいかも
- 各記事ページは「記事はここまで」というのが伝わりにくいのではないか
- はてなブログはブログ名と記事タイトルどちらもキーになる（意味のないブログ名だと損する？）
このブログは最適解探してカスタマイズしていきます。