Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add OpenGraph meta tags #385

Merged
merged 1 commit into from
Aug 9, 2021

Conversation

DasSkelett
Copy link
Member

@DasSkelett DasSkelett commented Aug 9, 2021

Started working on this yesterday, and funnily enough today @V1TA5 suggested it in the Discord.

Background

This pull request adds HTML meta tags according to the Open Graph protocol to SpaceDock.
These tags are used by websites and programs to generate "embeds" / "cards" / previews of a shared link.
Among those are Discord, Facebook and Element (Matrix client).
Twitter requires their own custom meta tags, AFAIK. We can think about adding them too, once we've confirmed this works as intended.

Open Graph only defines the declaration of meta tags, it does not define how they should be interpreted, used and rendered. This means that every software/service shows them a bit differently.

Right now there already is a single Open Graph tag present, which sets an image to display in the preview:
image

Better than nothing, but there's much more you can do with Open Graph:

Changes

In layout.html, the base of all our HTML pages, a new opengraph block is defined. It contains a bunch of default tags, like the site name as title, the existing og.png as image, and a new configurable caption as description.

These tags can be overwritten as necessary in all pages, by redefining the opengraph block.
Right now I have set custom meta tags for mod pages (mod.html), mod packs (mod_list.html), and profiles (view_profile.html). See below for example images.
We can add some more page-specific tags later, but I'd like to test these first. And I think I got the most relevant.

There's one tag that is outside of the block in layout.html, so that it can not be overridden, which is the og:site_name tag. The site name should stay the same regardless of page.

A new caption key is added to the config.ini. I've set it to a string I found in frontend/static/opensearch.xml, it was better than anything I could come up with. And is there a better word than "caption"?
I've also sorted the keys in config.ini a bit, roughly by area which they configure.

Deployment notes

Whenever this is deployed onto a new system (alpha, beta, production), a caption key should be set in config.ini.
Suggestion:

# Short abstract, displayed for example in OpenGraph embeds
caption=A community modding site for Kerbal Space Program

Images

As rendered by Discord. Click to expand

sd-embeds-discord-2

And an updated image for mods, now with mod and game version moved into description:
image

And an image for game pages:
image

@DasSkelett DasSkelett added Priority: Low Type: Feature Area: Frontend Related to HTML, JS, CSS, or other browser things labels Aug 9, 2021
@HebaruSan
Copy link
Contributor

How about tagging game.html? It could says something like, "Mods for {{game.name}} on {{site_name}}".

@DasSkelett
Copy link
Member Author

That can be done. Any suggestion for a description? "Bowse mods for {{ game.name }}", or keep the default one?
There would be game.description and game.short_description, but they both seem to be unset on production.

@HebaruSan
Copy link
Contributor

No, I don't know what to put in the description. I would kind of expect to see something generic like the number of mods available for that game, but I don't think we have that easily available, and it's not important enough to work on adding it.

@DasSkelett
Copy link
Member Author

I would kind of expect to see something generic like the number of mods available for that game, but I don't think we have that easily available, and it's not important enough to work on adding it.

We do, actually!

mod_count = Mod.query.filter(Mod.game_id == ga.id, Mod.published == True).count()

Going with "Browse {{ mod_count }} mods for {{ ga.name }}" then.

Copy link
Contributor

@HebaruSan HebaruSan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea, should help SpaceDock enter the twenty-first century.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Frontend Related to HTML, JS, CSS, or other browser things Priority: Low Type: Feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants