Jekyll::URLMetadata
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 genicsblog.com.
Installation
Add this line to your application’s Gemfile inside the jekyll_plugins
group:
group :jekyll_plugins do
# other gems
gem "jekyll-url-metadata"
end
Then, enable the plugin by adding it to the plugins
section in the _config.yml
file:
plugins:
# - other plugins
- jekyll-url-metadata
And then execute:
bundle install
Usage
This plugin is essentially a filter that works on any valid URL string provided inside a liquid tag. Use it as below:
{% assign meta = "https://wikipedia.org" | 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
<title>
tag. - The
<meta>
tags that have aname
,property
orcharset
fields. - The
<link>
tags with arel
attribute.
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", "og:url"=>"", "og:title"=>"Wikipedia, the free encyclopedia", "og:type"=>"website", "og:description"=>"Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.", "og:image"=>"https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/2244px-Wikipedia-logo-v2.svg.png", "apple-touch-icon"=>"/static/apple-touch/wikipedia.png", "shortcut icon"=>"/static/favicon/wikipedia.ico", "license"=>"//creativecommons.org/licenses/by-sa/4.0/", "preconnect"=>"//upload.wikimedia.org", "me"=>"https://wikis.world/@wikipedia"}
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 = "https://genicsblog.com/gouravkhunger/pagination-in-android-room-database-using-the-paging-3-library" | metadata %}
{{ article_meta['og:image'] }}
The output of the above code will be as follows:
https://user-images.githubusercontent.com/46792249/164977196-3de454f4-8a7e-4feb-9d1b-cfd6ea53ba03.jpg
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.
Simple link preview example
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.
link_preview:
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="https://genicsblog.com/gouravkhunger/pagination-in-android-room-database-using-the-paging-3-library" %}