title: Adding tags to Gatsby Contentful blog
body: <p>I'm trying to add tags on blog posts, and I struggle to find a resource, which explain how to implement them.</p>
  <p>The end goal is to get clickable tags, which leads to a page, where all posts with same tag appears in a list.</p>
  <p>I'm using GatsbyJS with Contentful integration.</p>
  <p>I have a file called article-post.tsx with the following code:</p>
  <pre><code>import React from &quot;react&quot;
  import { graphql } from &quot;gatsby&quot;
  import { documentToReactComponents } from &quot;@contentful/rich-text-react-renderer&quot;
  
  import Layout from &quot;../components/layout/layout&quot;
  import Img from &quot;gatsby-image&quot;
  import SEO from &quot;../components/layout/seo&quot;
  import styled from &quot;styled-components&quot;
  import { BodyMain, H1 } from &quot;../components/styles/TextStyles&quot;
  
  export const query = graphql`
    query($slug: String!) {
      contentfulArticlePost(slug: { eq: $slug }) {
        title
        tags
        publishedDate(formatString: &quot;Do MMMM, YYYY&quot;)
        featuredImage {
          fluid(maxWidth: 720) {
            ...GatsbyContentfulFluid
          }
        }
        body {
          json
        }
      }
    }
  `
  
  const ArticlePost = props =&gt; {
    const options = {
      renderNode: {
        &quot;embedded-asset-block&quot;: node =&gt; {
          const alt = node.data.target.fields.title[&quot;en-US&quot;]
          const url = node.data.target.fields.file[&quot;en-US&quot;].url
          return &lt;img alt={alt} src={url} className=&quot;embeddedImage&quot; /&gt;
        },
      },
    }
  
    return (
      &lt;Layout&gt;
        &lt;SEO title={props.data.contentfulArticlePost.title} /&gt;
        &lt;Wrapper&gt;
          &lt;ImageWrapper&gt;
            {props.data.contentfulArticlePost.featuredImage &amp;&amp; (
              &lt;Img
                className=&quot;featured&quot;
                fluid={props.data.contentfulArticlePost.featuredImage.fluid}
                alt={props.data.contentfulArticlePost.title}
              /&gt;
            )}
          &lt;/ImageWrapper&gt;
          &lt;Title&gt;{props.data.contentfulArticlePost.title}&lt;/Title&gt;
          &lt;Tags&gt;
            {props.data.contentfulArticlePost.tags.map(tag =&gt; (
              &lt;span className=&quot;tag&quot; key={tag}&gt;
                {tag}
              &lt;/span&gt;
            ))}
          &lt;/Tags&gt;
          &lt;ContentWrapper&gt;
            {documentToReactComponents(
              props.data.contentfulArticlePost.body.json,
              options
            )}
          &lt;/ContentWrapper&gt;
        &lt;/Wrapper&gt;
      &lt;/Layout&gt;
    )
  }
  
  export default ArticlePost
  
  const Wrapper = styled.div`
    display: grid;
    grid-gap: 1.875rem;
    margin: 0 auto;
    padding: 7rem 1.875rem;
    max-width: 900px;
  `
  
  const ImageWrapper = styled.div`
    .featured {
      border-radius: 15px;
    }
  `
  
  const Title = styled(H1)`
    margin: 0 auto;
    text-align: center;
  `
  
  const Tags = styled.div`
  margin: 0 auto;
  .tag {
    background: #8636E4;
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.2rem;
    font-weight: 600;
  }
  `
  
  const ContentWrapper = styled(BodyMain)`
    display: grid;
    grid-gap: 20px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
  
    .embeddedImage {
      padding: 50px 0px;
      width: 100%;
      height: auto;
    }
  `
  
  </code></pre>
  <p>It does give me the tags and I'm able to style them. Though I don't know how to get them clickable like links/buttons.</p>
  <p>I have a file called gatsby-node.js, which contains the following code:</p>
  <pre><code>const path = require(&quot;path&quot;)
  
  exports.createPages = async ({ graphql, actions }) =&gt; {
    const { createPage } = actions
    const response = await graphql(`
      query {
        allContentfulArticlePost {
          edges {
            node {
              id
              slug
            }
          }
        }
      }
    `)
    response.data.allContentfulArticlePost.edges.forEach(edge =&gt; {
      createPage({
        path: `/articles/${edge.node.slug}`,
        component: path.resolve(&quot;./src/templates/article-post.tsx&quot;),
        context: {
          slug: edge.node.slug,
          id: edge.node.id
        },
      })
    })
  }
  </code></pre>
  <p>Where do I go from here?</p>