Turn URLs into rich cards. Show a preview image, page title, description and other meta information all inside a neatly presented card. Collaborative effort between Sara Soueidan and myself.

See the live demo and the demo directory in the repo to see it all in action.


  1. Install plugin using npm:

    npm install eleventy-plugin-unfurl
  2. Add plugin to your .eleventy.js config:

    const pluginUnfurl = require("eleventy-plugin-unfurl");
    module.exports = (eleventyConfig) => {
  3. Use the shortcode in your templates (.md, .njk, .liquid or .js) like so:

    {% unfurl "https://www.sarasoueidan.com/blog/prefers-color-scheme-browser-vs-os/" %}


The HTML of the unfurled links can be amended using the template option like so:

eleventyConfig.addPlugin(pluginUnfurl, {
  template: ({ title, url }) => `<a href="${url}">${title}</a>`,

The following data points are available:

  • title
  • description
  • lang
  • author
  • publisher
  • image
    • url
    • type
    • size
    • height
    • width
    • size_pretty
  • date (Note: Currently not returning the published date, removed from plugin HTML template)
  • url
  • logo
    • url
    • type
    • size
    • height
    • width
    • size_pretty

? Looking for some CSS like in the demo? Check out the demo file in the repo.


  1. Amend the .eleventy.js file within demo so it points to the source code in the parent directory:

    // const pluginUnfurl = require("../");
    const pluginUnfurl = require("eleventy-plugin-unfurl");
  2. Install the demo dependencies:

    cd demo
    npm install
  3. Run the demo locally:

    npm run dev



View Github