更新日: 2021 / 08 / 03

[SEO対策] EC-CUBE4にJSON-LDを入れる方法

カテゴリー: EC-CUBE4 ネットショップ構築ガイド

JSON-LD（構造化データ）はSEO対策としても入れておきたいコードですが、EC-CUBE4ではデフォルトで入っていないので、コードを追加する必要があります。

やり方は簡単で、GoogleにあるJSON-LDのテンプレートをコピーし、動的なあたいのところにEC-CUBE4のタグを入れるだけ。

入れるタグと、サンプルコードをまとめてみたのでご覧ください。

Googleのサンプルコードをテンプレートとして使う

Google公式のドキュメントにある「商品」の構造化データのテンプレートを使って解説していきます。

商品の構造化データドキュメント

ドキュメントにあるコードを商品ページのテンプレート(Product/detail.twig)の、{% block javascript %}~{% endblock %}の中に入れます。

{% block javascript %}

// 省略

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
    ],
  "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
  "sku": "0446310786",
  "mpn": "925872",
  "brand": {
    "@type": "Brand",
    "name": "ACME"
  },
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "4",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "Fred Benson"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/anvil",
    "priceCurrency": "USD",
    "price": "119.99",
    "priceValidUntil": "2020-11-20",
    "itemCondition": "https://schema.org/UsedCondition",
    "availability": "https://schema.org/InStock"
  }
}
</script>
{% endblock %}

あとは商品名やsku、価格などをEC-CUBE4のタグに置き換えていけば完了です。

JSON-LDコードにEC-CUBE4のタグを入れる

置き換えられる部分とコード一覧をまとめてみました。

画像など複数あるところはtwigのループ構文を使えば出力可能です。

// 商品名
{{ Product.name }}

// 商品画像
{% for ProductImage in Product.ProductImage %}
    "{{ url('homepage')|trim('/') }}{{ asset(ProductImage, 'save_image') }}"{%- if loop.last == false %},{% endif -%}
{% else %}
    "{{ url('homepage')|trim('/') }}{{ asset(''|no_image_product, 'save_image') }}"
{% endfor %}

// 商品説明
{{ Product.description_detail|raw }}

// sku
{{ Product.code_min }}

// mpn
{{ Product.id }}

// brand
{% if Product.ProductCategories is not empty %}
    {% for ProductCategory in Product.ProductCategories %}
        {% for Category in ProductCategory.Category.path %}
            {{ Category.name }}{%- if loop.last == false %},{% endif -%}
        {% endfor %}
    {% endfor %}
{% endif %}

// url
{{ url('product_detail', {'id': Product.id}) }}

// 商品価格
{{ Product.getPrice02IncTaxMin }}

// 商品作成日
{{ Product.create_date|date_min }}

完成したコード

JSON-LDのテンプレートにEC-CUBE4のタグを入れたものがこちら。

ここでは商品ページのコードだけでやってみましたが、商品一覧やそのほかのページでも同様のことができます。

テンプレートの、reviewとaggregateRatingは削除しています。

リッチリザルトテストで構造化データのテストができます。

{% block javascript %}

// 省略

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ Product.name }}",
  "image": [
    {% for ProductImage in Product.ProductImage %}
        "{{ url('homepage')|trim('/') }}{{ asset(ProductImage, 'save_image') }}"{%- if loop.last == false %},{% endif -%}
    {% else %}
        "{{ url('homepage')|trim('/') }}{{ asset(''|no_image_product, 'save_image') }}"
    {% endfor %}
    ],
  "description": "{{ Product.description_detail|raw }}",
  "sku": "{{ Product.code_min }}",
  "mpn": "{{ Product.id }}",
  "brand": {
    "@type": "Brand",
    "name": [
      {% if Product.ProductCategories is not empty %}
          {% for ProductCategory in Product.ProductCategories %}
              {% for Category in ProductCategory.Category.path %}
                  "{{ Category.name }}"{%- if loop.last == false %},{% endif -%}
              {% endfor %}
          {% endfor %}
      {% endif %}
    ]
  },
  "offers": {
    "@type": "Offer",
    "url": "{{ url('product_detail', {'id': Product.id}) }}",
    "priceCurrency": "JPY",
    "price": "{{ Product.getPrice02IncTaxMin }}",
    "priceValidUntil": "{{ Product.create_date|date_min }}",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock"
  }
}
</script>
{% endblock %}