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.
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:
|
|
My template uses a sub-template (located at here) that renders the image:
|
|
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 plugin
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.