🌳 Evergreen changelog

Adding enhanced opengraph meta

planted on September 16, 2022 in: Blogging.
~1,289 words, about a 7 min read.

—

September seems to be this website's month of catching up with old issues; I have just closed two:

I'll focus on the enhanced social sharing meta (#85) to begin with. Previously this websites opengraph meta was limited to the below:

<meta property="og:title" content="{{ title or metadata.title }}">
<meta property="og:type" content="{{ ogtype or 'website' }}">
<meta property="og:url" content="{{ metadata.url }}{{ page.url }}" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@carbontwelve">
<meta name="twitter:creator" content="@carbontwelve">
<meta name="twitter:title" content="{{ title or metadata.title }}">

In the context of the previous version of PhotoGabble this is weirdly limited because prior to the rewrite I had the full complement of opengraph data for articles as well as social image cards.

Therefore, for what feels like the fourth time in the history of rebuilding this website I refactored the above into:

<meta property="og:locale" content="en_GB"/>
<meta property="og:site_name" content="{{ metadata.title }}"/>
<meta property="og:title" content="{{ title or metadata.title }}"/>
<meta property="og:type" content="{{ ogtype or 'website' }}"/>
<meta property="og:url" content="{{ metadata.url }}{{ page.url }}"/>

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@carbontwelve"/>
<meta name="twitter:creator" content="@carbontwelve"/>
<meta name="twitter:title" content="{{ title or metadata.title }}"/>

{% if ogtype === 'article' %}
    <meta name="twitter:label1" content="Words"/>
    <meta name="twitter:data1" content="{{ readingTime.words }}"/>

    <meta name="twitter:label2" content="Est. reading time"/>
    <meta name="twitter:data2" content="{{ readingTime.time }}"/>

    <meta name="article:published_time" content="{{ published_time }}"/>
    <meta name="article:modified_time" content="{{ modified_time }}"/>
    <meta name="article:expiration_time" content="{{ expiration_time }}"/>

    {% if contentType %}
        <meta name="article:section" content="{{ contentType }}"/>
    {% endif %}

    {% for tag in tags %}
        <meta name="article:tag" content="{{ tag }}"/>
    {% endfor %}
{% endif %}

Dynamic Opengraph images

Closing #119 took a lot more work than I expected. First I needed to understand how to create dynamic social media share images; there are a lot of tutorials available but, ultimately I took pieces from the following three:

I knew I wanted to have a command that I could run separate from 11ty to generate social share images and to use HTML templating. Both Stephanie and Michael's solutions use Puppeteer to control a headless installation of chrome in order to capture screenshots of html templates. This made most sense to me, and so I followed a combination of their instructions.

I have written up a detailed guide on my solution (see Using Puppeteer with 11ty to automate generating social share images) but suffice to say it required modifying aforementioned <head> code with the below:

{% if ogImageHref %}
<meta property="og:image" content="{{ ogImageHref }}">
<meta name="twitter:card" content="summary_large_image"/>
{% else %}
<meta name="twitter:card" content="summary"/>
{% endif %}

—