Better site preview

[tomspilman]

When dropping links on Discord i noticed this:

Our "preview" image of the site is very simple and plain compared to other previews.

How is this done? How could we make it look better?

[tomspilman]

Maybe if we had new banner art (see #34) it could be used in the preview?

[AristurtleDev]

The embeds that are created on discord/twitter/etc are done through the OpenGraph tags that I added to the site. OpenGraph is used by most websites, some websites, like Twitter, have specific meta tags instead.

monogame.github.io/templates/monogame/layout/_master.tmpl

Lines 21 to 34 in bb17f70

	<!-- Facebook Meta Tags -->
	<meta name="og:url" content="https://{{_hostname}}/{{_path}}"
	<meta name="og:type" content="website">
	<meta name="og:title" content="{{#_title}}{{_title}}{{/_title}}{{^_title}}{{>partials/title}}{{/_title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
	<meta name="og:description" content="{{_description}}">
	<meta name="og:image" content="https://{{_hostname}}/{{_openGraphImage}}">
	<!-- Twtiter Meta Tags -->
	<meta name="twitter:card" content="summary_large_image">
	<meta property="twitter:domain" content="{{_hostname}}">
	<meta property="twitter:url" content="https://{{_hostname}}/{{_path}}">
	<meta name="twitter:title" content="{{#_title}}{{_title}}{{/_title}}{{^_title}}{{>partials/title}}{{/_title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
	<meta name="twitter:description" content="{{_description}}">
	<meta name="twitter:image" content="https://{{_hostname}}/{{_openGraphImage}}">

Per OpenGraph protocol, the image that is served has to be a static resource with the full url path. I created the current image preview so there would be something, but changing it would be just changing the og:image and twitter:image <meta> tags in the template.

For sites like GItHub, the image they have is actually dynamically generated by their servers and then served back as a static image. This is how it's able to inject data into the image itself like the comment, review, files, statistics and have it unique per preview of the page.

Since we're using docfx which does static site generation, this means there's no backend server component that could dynamically create the images to serve. There are methods of doing page "snapshots" during the build step that could be served as individual images for that page's embed, I could put together a preview of how that would work if you'd like.

For now, using the new banner art I think would be more attractive than the simple image I created for the embed. A Theme color can also be given in the meta tags that affects certain site embeds. For instance, on discord, it would change the color of the border on the left side of the embed.

Here's a preview of what it would look like using the new banner art and adding the theme color for the discord embed

[tomspilman]

Here's a preview of what it would look like using the new banner art and adding the theme color for the discord embed

That is better than what we have now for sure.

But that is not NEW banner art... that was made by me back in like 2013 or so.

Hopefully once we get some new banner art from the community and we can change to use it.

[AristurtleDev]

But that is not NEW banner art... that was made by me back in like 2013 or so.

Ah, my mistake, I thought you were saying this was new banner art made. I read that wrong 😅