How Can Beginners Use Tags and Categories in Jekyll

Why Should You Use Tags and Categories in Jekyll?

As your Jekyll blog grows, organizing content becomes more important. Categories group similar types of posts (like “tutorials” or “news”), while tags label specific topics (like “jekyll,” “liquid,” or “seo”).

They help:

Improve site structure
Enhance user navigation
Boost SEO through internal linking

Step-by-Step: How to Use Categories and Tags in Jekyll

Step 1: Add Tags and Categories to Each Post

In your blog post’s front matter:


---
layout: post
title: "How to Use Tags in Jekyll"
categories: [tutorial,jekyll]
tags: [jekyll,seo,beginner]
---

Step 2: Access Them in Your Templates

Inside a post layout, you can display tags and categories:


<p>Categories: 
  {% for category in page.categories %}
    <a href="/categories/{{ category | slugify }}/">{{ category }}</a> 
  {% endfor %}
</p>

<p>Tags: 
  {% for tag in page.tags %}
    <a href="/tags/{{ tag | slugify }}/">{{ tag }}</a> 
  {% endfor %}
</p>

Step 3: Create Archive Pages for Each Tag and Category

Option A: Static Method (Easy)

Create a file manually for each tag or category:


/tags/jekyll.md


---
layout: tag
title: "Posts tagged with 'jekyll'"
tag: jekyll
permalink: /tags/jekyll/
---

Repeat for other tags or categories. This is easy for small blogs.

Option B: Dynamic Method Using Loops (Intermediate)

If you want to automate tag/category pages, do this:

Step 1: Add a Generator Plugin (for non-GitHub Pages users)

If you're building Jekyll locally and not restricted by GitHub Pages, you can use plugins like jekyll-tagging.

But if you use GitHub Pages, stick to static generation as shown above.

Step 4: Create a Tag or Category List Page


/tags.html


---
layout: page
title: "All Tags"
permalink: /tags/
---

Inside the content:


<ul>
  {% assign tags = site.tags | sort %}
  {% for tag in tags %}
    <li>
      <a href="/tags/{{ tag[0] | slugify }}/">{{ tag[0] }}</a> ({{ tag[1].size }})
    </li>
  {% endfor %}
</ul>

Step 5: Create a Layout for Tag or Category Pages


/_layouts/tag.html


---
layout: default
---

<h2>Posts tagged with "{{ page.tag }}"</h2>

<ul>
  {% for post in site.posts %}
    {% if post.tags contains page.tag %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endif %}
  {% endfor %}
</ul>

You can use the same approach for categories by changing the filter condition.

Where Should You Link Tags and Categories?

In each post
In the blog sidebar or footer
On dedicated “Browse by Topic” pages

Tips for Beginners

Use lowercase and hyphenated tags (e.g., liquid-syntax)
Keep categories broad, tags specific
Be consistent—don’t use Jekyll and jekyll as separate tags

Bonus: Add Tag or Category Filters to Your Index Page

You can show links like this:


<p>
  Browse by tags: 
  <a href="/tags/jekyll/">Jekyll</a> | 
  <a href="/tags/liquid/">Liquid</a> | 
  <a href="/tags/github-pages/">GitHub Pages</a>
</p>

Conclusion: Organize and Optimize Your Blog

Adding tags and categories isn’t just about structure—it’s also great for navigation and SEO. Jekyll gives you the flexibility to build this system manually or dynamically, even as a beginner.

PopLeakSpin🕒📗