Social Metadata

Simple HTML

<!-- Open Graph / Facebook -->
<meta property="og:image" content="/social-img.webp">

<!-- Twitter/ X -->
<meta property="twitter:image" content="/social-img.webp">
For simple sites we can get away with one image 16:9 aspect ratio image over 1200px width for both. I use a 1920 x 1080 webp with a border of 15% of white space. Facebook is not quite a 16:9 aspect ratio. With this Social media can use the existing meta. This provides an image to stop them displaying what thy fancy - typically the first image in the DOM.

Full HTML

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="">
<meta property="twitter:title" content="">
<meta property="twitter:description" content="">
<meta property="twitter:image" content="">
With the above we can set specific title and decription for social media.

Dynamic with Nunjucks

Example from No Script Show.

{#- 
------------------- Open Graph / Facebook ------------------- 
-#}  
<meta property="og:type" content="website" />
<meta property="og:url" content="https://noscript.show{{ page.url}}" />
<meta property="og:title" content="{{ title or metadata.title }}" />
<meta property="og:description" content="{{description or metadata.description}}" />
{#-
 ------------------- OG Image Conditionals -------------------
 -#}  
{%- if videoid -%}
<meta property="og:image" content="https://i.ytimg.com/vi_webp/{{videoid}}/maxresdefault.webp" />
{%- elif featureimg -%}
<meta property="og:image" content="{{metadata.url}}{{ featureimg }}" />
{% else %}
<meta property="og:image" content="{{ metadata.url }}/img/og-image.webp" />
{%- endif %}
 
{#- ------------------- Twitter  ------------------- 
-#}  
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://noscript.show{{ page.url}}" />
<meta property="twitter:title" content="{{ title or metadata.title }}" />
<meta property="twitter:description" content="{{description or metadata.description}}" />
{#-
 ------------------- Twitter Image Conditionals -------------------
 -#}  
{%- if videoid -%}
<meta property="twitter:image" content="https://i.ytimg.com/vi_webp/{{videoid}}/maxresdefault.webp" />
{% elif featureimg %}
<meta property="twitter:image" content="{{metadata.url}}{{ featureimg }}" />
{% else %}
<meta property="twitter:image" content="{{ metadata.url }}/img/og-image.webp" />
{% endif %}
In this example we have some conditionals. If the page has a YouTube ID in the Front Matter it will show the YouTube video. If the page has a url to an image under "featurimg" in the Front Matter it wil show that. If neither of these it will show the site wide image used.

More to come...

I'll be adding more example as collected. Possibily with the some WordPress versions.

Resources