サムネイル

【2026年】Shopifyのブログ記事タグを一覧表示する方法|おすすめアプリも紹介!


目次

はじめに

Shopify でブログ運用をしていると、こんな悩みにぶつかることがあります。

  • 記事に付けたタグを、記事ページ上でわかりやすく表示したい
  • 読者に「関連するテーマの記事」をもっと読んでもらい、回遊してほしい
  • Hidden のような管理用タグは見せず、Newおすすめ だけ目立たせたい
  • テーマをいじりたくない(できればノーコードで済ませたい)

このあたりは、まさに Shopify ブログ タグ 表示の改善で解決できます。

ただし、Shopify は「タグ」という仕組み自体はあるものの、テーマによっては記事ページにタグ一覧が標準表示されていないことも多く、「どう実装するのが正解?」となりがちです。

本記事では、Shopify のブログ記事ページでタグ一覧を表示する方法を、次の 2 パターンで解説します。

  • テーマのコード編集で実装(Liquid のサンプルコード付き)
  • アプリで実装(ノーコード、導入と設定が簡単)

そして、手軽に試したい方向けに、おすすめアプリとして
シンプルブログ記事タグ一覧|お手軽リンク付きタグ表示設定 もあわせて紹介します。

読み終えるころには、「自分のストアはどっちの方法が合うか」「どう設定すれば運用しやすいか」までイメージできるはずです。

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

Shopify のブログ記事タグとは

Shopify のブログ(Blog)には、記事(Article)ごとに タグ(tags) を付与できます。

タグは、ブログ(カテゴリ)とは別軸で記事を横断的に分類できるラベルです。たとえば次のように使えます。

  • テーマ別:SEO / 広告 / Shopifyアプリ / 運用ノウハウ
  • 難易度別:初心者向け / 上級者向け
  • 目的別:テンプレート / 事例 / チェックリスト
  • 運用管理:New / おすすめ / Hidden

タグを付けると、Shopify ではタグごとに絞り込んだ一覧ページ(タグページ)が作られます。一般的な URL の形は次の通りです。

  • /blogs/{ブログハンドル}/tagged/{タグハンドル}

たとえばブログのハンドルが news、タグが seo なら、/blogs/news/tagged/seo のようなページが存在します。

ここがポイントで、タグを記事ページで見せられるようにすると、読者がタグをクリック → 同タグの記事一覧へ移動 という流れが作れます。
つまり、タグは「記事の分類ラベル」であると同時に、回遊導線(内部リンク) としても活躍します。

Shopify のブログ記事ページでタグ一覧を表示できる?

結論として、Shopify のブログ記事ページでタグ一覧を表示することは可能です。

ただし、次の事情で「最初から表示できない」ケースが多いです。

  • Shopify にはタグ機能がある
  • テーマの Liquid からも article.tags で参照できる
  • しかしテーマ側に「タグを表示する UI」が用意されていない場合がある

つまり、タグ一覧を記事ページに表示するには、基本的に次のどちらかが必要になります。

  • テーマのコード編集で実装する
  • タグ表示に対応したアプリを利用する

以降の章で、それぞれのやり方を詳しく見ていきましょう。

ブログ記事タグを表示するメリット

Shopify ブログのタグを「一覧表示」できるようにすると、見た目が整うだけでなく、運用面で大きなメリットがあります。ここでは、特に効果が出やすいポイントを整理します。

回遊性が上がり、滞在時間が伸びやすい

ブログ運用でよくある課題は、「1 記事読まれて終わり」になってしまうことです。
タグ一覧を記事ページに表示し、タグリンクを有効にすると、読者の次の行動が自然に生まれます。

  • 「この記事は SEO の話なんだ」
  • 「じゃあ SEO の記事をもう少し読んでみよう」
  • タグをクリックして一覧へ → 次の記事へ

関連記事ブロックよりも軽い導線として機能するので、記事が増えるほど効果が出やすいです。

記事の「位置づけ」が一瞬で伝わる

タイトルだけでは記事の分類が伝わりにくいことがあります。
タグが表示されていると、読者は「この記事は何の話か」を瞬時に判断できるため、ミスマッチによる離脱を減らしやすくなります。

たとえば、同じ「Shopify」でも、

  • Shopifyアプリ
  • テーマ編集
  • SEO
  • 初心者向け

のように見えるだけで、読む前の期待値が揃いやすくなります。

内部リンクが増え、SEO の土台が整いやすい

「Shopify ブログ タグ 表示」を整えると、タグページへの内部リンクが自然に増えます。内部リンクが増えることで、次のような効果が期待できます。

  • 検索エンジンがサイト構造を理解しやすくなる
  • 関連ページ同士のつながりが明確になり、クロール効率が上がりやすい
  • 読者の回遊で滞在時間が伸びる → 結果的に良い指標になりやすい

注意点として、タグを乱立すると「記事数が少ないタグページ」が大量に生まれ、薄いページが増える可能性があります。
この対策は後半の「運用のコツ」「タグページが増えすぎる場合の対策」で触れます。

運用タグで、編集・企画の管理がしやすい

タグは読者向けだけでなく、運用管理にも便利です。

  • New を付けて新着導線を作る
  • おすすめ を強調して読ませたい記事を押し出す
  • Hidden のような管理用タグを「非表示」にする

こうした運用を前提にタグ一覧を表示できると、ブログ運用の自由度が一段上がります。

Shopify でブログタグを表示する方法

Shopify のブログ記事ページでタグ一覧を表示する方法は、大きく分けて次の 2 つです。

  • テーマのコード編集で実装する
  • アプリで実装する

それぞれの特徴を押さえておきましょう。

テーマのコード編集で実装する

Liquid(Shopify テーマのテンプレート)を編集して、article.tags をループ表示します。

  • 月額費用は基本 0 円
  • HTML / CSS を自由にコントロールできる
  • 一方で、実装・保守にテーマ編集の知識が必要

「エンジニアがいる」「テーマ編集に慣れている」場合に向いています。

アプリで実装する

タグ表示に特化したアプリを入れて、テーマエディタでアプリブロックを追加する方法です。

  • ノーコードで導入でき、すぐ試せる
  • 表示・非表示・強調表示・デザインを管理画面で設定できる
  • テーマ更新の影響を受けにくいことが多い

「まずは手軽に」「運用メンバーで改善したい」場合に向いています。

それぞれの方法のメリット・デメリット

どちらが良いかは、ストアの体制と目的で変わります。判断材料として、メリット・デメリットを整理します。

テーマのコード編集

メリット

  • 月額費用がかからない
  • 表示位置、HTML 構造、CSS を細かく作り込める
  • 既存のテーマコンポーネント(ボタン、バッジ等)に合わせやすい

デメリット

  • Liquid / CSS の知識が必要で実装ハードルが高い
  • テーマ更新でファイルが差し替わると表示が崩れることがある
  • 運用担当が「表示タグの出し分け」を変えるたびにコード編集が必要になりやすい

アプリ

メリット

  • ノーコードで導入でき、最短で表示まで進められる
  • 表示・非表示・強調タグ・デザインが管理画面で完結しやすい
  • 改善サイクルが回しやすい(運用側で触れる)

デメリット

  • 月額費用がかかる
  • アプリに依存するため、将来的に別実装へ移行する場合は検討が必要

手軽に試すならアプリがおすすめな理由

「Shopify ブログ タグ 表示」を改善したいとき、多くのケースでまずアプリをおすすめします。理由は、タグ表示が “運用で育てる要素” だからです。

タグは一度作って終わりではなく、運用しながら調整が入ります。

  • タグを増やす / 減らす
  • 強調するタグを変える(新着、キャンペーン)
  • デザインをテーマに合わせて微調整する
  • 管理用タグを非表示にする

これをコード編集でやると「ちょっと直す」たびにコストが発生しがちですが、アプリなら管理画面で完結しやすく、改善スピードが上がります。

そこで次章では、手軽に導入できるおすすめアプリを紹介します。

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

Shopify のブログ記事ページでタグ一覧を表示したいなら、まず試してほしいのが
シンプルブログ記事タグ一覧|お手軽リンク付きタグ表示設定 です。

シンプルブログ記事タグ一覧|お手軽リンク付きタグ表示設定

ブログ記事ページ上でタグを整理・表示できるアプリで、特に「見せたいタグだけ表示」「重要タグだけ強調」「デザイン調整」をノーコードで完結できるのが強みです。

このアプリでできること

主な特徴は次のとおりです。

  • 特定のタグを柔軟に表示・非表示に設定できる
  • 重要なタグを強調表示して読者の注目を集められる
  • タグの色やスタイルをノーコードでカスタマイズできる
  • フィルター未設定時は、すべてのタグを自動的に表示する
  • 多言語対応(日本語含む多数言語)

「タグは出したいけど、管理用タグは隠したい」「New だけ目立たせたい」みたいな、運用でよくある要望に素直に対応できます。

料金・無料体験について

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

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

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

手順は次の通りです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで、ブログ記事ページでタグ一覧を表示する準備が整いました。

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

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

アプリブロックの設定項目

ここでは、「Shopify ブログ タグ 表示」を運用しやすくするうえで重要な項目を、使いどころとセットで解説します。

タグ表示設定

表示モード

「指定タグ」の扱いを切り替えるモードです。

  • 指定タグを 除外(非表示) したい
  • 指定タグ だけ表示 したい

どちらの運用にも対応できます。

タグ運用で特に多いのは「管理用タグだけ隠したい」ケースなので、まずは 除外(非表示) が使われやすいです。

指定タグ

表示対象または非表示対象にしたいタグを カンマ区切りで入力します。

  • 例:sale,new,limited
  • 例:Hidden

ポイントは、空欄の場合は 全タグが表示 される点です。
最初は空欄で導入し、「どんなタグが付いているか」見える化してからルールを整えるのもおすすめです。

強調タグ

強調表示したいタグを カンマ区切りで指定します。

  • 例:New
  • 例:おすすめ,人気

「読ませたい記事の導線」にしたいタグだけ強調するのがコツです。
強調タグを増やしすぎると、どれも目立たなくなるので 1〜2 個に絞る運用が扱いやすいです。

タグリンクを有効化

ON にすると、タグがクリック可能になり、タグ一覧ページへ遷移できます。

回遊性を上げたいなら基本は ON 推奨ですが、タグを乱立している場合は「導線が散る」こともあります。
その場合は、まず「見せるタグの種類を絞る(指定タグだけ表示)」とセットで考えると綺麗にまとまります。

タグ接頭辞 / 接頭辞の後にスペース

タグ名の前に付ける文字を設定できます。

  • 接頭辞:#
  • スペース ON:# New のように見せる

SNS 風の見た目にしたい時や、「これはタグです」と視覚的にわかりやすくしたい時に便利です。

デザイン設定

ノーコードでタグの見た目を調整できます。

  • 表示位置(左寄せ・中央・右寄せなど)
  • フォントサイズ、文字の太さ
  • 文字色、背景色
  • 枠線の色・太さ
  • 角の丸み
  • 強調タグだけ別色にする設定

「タグを置いたらテーマから浮いた」という時も、管理画面で整えられるのがアプリの強みです。

余白設定

タグ UI は余白で読みやすさが大きく変わります。

  • タグ内の余白(上下・左右)
  • タグ間の余白(gap)
  • 上部・下部の余白(PC / スマホ別)

特にスマホでは「タップしやすさ」が重要なので、タグ内余白は少し広めのほうが UX 的に安定しやすいです。

追加の CSS

設定項目だけでは表現しきれないデザインを CSS で追い込めます。

たとえば次のような調整をしたい時に便利です。

  • ホバー時だけ下線を出す
  • 1 行に収めて横スクロールにする
  • タグの最大幅を決めて折り返す

CSS を書く場合は、ブラウザの検証ツール(デベロッパーツール)でクラス名を確認し、「追加の CSS」で上書きするとスムーズです。

アプリのおすすめ設定例

ここからは「実際にどう設定すればいいか」迷う方向けに、よくある運用パターンを具体例で紹介します。

管理用タグは隠して、New だけ強調する

運用で最も使われる形です。

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

これで「管理用タグは表示しない」「新着だけ目立たせる」が両立できます。

見せたいタグだけ表示して、カテゴリっぽく運用する

タグの種類を絞って、カテゴリのように使う方法です。導線が散りにくく、SEO 的にもタグページが薄くなりにくい傾向があります。

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

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

タグリンクを ON にして回遊導線を作る

タグを記事ページに表示するだけでも意味はありますが、クリック導線まで作ると価値が上がります。

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

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

テーマのコード編集で実装するサンプルコード

ここからは、アプリを使わず テーマのコード編集で「Shopify ブログ タグ 表示」を実装する方法です。

「月額費用をかけたくない」「テーマに完全に馴染ませたい」「HTML 構造まで作り込みたい」場合に向いています。

実装の全体像

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

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

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

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

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

TODO: 画像を入れる(テーマのコード編集画面)

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

TODO: 画像を入れる(snippets にファイルを作成)

以下を貼り付けます(基本形)。

{%- 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 はテーマのスタイルファイルにまとめるのが理想ですが、サンプルとしてスニペット内に簡易で入れます(動作確認後に移動しても OK です)。

<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 を使う

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

運用でよくある要件を入れた実装例です。

  • 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>

この方法は自由度が高い一方、「強調タグや除外タグを変えるたびにコード編集が必要」になります。
頻繁に運用変更が入るなら、アプリのほうが楽になりやすいです。

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

タグはナビゲーション要素でもあるので、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>

どのファイルに差し込めばいいか迷った時の探し方

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

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

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

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

本文の直前・直後に render を追加します。

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

TODO: 画像を入れる(main-article.liquid に render を追加)

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

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

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

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

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

対策は大きく 2 つです。

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

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

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

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

タグ一覧を運用で活かすコツ

「Shopify ブログ タグ 表示」を導入したら、効果を最大化するために運用ルールもセットで整えるのがおすすめです。

タグは増やしすぎない

タグは増えるほど分類が細かくなりますが、増えすぎると次の問題が起きます。

  • 読者が迷う(クリック導線が散る)
  • タグページが薄くなる(記事数が少ない一覧ページが増える)
  • 管理が大変になり表記揺れが増える

目安としては、読者向けタグは 10〜30 種類程度から始めるのが扱いやすいです。
管理用タグ(Hidden など)は別枠として、表示対象から外す運用にすると綺麗に回ります。

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

タグの表記揺れは後から直すのが大変です。最初にルールを決めておくと運用が楽になります。

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

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

強調表示は便利ですが、強調が多いと結局目立ちません。

おすすめは次のどちらかです。

  • 常に強調するタグは 1〜2 個(例:New / おすすめ
  • 期間限定で強調タグを入れ替える(キャンペーン時だけ sale

アプリならこの切り替えをノーコードで回せるので、改善サイクルを回しやすいです。

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

タグの表示位置で迷ったら、次のどれかが定番です。

  • タイトル直下(最も見られやすい)
  • 本文の冒頭(記事の属性がすぐ伝わる)
  • 本文の末尾(読み終わった後の次アクション導線)

おすすめは タイトル直下 です。読者が記事を開いてすぐ「この記事は何の話か」が分かり、クリックもされやすくなります。

よくある質問

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

よくある原因は次の通りです。

  • テーマにタグ表示が実装されていない
  • アプリを入れたが、テーマにアプリブロックを追加していない
  • 記事テンプレートが複数あり、別テンプレートを見ている

まずはテーマエディタで「どのブログ記事テンプレートを編集しているか」を確認しましょう。

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

テーマのコード編集で実装している場合、リンク先の組み立てがテーマやブログ構成と合っていない可能性があります。

一般的には {{ blog.url }}/tagged/{{ tag | handleize }} が動きますが、複数ブログを運用している場合は「どの blog の URL を使うか」が重要になります。

アプリを使う場合は、リンク先生成をアプリ側が担うため、こうしたトラブルが起きにくいのがメリットです。

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

多くの場合は問題ありません。
ただし URL に使う場合は、コード編集なら handleize を通しておくのがおすすめです。

結局、アプリとコード編集どっちがいい?

迷ったらこの基準で考えると決めやすいです。

  • 早く試して改善したい、運用担当が調整したい → アプリ
  • コストを最小にしたい、作り込みたい、編集体制がある → コード編集

特に「表示・非表示・強調タグ・デザイン」を運用で頻繁に触りそうなら、アプリのほうが継続運用は楽になりやすいです。

まとめ

本記事では、Shopify ブログ タグ 表示を改善し、ブログ記事ページでタグ一覧を表示する方法を解説しました。

  • Shopify の記事ページでタグ一覧は表示できる(ただしテーマ標準では出ないことが多い)
  • タグ表示は回遊性・滞在時間・SEO の土台づくりに役立つ
  • 実装方法は「テーマのコード編集」か「アプリ」の 2 パターン
  • 手軽に試すなら、ノーコードで導入・調整できるアプリがおすすめ

特に、今回紹介した
シンプルブログ記事タグ一覧|お手軽リンク付きタグ表示設定 は、

  • 表示・非表示の制御
  • 強調タグの設定
  • デザイン調整
  • タグリンクの有効化

をまとめてノーコードで実現できるので、「まずは手軽に導線を作りたい」方に向いています。

ぜひ本記事を参考に、あなたのストアに合った形でタグ一覧を導入してみてください。

参考記事

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

おすすめ Shopify アプリ

シンプル店舗受け取り|お手軽ローカルピックアップのアイコン

シンプル店舗受け取り|お手軽ローカルピックアップ

お客様がカートページで受け取り店舗・日時を指定できます。テイクアウトや店舗受け取りにおすすめです。

シンプル注文履歴おすすめ商品|お手軽マイページアップセルのアイコン

シンプル注文履歴おすすめ商品|お手軽マイページアップセル

マイページの注文ページに、商品ごとに設定したおすすめ商品を表示。再購入を後押しします。

シンプル顧客メタフィールドCSVインポート・エクスポートのアイコン

シンプル顧客メタフィールドCSVインポート・エクスポート

顧客メタフィールドをCSVで一括管理。エクスポート・編集・インポートがかんたんに。

シンプルフォーム一体型LP|お手軽チャットボット購入のアイコン

シンプルフォーム一体型LP|お手軽チャットボット購入

チャットボット形式でお客様が迷わず注文できるLPを設置できます。コーディング不要で、テーマエディタから簡単に設定できます。

シンプル商品メタフィールドCSVインポート・エクスポートのアイコン

シンプル商品メタフィールドCSVインポート・エクスポート

商品やバリエーションのメタフィールドをCSVで一括管理。インポートもエクスポートもこのアプリひとつで完了。

シンプル新しいお客様アカウント拡張|生年月日・追加フォームのアイコン

シンプル新しいお客様アカウント拡張|生年月日・追加フォーム

誕生日や性別などの項目を、お客様アカウントのプロフィールページに追加できます。コーディング不要です。

シンプル2点目購入割引|2点目以降自動セール設定のアイコン

シンプル2点目購入割引|2点目以降自動セール設定

2点目以降の購入で自動割引。割引バッジと対象商品の表示で、まとめ買いを後押しします。

シンプル商品カルーセル|お手軽おすすめ商品スライダーのアイコン

シンプル商品カルーセル|お手軽おすすめ商品スライダー

おすすめ商品をスライダーで表示できます。ストアのどこにでも設置でき、お客様に気になる商品を見つけてもらえます。

関連記事