Implement twitter cards

[appieschot]

Article issue

The template currently does not render the header image when posting a link to twitter. We should update our template to provide the required OpenGraph or Twitter info to render images propperly.

We can use https://cards-dev.twitter.com/validator to validate our current template.

[appieschot]

I'll pick this one up, for future reference:

Remove the following snippet to fall back to custom implementation

blog/themes/reader-hugo/layouts/partials/head.html

Lines 77 to 78 in 1c05096

	{{ template "_internal/opengraph.html" . }}
	{{ template "_internal/twitter_cards.html" . }}

Rewrite to use correct image (currently using the svg logo)

blog/themes/reader-hugo/layouts/partials/head.html

Lines 46 to 75 in 1c05096

	<!-- Open Graph image and Twitter Card metadata -->
	{{ $image_path := .Params.image | default site.Params.image }}
	{{ $image_path_local := printf "static/%s" $image_path }}
	{{ $image_ext := trim (path.Ext $image_path | lower) "." }}
	{{ if fileExists $image_path_local }}
	<meta property="og:image" content="{{ $image_path | absURL }}" />
	<!-- If not SVG, read image aspect ratio and define Twitter Card and Open Graph width and height -->
	{{ if ne $image_ext "svg" }}
	{{ with (imageConfig $image_path_local) }}
	{{ if (and (gt .Width 144) (gt .Height 144)) }}
	<meta name="twitter:image" content="{{ $image_path | absURL }}" />
	<meta name="twitter:card"
	content="summary{{ if (and (gt .Width 300) (gt .Height 157) (not (eq .Width .Height))) }}_large_image{{ end }}">
	{{ end }}
	<meta property="og:image:width" content="{{ .Width }}">
	<meta property="og:image:height" content="{{ .Height }}">
	{{ end }}
	{{ end }}
	<meta property="og:image:type"
	content="image/{{ if eq $image_ext `svg` }}svg+xml{{ else }}{{ replaceRE `^jpg$` `jpeg` $image_ext }}{{ end }}">
	{{ end }}
	<meta name="twitter:title" content="{{ with .Title }}{{ . }}{{ else }}{{ site.Title }}{{ end }}" />
	<meta name="twitter:description"
	content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
	{{ with site.Social.twitter }}
	<meta name="twitter:site" content="@{{ . }}" />{{ end }}
	{{ range site.Authors }}
	{{ with .twitter }}
	<meta name="twitter:creator" content="@{{ . }}" />{{ end }}
	{{ end }}

[LuiseFreese]

hey @appieschot can you please only change the files in the blog/layouts folder and not in the blogs/themes/reader-hugo/layouts folder? This way we don't override the theme. This was @hugoabernier s suggestion :-)

[appieschot]

Will look into it, we should be able to do I think 🦾

[appieschot]

@hugoabernier do you want me to revert #127 and implement a custom file in the /layouts folder as well? That way we could keep the reader-hugo as is I guess?

[LuiseFreese]

that would be perfect!

[appieschot]

Solved with last PR, cards should be visible now.