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.