Shopifyのブログ記事に関連商品を表示し、購買導線を強化する方法

はじめに

ECサイトの運営では、商品の魅力を伝えるだけでなくブランドのストーリーや価値観を共有することが重要です。その手段のひとつが「オウンドメディア」です。実際にWebサイト制作やEC支援を行う中で、ブログを活用することでブランドの成長が加速するケースを多く見てきました。

弊社が運営しているECブランド「PASS COFFEE」では、Shopifyのブログ機能を活用しコーヒーの楽しみ方やライフスタイルに関する記事を発信しています。

しかし、記事を読んだだけではその情報が単なる「知識」として終わってしまい、購買につながる導線が弱くなりがちです。ユーザーが記事を読んだ流れで、スムーズに商品を検討できる仕組みを作ることが重要です。

記事の内容に興味を持ったユーザーが、スムーズに商品ページへ遷移できる仕組みがあれば、より自然な形で購買につなげることができます。

そこで、記事内に関連する商品を表示し記事→商品ページへの導線を強化する機能を実装しました。

本記事では、その具体的な実装方法と、オウンドメディア運用のSEO効果について解説します。

課題: ブログ記事とECの導線が分断されやすい

Shopifyではブログ機能を標準で提供していますが、以下のような課題があります。

記事を読んだ後、関連する商品がすぐに見つからない
ユーザーが記事から商品ページへ遷移する流れが弱い
記事がどの商品のことか伝わりづらい

PASS COFFEEで言うと「ドリップバッグの淹れ方」に関する記事を読んだユーザーはそのままドリップバッグの商品詳細ページに遷移、購入できる仕組みになっています。

実装方法: メタフィールドを活用して関連商品を表示

www.passcoffee.jp_blogs_easy-coffee-life_easy-coffee-tips(1536×864).png
今回の機能実装では、Shopifyのメタフィールドを活用し各ブログ記事ごとに関連する商品コレクションを設定できるようにしました。

設定方法（Shopify管理画面）

admin.shopify.com_store_coc-works_settings_custom_data_article_metafields_71517896963(1536×864).png

メタフィールドのキー: article.metafields.custom.reference_collection
データタイプ: コレクション
設定: 記事ごとに関連する商品コレクションを登録

Liquidでメタフィールドを取得して表示

{% if article.metafields.custom.reference_collection %}
  <section class="related-products mt-12 border border-neutral-400 rounded-md pt-8 pb-12 px-4">
    <h2 class="text-2xl font-bold text-center">
      {{ article.metafields.custom.collection.value.title }}
    </h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
      {% for product in article.metafields.custom.collection.value.products %}
        <div class="w-full aspect-square text-center">
          <img src="{{ product.featured_image | image_url: width: 300 }}" alt="{{ product.title }}" class="w-full h-full object-cover rounded-md">
          <h3 class="leading-tight">{{ product.title }}</h3>
          <p class="text-sm text-neutral-500">{{ product.price | money }}</p>
          <a href="{{ product.url }}" class="btn">詳しく見る</a>
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}

このコードを記事ページに追加することで、各記事に関連する商品を動的に表示できるようになりました。

オウンドメディア・ブログのSEO効果

今回の機能実装により、ブログの価値は単なる「情報発信」にとどまらず検索流入の増加・ブランド価値向上・購買促進を同時に実現する施策となりました。

検索エンジンからの流入を増やす

ブログ記事を追加していくことで、検索エンジンにインデックスされるページ数が増加します。例えば「コーヒーの淹れ方」「コーヒーの保存方法」などのキーワードをターゲットにした記事を作成すれば、購買意欲の高いユーザーが検索経由でサイトに訪れる可能性が高まります。

長期的な集客資産として機能する

広告とは異なり、一度公開した記事は長期間にわたって検索流入を生み出します。継続的に更新し、Googleに評価される記事を増やしていくことで安定した流入チャネルを確保できます。

内部リンクによるサイト全体のSEO強化

記事から関連商品へのリンクを増やすことで、サイト全体の評価が向上します。Googleは関連性の高いページ同士がリンクされているサイトを評価する傾向があるため、ECとブログを密に連携させることはSEOにおいても有効な戦略です。

ブランド価値向上

商品の説明ページだけでは伝えきれないストーリーや背景を記事として発信することで、ブランドの専門性や信頼感を高められます。PASS COFFEEでは、単に商品を販売するだけでなくコーヒーに関する知識やライフスタイルの提案を通じて、ブランドの価値観やこだわりを伝えています。
単なる購買の場ではなく、ブランドの世界観に共感し関わりたくなるような関係性を築くことがオンラインストアの目指す姿です。

今後の施策/改善

現在は商品ページへのリンクにしているが、直接カートに追加できる仕様にするか検討

記事から商品ページへ遷移する導線を強化するだけでなく、ユーザーがワンクリックで購入できるオプションの導入を検討しています。記事を読んで興味を持ったタイミングで、スムーズに購入へ進めることで、より直感的な購買体験を提供できると考えています。
これにより、よりスムーズな購買体験を提供し、記事を読んだ流れで直感的に購入へ進める仕組みを作ることが可能になります。

定期的なリライトや新規記事の追加で、検索順位を向上させる

検索エンジンでの評価を維持・向上させるために、既存記事のアップデートや新しいコンテンツの追加を継続的に行います。特に、検索トレンドやユーザーの関心に合わせた最適化を進めることで、流入の増加を目指します。

結び

ブログ記事は単なる情報発信ではなく、長期的な集客資産として機能します。特に、ECサイトを運営する上で、SEOを意識したブログ運用は非常に有効な手段です。
PASS COFFEEでは、オウンドメディアを活用しSEO強化・ブランド価値向上・購買促進を実現する取り組みを続けています。今後も、よりスムーズな購買体験を提供するための改善を重ね、ユーザーにとって価値のあるコンテンツを発信していきます。
「ブログ運営 × Shopifyカスタマイズ」で、ECの成長を目指したい方は、ぜひ一緒に考えていきましょう。ShopifyのカスタマイズやSEO対策について興味がある方は、お気軽にご相談ください。