Guides › Frameworks & CMS

How to add Open Graph tags in Hugo

Hugo ships built-in Open Graph and Twitter card templates. In your <head> partial:

{{ partial "opengraph.html" . }}
{{ partial "twitter_cards.html" . }}

{{/* Older Hugo versions: */}}
{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}

The templates read title, description and images from front matter (falling back to params.images in site config). Set baseURL correctly so image URLs are absolute.

---
title: My post
description: One-sentence summary
images: ['/og/my-post.png']
---

Verify

Deploy, then run the live URL through the OG previewer. It fetches the page like a social crawler (no JavaScript), so tags added only on the client side won't show up. That matches what Facebook, LinkedIn and X see.

Related