Add Hugo’s built-in Open Graph partial to the template that renders your document head, then provide page-specific metadata in front matter and defaults in your site configuration. Build the site and inspect the generated HTML to verify the title, type, canonical URL, and image. Avoid a custom implementation unless the built-in partial does not meet a specific need.
What Open Graph metadata does
Open Graph metadata consists of HTML meta properties in a page’s <head>. They describe a page when it is represented elsewhere. The Open Graph Protocol identifies four required properties: og:title, og:type, og:image, and og:url. It also describes og:description, og:locale, and og:site_name as optional properties that are generally recommended. See the Open Graph Protocol.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Hugo in Action: Static sites and dynamic Jamstack apps | $45.32 | Buy on Amazon |
| 2 |
|
The Jamstack Book: Beyond static sites with JavaScript, APIs, and markup | $41.72 | Buy on Amazon |
| 3 |
|
Build Websites with Hugo | $22.99 | Buy on Amazon |
| 4 |
|
Generator Static Hz | $1.29 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
Include Hugo’s built-in Open Graph partial
Hugo provides an embedded template for Open Graph metadata. First check the theme and your existing head partials so you do not emit duplicate tags. In the template that renders the page head, add this call where the metadata should appear:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match{{ partial "opengraph.html" . }}Hugo’s embedded templates documentation describes this partial and explains that you can override it by copying its source into layouts/_partials/opengraph.html. Start with the built-in behavior; override it only to address a concrete requirement.
#1 Best Overall
Set page metadata and site defaults
Use front matter for values specific to a page, and the existing site configuration for defaults. Hugo documents page fields such as title, description, summary, and lastmod. Description and summary are not interchangeable: description is commonly used for a head metadata element, while summary is a content summary or teaser. See Hugo front matter documentation.
For example, a page can supply a title, description, locale, and image in YAML front matter:
+++
title = "A Hugo Page"
description = "A concise description of this page."
locale = "en-US"
images = ["images/hugo-page.jpg"]
+++Use the file format already used by your site; do not introduce a competing configuration file. Hugo documents YAML, TOML, and JSON configuration and access to custom site parameters through .Site.Params in its templating documentation. Site-level defaults relevant to the embedded partial include the site title, description, and an images array under params.
Hugo’s documented fallback behavior
When page values are missing, the embedded partial uses these fallbacks:
og:title: page title, then site title, thenparams.title.og:site_name: site title, thenparams.title.og:description: page description, then page summary, thenparams.description.og:locale: pagelocalefront matter, then the site language’s locale. Hugo changes hyphens to underscores in the emitted value; for example,en-USbecomesen_US.
These are the embedded partial’s documented behaviors. If you override it, check that your replacement preserves the fallback logic you intend to keep.
Choose and verify the Open Graph image
The embedded partial can emit up to six og:image tags. If a page has an images front matter parameter, Hugo processes its values. For an internal path, it searches page resources and then global resources; if it finds a resource, it uses that resource’s permalink. Otherwise, it converts the path to an absolute URL. External image URLs are used as supplied.
Without a page-level images value, Hugo looks among page resources for a filename matching *feature*, then *cover*, then *thumbnail*. If none is found, it uses the first value in the site configuration’s params.images array when one is present. Check the generated value rather than assuming a file was found: the image URL should resolve on the deployed site and represent the page.
Check the canonical URL and page type
The protocol defines og:url as the canonical URL and permanent identifier for an object. Hugo’s embedded partial emits the page permalink. Confirm the rendered value is the intended canonical address and that your base URL and permalink configuration produce it correctly.
Rank #3
Hugo documents og:type as article for pages and website for list and home pages. For article pages, the embedded partial also emits article:section, article:published_time, article:modified_time, and up to the first six article:tag values. Inspect the output before adding these manually to avoid duplicates.
Build and inspect the generated HTML
- Run your normal Hugo build command for the site.
- Open the generated HTML file for a page and inspect its
<head>. - Check that the four required properties appear once with the expected values:
og:title,og:type,og:image, andog:url. - Check optional description and locale values, plus article properties where relevant.
- Verify the image URL resolves from the deployed site, not just from your local source tree.
Hugo’s output depends on the templates, front matter, and configuration in your project, so the generated page is the decisive check. No particular minimum Hugo version, social-platform image dimensions, crawler refresh interval, or platform cache policy is established here; verify version-specific behavior if your implementation depends on it.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting
Tags are missing
Confirm the template that renders the page head calls {{ partial "opengraph.html" . }}, and check that the page uses that template. A theme may have its own head partial; adding the call in an unused template will not affect the output.
Free tools Windows power users keep installed
One-click scans. No signup required.
Tags appear more than once
Look through the theme and site layouts for existing Open Graph tags or another call to the partial. Keep one source for each property rather than adding a second set by hand.
Rank #4
The image is absent or points to the wrong place
Check the page’s images front matter value and whether the file is a page resource or global resource. If relying on automatic discovery, confirm a page resource follows the documented filename patterns, or set a site fallback in params.images. Inspect the built tag and test the resulting URL on the deployed site.
The URL is not canonical
Compare og:url in the built HTML with the intended permanent page address. Since the partial uses the page permalink, review the site base URL and permalink settings if they differ.
Or skip the browser setup
Open Graph tags are generated by Hugo rather than captured from a rendered browser page, so a screenshot API is not a replacement for the metadata setup and HTML inspection above. If you need a screenshot of a page to check its rendered appearance, ScreenshotNeo is a website screenshot API and MCP server. For example, this cURL request returns a screenshot:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It removes cookie banners, popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for free.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
