Creating Tags Pages for Blog Posts
Creating tag pages for your blog post is a way to let visitors browse related content.
To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the tutorial on Gatsby’s data layer and Adding Markdown Pages.
The process will essentially look like this:
- Add tags to your
- Write a query to get all tags for your posts
- Make a tags page template (for
gatsby-node.jsto render pages using that template
- Make a tags index page (
/tags) that renders a list of all tags
- (optional) Render tags inline with your blog posts
You add tags by defining them in the
frontmatter of your Markdown file. The
frontmatter is the area at the top surrounded by dashes that includes post data like the title and date.
Fields can be strings, numbers, or arrays. Since a post can usually have many tags, it makes sense to define it as an array. Here you add your new tags field:
gatsby develop is running, restart it so Gatsby can pick up the new fields.
Now, these fields are available in the data layer. To use field data, query it using
graphql. All fields are available to query inside
Try running the following query in GraphiQL (
The above query groups posts by
tags, and returns each
tag with the number of posts as
totalCount. As an addition, you could extract some post data in each group if you need to. To keep this tutorial small, you’re only using the tag name in your tag pages. Make the tag page template now:
If you followed the tutorial for Adding Markdown Pages, then this process should sound familiar: Make a tag page template, then use it in
gatsby-node.js to generate individual pages for the tags in your posts.
First, you’ll add a tags template at
propTypes are included in this example to help you ensure you’re getting all the data you need in the component, and to help serve as a guide while destructuring / using those props.
Now you’ve got a template. Great! Assuming you followed the tutorial for Adding Markdown Pages and provide a sample
createPages that generates post pages as well as tag pages. In the site’s
gatsby-node.js file, include
const _ = require('lodash')) and then make sure your
createPages looks something like this:
- Your GraphQL query only looks for data you need to generate these pages. Anything else can be queried again later (and, if you notice, you do this above in the tags template for the post title).
- You have referenced two
allMarkdownRemarkfields in your query. To avoid naming collisions you must alias one of them. You alias both to make your code more human-readable.
- While making the tag pages, note that you pass
tag.namethrough in the
context. This is the value that gets used in the
TagPagequery to limit your search to only posts tagged with the tag in the URL.
/tags page will simply list out all tags, followed by the number of posts with that tag. You can get the data with the first query you wrote earlier, that groups posts by tags:
The home stretch! Anywhere else you’d like to render your tags, simply add them to the
frontmatter section of your
graphql query and access them in your component like any other prop.