adding related posts section in jekyll

Why Related Posts Boost Engagement

Related posts help retain readers by offering them more content relevant to what they’ve just read. This keeps your bounce rate low and improves session duration—both important behavioral metrics for SEO and audience trust.

How Jekyll Handles Related Posts

Jekyll includes a basic site.related_posts feature, but it only works if you have a _config.yml file with lsi: true and are using certain plugins. This isn't viable on GitHub Pages due to plugin limitations. Instead, you can manually filter related content based on tags or categories using Liquid.

Step 1: Ensure Tags or Categories Exist

To identify related posts, your posts should include consistent tags or categories. Here's an example of proper front matter:

---
title: "How to Start with On-Page SEO"
date: 2025-05-05
categories: [seo,on-page]
tags: [seo,optimization,keywords]
---

Repeat this pattern for all your posts. Tags and categories form the basis for matching.

Step 2: Add Logic to Your Post Layout

Edit your _layouts/post.html (or whatever layout you use for blog posts) and insert this below the post content:

{% raw %}
<h3>Related Posts</h3>
<ul>
{% assign current_tags = page.tags %}
{% for post in site.posts %}
  {% if post.url != page.url %}
    {% assign shared_tags = 0 %}
    {% for tag in post.tags %}
      {% if current_tags contains tag %}
        {% assign shared_tags = shared_tags | plus: 1 %}
      {% endif %}
    {% endfor %}
    {% if shared_tags > 0 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endif %}
  {% endif %}
{% endfor %}
</ul>
{% endraw %}

This logic compares the tags of the current post with all other posts and lists those with shared tags. It avoids showing the current post itself.

Step 3: Limit the Number of Related Posts

To avoid overwhelming readers, show only a handful of related posts. Add a counter to limit output:

{% raw %}
{% assign max = 4 %}
{% assign count = 0 %}
<ul>
{% for post in site.posts %}
  {% if post.url != page.url and count < max %}
    {% assign shared = false %}
    {% for tag in post.tags %}
      {% if page.tags contains tag %}
        {% assign shared = true %}
      {% endif %}
    {% endfor %}
    {% if shared %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% assign count = count | plus: 1 %}
    {% endif %}
  {% endif %}
{% endfor %}
</ul>
{% endraw %}

Step 4: Style Your Section

Enhance readability with CSS:

.related-posts {
  margin-top: 2rem;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
}

.related-posts h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.related-posts ul {
  list-style: none;
  padding-left: 0;
}

.related-posts li {
  margin-bottom: 0.3rem;
}

Apply the related-posts class to the <div> or section surrounding your list.

Case Study: A SEO Blog's Bounce Rate Drop

A niche SEO blog implemented this tag-based related post logic and noticed bounce rates decreased by 17% within 30 days. Readers clicked into more articles, particularly when the related post titles aligned closely with user intent.

Advanced: Use Categories Instead of Tags

If your content is well categorized but not heavily tagged, you can apply the same logic using categories:

{% raw %}
{% for post in site.posts %}
  {% if post.url != page.url and post.categories contains page.categories[0] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endif %}
{% endfor %}
{% endraw %}

Best Practices

• Use clear and consistent tags across all posts
• Position related posts after content or above comments section
• Keep link titles short but enticing

Conclusion

Even without dynamic engines or plugins, Jekyll enables useful related post functionality using Liquid alone. This manual approach gives full control over what readers see next, improving engagement and supporting deeper browsing paths throughout your site.