Featured image of post How to display a cover image in blog posts using Pelican

How to display a cover image in blog posts using Pelican

After publishing an article, you’ll probably want to share it on social media or with friends. To make the link more appealing, include a cover image for the link preview.

This is done using the og:image Open Graph tag.

A pelican with some code in the background

Open Graph

Created by Meta (formerly Facebook), Open Graph (protocol) simplifies sharing articles and web pages on social media. Just include a few meta tags in your webpage header.

Key tags:

  • og:title: Page’s main title, typically the largest text displayed.
  • og:description: Additional text below the title.
  • og:image: Crucially, this tag displays the image, occupying the most space.

Pelican

Your Pelican website template might already support the og:image tag.

For instance, I add the Cover attribute to page meta tags:

1
2
3
4
5
6
7
8
Title: How to show a cover image in Pelican based blog posts
Date: 2023-06-17 14:15
Author: Andrea Grandi
Category: Development
Tags: Pelican, Python, blog, writing, images, cover, template, open, graph, meta
Status: published
Summary: How to add a cover image to Pelican based blog posts, so that when the article is shared on social media the image is shown in the preview.
Cover: images/2024/02/pelican-website-banner.jpeg

My template uses a sub-template (located at here) that renders the image:

1
2
3
4
5
{% if 'cover' in article.metadata %}
<meta property="og:image" content="{{ SITEURL }}/{{ article.metadata['cover'] }}">
{% else %}
<meta property="og:image" content="{{ SITELOGO }}">
{% endif %}

Note: The template defaults to the SITELOGO image if no Cover is specified.

If your template doesn’t offer this, consider these plugins (refer to their GitHub readme for usage):

pelican-seo plugin

pelican-seo is beneficial even if your template supports cover images. It automatically adds Open Graph tags, improving your website’s SEO.

featured-image is simpler. It uses an existing image from the meta tags or the first image found on the page if one isn’t specified.

Conclusion

Adding a cover image to blog posts significantly enhances their appeal when shared on social media.

Licensed under CC BY-NC-SA 4.0
Last updated on Nov 13, 2023 03:49 +0100