How to Add Custom OG Images to Your Jekyll Site
Jekyll is widely used for GitHub Pages sites, personal blogs, and documentation. Its Liquid templating system makes adding OG meta tags straightforward, and the jekyll-seo-tag plugin handles most of the boilerplate. Here is how to get OG images working correctly for both plugin-based and manual setups.
jekyll-seo-tag is the fastest path for most sites
Add `gem "jekyll-seo-tag"` to your Gemfile and `jekyll-seo-tag` to your `_config.yml` plugins list. In your base layout (`_layouts/default.html`), add `{% seo %}` inside the `<head>` tag. The plugin reads `image` from your front matter and outputs the correct `og:image` and `twitter:image` tags automatically. Set a site-wide fallback by adding `image: /assets/og-default.png` to `_config.yml` under the `defaults` key or at the root level.
Manual setup in _layouts/default.html
If you prefer not to use the plugin, edit `_layouts/default.html` directly. Inside `<head>`, add `<meta property="og:image" content="{{ page.og_image | default: site.og_image | absolute_url }}">`. The `absolute_url` Liquid filter prepends your site URL from `_config.yml`, which is required since social crawlers need fully qualified URLs. Define `og_image` in each post's front matter and set a site-wide `og_image` in `_config.yml` as the fallback value.
Front matter fields for per-post images
In each post's front matter block, add `og_image: "https://cdn.example.com/og/post-title.png"`. Use an absolute CDN URL rather than a relative path to avoid issues with GitHub Pages subdirectory deployments, where `absolute_url` can produce unexpected results depending on your `baseurl` configuration. Storing CDN-hosted URLs in front matter is simpler and more portable than managing local image assets in the Jekyll build.
GitHub Pages: test with a real deployment, not localhost
GitHub Pages deployments use a subdirectory URL structure for project sites (`username.github.io/repo-name`) that can cause relative URL issues in OG tags. Always test your OG images on the live GitHub Pages URL rather than a local server. Use the Twitter Card Validator and Facebook Sharing Debugger to confirm the absolute image URL is resolving correctly. If you see a wrong URL, check your `baseurl` and `url` values in `_config.yml` and ensure `absolute_url` is applied to your image path.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Jekyll site