Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
Create a new connection and copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your layout

Open _layouts/default.html (or whatever layout your pages use). Jekyll uses Liquid templates with YAML frontmatter for page data. This is where you’ll add Open Graph meta tags so every page inherits them.

Add Open Graph meta tags

Add the full set of Open Graph tags to your layout’s <head>. Jekyll’s page and site variables pull in dynamic values automatically:

<!-- _layouts/default.html -->
<html>
  <head>
    <meta property="og:title" content="{{ page.title | default: site.title }}">
    <meta property="og:description" content="{{ page.description | default: site.description }}">
    <meta property="og:url" content="{{ page.url | absolute_url }}">
    <meta property="og:site_name" content="{{ site.title }}">
    <meta property="og:type" content="{{ page.og_type | default: 'website' }}">
    <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net{{ page.url }}">
    <meta name="twitter:card" content="summary_large_image">
  </head>
  <body>
    {{ content }}
  </body>
</html>

Replace https://$OGPLUS_KEY.ogplus.net with the connection URL you copied.

Tag reference

Tag	Value	Source
`og:title`	Page title	`page.title` frontmatter, falls back to `site.title`
`og:description`	Page description	`page.description` frontmatter, falls back to `site.description`
`og:url`	Canonical URL	`page.url` resolved to absolute URL
`og:site_name`	Site name	`site.title` from `_config.yml`
`og:type`	Content type	`page.og_type` frontmatter, defaults to `website`
`og:image`	Social card image	OpenGraph+ connection URL + page path
`twitter:card`	Card format	`summary_large_image` for large previews

Dynamic tags from frontmatter

Jekyll pages and posts set their tags via YAML frontmatter. The layout picks up these values automatically:

---
title: How to Build a Blog with Jekyll
description: A step-by-step guide to building a fast static blog.
og_type: article
layout: default
---

Your post content here.

Product page example:

---
title: Premium Widget
description: $49.99 — Our best-selling widget, now available in three colors.
og_type: product
layout: default
---

Shared include

If you use multiple layouts, extract the meta tags into a shared include:

<!-- _includes/open-graph.html -->
<meta property="og:title" content="{{ page.title | default: site.title }}">
<meta property="og:description" content="{{ page.description | default: site.description }}">
<meta property="og:url" content="{{ page.url | absolute_url }}">
<meta property="og:site_name" content="{{ site.title }}">
<meta property="og:type" content="{{ page.og_type | default: 'website' }}">
<meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net{{ page.url }}">
<meta name="twitter:card" content="summary_large_image">

Then include it in any layout:

<head>
  {% include open-graph.html %}
</head>

Configure site variables

Set your site-wide defaults in _config.yml:

title: My Blog
description: A blog about web development
url: https://mysite.com

These values are used as fallbacks when pages don’t define their own title or description in frontmatter.

Verify

Deploy your site and open the preview tool in your OpenGraph+ dashboard. Paste a URL from your site to confirm the meta tags and social card image render correctly.