Back to Docs

Static site generator

Hugo OG Image Integration

Add automatic MyOG.social images to Hugo sites by extending or replacing the Open Graph partial.

Prerequisites

  • A Hugo site with a baseURL configured
  • Access to layouts/_partials or your theme override directory
  • A MyOG.social account with your domain added

How MyOG fits Hugo

Hugo includes embedded Open Graph templates, and themes often call partials/opengraph.html from the head.

MyOG works well as a partial because Hugo can generate the absolute permalink for every page at build time.

This is not a plugin candidate. Hugo users will prefer a short partial they can drop into their theme override directory.

1

Choose a layout

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

2

Add the Hugo code

Hugo partial

Place this in layouts/_partials/myog.html and call it from your head template.

{{- $pageURL := .Permalink | urlquery -}}
{{- $myogImageURL := printf "https://api.myog.social/og?url=%s&template=screenshot-right" $pageURL -}}
<meta property="og:image" content="{{ $myogImageURL | safeHTMLAttr }}" />
<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 | safeHTMLAttr }}" />

Call it with {{ partial "myog.html" . }} near your existing Open Graph partial.

3

Place it correctly

  1. Find where your theme renders Open Graph tags, commonly partial "opengraph.html" . or a theme-specific SEO partial.
  2. Create layouts/_partials/myog.html or override layouts/_partials/opengraph.html if you want MyOG to replace theme images.
  3. Use .Permalink, urlquery, and safeHTMLAttr to build the MyOG image URL.
  4. Run hugo, then inspect the generated HTML for the home page and a content page.

Avoid duplicate og:image tags

Hugo's embedded Open Graph partial may emit images from front matter. If you keep that partial and add MyOG after it, crawlers may keep using the first image. Replace the image section or conditionally skip the embedded partial image output.

Dynamic pages

Use .Permalink for regular pages, list pages, taxonomy pages, and posts. It resolves from baseURL and the current page path at build time.

Test the result

  • Run a production Hugo build with the real baseURL.
  • Inspect public/index.html and one post HTML file.
  • Test a deployed URL, not a local hugo server URL.

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

Known limitations

baseURL must match the public site or .Permalink can generate the wrong URL.
Theme updates can change where head partials are called.
If front matter images remain in the old partial, duplicate og:image tags can persist.

Sources

Ready to get started?

Sign up for free and add generated OG images to Hugo posts and pages.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f