【2026年】Shopifyのブログ記事タグを一覧表示する方法｜選び方とおすすめアプリ

目次

• はじめに
• タグ一覧の表示方法を選ぶ5つの観点
  • 観点1：記事個別のタグか、ブログ全タグ一覧か（all_tags と tags の違い）
  • 観点2：タグの絞り込みURLはアプリなしでも作れる
  • 観点3：管理用タグを「見せない」制御ができるか
  • 観点4・5：デザイン自由度と、変更頻度
• 観点を当てはめる①：テーマのコード編集で実装する
  • 実装の全体像
  • スニペットでタグ一覧を出す（基本形）
  • 特定タグを非表示にする・強調する（運用向け）
  • タグの表示をリスト形式にする（アクセシビリティ重視）
  • どのファイルに差し込むか（複数ブログ・OS2.0 JSONテンプレートの場合）
  • タグページが増えすぎるのが不安な場合の対策
• 観点を当てはめる②：タグ表示アプリで実装する
  • おすすめアプリ「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」
  • 他のタグ表示アプリと比べてどう選ぶか
  • アプリのインストール手順
  • アプリをテーマに追加してタグ一覧を表示する
  • アプリの設定項目と使い方
  • よくある運用パターンの設定例
• 導入後に効かせる運用ルール
  • タグは増やしすぎない
  • 表記揺れを防ぐルールを作る
  • 強調タグは目的を持って絞る
  • 表示位置は「タイトル付近」が安定
• よくある質問
  • タグを付けたのに記事ページに表示されません
  • タグリンクを押すと 404 になります
  • blog.all_tags と blog.tags はどう使い分けますか
  • 日本語タグでも問題なく使えますか
  • 結局、コード編集とアプリのどちらを選ぶべきですか
• まとめ
• 参考記事

はじめに

Shopify のブログ記事が増えてくると、最初に効きはじめるのが「タグ一覧をどう見せるか」という問題です。記事が 10 本のうちは目次やトップページから何とかなりますが、50 本、100 本と積み上がると、ナビゲーションが一気に破綻します。実際、100 店舗超のブログを扱う海外アプリの分析でも、投稿数が増えるほど回遊が難しくなり、需要は「シンプルなタグ絞り込み」と「オンページ検索」の 2 系統に割れていくと指摘されています。

つまり Shopify ブログ タグ 表示は、見栄えの装飾ではなく、記事資産が増えたときに回遊を支えるナビゲーション設計そのものです。ここを行き当たりばったりで実装すると、後から「管理用タグまで表示されている」「日本語タグのリンクが 404 になる」「タグページが薄くて量産される」といった手戻りが発生します。

そこでこの記事では、実装方法を並べる前に どの観点で選ぶかを主役に置きます。選び方の軸を先に固めてから、その軸に各方法（無料のコード編集／タグ表示アプリ）を当てはめていく構成です。読み終えるころには、自分のストアがコード派かアプリ派か、どの設定で運用すべきかまで判断できる状態を目指します。

手軽に試したい方向けに、後半では
シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定 の導入手順とコードのサンプルもセットで載せています。

今回は、以下の記事を参考にしています。

• Shopifyでブログ記事タグを一覧表示する方法を5つ紹介！
• Shopifyのブログ記事タグを一覧で表示できるアプリを6つ紹介！
• Shopifyのブログ記事にタグ一覧を表示できるアプリについて徹底解説｜ご利用ガイド

タグ一覧の表示方法を選ぶ5つの観点

実装手段は突き詰めると「テーマのコードを編集する」か「タグ表示アプリを入れる」かの 2 択です。ただし、どちらが正解かはストアの体制と運用方針で変わります。先に判断軸を 5 つ立てておくと、後の章がただの手順書ではなく「自分はどれを選ぶべきか」の答え合わせになります。

観点	見るポイント	コード編集	タグ表示アプリ
ノーコードか	運用担当だけで設定変更できるか	Liquid/CSS の知識が必須	管理画面で完結
表示範囲	記事個別のタグか全タグ一覧か	どちらも実装可（要設計）	設定で切り替え可
絞り込み導線	タグクリックで一覧へ飛べるか	リンクを自前で組む	標準でリンク生成
デザイン自由度	テーマに馴染ませられるか	HTML から自由	設定＋追加CSSで調整
管理用タグの制御	内部タグを隠せるか	条件分岐を書く	除外設定で隠す

この 5 観点を頭に置いたまま、まずは多くの人が見落とす「表示範囲」から掘り下げます。ここが分かっていないと、コードでもアプリでも意図しない出方になります。

観点1：記事個別のタグか、ブログ全タグ一覧か（all_tags と tags の違い）

「タグ一覧を表示したい」と言っても、出したいものは 2 種類あります。読んでいる記事に付いたタグなのか、ブログ全体に存在するタグの索引なのかです。ここを混同すると実装で詰まります。

Shopify Liquid の公式仕様では、ブログのタグを参照するオブジェクトに blog.all_tags と blog.tags の 2 つがあり、挙動が明確に異なります（出典: shopify.dev のブログオブジェクト仕様）。

• blog.all_tags：ページネーションやフィルターの外も含めた、ブログ全記事のタグを返す
• blog.tags：いま表示しているビュー（フィルター済み）のタグだけを返す

サイドバーやフッターに「このブログのタグ索引を常に全件出したい」なら、使うべきは blog.all_tags です。blog.tags を使うと、タグページで絞り込んだ瞬間に一覧が現在のビュー分だけに縮んでしまいます。検索上位の解説記事ではこの差に触れていないものが多く、ここを正しく押さえているだけで実装の質が一段上がります。

一方、本記事のメインである「記事ページに、その記事のタグを並べる」用途では article.tags を使います。記事個別のタグはこちらです。

観点2：タグの絞り込みURLはアプリなしでも作れる

意外と知られていませんが、タグ別の絞り込みページは Shopify の標準機能で自動生成されます。各記事の編集画面でタグを設定すると、ブログ URL の末尾に /tagged/{タグのhandle} を付けたページが、そのタグの記事一覧として機能します。URL 構造は固定で、たとえばブログハンドルが news、タグが seo なら /blogs/news/tagged/seo です。

Liquid からは次の形でリンクを動的生成できます。

• {{ blog.url }}/tagged/{{ tag | handle }}

つまり「タグをクリックして同タグの記事一覧へ飛ばす」という回遊導線は、アプリを買わなくても無料で組めます。これは「アプリ vs 無料コード」を比較するうえで外せない事実で、絞り込み導線が欲しいだけならコード編集で十分成立する、という判断の根拠になります。

観点3：管理用タグを「見せない」制御ができるか

タグ運用で必ず出てくるのが、Hidden のような内部管理タグです。新着導線用の New、押し出したい記事の おすすめ といった読者向けタグは見せたい一方、編集都合のタグは表に出したくありません。

上位記事が共通して挙げる運用ノウハウも、ここに集約されます。

• 読者向けタグと管理用タグを分け、管理用は表示対象から外す
• 命名ルールを決めて表記ゆれを防ぐ（SEO と seo を混在させない）
• 記号はタグ本体に入れず、接頭辞で表現する

この「出し分け」を、コード編集なら条件分岐で、アプリなら除外設定で実現します。どちらを選ぶにしても、管理用タグの制御を前提に設計するのが失敗しないコツです。

観点4・5：デザイン自由度と、変更頻度

最後の 2 軸はセットで考えると判断が速くなります。デザインをテーマに完全に馴染ませたいならコード編集が有利です。HTML 構造から作れるので、既存のボタンやバッジに合わせ込めます。

ただし忘れがちなのが「変更頻度」です。タグ表示は一度作って終わりではなく、強調するタグを入れ替えたり、管理用タグを足したりと、運用しながら手が入ります。この調整がコード編集だと毎回ファイルを触る作業になり、運用担当だけでは回しにくくなります。逆にアプリは管理画面で完結するため、改善サイクルを回す前提なら継続コストが下がります。

ここまでの 5 観点を踏まえて、次から具体的な実装に当てはめていきます。先に無料のコード編集、その後にアプリの順で見ていきます。

観点を当てはめる①：テーマのコード編集で実装する

「月額費用をかけたくない」「テーマに完全に馴染ませたい」「HTML 構造まで作り込みたい」という、観点4（デザイン自由度）を最重視するストア向けの方法です。Liquid で article.tags をループして記事ページに出力します。

実装の全体像

基本的な流れは次の通りです。

• タグ表示用のスニペット（例：article-tag-list.liquid）を作る
• スニペットで article.tags をループして出力する
• ブログ記事テンプレート（例：sections/main-article.liquid）でスニペットを呼び出す
• CSS を調整する

なお、テーマによってファイル名や構成が違うため、「差し込み位置の探し方」も後ほど解説します。

スニペットでタグ一覧を出す（基本形）

まずはコード編集画面へ移動します。

snippets フォルダに article-tag-list.liquid を新規作成します。

以下を貼り付けます（基本形）。観点2で触れたとおり、リンク先は {{ blog.url }}/tagged/... の固定構造で、ここに各タグのハンドルを差し込みます。

{%- comment -%}
  snippets/article-tag-list.liquid
  Shopify ブログ記事ページにタグ一覧を表示する
{%- endcomment -%}

{%- if article.tags.size > 0 -%}
  <div class="article-tag-list" aria-label="記事タグ">
    {%- for tag in article.tags -%}
      <a class="article-tag-list__item"
         href="{{ blog.url }}/tagged/{{ tag | handleize }}"
         rel="tag">
        {{ tag }}
      </a>
    {%- endfor -%}
  </div>
{%- endif -%}

次に CSS です。CSS はテーマのスタイルファイルにまとめるのが理想ですが、サンプルとしてスニペット内に簡易で入れます（動作確認後に移動しても問題ありません）。

<style>
  .article-tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin: 16px 0;
  }
  .article-tag-list__item{
    display:inline-block;
    padding:6px 10px;
    border:1px solid rgba(0,0,0,.2);
    border-radius:999px;
    text-decoration:none;
    font-size: 13px;
    line-height: 1;
    background: rgba(0,0,0,.02);
  }
  .article-tag-list__item:hover{
    text-decoration: underline;
  }
</style>

リンク先の考え方は次の通りです。

• blog.url はブログの URL（例：/blogs/news）
• /tagged/ の後ろにタグのハンドル（URL 用）を付ける
• 日本語タグでも崩れにくいよう handleize を使う

筆者の実務感覚では、日本語タグを使うストアほどこの handleize の有無で 404 が出るかどうかが決まります。基本形でもここだけは省略しないのが安全です。

特定タグを非表示にする・強調する（運用向け）

観点3（管理用タグの制御）をコードで満たす実装例です。

• Hidden は表示しない
• New / おすすめ は強調表示する
• 接頭辞 # を付けて「タグ感」を出す（必要なら）

{%- assign excluded_tags = "Hidden" | split: "," -%}
{%- assign emphasized_tags = "New,おすすめ" | split: "," -%}
{%- assign prefix = "#" -%}

{%- if article.tags.size > 0 -%}
  <div class="article-tag-list" aria-label="記事タグ">
    {%- for tag in article.tags -%}
      {%- unless excluded_tags contains tag -%}
        {%- assign is_emphasized = emphasized_tags contains tag -%}
        <a class="article-tag-list__item{% if is_emphasized %} is-emphasized{% endif %}"
           href="{{ blog.url }}/tagged/{{ tag | handleize }}"
           rel="tag">
          {{ prefix }}{{ tag }}
        </a>
      {%- endunless -%}
    {%- endfor -%}
  </div>
{%- endif -%}

CSS は次のようにします。

<style>
  .article-tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }

  .article-tag-list__item{
    display:inline-block;
    padding:6px 10px;
    border:1px solid rgba(0,0,0,.2);
    border-radius:999px;
    text-decoration:none;
    font-size:13px;
    line-height:1;
    background: rgba(0,0,0,.02);
  }

  .article-tag-list__item.is-emphasized{
    border-color: rgba(0,0,0,.6);
    background: rgba(0,0,0,.08);
    font-weight: 600;
  }
</style>

ここが観点5（変更頻度）の分かれ目です。この方法は自由度が高い一方、強調タグや除外タグを変えるたびに excluded_tags や emphasized_tags の文字列を書き換えてデプロイし直すことになります。運用変更が頻繁なら、後述のアプリのほうが楽になりやすいというのは、まさにこのコードを見れば腹落ちするはずです。

タグの表示をリスト形式にする（アクセシビリティ重視）

タグはナビゲーション要素でもあるので、ul / li でリストとして表現するとアクセシビリティ的に扱いやすい場合があります。スクリーンリーダーで「タグの一覧」として読み上げさせたいときに有効です。

{%- if article.tags.size > 0 -%}
  <nav class="article-tag-list" aria-label="記事タグ">
    <ul class="article-tag-list__items">
      {%- for tag in article.tags -%}
        <li class="article-tag-list__item">
          <a class="article-tag-list__link"
             href="{{ blog.url }}/tagged/{{ tag | handleize }}"
             rel="tag">
            {{ tag }}
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </nav>
{%- endif -%}

CSS の例です。

<style>
  .article-tag-list__items{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:16px 0;
    padding:0;
  }
  .article-tag-list__item{ margin:0; padding:0; }
  .article-tag-list__link{
    display:inline-block;
    padding:6px 10px;
    border:1px solid rgba(0,0,0,.2);
    border-radius:999px;
    text-decoration:none;
    font-size:13px;
    line-height:1;
  }
  .article-tag-list__link:hover{ text-decoration: underline; }
</style>

どのファイルに差し込むか（複数ブログ・OS2.0 JSONテンプレートの場合）

テーマによって記事ページの構成ファイルが異なるため、次の方法で探すのが確実です。

• コード編集画面で article.content を検索する
• もしくは main-article や article-template で検索する
• 見つかったファイルの近くに「本文出力」があることが多い

よくある差し込み先の例は以下です。

• sections/main-article.liquid
• sections/article-template.liquid
• sections/main-blog-post.liquid（テーマにより名称が違う）
• templates/article.json（OS2.0 だと JSON テンプレートでセクション構成を管理）

OS2.0 テーマでは、記事ページの構成が .liquid ではなく templates/article.json で管理されているケースが増えています。この場合、スニペットを直接 render するのではなく、スニペットの中身を持つセクション（例：sections/article-tag-list.liquid に {% schema %} を付けたもの）を用意し、article.json の sections にそのセクションを追加して order に並べると、テーマエディタからも位置を動かせるようになります。本文の直前・直後に置く render 自体は次の 1 行です。

{% render 'article-tag-list' %}

複数ブログを運用している場合は、観点2の blog.url が「いま表示中のブログ」を指す点に注意してください。article 経由で記事を描画している文脈なら blog.url は記事が属するブログを返すため通常は問題ありませんが、ブログをまたいでタグ索引を作るときは参照元のブログを取り違えないようにします。

表示確認は、必ず PC とスマホの両方で行いましょう。タグは横並びになりやすいので、スマホでの折り返しや余白が崩れやすいポイントです。

タグページが増えすぎるのが不安な場合の対策

タグ表示を導入すると、「タグページが増える＝SEO が不安」という声もあります。ここは運用次第でコントロール可能です。

まず前提として、タグページは「回遊のための一覧ページ」として便利です。ただし、次の状態は避けたいです。

• タグが多すぎて、記事数 1〜2 件のタグページが大量にある
• 表記揺れで似たタグが乱立している（例：SEO と seo）
• 読者にとって価値が薄い一覧ページが増える

対策は大きく 2 つです。

• タグを絞る（運用ルールで解決）
• 必要ならタグページを noindex にする（技術的に制御）

「noindex にする」場合、ブログテンプレート側で current_tags を検知して meta robots を付与することがあります。例（テーマにより調整が必要）：

{%- if current_tags -%}
  <meta name="robots" content="noindex,follow">
{%- endif -%}

ただし、noindex はストアの SEO 方針に関わるため、むやみに入れるのはおすすめしません。まずは「タグを絞る」「表記揺れをなくす」運用面の改善から始めるのが無難です。

観点を当てはめる②：タグ表示アプリで実装する

コード編集が観点4・5の「作り込み」寄りだったのに対し、ノーコードと変更頻度（観点1・5）を重視するなら、タグ表示アプリが向いています。テーマエディタでアプリブロックを追加するだけで、表示・非表示・強調・デザインを管理画面から触れるようになります。

おすすめアプリ「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」

最初に試したい一本が
シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定 です。

ブログ記事ページ上でタグを整理・表示できるアプリで、テーマエディタでアプリブロック「UR: Blog Article Tag List」を追加するだけで動きます。先に立てた 5 観点に当てはめると、得意分野がはっきりします。

観点	このアプリでの満たし方
ノーコード	アプリブロック追加と管理画面設定のみ
表示範囲	フィルター未設定なら全タグ自動表示
絞り込み導線	タグリンク有効化で一覧ページへ遷移
デザイン自由度	色・余白・接頭辞＋追加CSSで調整
管理用タグ制御	指定タグの除外／指定タグのみ表示

公式のご利用ガイドによると、できることは具体的に次の通りです（出典: ご利用ガイド）。

• 指定タグのみ表示／特定タグの非表示を切り替えられる
• 重要なタグを強調表示（別デザイン）して注目を集められる
• タグ接頭辞を設定できる（# を付けて SNS 風に見せるなど）
• PC／スマホ別に余白を設定できる
• 追加 CSS でデザインを追い込める
• 多言語対応（日本語含む）

「タグは出したいけれど、管理用タグは隠したい」「New だけ目立たせたい」という、観点3で挙げた運用要望にそのまま応えられるのが強みです。コード編集だと条件分岐の書き換えが必要だった出し分けを、管理画面のフォーム入力で済ませられます。

料金は $2.99 / 月（年払い $29.99 / 年で 16% お得）で、7 日間の無料体験があります。まずは無料体験で、表示・運用の相性を確認するのがおすすめです。

他のタグ表示アプリと比べてどう選ぶか

タグ表示アプリは他にもあり、観点の重みづけによって候補が変わります。代表的な選択肢を、価格と機能の軸で並べておきます。

アプリ	料金の目安	絞り込み	オンページ検索	補足
UR: Blog Article Tag List	$2.99/月・7日間無料	あり（タグリンク）	なし	表示/非表示・強調・接頭辞・余白をノーコード設定
RuffRuff Product & Blog Tags	無料プランあり／Light $3.99/月・3日間無料	あり	なし	Online Store 2.0 限定、Built for Shopify 認定
HUE Blog Filter & Search PRO	各社プラン	あり	あり	タグ絞り込み＋サイト内検索に特化

選び方の目安はこうです。タグの表示・非表示・強調をノーコードで細かく回したいなら UR: Blog Article Tag List、Built for Shopify 認定で表示とクリック絞り込みに振り切りたいなら RuffRuff、記事数が多くタグだけでなくオンページ検索まで欲しいなら HUE が候補に入ります。投稿数が増えるほど「絞り込み」と「検索」のどちらが効くかは分かれるので、まず自店の記事規模で必要なのがどちらかを見極めると失敗しません。

※料金は変動する可能性があります。

アプリのインストール手順

ここからは、ご利用ガイドを元に「インストール」の流れを紹介します。アプリページはこちらです。

• シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定（Shopify App Store）

手順は次の通りです。

1. Shopify 管理画面 左下の「設定」をクリックします。
   

2. 「アプリ」をクリックし、「Shopify App Store」に移動します。
   

3. 検索窓に「シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定」と入力し、表示されたアプリをクリックします。
   

4. アプリ詳細画面で「インストール」をクリックします（権限を確認してインストールを完了してください）。
   

インストールが完了すると、アプリの管理画面が表示されます。

アプリをテーマに追加してタグ一覧を表示する

アプリはインストールしただけでは表示されません。次に、テーマエディタでアプリブロックを追加して、ブログ記事ページにタグ一覧を表示できるようにします。

テーマエディタ上では、アプリブロック名が 「UR: Blog Article Tag List」 と表示されます。

追加方法は「自動」と「手動」があります。

自動でアプリをテーマに追加

アプリ管理画面から、対象テーマを選んで「テーマに追加」する方法です。

1. Shopify 管理画面でアプリを開きます。
   

2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
   

3. テーマ編集画面が開いたら「保存する」をクリックして有効化します。
   

手動でアプリをテーマに追加

「タグを表示する位置を細かく調整したい」場合や、自動追加がうまくいかない場合は手動追加がおすすめです。

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
   

2. テーマエディタ上部のページ選択から「ブログ記事」テンプレート（例：デフォルトのブログ記事）に移動します。
   

3. タグ一覧を表示したい位置で「セクションを追加」または「ブロックを追加」をクリックします。
   

4. 「アプリ」タブから 「UR: Blog Article Tag List」 を選択して追加します。
   

5. 追加できたら「保存する」をクリックします。
   

これで、ブログ記事ページでタグ一覧を表示する準備が整いました。手動追加なら、観点4で重視した「表示位置」をタイトル直下にも本文末尾にも置けるので、デザイン面の自由度はコード編集に近づきます。

アプリの設定項目と使い方

テーマにアプリブロックを追加したら、ブロックをクリックして設定を行います。

5 観点のうち「管理用タグ制御」「絞り込み導線」「デザイン自由度」に直結する設定を、使いどころとセットで見ていきます。

表示モードと指定タグ（管理用タグの出し分け）

表示モードは、「指定タグ」の扱いを切り替える設定です。指定タグを 除外（非表示）したいのか、指定タグ だけ表示したいのかを選べます。観点3で挙げた「管理用タグだけ隠したい」ケースには、まず除外モードが使われます。

指定タグはカンマ区切りで入力します（例：sale,new,limited や Hidden）。空欄なら全タグが表示される仕様なので、最初は空欄で導入して「どんなタグが付いているか」を見える化し、そこからルールを整えるのがおすすめです。これはコードの excluded_tags を書き換える作業を、フォーム入力に置き換えたものと考えると分かりやすいです。

強調タグとタグリンク（絞り込み導線）

強調タグもカンマ区切りで指定します（例：New や おすすめ,人気）。読ませたい記事の導線にしたいタグだけを強調するのがコツで、増やしすぎるとどれも目立たなくなるため 1〜2 個に絞るのが扱いやすいです。

タグリンクを有効化すると、タグがクリック可能になり、観点2で説明した /tagged/ の一覧ページへ遷移できます。回遊性を上げたいなら基本は ON 推奨ですが、タグを乱立している場合は導線が散ることもあるので、「見せるタグの種類を絞る（指定タグだけ表示）」とセットで考えると綺麗にまとまります。

タグ接頭辞では、タグ名の前に付ける文字（例：#）とスペースの有無を設定でき、# New のように SNS 風の見た目にできます。

デザイン・余白・追加CSS（デザイン自由度）

デザイン設定では、表示位置・フォントサイズ・文字の太さ・文字色・背景色・枠線・角の丸み、そして強調タグだけ別色にする設定までノーコードで調整できます。「タグを置いたらテーマから浮いた」というときも管理画面で整えられます。

余白設定はタグ内（上下・左右）、タグ間（gap）、上部・下部（PC／スマホ別）を分けて指定できます。特にスマホはタップしやすさが重要なので、タグ内余白は少し広めのほうが UX 的に安定します。

設定項目で表現しきれないデザインは、追加の CSS で追い込めます。ホバー時だけ下線を出す、1 行に収めて横スクロールにする、最大幅を決めて折り返す、といった調整が可能です。ブラウザの検証ツールでクラス名を確認し、「追加の CSS」で上書きするとスムーズです。

よくある運用パターンの設定例

迷ったときの具体例を、観点に紐づけて 3 つ挙げます。

管理用タグは隠して、New だけ強調する（観点3＋導線重視の定番）

• 表示モード：指定タグを除外（非表示）
• 指定タグ：Hidden
• 強調タグ：New
• タグリンク：ON
• 接頭辞：#（お好み）

見せたいタグだけ表示して、カテゴリっぽく運用する（タグページが薄くなりにくい）

• 表示モード：指定タグのみ表示
• 指定タグ：SEO,Shopify,広告,事例,テンプレート
• 強調タグ：おすすめ
• タグリンク：ON

読者向けタグを 5〜10 種類程度に絞る運用と相性が良いです。

タグリンクを ON にして回遊導線を作る（観点2をフル活用）

• タグリンクを有効化：ON
• 表示位置：タイトル直下（または本文末尾）
• タグの余白：スマホで押しやすいように少し広め

タグ一覧は「ナビ」でもあるので、押しやすさ・見つけやすさを重視して調整すると効果が出やすいです。

導入後に効かせる運用ルール

どちらの方法を選んでも、タグ一覧は運用ルールとセットで初めて効きます。上位記事が共通して挙げるポイントを、実務での落とし穴とともに整理します。

タグは増やしすぎない

タグは増えるほど分類が細かくなりますが、増えすぎると読者が迷い、記事数の少ないタグページが量産され、表記揺れも増えます。目安として、読者向けタグは 10〜30 種類程度から始めるのが扱いやすいです。管理用タグ（Hidden など）は別枠として表示対象から外すと綺麗に回ります。

表記揺れを防ぐルールを作る

表記揺れは後から直すのが大変なので、最初にルールを決めます。

• 英字は大文字小文字を統一（SEO か seo のどちらか）
• 日本語はスペースの有無を統一（Shopifyアプリ / Shopify アプリ）
• 記号（#）はタグ自体には入れず、接頭辞で表現する

筆者の経験では、seo と SEO が混ざると /tagged/seo のページが 2 系統に割れ、どちらも記事数が薄くなるという地味に痛い事故が起きます。命名ルールは導入初日に決めておくのが安全です。

強調タグは目的を持って絞る

強調が多いと結局目立たないため、常時強調は 1〜2 個に絞り、キャンペーン時だけ sale を強調に入れ替えるといった運用が効果的です。アプリならこの切り替えをノーコードで回せるので、改善サイクルが速くなります。

表示位置は「タイトル付近」が安定

表示位置の定番はタイトル直下・本文冒頭・本文末尾の 3 つです。おすすめは タイトル直下で、読者が記事を開いてすぐ「この記事は何の話か」が分かり、クリックもされやすくなります。

よくある質問

タグを付けたのに記事ページに表示されません

よくある原因は、テーマにタグ表示が実装されていない、アプリを入れたがアプリブロックを追加していない、記事テンプレートが複数あり別テンプレートを見ている、のいずれかです。まずはテーマエディタで「どのブログ記事テンプレートを編集しているか」を確認しましょう。

タグリンクを押すと 404 になります

コード編集の場合、リンク先の組み立てがテーマやブログ構成と合っていない可能性があります。一般的には {{ blog.url }}/tagged/{{ tag | handleize }} で動きますが、複数ブログを運用している場合は「どの blog の URL を使うか」が重要です。アプリを使う場合はリンク先生成をアプリ側が担うため、こうしたトラブルが起きにくいのがメリットです。

blog.all_tags と blog.tags はどう使い分けますか

記事ページにその記事のタグを並べるなら article.tags を使います。サイドバーなどに「ブログ全体のタグ索引」を常に全件出したいなら blog.all_tags、いま絞り込んでいるビューのタグだけでよいなら blog.tags です。全件出したいのに blog.tags を使うと、タグページで絞り込んだ際に一覧が縮むので注意してください。

日本語タグでも問題なく使えますか

多くの場合は問題ありません。ただし URL に使うなら、コード編集では handleize を通しておくのがおすすめです。アプリ側はハンドル化を内部で処理するため、日本語タグでも崩れにくくなっています。

結局、コード編集とアプリのどちらを選ぶべきですか

5 観点で振り分けると決めやすいです。デザインを作り込みたい・月額を抑えたい・編集体制がある（観点4・5の作り込み寄り）なら コード編集、ノーコードで運用担当が頻繁に調整したい（観点1・5の変更頻度寄り）なら アプリが向いています。表示・非表示・強調・デザインを運用で頻繁に触りそうなストアほど、アプリの継続運用が楽になりやすいです。

まとめ

この記事では、Shopify ブログ タグ 表示を「選び方」から組み立て直し、5 つの観点（ノーコード／表示範囲／絞り込み導線／デザイン自由度／管理用タグ制御）に各方法を当てはめてきました。要点は次の通りです。

• 記事個別なら article.tags、ブログ全件索引なら blog.all_tags と参照先を使い分ける
• タグ別の絞り込みページは {{ blog.url }}/tagged/... でアプリなしでも作れる
• 作り込み重視ならコード編集、変更頻度と運用しやすさ重視ならアプリ

ノーコードで表示・非表示・強調・デザイン・タグリンクをまとめて回したいなら、最初に試したい一本が
シンプルブログ記事タグ一覧｜お手軽リンク付きタグ表示設定 です。7 日間の無料体験があるので、自店のタグ運用との相性を確かめてから判断できます。観点が整理できたいまなら、自分のストアがどちらに寄せるべきかも見えているはずです。

参考記事

今回は、以下の記事を参考にしています。

• Shopifyでブログ記事タグを一覧表示する方法を5つ紹介！
• Shopifyのブログ記事タグを一覧で表示できるアプリを6つ紹介！
• Shopifyのブログ記事にタグ一覧を表示できるアプリについて徹底解説｜ご利用ガイド