Building a Purple Experience
Configure JSON-LD

2min
This article explains how to enable JSON-LD to present the correct metadata to search engine crawlers. You will also find a customisable JavaScript function that you can edit to suit your needs and configure the content structure. The article also includes examples of the JavaScript function and the recommendation to test it locally before implementing it on the platform.
In Experience Builder, you can enable JSON-LD in the views.json in any of your views by ticking the box (1) in each view and adding a reference (2) to a custom javascript function in which you pass the available content. 
﻿
Based on customized javascript functions located in your custom.server.js, this will render the proper metadata that you want to present to Search Engine Crawlers. The javascript functions may be freely edited to meet your desired needs and configured content structure. A basic example is shown below. 
JS
JS
buildJsonLD(content) {
        const JSON_LS_HELPER = {
            fillImages: (content, jsonLD) => {
                jsonLD.image = [];
                if (content.thumbnails?.default) {
                    jsonLD.image.push(content.thumbnails?.default);
                }
            },
            fillAuthors: (content, jsonLD) => {
                jsonLD.author = [];
                jsonLD.author = content.authors.map(a => {
                    return {'@type': 'Person', 'name': a.name};
                });
            }
        };
        let jsonLD = {
            '@context': 'https://schema.org',
            '@type': 'Article',
            headline: content.name,
            datePublished: content.publicationDate
        };
        JSON_LS_HELPER.fillImages(content, jsonLD);
        JSON_LS_HELPER.fillAuthors(content, jsonLD);
        return JSON.stringify(jsonLD);
    },
buildJsonLD(content) {
        const JSON_LS_HELPER = {
            fillImages: (content, jsonLD) => {
                jsonLD.image = [];
                if (content.thumbnails?.default) {
                    jsonLD.image.push(content.thumbnails?.default);
                }
            },
            fillAuthors: (content, jsonLD) => {
                jsonLD.author = [];
                jsonLD.author = content.authors.map(a => {
                    return {'@type': 'Person', 'name': a.name};
                });
            }
        };
        let jsonLD = {
            '@context': 'https://schema.org',
            '@type': 'Article',
            headline: content.name,
            datePublished: content.publicationDate
        };
        JSON_LS_HELPER.fillImages(content, jsonLD);
        JSON_LS_HELPER.fillAuthors(content, jsonLD);
        return JSON.stringify(jsonLD);
    },
﻿
We recommend testing your custom Javascripts locally first before setting them on the Experience. 
Any code on custom.server.js must be created according to the fact that it will only be executed in the server environment. Thus, some functionality that you would have on the client is not available.  
﻿
Updated 13 Sep 2024
Did this page help you?
Dynamic URL Resolving
Collections