adding tags to my vercel blog template

This website was created using Vercel's portfolio starter kit template. Adding tags to your blog posts is a great way to organize content, helping users to find related content. This tutorial explains how to add tags to your Vercel blog template.

How to add tags to your blog

1. Update Frontmatter

Add a tags field to your post's frontmatter as a simple inline YAML array.

---
title: adding tags to my vercel blog template
summary: How I added tags to blog posts for better content organization and filtering.
tags: [nextjs, vercel, tutorial]
publishedAt: 2025-10-22
---

2. Parse Tags in the Data Layer

Ensure your blog utils parse the tags array from frontmatter. In your getBlogPosts function, each post's metadata should include a tags array.

function parseFrontmatter(fileContent: string) {
  let frontmatterRegex = /---\s*([\s\S]*?)\s*---/
  let match = frontmatterRegex.exec(fileContent)
  let frontMatterBlock = match![1]
  let content = fileContent.replace(frontmatterRegex, '').trim()
  let frontMatterLines = frontMatterBlock.trim().split('\n')
  let metadata: Partial<Metadata> = {}

  frontMatterLines.forEach((line) => {
    let [key, ...valueArr] = line.split(': ')
    let value = valueArr.join(': ').trim()
    value = value.replace(/^['\"](.*)['\"]$/, '$1')
    if (key.trim() === 'tags') {
      let tagsArr = value
        .replace(/\[|\]/g, '')
        .split(',')
        .map((tag) => tag.trim().toLowerCase())
        .filter((tag) => tag.length > 0)
      metadata.tags = tagsArr
    } else {
      const k = key.trim() as keyof Metadata;
      if (k !== 'tags') {
        metadata[k] = value as any;
      }
    }
  })

  return { metadata: metadata as Metadata, content }
}

3. Display Tags on Post Pages

On each post page, render the tags as clickable links (using Next.js's Link component).

{post.metadata.tags?.map(tagName => (
<Link
    key={tagName}
    href={`/blog/tag/${tagName}`}
    className="inline-block rounded bg-neutral-200 dark:bg-neutral-800 px-2 py-1 text-xs font-medium text-neutral-700 dark:text-neutral-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
    aria-label={`View posts tagged with ${tagName}`}
>
    {tagName}
</Link>
))}

4. Filter Posts by Tag

Create a dynamic route like /blog/tag/[tag] to display all posts with a specific tag by using filtering logic.

const posts = getBlogPosts().filter(
  post.metadata.tags?.some(t => t.toLowerCase() === tag.toLowerCase())
)

5. Add Tags to Sitemap

Include the tag pages in your sitemap for better SEO.

let tagPages = Array.from(tagSet).map(tag => ({
    url: `${baseUrl}/blog/tag/${encodeURIComponent(tag)}`,
    lastModified: new Date().toISOString().split('T')[0],
}));

Conclusion

Hopefully after following these steps, your blog now supports tags for improved navigation and discoverability. You can now add tags to any post, and users can click on those tags to find related content.