Platform Guide

Ghost Integration

Add automatic OG images to your Ghost site by pasting two meta tags into your theme's default.hbs.

Prerequisites

  • A self-hosted Ghost site, or Ghost(Pro) on a plan that allows custom themes (Publisher or higher). The Starter plan can't edit its theme, so this setup doesn't work there.
  • A MyOG.social account —
  • Your domain added to MyOG.social dashboard
1

Open your theme's code

In your Ghost admin panel:

  1. Go to Settings → Site → Theme and click Change theme
  2. Open Installed
  3. Click ⋯ next to your active theme, then Edit code
  4. Open default.hbs

You can also Download the theme, edit default.hbs locally, zip it again and use Upload theme.

2

Add the meta tags

Paste these two lines directly above {{ghost_head}} in default.hbs:

Preview anonymously. Sign in to get complete install code for your account.

Sign in to get install code

{{encode (url absolute='true')}} is a Ghost theme expression that outputs the full URL of the page being viewed, encoded so it can sit inside the image URL.

Use the theme, not Code injection. Ghost outputs Settings → Code injection exactly as typed, so the page-URL expression is never filled in and the image request fails.

Tip: MyOG detects content and branding automatically. You can choose an optional layout (Brand Card, Screenshot Right, Screenshot Bottom, Screenshot Only) in the MyOG.social dashboard.

3

Save and test

Click Save, then Replace theme to make it live (or upload the edited zip).

View the source of a post. The MyOG og:image should appear before Ghost's own tags, with your post's URL inside it. Then test your integration using our OG Preview tool or share a link on Twitter/LinkedIn to see your new OG image.

How it works

  1. 1. When someone shares your blog post on social media, the platform requests the OG image.
  2. 2. MyOG.social detects the page content and brand, then returns a generated OG image.
  3. 3. The image is cached for fast delivery on subsequent shares.

Troubleshooting

OG image not showing?

Make sure your domain is added to your MyOG.social dashboard. Social platforms also cache OG images, so you may need to use their cache refresh tools (e.g., Twitter Card Validator, LinkedIn Post Inspector). See our OG image testing guide for more debugging tips.

Ghost still outputs its own image tags

{{ghost_head}} adds Ghost's own og:image and twitter:image after yours, using the post's social or feature image or your site's cover image. The Open Graph spec gives the first tag preference, so MyOG's tags go first, but platforms don't all handle duplicates the same way. Check the platforms you care about with the OG Preview tool and their own debuggers. On pages where Ghost has no image at all, it sets twitter:card to summary, so X shows a small thumbnail.

Tags gone after a theme update?

Installing a new version of your theme replaces default.hbs. Paste the two lines again after each update.

On Ghost(Pro) Starter?

Starter only allows Ghost's official themes (Ghost lists custom themes from Publisher up), so you can't add these tags to your theme, and Code injection can't insert each page's URL. There's no per-page MyOG setup on Starter. Self-hosted Ghost and Ghost(Pro) Publisher or higher can use the steps above.

Ready to get started?

Sign up for free and add page-specific social cards to your Ghost site.

Already have an account?

92ade5118325cb157d7694edebfefcfd311da6d2