Skip to content

13. Rendering Custom JSON LD Microdata

Jump to bottom
Andrew Welch edited this page Apr 18, 2019 · 2 revisions

No Maintenance Intended

DEPRECATED

This Craft CMS 2.x plugin is no longer supported, but it is fully functional, and you may continue to use it as you see fit. The license also allows you to fork it and make changes as needed for legacy support reasons.

The Craft CMS 3.x version of this plugin can be found here: craft-seomatic and can also be installed via the Craft Plugin Store in the Craft CP.

Rendering Custom JSON-LD Microdata

SEOmatic gives you the ability to render an arbitrary JSON-LD object, passed in as an array(). All three of these methods accomplish the same thing:

{# Render arbitrary JSON-LD using the 'renderJSONLD' function #}
{{ renderJSONLD( JSONLD_ARRAY ) }}

{# Render arbitrary JSON-LD using the 'renderJSONLD' filter #}
{{ JSONLD_ARRAY | renderJSONLD }}

{# Render arbitrary JSON-LD using the 'renderJSONLD' variable #}
{% do craft.seomatic.renderJSONLD( JSONLD_ARRAY ) %}

The JSONLD_ARRAY should be in the following format in PHP:

$myJSONLD = array(
    "type" => "Corporation",
    "name" => "nystudio107",
    "sameAs" => ["https://Twitter.com/nystudio107","https://plus.google.com/+nystudio107"],
    "address" => array(
	    "type" => 'PostalAddress',
	    "addressCountry" => "US",
	    ),
    );

The JSONLD_ARRAY should be in the following format in Twig:

{% set myJSONLD = {
	"type": "Corporation",
	"name": "nystudio107",
	"sameAs": ["https://Twitter.com/nystudio107","https://plus.google.com/+nystudio107"],
	"address": {
		"type": 'PostalAddress',
		"addressCountry": "US",
	},
} %}

The above arrays will render to the following JSON-LD:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Corporation",
    "name": "nystudio107",
    "sameAs": ["https://Twitter.com/nystudio107","https://plus.google.com/+nystudio107"],
    "address": {
        "@type": "PostalAddress",
        "addressCountry": "US" 
    } 
}
</script>

The array can be nested arbitrarily deep with sub-arrays. The first key in the array, and in each sub-array, should be an "type" with a valid Schema.org type as the value. Because Twig doesn't support array keys with non-alphanumeric characters, SEOmatic transforms the keys "type" into "@type" at render time.

Product JSON-LD examples

Here's a practical example. Let's say you're working on a spiffy new online store using Craft Commerce, and you want to add in some microdata for the products listed in your store, for SEO purposes. You can do something like this:

{% set myJSONLD = {
	type: "Product",
	name: "Brad's for Men Cologne",
	image: "http://bradsformen.com/cologne.png",
	logo: "http://bradsformen.com/cologne_logo.png",
	description: "Brad Bell's musky essence will intoxicate you.",
	model: "XQJ-37",
	offers: {
		type: "Offer",
		url: "http://bradsformen.com/cologne",
		price: "69.99",
		priceCurrency: "USD",
		acceptedPaymentMethod: ["CreditCard", "PayPal"],
		seller: {
		    type: "Corporation",
		    name: "Brad Brands Intl.",
		    url: "http://bradsformen.com"
		}
	},
	manufacturer: {
	    type: "Organization",
	    name: "Scents Unlimited",
	    url: "http://scentsunlimited.com"
	},
	aggregateRating: {
		type: "AggregateRating",
		bestRating: "100",
		ratingCount: "24",
		ratingValue: "87"
	},
} %}
{{ myJSONLD | renderJSONLD }}

Obviously, you'll want to substitute in variables for the above, e.g.:

{% set products = craft.commerce.products.type('normal').find() %}

{% for product in products %}
	{% for variant in products.variants %}
		{% set myJSONLD = {
			type: "Product",
			name: variant.description,
			image: variant.myProductShot,
			logo: variant.myProductLogo,
			description: variant.myProductDescription,
			model: variant.myProductModel,
			offers: {
				type: "Offer",
				url: product.url,
				price: variant.price,
				priceCurrency: "USD",
				acceptedPaymentMethod: ["CreditCard", "PayPal"],
				seller: {
				    type: "Corporation",
				    name: seomaticSiteMeta.siteSeoName,
				    url: siteUrl
				}
			}
		} %}
	{{ myJSONLD | renderJSONLD }}
	{% endfor %}
{% endfor %}

There are many other values available for you to use; see the Product schema for details.

Breadcrumbs JSON-LD example

Here's a nice example of Breadcrumbs JSON-LD from @mildlygeeky that you can adapt for your use:

{% set crumbs = [] %}
{% for crumb in entry.getAncestors() %}
    {% set crumbs = crumbs|merge({
        type: 'ListItem',
        position: loop.index,
        item: {
            '@id': crumb.url,
            name: crumb.title
        }
    }) %}
{% endfor %}
{% set myJSONLD = {
    type: "BreadcrumbList",
    itemListElement: crumbs
} %}
{{ myJSONLD | renderJSONLD }}

Music Album JSON-LD example

Here's another practical example of custom JSON-LD microdata to generate a MusicAlbum:

{% set musicAlbumJsonLd = {
    type: "MusicAlbum",
    name: entry.albumTitle | escape('html_attr'),
    image: entry.albumArtwork.first().url |default(seomaticMeta.seoImage),
    description: entry.albumDescription | escape('html_attr'),
    url: seomaticMeta.canonicalUrl,
    albumProductionType: 'studio album',
    datePublished: entry.postDate.iso8601(),
    sameAs: [entry.amazonLink, entry.appleMusicLink, entry.itunesLink, entry.spotifyLink]
} %}
{% set musicAlbumJsonLd = musicAlbumJsonLd | merge({"author": seomaticIdentity}) %}
{% set musicAlbumJsonLd = musicAlbumJsonLd | merge({"creator": seomaticIdentity}) %}
{% set musicAlbumJsonLd = musicAlbumJsonLd | merge({"byArtist": seomaticIdentity}) %}
{{ musicAlbumJsonLd | renderJSONLD }}

Additional information links:

Clone this wiki locally