Change default schema markup in Ghost

This tutorial will teach you how to change the default schema markup in Ghost via code injection.

Introduction

Schema markup is code that helps search engine understand your website content. For example, adding the "Organization" schema data allows Google to display your organization information in search results, as shown in the image below:

organization search result in Google

Ghost automatically generates schema markup using ghost_head, and you can view the generated schema markup by opening the "Developer Tools" in browsers and searching for "ld+json" under the "Elements" tab.

View schema markup

Change the default schema markup

Sometimes, you need to modify the default schema markup generated by Ghost. You can do this via code injection. For example, the default schema markup for https://source.ghost.io/ is like this:

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "publisher": {
            "@type": "Organization",
            "name": "News Wave",
            "url": "https://source.ghost.io/",
            "logo": {
                "@type": "ImageObject",
                "url": "https://source.ghost.io/content/images/size/w256h256/2023/08/ghost-logo-orb.png",
                "width": 60,
                "height": 60
            }
        },
        "url": "https://source.ghost.io/",
        "image": {
            "@type": "ImageObject",
            "url": "https://static.ghost.org/v5.0.0/images/publication-cover.jpg",
            "width": 1200,
            "height": 840
        },
        "mainEntityOfPage": "https://source.ghost.io/",
        "description": "Your trusted source for wide-ranging perspectives, thought-provoking analysis, and deep insights that resonate."
    }
</script>

Replace 'publisher'

If you want to replace the whole "publisher" data inside the above code, you can inject the following code to Ghost settings --> Code injection --> Site footer.

<script>
    // Select the script tag with type "application/ld+json"
    const ldJsonScriptTag = document.querySelector('script[type="application/ld+json"]');

    // Check if the tag was found
    if (ldJsonScriptTag) {
        // Parse the current content
        let ldJsonContent = JSON.parse(ldJsonScriptTag.textContent);

        // Update the publisher information
        ldJsonContent.publisher = {
            "@type": "Organization",
            "name": "Updated Publisher",
            "url": "https://updated.publisher.com/",
            "email": "[email protected]",
            "logo": {
                "@type": "ImageObject",
                "url": "https://updated.publisher.com/logo.png",
                "width": 60,
                "height": 60
            }
        };

        // Update the content of the script tag
        ldJsonScriptTag.textContent = JSON.stringify(ldJsonContent, null, 2);
    }
</script>

Modify or add data to "publisher"

If you want to change part of the "publisher" data or add new data to it, you can inject the following code to Ghost settings --> Code injection --> Site footer.

<script>
    // Select the script tag with type "application/ld+json"
    const ldJsonScriptTag = document.querySelector('script[type="application/ld+json"]');

    // Check if the tag was found
    if (ldJsonScriptTag) {
        // Parse the current content
        let ldJsonContent = JSON.parse(ldJsonScriptTag.textContent);
        
        // Check if 'publisher' exist
        if ('publisher' in ldJsonContent) {
            // Update the publisher information
            ldJsonContent.publisher.email = "[email protected]";
            ldJsonContent.publisher.logo = {
                "@type": "ImageObject",
                "url": "https://updated.publisher.com/logo.png",
                "width": 60,
                "height": 60
            };
        }

        // Update the content of the script tag
        ldJsonScriptTag.textContent = JSON.stringify(ldJsonContent, null, 2);
    }
</script>

Test the schema markup

You can use Rich Result Test to check if Google detects your schema markup. If successful, you will an image like this:

Rich result test

Note: Another popular test tool is Schema Validator, but it can't detect modified schema markup (it can only detect the original schema markup) because it can't execute the injected script like Google does.

📮Contact us at [email protected]