A jekyll plugin to extract meta information from urls and expose them to liquid variables.

This gem was originally authored to be used as a custom plugin for the static site of


Add this line to your application’s Gemfile inside the jekyll_plugins group:

group :jekyll_plugins do
    # other gems
    gem "jekyll-url-metadata"

Then, enable the plugin by adding it to the plugins section in the _config.yml file:

    # - other plugins
    - jekyll-url-metadata

And then execute:

bundle install


This plugin is essentially a filter that works on any valid URL string provided inside a liquid tag. Use it as below:

{% assign meta = "" | metadata %}

The metadata filter extracts the meta data from the given url string and returns the data as a Hash.

These are the values that are extracted:

The expected output for {{ meta }} from the above example would be:

{{ meta }}

{"title"=>"Wikipedia", "charset"=>"utf-8", "description"=>"Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.", "viewport"=>"initial-scale=1,user-scalable=yes", "apple-touch-icon"=>"/static/apple-touch/wikipedia.png", "shortcut icon"=>"/static/favicon/wikipedia.ico", "license"=>"//", "preconnect"=>"//", "me"=>""}

Let us extract the og:image from the metadata of the article Pagination in Android Room Database at Genics Blog. The following snippet does the same:

{% assign article_meta = "" | metadata %}

{{ article_meta['og:image'] }}

The output of the above code will be as follows:

Thus, it can be used to generate link previews at build time. The linkpreview.html implementation at Genics Blog presents how to use the plugin to generate url cards in a production Jekyll blog.

This is a link preview generated with this Jekyll package and some custom CSS.

You need to create an include file called _include/link_preview.html

You also need to add some CSS. Using this website as example, you need to extend the minima theme. All you need to do is to create a file called _sass/minima/custom-styles.scss. If you use other Jekyll themes you must follow their documentation.

Finally you need to add a couple of variables in the _config.yml file. These are required and will truncate the title and the description to the desired number of characters.

  title_max_characters: 64
  description_max_characters: 128

To use this example you just need to include the link_preview.html file with a url parameter, like this:

{% include link_preview.html url="" %}