How to Display Related Posts by Tags in GitHub Pages

When readers finish reading one of your articles, their attention is at its peak. If your blog doesn’t guide them to another relevant post, you risk losing them forever. Showing related posts at the end of each article helps keep visitors engaged, reduces bounce rate, and strengthens internal linking — all of which are great for SEO. In this tutorial, you’ll learn how to add an automated ‘Related Posts by Tags’ section to your Jekyll blog hosted on GitHub Pages, step by step.

Why Related Posts Matter

Internal linking is a cornerstone of content SEO. When you link to other relevant articles, search engines can understand your site structure better, and users spend more time exploring your content. By using tags as a connection mechanism, you can dynamically group related posts based on shared topics without manually linking them each time.

This approach works perfectly for GitHub Pages because it doesn’t rely on databases or JavaScript libraries — just simple Liquid logic and Jekyll’s built-in metadata.

How Jekyll Handles Tags

Each post in Jekyll can include a tags array in its front matter. For example:

---
title: "Optimizing Images for Faster Jekyll Builds"
tags: [jekyll, performance, images]
---

When Jekyll builds your site, it keeps a record of which tags belong to which posts. You can access this information in templates or post layouts using the site.tags object, which returns all tags and their associated posts.

Creating the Related Posts Loop

Let’s add the related posts feature to the bottom of your article layout (usually _layouts/post.html). The idea is to loop through all posts and select only those that share at least one tag with the current post, excluding the post itself.

Here’s the Liquid code snippet you can insert:

  <div class="related-posts">
    <h3>Related Posts</h3>
    <ul>
      
        <li>
          <a href="/kliksukses01/">Using Jekyll Picture Tag for Responsive Thumbnails on GitHub Pages</a>
        </li>
      
        <li>
          <a href="/jumpleakedclip01/">How to Combine Tags and Categories for Smarter Related Posts in Jekyll</a>
        </li>
      
        <li>
          <a href="/jumpleakbuzz01/">How to Display Thumbnails in Related Posts on GitHub Pages</a>
        </li>
      
        <li>
          <a href="/isaulavegnem01/">How to Combine Tags and Categories for Smarter Related Posts in Jekyll</a>
        </li>
      
    </ul>
  </div>

This code first collects all posts that share a tag with the current page, removes duplicates, limits the results to four, and displays them as a simple list.

Limiting the Number of Results

You might not want to display too many related posts, especially if your blog has dozens of articles sharing similar tags. That’s where the slice: 0, 4 filter helps — it limits output to the first four matches.

You can adjust this number based on your design or reading flow. For example, showing only three highly relevant posts can often feel cleaner and more focused than a long list.

Styling the Related Posts Section

Once the logic works, it’s time to make it visually appealing. Add a simple CSS style in your /assets/css/style.css or theme stylesheet:

.related-posts {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}
.related-posts h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.related-posts ul {
  list-style: none;
  padding-left: 0;
}
.related-posts li {
  margin-bottom: 0.5rem;
}
.related-posts a {
  text-decoration: none;
  color: #007acc;
}
.related-posts a:hover {
  text-decoration: underline;
}

These rules give a clean separation from the main article and highlight the related posts as a helpful next step for readers. You can further enhance it with thumbnails or publication dates if desired.

Testing and Troubleshooting

After implementing the code, build your site locally using:

bundle exec jekyll serve

Then open any post and scroll to the bottom. You should see the related posts appear based on shared tags. If nothing shows up, make sure each post has at least one tag, and check that your Liquid loops are inside the correct layout file (_layouts/post.html or _includes/related.html).

For debugging, you can temporarily display the tag data with:

["related-posts", "tags", "jekyll-blog", "content-navigation"]

This helps verify that your front matter tags are properly recognized by Jekyll during the build process.

Real-World Usage Example

Imagine a blog about GitHub Pages tutorials. A post about “Optimizing Site Speed” shares tags like jekyll, github-pages, and performance. Another post about “Securing HTTPS on Custom Domains” uses github-pages and security. When a user finishes reading the first article, the related posts section automatically suggests the second article because they share the github-pages tag.

This kind of interlinking keeps readers within your content ecosystem, guiding them through a natural learning path instead of leaving them at a dead end.

Conclusion

Adding a “Related Posts by Tags” feature to your GitHub Pages blog is one of the simplest ways to improve engagement, dwell time, and SEO without extra plugins or databases. It uses native Jekyll functionality and a few lines of Liquid code to make your blog feel more dynamic and interconnected.

Once implemented, you can continue refining it — for example, sorting related posts by date or displaying featured images alongside titles. Small touches like this can dramatically enhance user experience and make your static site behave more like a smart, content-aware platform.