Adding Link Previews to your Jekyll Site

1 minute read

This post explains how to add link previews to your Jekyll site using a Jekyll plugin.

Link Previews

Link previews are a great way to enhance the user experience on your Jekyll site by providing a visual representation of links. This can be particularly useful for blog posts, documentation, or any content that references external resources.

Jekyll Plugin Linkpreview

The jekyll-linkpreview plugin allows you to easily add link previews to your Jekyll site. It fetches metadata from the linked page and generates a preview card that includes the title, description, and an image if available

Installation

Add the plugin to your Gemfile:
```
gem "jekyll-linkpreview", "~> 0.7.0"
```
Install it:
```
bundle install
```
Enable it in _config.yml under plugins:
```
plugins:
  - jekyll-linkpreview
```
Restart the server — _config.yml is not live-reloaded.

Usage

Add the linkpreview tag anywhere in a post or page, passing the URL you want to preview:

{% linkpreview "https://github.com/ysk24ok/jekyll-linkpreview" %}

At build time the plugin fetches the linked page’s Open Graph metadata and renders a card with its title, description, and image. You can pass a literal URL as above or a variable holding one.

GitHub Actions

Because the metadata is fetched at build time, the machine running the build needs network access to each linked page. Locally that is automatic; in CI it works as long as the plugin is installed via Bundler, which the standard GitHub Actions Jekyll workflow already handles with bundle install.

To avoid re-fetching every link on each build, the plugin caches the retrieved metadata under _cache/ (gitignored in this repo). In CI that directory starts empty, so previews are fetched fresh on every run. If builds get slow or a linked site rate-limits requests, persist the cache between runs with actions/cache keyed on _cache/.