Back to Docs

Platform Guide

Jekyll & GitHub Pages Integration

Add automatic OG images to your Jekyll site (including GitHub Pages) by adding a single meta tag to your head template.

Prerequisites

  • A Jekyll site (including GitHub Pages)
  • A MyOG.social account —
  • Your domain added to MyOG.social dashboard
  • url set in your _config.yml (e.g., url: "https://yourdomain.com")
1

Add the meta tag to your head template

Open your _includes/head.html (or whichever template renders your <head>) and add: 

<meta property="og:image" content="https://api.myog.social/og?url={{ page.url | absolute_url | uri_escape }}&template=screenshot-right" />

{{ page.url | absolute_url | uri_escape }} is a Liquid expression that outputs the full URL of the current page.

Tip: You can choose from different templates (Brand, Screenshot Right, Screenshot Bottom, Screenshot Only) in the MyOG.social dashboard.

2

Placement with jekyll-seo-tag

If your head template includes {%- seo -%} (most Jekyll sites do, including Minima and GitHub Pages), add the MyOG tag after it. The jekyll-seo-tag plugin only outputs og:image when a page has image: in its frontmatter, so on most pages your MyOG tag will be the only one.

If some pages have image: in frontmatter, you can avoid duplicate og:image tags with a conditional: 

{% unless page.image %}
<meta property="og:image" content="https://api.myog.social/og?url={{ page.url | absolute_url | uri_escape }}&template=screenshot-right" />
{% endunless %}

This only emits the MyOG tag when jekyll-seo-tag won't produce its own.

3

Deploy and test

Commit and deploy your changes.

Test your integration using our OG Preview tool or share a link on Twitter/LinkedIn to see your new OG image.

Twitter / X Cards

jekyll-seo-tag outputs twitter:image only when image: is in frontmatter. To ensure Twitter/X picks up your MyOG image, add these tags alongside the OG one: 

<meta name="twitter:image" content="https://api.myog.social/og?url={{ page.url | absolute_url | uri_escape }}&template=screenshot-right" />
<meta name="twitter:card" content="summary_large_image" />

How it works

  1. 1. When someone shares your page on social media, the platform requests the OG image.
  2. 2. MyOG.social generates a beautiful image using your page content and returns it.
  3. 3. The image is cached for fast delivery on subsequent shares.

All standard Minima layouts (home, page, post) inherit from default.html, which includes head.html. One tag covers your entire site.

Troubleshooting

OG image not showing?

Make sure your domain is added to your MyOG.social dashboard and that url is set in _config.yml. Without it, absolute_url may output a relative path. Social platforms also cache OG images, so you may need to use their cache refresh tools.

Using a custom theme (not Minima)?

Check which template renders your <head> and add the meta tag there instead of _includes/head.html.

Not using jekyll-seo-tag?

If your site doesn't use jekyll-seo-tag, just add the meta tag to whatever template renders your <head>. There's no conflict to worry about.

Ready to get started?

Sign up for free and add beautiful OG images to your Jekyll site.

Already have an account?

1f6ef7d8b2133e1ce001059bd4b960165b3549cf