How to Add Custom OG Images to Your Hugo Site
Hugo does not have a built-in OG image system, but its templating engine makes it straightforward to implement one. The standard approach uses a layout partial for the head section and a front matter field for per-page image URLs. Here is the complete pattern.
Add an og_image field to your front matter
In each Markdown file, add an `og_image` field to the YAML or TOML front matter: `og_image: "https://cdn.example.com/og/post-slug.png"`. This field is accessible in templates via `.Params.og_image`. For pages that do not define the field, `.Params.og_image` returns an empty string, which you can use as the condition to fall back to a site-wide default image defined in `hugo.toml` under `params.defaultOgImage`.
Inject the tag in layouts/partials/head.html
Create or edit `layouts/partials/head.html` and add a conditional meta tag block: `{{ with .Params.og_image }}<meta property="og:image" content="{{ . }}">{{ else }}<meta property="og:image" content="{{ $.Site.Params.defaultOgImage }}">{{ end }}`. Call this partial from your base layout using `{{ partial "head.html" . }}`. Pair the og:image tag with `og:title`, `og:description`, `twitter:card`, and `twitter:image` for complete social preview support across all platforms.
Use Hugo's resource processing for local images
If you store OG images in your Hugo `assets/` directory, you can use Hugo's resource pipeline to process them. Reference the image as a resource with `{{ $img := resources.Get "og/post-slug.png" }}` and output its URL with `{{ $img.RelPermalink }}`. This works well for statically generated sites where images are part of the repository. For AI-generated images hosted on a CDN, simply store the CDN URL in front matter and skip the resource pipeline entirely.
Hugo Modules for a shared head partial across projects
If you maintain multiple Hugo sites with the same OG image pattern, extract the head partial into a Hugo Module. Define the module in `hugo.toml` under `module.imports` and reference it from your theme. Any update to the shared module propagates to all sites on the next `hugo mod get -u`. This is overkill for a single site but saves significant duplication if you manage several Hugo projects that share branding conventions.
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 Hugo site