Automatically general social media preview cards for pages

[choldgraf]

When you share a link on a social media platform like Twitter, Facebook, Discord, etc, it generates an image preview of the page using OpenGraph Protocol links. An example of this is the GitHub preview cards that are generated when linking to issues:

For example:

These can be a useful way to quickly draw attention and share context about a post / page in the documentation / etc.

There's also a new Sphinx extension that automatically generates these cards using page metadata. For example, the title, description, etc:

• https://github.com/choldgraf/sphinx-social-previews

Proposal: auto-generate social media cards in Hugo

It would be useful if this theme had functionality for auto-generating and linking these social media cards. It could be turned on/off via feature flag, and could then embed the preview images with the static assets of the site, similar to what the Sphinx extension above does.

@jacobtomlinson has a working version of this for his own website at https://jacobtomlinson.dev, so I wanted to cross-link here in case it's helpful:

Here is where he links the locally-generated image for og:image tags:

https://github.com/jacobtomlinson/website/blob/6028b0d95a09f82de84b8c7f0e8b568be0bf879f/themes/working/layouts/partials/head.html#L34-L53

And here is where he generates the images themselves (I think):

https://github.com/jacobtomlinson/website/blob/6028b0d95a09f82de84b8c7f0e8b568be0bf879f/themes/working/layouts/partials/ogimage.html

That creates a card like this:

Design suggestion

Design is very subjective, but my suggestion would be to go with what sphinx-social-previews did, and heavily copy the GitHub social previews design style. I think looks minimal and clean, will be familiar to anyone familiar with github, and probably had a lot more UI research done on it than any design I could come up with :-)

[jacobtomlinson]

Yup in my Hugo theme I have a base template for the social preview (https://i.imgur.com/f5AJKsQ.png) and then use image filters to overlay text onto it in the file @choldgraf linked. Happy to answer any questions folks may have about this.

[alphapapa]

This seems like a good idea. Assigning to myself. Thanks for the suggestion.