見出し画像

【コピペOK】カラーミーショップの商品詳細に構造化データを導入する方法(有料で設置支援)

  • この記事を読むと、カラーミーショップに商品の構造化データをコピペで導入できます(無料部分にあります)。

  • 有料セクションでは商品に加えてレビューの構造化データがあり、Discordでの設置支援も行っています。


構造化データとは?

構造化データとは、ウェブページの内容を検索エンジンが理解しやすい形式でマークアップするための技術です。
Googleなどの検索エンジンは、このデータを使ってページの情報を正確に認識し、検索結果にリッチリザルト(拡張表示)として反映します。

商品の構造化データの場合、レビューや価格、在庫情報などが表示されます。

面倒な説明はいいから、カラーミーショップへの実装方法だけが知りたいという方は「導入手順」へどうぞ。

構造化データを導入するメリット

  • リッチリザルト表示:検索結果に商品画像、価格、在庫状況が表示されることでクリック率が向上。

  • SEO効果:検索エンジンの理解が向上し、検索結果での露出が増える可能性がある。

  • ユーザーエクスペリエンス向上:ユーザーが必要な情報を素早く取得できる。

現状、デメリットらしいデメリットはありません。
国産のレンタルカートではほとんどが自動で対応しているものの、カラーミーショップは対応していないため、この記事を参考に、ぜひ導入してみてください。

カラーミーショップでの構造化データの導入手順

ステップ1:構造化データのタイプを選定

商品情報には、Googleが推奨する「Product」スキーマを使用します。商品名、価格、在庫状況、レビューなどが検索結果に表示されます。

ステップ2:JSON-LD形式を使用する理由

構造化データは「Microdata」や「RDFa」などの形式もありますが、Googleが推奨するのはJSON-LD形式です。この形式はHTMLコードから独立しており、ページの保守や修正がしやすいのが特徴です。

カラーミーショップへの組み込み手順

管理画面にログインし、ネットショップ→デザイン→デザインテンプレートで「テンプレート編集」をクリックします。

商品詳細の「HTML・CSS」をクリックします。

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "<{$product.name}>",
    "image": "<{$product.img_url|strip_tags}>",
    "description": "<{$product.simple_explain|strip_tags}>",
      "brand": {
      "@type": "Brand",
      "name": "<{$shop_name}>"
    },
    "offers": {
      "@type": "Offer",
      "url": "https://ここにお店のドメイン/?pid=<{$product.id}>",
      "availability": "https://schema.org/<{if $product.soldout_flg == 1}>OutStock<{else}>InStock<{/if}>",
      "price": "<{$product.sales|regex_replace:'/円\((.*?)\)/':''|replace:',':''}>",
      "priceCurrency": "JPY"
    }
  }
</script>

こちらのコードを「HTML編集」内に設置してください。
※「"https://ここにお店のドメイン/?pid=<{$product.id}>"」の部分の「ここにお店のドメイン」を「example.com」などのドメインに書き換えてください。

リッチリザルトテストでの確認

Googleの「リッチリザルトテスト」ツールを使用して、正しく構造化データが実装されているか確認しましょう。

【有料】レビューを含む構造化データと設定支援

有料版では商品のデータに加えて、レビューのデータも反映されるコード、さらに上手く行かない方へのサポートも行っております。

ここから先は

1,391字

¥ 1,980

この記事が気に入ったらチップで応援してみませんか?