Support Open Graph meta tags

[sirodoht]

Initial discussion:

Although this is probably something for a separate issue, it would be nice to have support for Open Graph to allow for rich embeds on social platforms. The about setting could similarly be used for the og:description property.

Originally posted by @ldjb in https://github.com/sirodoht/mataroa/issues/12#issuecomment-1087929383

The simplest way that comes to mind is to let users upload a "default image for Open Graph" which gets used in case a post doesn't have an image. If a post does contain images, maybe pick the first one in the text?

Originally posted by @pratul in https://github.com/sirodoht/mataroa/issues/12#issuecomment-1091996393

[sirodoht]

@pratul's proposal is pretty good, I think. But I still don't like adding configuration for such a detail, so I think I'll keep it open and unimplemented for now :)

[ratsclub]

This might be some kind of bike-shedding, but what if instead of a custom image we get a custom icon configuration? This would make it easier for users to distinguish mataroa blogs from one another, and would make for a great and minimalistic embed.

Basically my proposal is that we actually implement two features for the cost of a single one. Add an option for a custom favicon and use it on the open graph metadata.

Edit: Sorry, after a quick search it seems to me that a favicon would be too small for this purpose 😬

[merlinscholz]

Just to chime in here, what about OpenGraph/Twitter Meta tags without custom images? Implementation would be relatively easy, as in just adding the tags to the HTML template, without any new back end configuration or settings. This also would help SEO AFAIK. Here's an example of how Hugo does this: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/opengraph.html

Most of that code could be discarded in Mataroa's use case though. In our implementation we would have the following attributes:

• Title (Copy the post title)
• Publication Date (Copy the post info)
• Description (This is set to the first n words of the actual (sanitized) body text when no custom description text is being set by the author)

Regarding images, one could just use the first image of the post, I believe some SSGs already work that way.

The same holds true for Twitter tags and would enable those small link cards instead of just having the link in the Tweet.

If this (minimal version of) OpenGraph/Twitter is something that we want to add, I could take care of the implementation.