カラーミー 2024年02月22日 naeco.jp カラーミーショップサイト改善

カラーミーショップで商品の構造化データを追加する

Google検索では、構造化データを使って、ページに関する情報を取得し、そのコンテンツのリッチリザルト（検索結果で多くの情報を伝える仕組み）を表示しています（HTML5の構造化タグとは別の話です）。

2022年9月にEC関連で機能強化され、商品（product）の構造化データを設定しておくと、Google検索のショッピングナレッジパネル、人気商品などに掲載できる資格が与えられるようになりました。
設定することで、SEOの順位がどうこうということはありませんが、いろんな人から目に付きやすくなり、クリックされる効果が期待されます。

参考）新しい Search Console 販売者のリスティングレポート: 商品の構造化データを使用して利用資格の対象範囲を拡大する | Google 検索セントラルブログ | Google Developers

今回は、カラーミーショップに商品の構造化データを追加する方法について、具体的な見ていきます。
理解すれば、内容はそれほど難しくはありません。

構造化データを追加する手順

構造化データとは、ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式です。
構造化データの仕組みについて | Goo gle 検索セントラル | ドキュメント | Google Developers

構造化データを記述するデータ形式は、JSON-LDが推奨されています。
記述の書式は、Googleの資料にサンプルコードが多く載っていますので、それを参考にして自サイト用に書き換えて使うとよいでしょう。

参考）商品の構造化データを追加する方法 | Google 検索セントラル | ドキュメント | Google Developers

構造化データを追加する作業は、以下の通りです。

決まった書式に従って構造化データを書く
カラーミーショップの商品詳細ページに追加する（追加場所は任意、<head>内の必要はない）
リッチリザルトテストで検証する

カラーミーの商品の構造化データ

カラーミーショップの独自タグ使って、商品データを加工して、構造化データを出力しています。
下記コードを商品詳細ページ（HTML）に設置します。

商品の構造化データ

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "<{$product.name|strip_tags}>",
  "description": "<{$product.explain|strip_tags}>",
  "SKU": "<{$product.model}>",
  "image": "<{$product.img_url|strip_tags}>",
  "offers": {
    "@type": "Offer",
    "url": "https://your-domain.com/?pid=<{$product.id}>",
    <{if $product.soldout_flg == 1}>
    "availability": "https://schema.org/SoldOut",
    <{else}>
    "availability": "http://schema.org/InStock",
    <{/if}>
    "price": "<{$product.sales|regex_replace:"/\,/":""|regex_replace:"/円.*/":""}>",
    "priceCurrency": "JPY"
  }
}
</script>

独自タグのうしろについている strip_tagsは、独自タグの商品データに含まれているHTMLタグを取り除く処理です。

6行目のdescriptionには、$product.simple_explainで、簡易説明を入れてもよいでしょう。

7行目のSKUは、型番を入れています。

11行目の"url": "https://your-domain.com/は、各ショップのドメインを入力します。

13、15行目は、在庫状態です。カラーミーショップで使うのは、在庫あり（InStock）・在庫なし（SoldOut）です。

17行目の販売価格は数字のみにする必要があり、regex_replaceでカンマを取り除き、円以降の文字を取り除きます
（ショップの消費税の表示形式で外税を使っている場合は、セットされる数字に注意が必要で、リッチリザルトテストで要検証）。

基本形は上記のような項目を追加すればよいでしょう。

それ以外では、グループやカテゴリーからブランドがわかるようなら、登録できます。
レビューのレイティング（星5つ中いくつの平均評価）も追加できますが、独自タグでコードを書いて計算する必要があります。

リッチリザルトテストで検証する

リッチリザルトテストのサイトで、URLを入力すれば、検証結果がわかります。

全部グリーンになっていれば、構造化データと設置が完了です。
エラーがあればどの項目か示されますので、その項目を修正します。
重大ではない問題を検出しますが、任意の項目なので問題ありません。

商品スニペット（レビュー、価格、在庫状況など）、販売者のリスティング（これまでは、Google Merchant Centerで登録が必要だった無料リスティング）の構造化データが追加されました。

おわりに

Googleの資料はたっぷりありますので、全部目を通すと大変ですが、商品の構造化データの追加自体はかんたんに行えました。
商品の構造化データを追加したからと言って、かならず掲載されるというわけではありません（掲載される可能性がある、という話）。

商品の構造化データ以外にも、実店舗がある場合はローカルビジネスの構造化データを入れておくと、よさそうです（ナレッジパネルに表示される可能性がある）。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら