EC-CUBEではバージョン4.2あたりから商品の構造化データがjson-ldでマークアップされています。Product/detail.twigに下記のようなコードがあれば、商品の構造化データが存在します。

ただ商品レビューがプラグインの機能であることもあって、検索結果にECサイトで重要なレビューの星が表示されません。この記事では検索結果にレビューを表示する簡単なカスタマイズをご紹介します。

この記事の目的

Googleの検索結果で商品がヒットしたときに、レビューの星を表示します。検索結果に星を表示することはSEOに有効です。

レビューの星SEO

既存の構造化データjson-ld

デフォルトではこのように構造化データが記載されています。

旧バージョンを使用していて構造化データが存在しない場合はこの機会に追加しておきましょう。検索結果に価格などの情報が表示されるようになります。
サイトのバージョンやカスタマイズによってはこのままのコードで動作するかは分かりませんのでご注意ください。

<script type="application/ld+json">
{
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "{{ Product.name }}",
    "image": [
        {% for img in Product.ProductImage %}
            "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}

        {% else %}
            "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
        {% endfor %}
    ],
    "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
    {% if Product.code_min %}
    "sku": "{{ Product.code_min }}",
    {% endif %}
    "offers": {
        "@type": "Offer",
        "url": "{{ url('product_detail', {'id': Product.id}) }}",
        "priceCurrency": "{{ eccube_config.currency }}",
        "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
        "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
    }
</script>

 

レビューの構造化データを追加する

※このカスタマイズは公式の商品レビュープラグインをそのまま使用していることを前提としております。

下記のように、レビュープラグインから渡されているデータをjson-ldの構造化データに追加します。

これで検索結果に商品レビューの星が表示されます。(ただし、表示されるかどうかはGoogleが決定するため、確実に表示されるわけではありません。)

<script type="application/ld+json">
{
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "{{ Product.name }}",
    "image": [
        {% for img in Product.ProductImage %}
            "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}

        {% else %}
            "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
        {% endfor %}
    ],
    "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
    {% if Product.code_min %}
    "sku": "{{ Product.code_min }}",
    {% endif %}
    "offers": {
        "@type": "Offer",
        "url": "{{ url('product_detail', {'id': Product.id}) }}",
        "priceCurrency": "{{ eccube_config.currency }}",
        "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
        "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
    }
    {# EC-CUBE4.2の場合、既にld+jsonのscriptタグが存在するので、ここから下のif文セクションだけを追加 #}
    {% if ProductReviewAvg is defined and 0 < ProductReviewCount%}
    {# @see https://umebius.com/eccube/seo-review-stars/ #}
    ,"aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "{{ ProductReviewAvg }}",
        "bestRating": "5",
        "ratingCount": "{{ ProductReviewCount }}"
    }
    {% endif %}
}
</script>
 

ECCUBE制作トップへ

EC-CUBEカスタマイズに関するお問い合わせはこちら

    脆弱性修正