Twitter cards partials for Hugo

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers. Here we will build a partial that shows you how to embedd this with ease in Hugo.

What are Twitter cards?

Well, Twitter explains them as follows:

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Find more specific details at the official developer documentation on twitter.

The front matter

All data needed for twitter cards should be specified in the front matter in toml, yaml or JSON-Format in this example we will use toml to make it more clear.

Extending your current front matter with the following specifications:

Summary card

The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website.

Twitter Developer Documentation for Summary Cards.

+++
[twitter]
  card = "summary"
  site = "@twittername"
  title = "Special Title for the Card"
  description = "Special Description for the card max. 200 characters"
  image = "https://example.com/great-picture.jpg"
+++

Summary Card with Large Image

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

Twitter Developer Documentation for Summary Cards with Large Image.

+++
[twitter]
  card = "summary_large_image"
  site = "@twittername"
  creator = "@twitternameofcreator"
  title = "Special Title for the Card"
  description = "Special Description for the card max. 200 characters"
  image = "https://example.com/great-picture.jpg"
+++

App Card

The App Card is a great way to represent mobile applications on Twitter and to drive installs. We designed the App Card to allow for a name, description and icon, and also to highlight attributes such as the rating and the price.

Twitter Developer Documentation for App Cards.

+++
[twitter]
  card = "app"
  site = "@twittername"
  description = "Special Description for the card max. 200 characters"
  app_country = "US"
  app_name_iphone = "IphoneAppName"
  app_id_iphone = "123456789"
  app_url_iphone = "iphoneappname://user/aa38radoaw4rlkaysdjfa8w4u"
  app_name_ipad = "IpadAppName"
  app_id_ipad = "987654321"
  app_url_ipad = "ipadappname://user/aa38radoaw4rlkaysdjfa8w4u"
  app_name_googleplay = "GoogleplayAppName"
  app_id_googleplay = "987654321"
  app_url_googleplay = "https://googleplayappname.fabric.io/user/q2345oi8uzq8etadfkl"
+++

Player Card

Video clips and audio streams have a special place on the Twitter platform thanks to the Player Card. By implementing a few HTML meta tags to your website and following the Twitter Developer Policy, you can deliver your rich media to users across the globe.

Twitter Developer Documentation for Player Cards.

+++
[twitter]
  card = "player"
  title = "The Bit Title"
  site = "@twittername"
  description = "Special Description for the card max. 200 characters"
  player = "https://urltoiframeplayer.tld/awl3kj3lk234"
  player_width = 1280
  player_height = 960
  image = "https://example.tld/wonderful-thumbnail.jpg"
  image_alt = "This is an amazing Thumbnail"
  player_stream = "https://example.tld/stream.mp4"
  player_stream_content_type = "video/mp4"
+++

The Partial

Now lets create the code for the partial. First create a file named twitter-card.html and place it under layouts/partials/-Folder.

Like:

|-- layouts
|  |-- partials
|  |  |-- twitter-card.html

And put the following code into:

{{ with .Params.twitter }}
<meta name="twitter:card" content="{{- .card -}}">
<meta name="twitter:site" content="{{- .site -}}">
{{ if ne .card "app" -}}
<meta name="twitter:title" content="{{- .title -}}">
<meta name="twitter:image" content="{{- .image -}}">
{{ with .image_alt -}}<meta name="twitter:image:alt" content="{{- . -}}">{{- end }}
{{- end }}
{{ with .creator -}}<meta name="twitter:creator" content="{{- . -}}">{{- end }}

{{- if eq .card "app" }}
{{ with .app_country }}<meta name="twitter:app:country" content="{{- . -}}">{{ end }}
{{ with .app_name_iphone }}<meta name="twitter:app:name:iphone" content="{{- . -}}">{{ end }}
{{ with .app_id_iphone }}<meta name="twitter:app:id:iphone" content="{{- . -}}">{{ end }}
{{ with .app_url_iphone }}<meta name="twitter:app:url:iphone" content="{{- . -}}">{{ end }}
{{ with .app_name_ipad }}<meta name="twitter:app:name:ipad" content="{{- . -}}">{{ end }}
{{ with .app_id_ipad }}<meta name="twitter:app:id:ipad" content="{{- . -}}">{{ end }}
{{ with .app_url_ipad }}<meta name="twitter:app:url:ipad" content="{{- . -}}">{{ end }}
{{ with .app_name_googleplay }}<meta name="twitter:app:name:googleplay" content="{{- . -}}">{{ end }}
{{ with .app_id_googleplay }}<meta name="twitter:app:id:googleplay" content="{{- . -}}">{{ end }}
{{ with .app_url_googleplay }}<meta name="twitter:app:url:googleplay" content="{{- . -}}">{{ end }}
{{- end }}

{{- if eq .card "player" }}
{{ with .player }}<meta name="twitter:player" content="{{- . -}}">{{ end }}
{{ with .player_width }}<meta name="twitter:player:width" content="{{- . -}}">{{ end }}
{{ with .player_height }}<meta name="twitter:player:height" content="{{- . -}}">{{ end }}
{{ with .player_stream }}<meta name="twitter:player:stream" content="{{- . -}}">{{ end }}
{{ with .player_stream_content_type }}<meta name="twitter:player:stream:content_type" content="{{- . -}}">{{ end }}
{{- end }}

{{ end }}

Usage Example

As simple as that…

{{ partial "twitter-card" . }}

Put this in the <head>-Section of your layout.

Done.