ユーザービリティ向上とともにSEO効果も期待できるとされる、ブログ記事に「目次の自動挿入」についてサンプルコード(HTML＋JavaScript)を考察してみたいと思います。
ECストアのマーケティング手法として、未だに衰えを見せないブログ。
近年、SNSでマーケティングが脚光を浴びてはいるものの、長年に渡りブログは有効なマーケティング手法として親しまれています。
その強みとしては、
・製品の使い方や価値を深く掘り下げた解説が可能
・一過性で埋もれやすいSNSに対し、継続的に検索トラフィックを生むことができる
・有益な情報を求める読者を引き込み、メール登録やECストア訪問につながる
などがあります。
ただ、ブログを書くだけで潜在顧客が顧客が集まる事はなく、SEO(検索エンジン最適化)を施す必要があります。
今回は、ユーザービリティ向上とともにSEO効果も期待できるとされる「目次の自動挿入」について考察してみたいと思います。
こんなイメージ
例えば、自社サングラスを紹介するブログを作成するとしましょう。
読者に有益な情報を提供するためには、以下のような記事内見出しが用いられると思います。
・今夏、世界のサングラストレンドとは
・サングラスで作る、とっておきの夏コーデ
・紫外線対策も忘れずに
・ドライブもスポーツもこれ一で！
各見出しに「h2」など、見出しタグを実装すると、「目次」に反映される。それをクリックすると、見出しが設置された箇所にジャンプするというイメージです。
各ブログ記事に手動で設置する事も可能ですが、自動で見出しを検出し、目次に取り込むという機能を実装してみたいと思います。
サンプルコード
では、さっそくコードを見ていきましょう。まずがHTML。
<div id="toc">
<h2>目次</h2>
<ul id="toc-list"></ul>
</div>次はJavaScript。
document.addEventListener("DOMContentLoaded", () => {
const headings = document.querySelectorAll("#content h2"); // コンテンツ内の <h2> を取得
const tocList = document.getElementById("toc-list");
headings.forEach((heading, index) => {
// IDを自動的に追加（目次からリンク可能にするため）
const id = `heading-${index + 1}`;
heading.id = id;
// 目次の項目を生成
const listItem = document.createElement("li");
const link = document.createElement("a");
link.href = `#${id}`; // 生成したIDにリンク
link.textContent = heading.textContent;
// DOMに追加
listItem.appendChild(link);
tocList.appendChild(listItem);
});
});設置方法
ブログ記事のテンプレートファイル「main-article.liquid」に直接挿入する、もしくはスニペットを作成してレンダリング({% render %})する方法もあります。
ただ、テンプレートファイル(main-article.liquid)では、設置場所を指定する事でできないので、1番目の見出しの上に自動で挿入されるようにしたいものです。
また、見出しのない記事の場合は、自動で非表示になる機能も備えたいのではないでしょうか。
以下のサンプルコードは「見出しが1個以上あれば、目次を表示させる」という条件分岐を施した＆1番目の見出しの上に自動挿入できるJavaScriptコードになります。
document.addEventListener("DOMContentLoaded", () => {
const headings = document.querySelectorAll("#content h2"); // コンテンツ内の <h2> を取得
const toc = document.getElementById("toc");
const tocList = document.getElementById("toc-list");
if (headings.length === 0) {
// 見出しがない場合、目次を非表示にする
toc.classList.add("hidden");
} else {
// 見出しがある場合、目次を生成
toc.classList.remove("hidden");
headings.forEach((heading, index) => {
const id = `heading-${index + 1}`;
heading.id = id;
// 目次の項目を生成
const listItem = document.createElement("li");
const link = document.createElement("a");
link.href = `#${id}`;
link.textContent = heading.textContent;
// DOMに追加
listItem.appendChild(link);
tocList.appendChild(listItem);
});
// 最初の見出しの上に目次を挿入
const firstHeading = headings[0];
firstHeading.parentNode.insertBefore(toc, firstHeading);
}
});加えて以下のCSSコードも実装してください。
#toc.hidden {
display: none;
}簡単に解説すると、
①見出しがばい場合が、目次にhiddenというクラスが付与され、CSSタグdisplay:none;により非表示になる。
②見出しを取得した後、最初の見出し(headings[0]) をターゲットにし、insertBeforeメソッドを使用して、最初の見出しの上に目次要素(#toc)を挿入
になります。
以上、Shopifyブログ記事内に「目次の自動挿入」について、サンプルコードを交えて紹介しました。ぜひ活用してみてください！
