Setup social sharing previews, SEO, and favicons on Eleventy
This post is part of a multi-part series on how I built my site using Eleventy. These are all the posts in the series. Check them out if that's your jam.
Today I want to work on a few things so that I'm ready to start sharing posts. I'm going to setup Open Graph protocol, SEO, and favicons on the site.
Social sharing previews
You know when you share a website on a social media site like Facebook, Twitter, or LinkedIn, and a little preview is generated for the link? That functionality is provided by the Open Graph protocol. Extending the site to participate in Open Graph is pretty straight forward. I just need to add some meta tags to the head of my markup.
I want to support the main Open Graph tags, which is used by most sites, including Facebook. Twitter has it's own set of tags so I want to be sure to support their implementation as well since it's my main social network.
Here's the markup I'm using in my base.njk layout file:
<!-- src/_includes/base.njk -->
<head>
<!-- Open graph -->
<meta property="og:title" content="{{ title }}">
<meta property="og:description" content="{{ desc or title }}">
<meta property="og:type" content="article">
<meta property="og:image" content="{{ cover }}"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter -->
<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@obsolete29">
<meta name="twitter:description" content="{{ desc or title }}">
<meta name="twitter:image" content="{{ cover }}">
<meta name="twitter:creator" content="@obsolete29">
</head>Here's the front matter from index.njk file. At run time, Eleventy will take these values...
---
title: Michael Harley, chief goblin herder
desc: "I enjoy hiking, biking, foosball, and reading.
I work with Power Platform, Powershell, Sharepoint, and I'm learning web development."
layout: base.njk
cover: "https://obsolete29.com/assets/img/social-cover.jpg"
---... and output this markup at build time:
<!-- index.html -->
<head>
<!-- Open graph -->
<meta property="og:title" content="Michael Harley, chief goblin herder">
<meta property="og:description" content="I enjoy hiking, biking, foosball, and reading.
I work with Power Platform, Powershell, Sharepoint, and I'\m learning web development.">
<meta property="og:type" content="article">
<meta property="og:image" content="https://obsolete29.com/assets/img/social-cover.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter -->
<meta name="twitter:title" content="Michael Harley, chief goblin herder">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@obsolete29">
<meta name="twitter:description" content="I enjoy hiking, biking, foosball, and reading.
I work with Power Platform, Powershell, Sharepoint, and I'\m learning web development.">
<meta name="twitter:image" content="https://obsolete29.com/assets/img/social-cover.jpg">
<meta name="twitter:creator" content="@obsolete29">
</head>I just have to make sure that all template files include the title, desc, and cover in the front matter of the file.
Validation resources:
SEO
There are three tags I'm concerning myself with for SEO: the title tag, a description meta tag and a canonical link tag (rel=canonical: the ultimate guide).
<!-- index.html -->
<head>
<!-- SEO -->
<title>{{ title }}</title>
<meta name="description" content="{{ desc }}">
<link rel="canonical" href="{{ metadata.url }}{{ page.url }}">
</head>Validation resources:
Sitemap.xml
I consider the sitemap as part of search. In my research, sitemaps don't seem that important. Even reading the Google documentation about sitemaps says you may need a sitemap. I don't feel that my site is very large or complex but if it helps search engines surface my content, then why not? Setting it up on Eleventy is really easy so let's do it.
I followed Duncan's walkthrough so feel free to go there and read his content. Here is what I did.
I created a new file called sitemap.njk in src directory.
<!-- src/sitemap.njk -->
---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
<url>
<loc>{{ site.url }}{{ page.url | url }}</loc>
<lastmod>{{ page.date.toISOString() }}</lastmod>
<changefreq>{{ page.data.changeFreq or "monthly" }}</changefreq>
</url>
{% endfor %}
</urlset>Now when I build the site, Eleventy will generate sitemap.xml.
Robots.txt
I'm going to setup robots.txt while I'm here so the search bots know about it.
<!-- src/robots.njk -->
---
layout: false
permalink: robots.txt
eleventyExcludeFromCollections: true
---
Sitemap: {{ metadata.url }}/sitemap.xml
User-agent: *The final piece of our search configuration is submitting our site to Google and Bing.
Favicons
Favicons are the little images that show up on the browser tab when you're on a particular site (among other places). I didn't do much of a deep dive on the topic myself. I've just done the basics. If you do want to do more of a deep dive, check out How many favicons should you have in your site?. She really goes into a lot more detail. I also found How to Favicon in 2021 an interesting read.
Here are the steps I took.
First, I went to favicon.io. I was creating an icon from a PNG file so I selected that option and uploaded the image. The site spits out the image with some basic instructions. I placed my favicon images in /assets/img/favicon/.
<!-- src/_includes/base.njk -->
<head>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/img/favicon/site.webmanifest">
<link rel="shortcut icon" href="/assets/img/favicon/favicon.ico">
</head>I updated the site.webmanifest file provided by favicon.io thusly:
{
"name":"Michael Harley",
"short_name":"Michael Harley",
"icons":
[
{
"src":"/assets/img/favicon/android-chrome-192x192.png",
"sizes":"192x192",
"type":"image/png"
},
{
"src":"/assets/img/favicon/android-chrome-512x512.png",
"sizes":"512x512",
"type":"image/png"
}
],
"theme_color":"#ffffff",
"background_color":"#ffffff",
"display":"standalone"
}Validation resources:
Say it with me. Validate!
Ok, that's it for today. Thanks for reading my post!
This post is part of a multi-part series on how I built my site using Eleventy. These are all the posts in the series. Check them out if that's your jam.