Jekyll Open Graph Tags: Add OG Meta to Liquid Templates

Add og:title, og:image, og:description, and Twitter card tags to Jekyll sites using Liquid templates, front matter, and _config.yml defaults.

Jekyll OG tag basics

Jekyll is a static site generator that compiles Liquid templates into HTML. Because the output is pre-built HTML, OG tags you add to templates are immediately visible to social crawlers — no server-side rendering or JavaScript required.

The standard approach: add a reusable OG tag include to _includes/ and reference it from your default layout. Use Liquid to pull per-page data from front matter.

Create an OG tags include

{# _includes/og-tags.html #}
{% assign og_title = page.title | default: site.title %}
{% assign og_desc = page.description | default: site.description %}
{% assign og_url = page.url | absolute_url %}
{% if page.image %}
  {% assign og_image = page.image | absolute_url %}
{% else %}
  {% assign og_image = site.url | append: '/assets/og-default.jpg' %}
{% endif %}

<!-- Open Graph -->
<meta property="og:title" content="{{ og_title | escape }}" />
<meta property="og:description" content="{{ og_desc | escape }}" />
<meta property="og:image" content="{{ og_image }}" />
<meta property="og:url" content="{{ og_url }}" />
<meta property="og:type" content="{{ page.og_type | default: 'website' }}" />
<meta property="og:site_name" content="{{ site.title | escape }}" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ og_title | escape }}" />
<meta name="twitter:description" content="{{ og_desc | escape }}" />
<meta name="twitter:image" content="{{ og_image }}" />
{% if site.twitter_username %}
<meta name="twitter:site" content="@{{ site.twitter_username }}" />
{% endif %}

Add to your default layout

{# _layouts/default.html #}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ page.title | escape }} | {{ site.title | escape }}</title>
  {% include og-tags.html %}
</head>
<body>
  {{ content }}
</body>
</html>

Set defaults in _config.yml

# _config.yml
url: "https://yoursite.com"
baseurl: ""
title: "My Jekyll Site"
description: "My site description."
twitter_username: yourtwitterhandle

# Per-page defaults
defaults:
  - scope:
      path: ""
      type: "posts"
    values:
      og_type: "article"
      layout: "post"

Per-page OG tags in front matter

---
title: "My Blog Post"
description: "A description for this specific post."
image: /assets/posts/my-post-cover.jpg
og_type: article
date: 2026-03-15
---

Post content goes here.

Using jekyll-seo-tag plugin

The jekyll-seo-tag plugin (included by default on GitHub Pages) handles OG tags automatically:

# Gemfile
gem 'jekyll-seo-tag'

# _config.yml
plugins:
  - jekyll-seo-tag

# In layout:
{% seo %}

# Front matter still controls values:
---
title: "Post Title"
description: "Post description."
image: /assets/post-cover.jpg
---

jekyll-seo-tag generates OG, Twitter Card, and JSON-LD tags automatically from your front matter and _config.yml.

Common Jekyll OG mistakes

  • Missing url in _config.yml: without url set, the | absolute_url filter won't generate correct absolute URLs.
  • Wrong baseurl: if deploying to a subdirectory (e.g., GitHub Pages project site), set baseurl: "/repo-name".
  • Forgetting to escape: use | escape on all text values to prevent HTML injection in meta attributes.

Preview your OG tags free at OGFixer.com → Paste your Jekyll site URL to verify how your link card looks on Twitter, LinkedIn, Discord, and Slack.

← All guides