Embedding links in Jekyll
Here’s how to embed links into your Jekyll pages, kind of like Twitter cards. An example:
It consists of two parts: the partial, or include
in Jekyll terminology, and the script that fetches the open graph data.
The partial
Create a file in _includes/link.html
that looks like this:
<div class="embed">
<a href="/{{include.link}}">
<div class="body">
<div class="content">
<div class="title">{{include.title}}</div>
<div class="description">{{include.description}}</div>
</div>
<span class="link">{{include.link}}</span>
</div>
</a>
</div>
You can use that partial like this in any page:
{% include link.html
title="/ABOUT – Ognjen Regoje • ognjen.io"
description="About Ognjen Regoje and what he does."
link="https://ognjen.io/about/"
%}
The script
To avoid having to get the title and description manually, and to get the canonical URL without any tracking parameters, you can use this simple script.
First, add gem 'metainspector'
to your Gemfile
and run bundle install
.
Then, create a file e.rb
with the following code:
require 'metainspector'
url = ARGV[0]
if url
page = MetaInspector.new(url)
url = page.untracked_url
title = page.title
desc = page.best_description
puts %|
{% include link.html
title="#{title}"
description="#{desc}"
link="#{url}"
%}|
else
puts "[ERROR] No URL found. Usage: e.rb <URL>"
exit -1
end
Now you can run ruby e.rb ognjen.io/about
and get the code with the correct title, description and URL.