(updated ) by

OpenGraph and Twitter Cards on Hugo

Hugo OpenGraph Twitter

When your site is shared on social media, they use meta details from the page that is shared. Facebook uses OpenGraph and Twitter has their cards. This meta data is used to show embedded content inline.

To include this in a Hugo site you’ll want to add it to the front-matter. Both use the same variables, and this pattern allows good accessibility to necessary data.

Hugo Config

Set your defaults in your config file. Uses your main config as a default. Page config takes precedence.

config.yaml

params:
  description: Text about my cool site
  images:
    - site-feature-image.jpg
  title: My cool site

Page front-matter

---
description: Text about my cool page
title: My cool page
images:
- page-feature-image.jpg
---

Add the template to your layout

Hugo provides the templates internally. Make sure it’s in your <head> tag.

<head>
	...
	{{ template "_internal/opengraph.html" . }}
	{{ template "_internal/twitter_cards.html" . }}
</head>

Result

<head>
	...
	<meta property="og:title" content="Hugo OpenGraph Twitter Cards" />
	<meta property="og:description" content="When your site is shared on social media, they use meta details from the page that is shared." />
	<meta property="og:type" content="article" />
	<meta property="og:url" content="https://davelage.com/posts/hugo-opengraph-twitter-cards/" />

	<meta property="og:image" content="https://davelage.com/img/post/hugo-opengraph-twitter.png" />
	<meta property="article:published_time" content="2019-11-16T13:47:11-05:00" />
	<meta property="article:modified_time" content="2019-11-16T13:47:11-05:00" /><meta property="og:site_name" content="Dave Lage" />


	<meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:image" content="https://davelage.com/img/post/hugo-opengraph-twitter.png"/>

	<meta name="twitter:title" content="Hugo OpenGraph Twitter Cards"/>
	<meta name="twitter:description" content="When your site is shared on social media, they use meta details from the page that is shared."/>

</head>

Twitter Card Validator

Validate your cards to make sure they work properly.

![Twitter Card Validator](Screenshot_2019-11-24 Card Validator Twitter Developers.png)

Updates