Back to Docs

Static site generator

Eleventy OG Image Integration

Add automatic MyOG.social images to Eleventy layouts with page.url, site data, and server-rendered meta tags.

Prerequisites

  • An Eleventy site with shared layouts
  • A global site URL in data, such as _data/site.json
  • A MyOG.social account with your domain added

How MyOG fits Eleventy

Eleventy exposes page.url for the current output page. Combined with a global site URL, that gives MyOG the exact public URL for each generated page.

Add the tags once in your base layout or SEO include, then let posts, pages, and collections inherit the same logic.

This works best as a small template snippet. A plugin would be unnecessary unless you want deeper theme packaging later.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Eleventy code

Nunjucks layout snippet

Use this in your base layout or SEO include.

{% if page.url %}
  {% set pageURL = site.url + page.url %}
  {% set myogImageURL = "https://api.myog.social/og?url=" + (pageURL | urlencode) + "&template=screenshot-right" %}
  <meta property="og:image" content="{{ myogImageURL }}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="{{ myogImageURL }}" />
{% endif %}

Define site.url in global data, for example { "url": "https://example.com" }.

3

Place it correctly

  1. Add your production origin to global data, for example _data/site.json.
  2. Find your base layout or metadata include.
  3. Build the absolute page URL from site.url and page.url, then URL-encode it for MyOG.
  4. Run an Eleventy build and inspect output HTML for a collection item and a page.

Avoid duplicate og:image tags

Many Eleventy starters already render image from front matter. Either replace that front matter image output with MyOG or keep native images only for pages where you intentionally do not want generated cards.

Dynamic pages

Use page.url for normal pages, collection items, pagination pages, and tag pages. If a permalink is false, skip MyOG because the page has no public URL.

Test the result

  • Inspect _site output after a production build.
  • Test one post, one page, and one paginated page if you use pagination.
  • Confirm site.url is not a localhost development URL.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

page.url can be false for non-output templates.
Wrong trailing slash settings can produce a URL that differs from your canonical.
Theme includes may render Open Graph tags in more than one place.

Sources

Ready to get started?

Sign up for free and add generated social cards to Eleventy pages.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f