Image for post
Image for post

Rich Link Previews in Eleventy

Generating attractive link previews with the Eleventy static site generator, Nunjucks, and html-metadata

Initial setup

npm init -y
npm install --save @11ty/eleventy
npm install --save html-metadata

Setting up the link preview function

# Rich link previews in Eleventy
This is a demonstration of rich link previews in Eleventy
{{"https://www.jefago.com/" | linkPreview | safe}}

Scraping link metadata

Caching link metadata

Lazy loading preview images

Written by

Experienced product leader, previously at 8fit, Yammer, BCG. Currently working on something new.

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