How to Implement Schema.org Markup in Ghost CMS for Enhanced SEO

Giovanni Sacheli

Giovanni Sacheli

— 5 min read

Are you looking to boost your Ghost CMS website's visibility in search results and capture rich snippets? This comprehensive guide provides a technical yet practical walkthrough on how to effectively integrate Schema.org structured data into the latest version of Ghost. By leveraging Ghost's built-in features and custom theme capabilities, you'll learn to implement powerful markup like Organization, Article, FAQPage, and BreadcrumbList, helping search engines better understand your content and deliver richer user experiences.

Understanding Ghost's Core SEO and When to Extend It

Ghost CMS offers robust out-of-the-box SEO features, including automatic meta tags, XML sitemaps, and basic Article Schema.org markup for posts. However, to truly differentiate your content and qualify for specific rich results (e.g., recipes, products, events), you'll need to go beyond the defaults. This guide will show you how to extend Ghost's capabilities using its Code Injection feature for static, site-wide markup, and Theme Customization for dynamic, content-specific structured data.

Method 1: Easy Schema Implementation with Ghost's Code Injection

Ghost's Code Injection is perfect for adding static or site-wide JSON-LD Schema.org data without touching your theme files directly. This method is ideal for Organization or Website schema.

Step-by-Step for Site-Wide Schema

  1. Generate Your JSON-LD: Create your desired Schema.org markup using an online generator or by writing it manually.
  2. Access Code Injection: From your Ghost Admin, navigate to Settings (gear icon) > Code Injection.
  3. Insert into Site Header: Paste your JSON-LD, wrapped in <script type="application/ld+json"></script> tags, into the Site Header box.
  4. Save Changes: Click "Save" to apply the markup across your entire site.

Example: WebSite Schema for Sitelinks Search BoxJSON

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.yourdomain.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://www.yourdomain.com/search/{search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

Example: Organization SchemaJSON

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Your Publication Name",
  "url": "https://www.yourdomain.com/",
  "logo": "https://www.yourdomain.com/content/images/your-logo.png",
  "sameAs": [
    "https://twitter.com/yourprofile",
    "https://facebook.com/yourpage"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-234-567-8900",
    "contactType": "customer service"
  }
}

Post-Specific Schema with Code Injection (e.g., FAQPage)

For markup relevant to a single piece of content, like an FAQ section within an article:

  1. Generate Specific JSON-LD: Create the markup for the individual post or page.
  3. Open Post/Page Settings: In the Ghost Admin, open the relevant post or page, then click the Settings icon (top right).
  4. Navigate to Code Injection: Scroll down the settings sidebar to the Code Injection section.
  5. Paste into Post Header: Insert your JSON-LD within <script type="application/ld+json"></script> tags into the Post Header box.
  6. Update/Publish: Save the post or page to apply the markup.

Example: FAQPage SchemaJSON

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is Schema.org?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet."
      }
    },
    {
      "@type": "Question",
      "name": "How do I add Schema.org to Ghost?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "You can add Schema.org markup to Ghost using Code Injection or by customizing your theme files with Handlebars."
      }
    }
  ]
}

Method 2: Dynamic Schema via Ghost Theme Customization (Advanced)

For more intricate, dynamic Schema.org properties that vary per post (e.g., headline, image, datePublished), you'll need to modify your Ghost theme files using Handlebars.js. This method requires a local development environment.

Setting Up for Theme Development

  1. Download Your Theme: Go to Settings > Design > Change theme in your Ghost Admin and download your active theme.
  2. Unzip & Prepare: Extract the theme contents.
  3. Install Ghost CLI: If not already installed, run npm install ghost-cli@latest -g.
  4. Local Ghost Setup: Start your local Ghost instance by navigating to its directory and running ghost start.
  5. Open in Editor: Open your unzipped theme folder in a code editor.

Enhancing Article Schema in post.hbs

Ghost provides basic Article schema, but you can enrich it within your theme's post.hbs file. This file controls the display of individual posts.

  1. Locate post.hbs: Find this file within your theme folder.

Add/Modify JSON-LD: Insert or update a <script type="application/ld+json"> block, typically within the <head> section. Utilize Handlebars helpers to inject dynamic post data.Handlebars

{{!-- Simplified post.hbs example --}}
<!DOCTYPE html>
<html lang="{{@site.lang}}">
<head>
    {{ghost_head}} {{!-- Ghost's default meta and schema --}}

    {{!-- Custom Schema.org for Article --}}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{encode title}}",
      "image": "{{#if feature_image}}"
                 "{{feature_image}}"
               "{{else}}"
                 "{{asset "images/default-post-image.jpg" absolute="true"}}" {{!-- Fallback --}}
               "{{/if}}",
      "datePublished": "{{date published_at format="YYYY-MM-DDTHH:mm:ssZ"}}",
      "dateModified": "{{date updated_at format="YYYY-MM-DDTHH:mm:ssZ"}}",
      "author": {
        "@type": "Person",
        "name": "{{author.name}}",
        "url": "{{author.url absolute="true"}}",
        {{#if author.profile_image}}
        "image": "{{author.profile_image absolute="true"}}",
        {{/if}}
        {{#if author.bio}}
        "description": "{{encode author.bio}}"
        {{/if}}
      },
      "publisher": {
        "@type": "Organization",
        "name": "{{@site.title}}",
        "logo": {
          "@type": "ImageObject",
          "url": "{{@site.logo absolute="true"}}"
        }
      },
      "description": "{{encode custom_excerpt fallback=@site.description}}",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{url absolute="true"}}"
      }
      {{#if primary_tag}}
      ,"articleSection": "{{primary_tag.name}}"
      {{/if}}
      {{#if page_url}}
      ,"@type": "WebPage"
      {{else}}
      ,"@type": "BlogPosting"
      {{/if}}
    }
    </script>
</head>
<body>
    {{!-- Your theme's content --}}
</body>
</html>

Implementing BreadcrumbList Schema

Breadcrumb navigation helps search engines understand your site's hierarchy. This is often placed in a partial file and included in post.hbs.

  1. Create a Partial: In your theme's partials folder, create breadcrumbs.hbs.
  2. Include Partial: In post.hbs, add {{> breadcrumbs}} within the <head> section.

Add Breadcrumb Logic:Handlebars

{{!-- partials/breadcrumbs.hbs --}}
{{#if primary_tag}}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{@site.url absolute="true"}}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{primary_tag.name}}",
      "item": "{{primary_tag.url absolute="true"}}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{encode title}}",
      "item": "{{url absolute="true"}}"
    }
  ]
}
</script>
{{/if}}

Uploading Your Modified Theme

  1. Zip Theme: Compress your modified theme folder into a .zip file.
  2. Upload to Ghost: Go to Settings > Design > Change theme > Upload theme in Ghost Admin.
  3. Activate: Select and activate your new theme.

Essential Validation and Best Practices for Schema.org

After implementing any Schema.org markup, validation is crucial.

Validate Your Markup

  • Google's Rich Results Test: This is your primary tool. Paste your page URL or the code snippet directly into the tool at https://search.google.com/test/rich-results to check for validity and rich result eligibility.
  • Schema.org Validator: Use https://validator.schema.org/ for general Schema.org syntax checks.

Best Practices

  • Accuracy: Ensure your markup precisely reflects the content visible to users on the page.
  • Completeness: Provide as many relevant properties as possible for each Schema.org type.
  • JSON-LD: Always prefer JSON-LD for structured data, as it's Google's recommended format.
  • Common Schemas for Blogs: Consider Article/BlogPosting, Organization, Website, Person (for authors), FAQPage, HowTo, Product/Review, Event, and BreadcrumbList.

By meticulously following this guide, you can significantly enhance your Ghost CMS website's structured data, leading to improved search engine understanding and greater opportunities for prominent rich results.

Ready to see your Ghost content shine brighter in search? Implement these Schema.org strategies today and validate your efforts with Google's tools. Start optimizing your visibility!

Read more