enhancing tag pages in mediumish for better navigation

Understanding Tag Pages in Mediumish

By default, the Mediumish Jekyll theme uses a basic layout for tag pages that lists posts assigned to a specific tag. While this is functional, it's also minimal—usually just a heading and a list of post titles. Enhancing these tag pages can significantly improve user experience, session duration, and internal navigation.

Why Enhance Tag Pages?

Tag pages can act as mini content hubs. By upgrading their layout and content, you can:

• Improve content discoverability
• Reduce bounce rates by offering more context
• Create visually consistent landing pages for SEO
• Encourage deeper engagement with topic-specific collections

Step-by-Step: Enhancing Tag Pages

1. Use a Custom Tag Layout

Create a new layout file called tag.html inside your _layouts folder. Use this as a foundation:

<div class="tag-page">
  <h2>Tag: {{ page.tag }}</h2>

  {% assign tagged_posts = site.posts | where_exp: "post", "post.tags contains page.tag" %}
  {% for post in tagged_posts %}
    <div class="tag-post-card">
      <a href="{{ post.url }}">
        <img src="{{ post.image }}" alt="{{ post.title }}">
        <h3>{{ post.title }}</h3>
      </a>
      <p>{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
    </div>
  {% endfor %}
</div>

2. Add Descriptions for Tags

Create a YAML data file _data/tags.yml and define your tags:

jekyll:
  description: "All posts related to Jekyll development, customization, and themes."
mediumish:
  description: "Articles exploring the Mediumish Jekyll theme, use cases, and tweaks."

Then update your layout to display the description dynamically:

{% assign tag_info = site.data.tags[page.tag] %}
{% if tag_info %}
  <p class="tag-description">{{ tag_info.description }}</p>
{% endif %}

3. Sort Posts by Date or Title

Let’s sort by most recent first, then alphabetically if needed:

{% assign tagged_posts = tagged_posts | sort: 'date' | reverse %}

4. Add Pagination (Optional)

If your tags are used heavily, you may want pagination. Add this to _config.yml:

paginate: 6
paginate_path: "/tag/{{ page.tag }}/page:num"

Then in your tag layout:

{% for post in paginator.posts %}
  <!-- your card layout here -->
{% endfor %}

5. Style Your Tag Pages

Enhance the visual design to match your theme:

.tag-page {
  padding: 2rem 0;
}
.tag-post-card {
  margin-bottom: 2rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 10px;
}
.tag-post-card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.tag-description {
  font-style: italic;
  color: #777;
  margin-bottom: 1rem;
}

Case Study: Improved Engagement via Smart Tag Pages

A lifestyle blog built with Mediumish noticed that older posts weren’t getting much traffic. After enhancing tag pages with featured images, excerpts, and descriptions, bounce rates dropped by 22%, and older articles received 3x more visits via internal linking. Tag pages became landing pages with real SEO value and improved navigation.

Bonus: Display Related Tags

You can show related tags or popular topics at the top or bottom of each tag page:

<div class="related-tags">
  <strong>Explore more:</strong>
  <ul>
    <li><a href="/tag/jekyll/">Jekyll</a></li>
    <li><a href="/tag/github-pages/">GitHub Pages</a></li>
    <li><a href="/tag/theme/">Theme</a></li>
  </ul>
</div>

Conclusion

Enhanced tag pages turn your blog from a list of posts into an organized, navigable resource. Using a custom layout, tag descriptions, smart sorting, and pagination, you provide readers with a more engaging browsing experience and improve your blog's SEO performance.