Eleventy social sharing cards

One of the things I wanted to add when rebuilding this site was rich content sharing, primarily for twitter. It turns out this is relatively simple, especially when you consider setting up the article metadata in the markdown front matter of each article/page as eleventy makes this information globally available to the template engine.

The standard set of meta tags for the open graph protocol include title, description and image, which we'll look at setting up in our template below.

Title and Description

Using the standard front matter configuration for title and description are straight forward to add to a template by adding <meta> tags for og:title and og:description.

<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}">

URL

An open graph URL should be a fully qualified canonical url, such as https://brd.mn/articles/eleventy-social-cards/. For eleventy to have access to full path to the site at build time we will need to have a way to store this configuration information. Eleventy has a built in method for setting up data to be used in situations just like this with files in the _data directory, called Global Data Files. I have created a site.json file in the _data directory with the following contents.

{
"name": "brd.mn",
"subtitle": "Interested in how things work; breaking things and fixing things",
"url": "https://brd.mn"
}

After adding this _data/site.json file, we can now access the properties in our template using the site variable, such as {{ site.url }}. Combining this global site url with the page url will generate a fully qualified URI suitable for open graph url tag.

<meta property="og:url" content="{{ site.url }}{{ page.url }}" />

Image

The last, and most visually engaging, part of the open graph specification is the image. The image meta tag also requires a fully qualified URI similar to the url but depending on how images are managed with your site may require a different approach than I have here. For example, in my site I keep images in the same directory as an article's markdown file and reference the image in the article front matter with only the filename.

---
title: Eleventy social sharing cards
image: social-card.png
...
---

By appending this image property to the same pattern used for url, we can add the meta tag to our template.

<meta property="og:image" content="{{ site.url }}{{ page.url }}{{ image }}" />

Complete social sharing cards example

For a full open graph implementation, we add each of the above meta tags to our template, along with some additional information as suits your particular needs. In the example below, I have added a generic fallback image to display if a particular page does not have an image set as well as adding site_name, creator and card type meta tags.

<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}">
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
<meta property="og:image" content="{{ site.url }}{{ page.url }}{{ image }}" />
<meta property="og:site_name" content="{{ site.name }}">
<meta name="twitter:creator" content="{{ site.twitter }}">
<meta name="twitter:card" content="summary">

Originally published at https://brd.mn.

--

--

--

He/him. Interested in how things work; breaking things and fixing things. Hobbies include cooking, coffee, coding, music, and learning to surf. https://brd.mn

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My Experience With Phaser

Web Components for Students’ Unions (part 2)

redux-toolkit: test slice and actions

5 Fun APIs for Your Next JavaScript Projects

Developer.

Web Development with HTML and CSS

How to install ReactJS on Android

React, Abort Controller and onClick async calls

How to Use Custom Angular Form Controls in Jest and Storybook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Philip Boardman

Philip Boardman

He/him. Interested in how things work; breaking things and fixing things. Hobbies include cooking, coffee, coding, music, and learning to surf. https://brd.mn

More from Medium

Growth as the Enemy: How Sales Teams Lose Momentum

HubSpot Marketing Hub –

Stackgenio blog — Connecting Your Social Media Accounts to HubSpot

PC Instant Games Marketing and Monetization strategies Revised 2022.

2021 Year in Review: What the Past Year Says About 2022 For Retailers