jekyll-opengraph-image

jekyll-opengraph-image solves a frustratingly common Jekyll problem: getting the right og:image URL into your post pages so social sharing previews actually show the post’s hero image instead of nothing.

The Open Graph protocol is the standard that controls how URLs unfurl when shared on social platforms — the image, title, and description that appear in a card on Facebook, Mastodon, Slack, iMessage, and others. Getting og:image right is one of the highest-ROI things you can do for content that gets shared.

Without a plugin you’re stuck either hardcoding absolute URLs in each post’s frontmatter, relying on a theme-specific solution that won’t travel with you, or writing custom Liquid logic in your head.html. This generator does it automatically for every post and page.

How It Works

The generator reads page.image frontmatter, constructs the correct absolute URL using site.url and site.baseurl, and injects it into page.og_image. Your head.html template just checks for page.og_image and emits the tag.

• Relative image paths → prefixed with site.url + site.baseurl
• Absolute URLs (already starting with https://) → used as-is
• Missing image → falls back to opengraph_image.default config value
• Missing image + no default → page.og_image not set (no broken tag)

Installation

Add to your Gemfile:

gem "jekyll-opengraph-image"

Add to plugins: in _config.yml:

plugins:
  - jekyll-opengraph-image

Template Usage

Add to your _includes/head.html:

That’s it. Every post with an image: in its frontmatter now gets a correct og:image.

Configuration

Optional default fallback for pages without a hero image:

opengraph_image:
  default: /images/social-preview.jpg

Pairs Well With

jekyll-structured-content — which handles the full JSON-LD schema markup for BlogPosting, WebPage, and other types. Together they give you complete social and search metadata without any theme dependency.

Source

Available on GitHub and RubyGems.

gem install jekyll-opengraph-image