ブログ記事を読む際、多くの読者は記事全体の構成や内容を事前に把握したいと考えます。特に長文の記事では、目次があることで必要な情報に素早くアクセスできるため、読者の利便性が大幅に向上します。この記事では、Shopifyのブログ記事に目次を表示するメリットと、その具体的な設定方法について詳しく解説します。
Shopifyのブログ記事に目次を表示するメリット
ブログ記事に目次を表示することには、以下のように多くのメリットがあります。
読者の利便性が向上する
ブログ記事に目次を設けることで、読者は記事の全体像を一目で把握できるようになります。また、目次内のリンクをクリックすることで、読者が関心を持つ部分に素早くアクセスできるため、読者にとって利便性が大幅に向上します。
記事構成が明確になる
ブログ記事に目次を作成する過程で、筆者自身も記事の構成を整理することができます。これにより、論理的で読みやすい記事を書くことができるようになり、読者にとってもわかりやすい内容になります。
SEOへ好影響を期待できる
目次内のリンクは内部リンクとして機能するため、SEO（検索エンジン最適化）に好影響を期待できます。また、Googleは構造化されたコンテンツを好む傾向にあるため、目次を設けることはSEO対策としても有効です。
離脱率が低下する
目次によって読者が記事内を探索しやすくなるため、サイト内の滞在時間が増加します。また、読者が必要な情報にアクセスしやすくなることで、離脱率の低下にもつながります。
モバイルフレンドリーな記事作りができる
モバイル端末（スマートフォン端末）では、長い記事をスクロールするのが大変ですが、目次のリンクを使えば、読者は容易に目的の場所へ移動できます。これにより、モバイルフレンドリーな記事作りが可能になります。
Shopifyのブログ記事に目次を表示する方法
Shopifyのブログ記事に目次を表示する方法は以下になります。
事前準備
今回はShopifyアプリ「RuffRuff 目次作成」を利用する方法をご紹介します。RuffRuff 目次作成は、ブログ記事や商品ページなどShopify内のあらゆるコンテンツに目次を表示できる日本製のShopifyアプリです。無料かつシンプルな設定で利用することができます。まだインストールされていない方は、下記のリンクよりインストールをお願いします。
RuffRuff 目次作成のインストールはこちら
手順1 目次のデザインをカスタマイズする
RuffRuff 目次作成アプリを開き、左メニューの「目次のカスタマイズ」をクリックします。目次のカスタマイズ画面より、目次のタイトルや目次の生成に利用する見出しを選択し、画面右上の「保存」をクリックします。
手順2 目次を表示したい場所にアプリブロックを追加
「オンラインストア > テーマ」の順にアクセスし、目次を導入したいShopifyテーマの「カスタマイズ」をクリックします。
テーマエディタの画面中央上部のセレクトボックスから「ブログ記事」のテンプレートを選びます。次に「ブロックを追加（または、セクションを追加）」をクリックし、アプリタブを選択します。アプリ一覧から「目次」という名称のアプリブロックを追加、画面右上の「保存する」をクリックします。
ブログ記事に目次が表示されたら、無事に設定できています。
目次の設定方法で問題が発生した場合の対処法
ブログテンプレートにアクセスできない
公開されているブログ記事が1件も存在しないのが原因の可能性が考えられます。「Shopify > ブログ」の順にアクセスし、公開ステータスのブログ記事が存在するか確認しましょう。
「目次」のアプリブロックが表示されない
下記の原因が考えられます。
原因1 RuffRuff目次作成をインストールしていない
RuffRuff目次作成をインストールしましょう。
原因2 「ブログ記事」のテンプレートにアクセスしていない
テーマエディタの画面中央上部のセレクトボックスから「ブログ記事」のテンプレートを選びましょう。
原因3 利用中のShopifyテーマがOnline Store 2.0に対応していない
下記のヘルプページでOnline Store 2.0テーマ以外のセットアップ方法を紹介されていますので、ヘルプページを参考にセットアップを行いましょう。
アプリブロックを追加したが目次が表示されない
下記の原因が考えられます。
原因1 ブログ記事内に見出しが存在しない
目次は見出しタグ（例：<h1>, <h2>, <h3>）を元に作成されるため、ブログ記事内の見出しタグが正しく使用されていない場合、目次が生成されない可能性があります。見出しタグが適切に使われているか確認しましょう。
原因2 キャッシュの問題
Shopifyプラットフォーム上で特定のキャッシュが原因で、新しく追加した目次がすぐに表示されない可能性があります。テーマエディタで「保存」ボタンをクリックした後、ブラウザのキャッシュをクリアするか、ページをリフレッシュしましょう。
原因3 ブログ記事をShopify純正のブログエディタ以外で作成している
RuffRuff 目次作成はShopify純正のブログエディタで作成したブログ記事のみサポートしています。PageflyやGempageなどで作成したブログ記事はサポートしていないため、もし目次を表示させたい場合はShopify純正のブログエディタで作り直す必要があります。
最後に
ブログ記事に目次を設置することで、読者の利便性が高まり、SEOにも効果的です。Shopifyアプリ「RuffRuff 目次作成」を利用すれば、簡単に目次を追加・カスタマイズできます。ぜひこの記事を参考に、あなたのブログ記事に目次を追加してみてください！
