Embedding OpenGraph links in posts

1

Hi:

I’m looking a way to embed in my posts links of websites using OpenGraph. I found in SO a nice solution using preview_tag.rb. The tag supposely works like this:

{% preview https://mycoolsite.com %}

but it doesn’t work in my configuration (jekyll 4.3.2). I guess the plugin is obsolete but I don’t know Ruby to try to fix, if possible.

Does anybody knows another way to embed OpenGraph thumbnails in Jekyll posts? Something like jekyll_oembed but for OpenGraph. Thanks.

2

You wanna add Open Graph Tags only for your posts?

3

Hello! You can try out my plugin jekyll-url-metadata which is maintained.

For an example use case in a production blog, checkout this linkpreview.html file.

Let me know if you need any help!

4

Is not about adding OpenGraph metadata in the posts output, if you mean that, but embedding in my posts external content using their OpenGraph metadata. As far I understand is like oEmbed but using OpenGraph.

5

Seems interesting. Do you have an example of how to use it in a _post? I not sure how to use the linkpreview example. I don’t know Ruby, sorry.

6

The plugin only provides logic to extract meta information like title, og:image, og:description, etc from external web pages. You pass a url string and it will return these variables in a Hash (Hash is just a group of values). You can then render these using liquid.

Please look at the README for instructions on how to install the plugin.

I will explain the UI implementation part here (Do this once you install the plugin in your project):

  • Create a folder _includes/ in the same place where _posts exists.
  • Create an html file (lets say preview.html) inside the _includes/ folder.

You can use this basic html for the preview.html file:

{% assign meta = include.url | metadata %}

<div>
  {% if meta['og:image'] != blank %}
  <img src="{{ meta['og:image'] }}" />
  {% else %}
  <!-- Add a fallback image here, if the opengraph image for given url does not exist -->
  {% endif %}

  <h3>{{ meta['title'] }}</h3>
  <p>{{ meta['og:description'] }}</p>
</div>

This will render an image, title and description which will be retreived from the url given as parameter. You can style this html with css as you like.

  • To use this embed in a markdown post, use this:
---
# post variables
---

# content

{% include preview.html url = "https://mycoolsite.com" %}

# content

This will insert the preview.html file’s rendered HTML inside the markdown after fetching meta from the given URL.

Hope this helps.

1 Like
7

Very interesting. Seems it needs some extra hand made work but I’ll try it.

Thanks a lot :slight_smile:

8

Yes! This is because the plugin gives you the freedom to build the UI from data as you want to. And it is not just for embedding link previews, but also for any other conditional operation that may require fetching meta information from websites during build time.

1 Like