JSON+LD Metadata json-ld

This guide explains how to enable and verify the JSON+LD feature in AEM CIF.

Enabling JSON+LD in CIF Configuration enabling

By default, the Enable JSON+LD checkbox is not visible in the CIF configuration. To enable this feature, the project must include the necessary OSGi configuration, which allows the checkbox to be displayed. This configuration enables users to toggle JSON+LD script support on product pages.

To make the Enable JSON+LD checkbox available in the CIF configuration, add the following OSGi configuration to your project:

com.adobe.cq.cif.components.models.JsonLdFeatureEnable.

For further details on adding this configuration, refer to Adds configuration for Json-Ld in the public aem-cif-guides-venia repository.

Once this configuration is added and deployed, the checkbox becomes visible in the CIF configuration settings and here are the steps to enable JSON+LD:

Verifying JSON+LD on a Product Detail Page (PDP) verify

To illustrate the steps to verify JSON+LD, the Venia project is used as an example, where the required JSON+LD configuration is already added to enable the feature. Here are the steps to follow:

If configured correctly, you find the JSON+LD script associated with the product injected into the page.

Sample JSON+LD Structure for a Product sample

Below is an example JSON+LD structure for the Agatha Skirt, authored on the PDP page in the Venia project:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "sku": "VSK05",
  "name": "Agatha Skirt",
  "image": "https://mcstaging.catalogservice4commerce.fun/media/catalog/product/cache/926ea6fc2ad48a7202ff4587b6c2768e/v/s/vsk05-pe_main_2.jpg",
  "description": "The Agatha Skirt has a large circumference that lends itself to all sorts of drama...",
  "@id": "product-ef4fa1dc72",
  "offers": [
    {
      "@type": "Offer",
      "sku": "VSK05-KH-S",
      "url": "/content/venia/us/en/products/product-page.html/agatha-skirt.html",
      "priceCurrency": "USD",
      "price": 78.0
    },
    {
      "@type": "Offer",
      "sku": "VSK05-RN-XS",
      "availability": "InStock",
      "priceSpecification": {
        "@type": "UnitPriceSpecification",
        "priceType": "https://schema.org/ListPrice",
        "price": 18.0,
        "priceCurrency": "USD"
      },
      "price": 46.0
    }
  ]
}
</script>

Mapping JSON+LD Attributes to GraphQL mapping

JSON+LD attributes can be mapped to GraphQL queries in AEM CIF, ensuring structured data dynamically reflects product information retrieved via GraphQL.

Example Product Mapping example

This mapping ensures that the JSON+LD script is dynamically populated based on product data retrieved via GraphQL queries.

To test your JSON+LD structure, you can use the Rich Results Test - Google Search Console. This tool provides detailed feedback, including whether the required attributes are present or missing, and helps ensure that your structured data is correctly implemented.