Developer tips & trick, one bite at a time

How to Make Dynamic Twitter Card for Hugo

Let’s see how to make a nice dynamic twitter card in Hugo to optimize our twitter post, so it will show us an image, summary and other relevant information when we share it on twitter.

I’m sure you have a partial header somewhere in your Hugo blog, where you put HTML tag inside. Open that file, and let’s attach this meta information

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="YOURSITENAME" />
<meta name="twitter:creator" content="YOURNAME" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:title" content="{{ if eq .Kind "taxonomy" }}{{ .Title }} | YourSite {{ else }}{{ .Title }}{{ end }}" />
<meta property="og:description" content="{{ if .Description }} {{ .Description }} {{ else }} {{ .Site.Params.Description }} - {{ .Title }} {{ end }}" />
<meta property="og:image" content="{{if .Params.image}}{{.Params.image}}{{else}}YourDefaultImage{{end}}" />

It’s safe to put this on the main file. Since we set a dynamic rule for some meta information.

How to make the image twitter card dynamic?

In each your post, add “image” attribute

image: "Your-image-source.jpg"

Now, everytime you or someone post your link via twitter, their followers can see your nice little twitter card

This is a post in the Hugo website to the next level series.

🏊🏾‍♀️ Back Home