Preview-bilder med Jekyll

Webben har många roliga egenskaper numera. En sak som jag aldrig riktigt orkat kolla på tidigare är att kunna visa en preview-bild när man postar en länk i exempelvis iMessage, Mastodon, Facebook, Twitter, LinkedIn eller på någon annan webbsajt som stödjer att hämta hem en förhandsvisning från den sajt du länkat till. Detta kallas OpenGraph Link Preview och förhandsbilden är en del av massor av olika metadata du kan mata in i en bloggpost.

Jag är inte överdrivet intresserad av allt detta (ännu – jag kanske orkar rota vidare i detta senare) men det jag ville åstadkomma var att få fram dessa förhandsbilder i mina Jekyll-postningar på denna blogg (och senare på Björeman // Melin // Åhs-sajten).

Hur som helst, lite rotande och grävande senare lyckades jag få till det och i princip är det fyra steg du måste göra.

Lägg först till följande rad i _config.yml för din sajt:

plugins:
jekyll-seo-tag

Installera jekyll-seo-tag-pluginen genom att lägga till följande i din Gemfile för din Jekyll-sajt:

gem 'jekyll-seo-tag'

Kör sedan bundle install för att installera pluginen.

I ditt tema lägger du till följande tag precis innan </head>:

{{ seo }}

I mitt tema la jag detta i /_layouts/post.html, i ditt tema kan det vara någon annanstans.

I den bloggpost som du vill ha med förhandsbilden lägger du till följande i :

image:
path: /assets/jekyll_logo.png
height: 100
width: 100

Path pekar mot bilden du vill ha med i förhandsvisningen. Därefter är det bara att bygga och producera din blogg som vanligt så ska förhandsbilden visas som tänkt.