Google拡張機能「HTML5 outliner」導入方法から使い方まで1分解説
アウトラインとは
アウトラインとは見出しなどの階層構造のことをいいます。
この記事の上部にある 目次[show] をクリックしてみると「１アウトラインとは」の下に「1-1アウトラインの役割」「1-2アウトラインの決め方」と表示されていると思います。これがまさに目次であり、今回紹介する「HTML5 outliner」を使用してチェックするものになります。
アウトラインの役割
アウトラインの役割ですが、ユーザーが欲しい情報をすぐに見つけられるようにという「目次」の意味と検索エンジンが内容を読み取りやすくなるという2つの役割があります。例えばあなたが、「html outline」と検索したときに検索エンジンは大見出し（h2タグ）とそれに続く内容に検索キーワードが含まれているページを表示します。
アウトラインを意識してサイトを構築することで、検索エンジンに表示してもらいやすくなります。
アウトラインの決め方
アウトラインは見出しタグである「h1～h6」の階層構造によって決まります。そして記事全体を<article>タグで囲み、見出しを<section>タグで囲むことでよりわかりやすいアウトラインを作成することができます。
例えばこの記事をHTMLで表現すると以下のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<article>
<h1>Google拡張機能「HTML5 outliner」導入方法から使い方まで1分解説</h1>
<section>
<h2>アウトラインとは</h2>
<h3>アウトラインの役割</h3>
<h3>アウトラインの決め方</h3>
</section>
<section>
<h2>アウトラインチェックツール</h2>
<h3>HTML5 Outliner</h3>
<h3>GoogleChromeHTML拡張機能「HTML5 Outliner」</h3>
</section>
</article>
</body>
</html>アウトラインチェックツール
先ほどのhtmlファイルのアウトラインをチェックする方法ですが、WEB上で完結できます。
HTML5 Outliner
HTML 5 Outlinr：WEB上で使えるアウトライン確認ツール
https://gsnedders.html5.org/outliner/
このページでは３つの方法でアウトラインをチェックすることができます。
- １，HTMLファイルのアップロード
- ２，URLを入力
- ３，HTMLの内容を直接入力
先ほどのHTMLファイルをアップロードしてみると以下のような結果になりました。
GoogleChromeHTML拡張機能「HTML5 Outliner」
GoogleChromeの拡張機能に追加することも可能です。
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja
Chromeに追加を押してインストール完了後に新しくアイコンが追加されます。調べたいWEBページでそのアイコンをクリックすることでアウトラインを調べることができます。もし、アイコンが表示されない場合は一度ページをリロードしなおしてみると表示されます。
まとめ
アウトラインにこだわることで、検索エンジンから表示される確率があがり、あなたのサイトへの来訪者が増える可能性があります。難しい設定も必要なく調べることができるので、ご自身の使いやすいツールを是非活用してみてください。この記事があなたのサイトのSEO順位を上げることに貢献できれば幸いです。
ここまで読んでいただき、ありがとうございました。
