Let's talk about Twitter Cards

I am using my custom Twitter Cards implementation in oppose to templates/twitter_cards.html however would like to discuss that and possibly help to improve it.

I notices that the last change to that was in March 2021 which resulted in removing .Site.Authors and twitter:creator.

The second (twitter:creator) wonder why was removed exactly?

I got this website that has a Twitter Site account (twitter:site) but the author of this site has its own Twitter account (twitter:creator).

In config I got specified [params] and twitter for the site as well as I got in config (on multi-author this will probably be in markdown file) got [author] and twitter there.

This results in that

<meta name="twitter:site" content="{{ .Site.Params.twitter }}"/>
<meta name="twitter:creator" content="{{ .Site.Author.twitter }}"/>

There is also the parameter twitter:image:alt" that is worth adding.

I am using a different approach here, and on my site, this looks like that:

{{ if .Params.featuredImage }}
  <meta name="twitter:image" content="{{ .Params.featuredImage | absURL }}"/>
  <meta name="twitter:image:alt" content="{{ .Title }}"/>
{{ else }}
  <meta name="twitter:image" content="{{.Site.BaseURL}}{{ .Site.Params.og_image }}"/>
{{ end }}

Unless I am missing something, I don’t see twitter:url?

<meta name="twitter:url" content="{{ .Permalink }}"/>

What do you think?


They stopped using it. They now use og:url, if not present, they fallback to the URL itself.


As for the rest, it depends on what you need. For example, you added two new params featuredImage and og_image.

Personally, I use the defaults as much as possible when it comes to frontmatter params, and I adjust a third-party theme to follow the defaults if it introduced its own.

So in my case, I only use: images = [""] regardless of the theme. It makes it easier to switch themes later.

Maybe you can suggest the :image:alt to be added in the default template, however, I’m not sure if using the article’s title is appropriate since the title and the image doesn’t necessarily reflect each other all the time.

The only changes I did on my end is the ff:

{{- with .Site.Social.twitter_creator -}}<meta name="twitter:creator" content="{{ . }}" />{{- end -}}
{{- with .Site.Social.twitter_site -}}<meta name="twitter:site" content="{{ . }}" />{{- end -}}


1 Like