We are adding support for Nextjs. Get in touch on Twitter to learn more.

Meta tags

Add Open Graph and Twitter meta tags to your blog.

Step 1: Add the metatags package

To enable metatags for Post, add the @reflexjs/gatsby-plugin-metatags package.

npm i @reflexjs/gatsby-plugin-metatags

Step 2: Enable metatags for the Post type

gatsby-config.js

require(`dotenv`).config()
module.exports = {
  siteMetadata: {
    title: "Reflex",
    description: "Starter for Reflex.",
    siteUrl: process.env.SITE_URL || "http://localhost:8000",
  },
  plugins: [
    "@reflexjs/gatsby-theme-base"
    "@reflexjs/gatsby-theme-post",
    {
      resolve: "@reflexjs/gatsby-plugin-metatags",
      options: {
        types: [
          `Post`
        ]
      }
    }
  ],
}

Step 3: Add metatags to post

Edit your post and add metatags.

Note: If you do not provide the metatags values, it will automatically be generated for you from the post title, description and image.

content/posts/2020-07-08-slug-of-post.mdx

---
title: Title of the Post
excerpt: A short description for this post.
date: 2020-07-08
image: cover-image-for-post.jpg
caption: Caption for the cover image
published: true
featured: true
author: Megan Morales
tags:
  - Writing
  - Stories
metatags:
  title: Title of the Post
  description: A description for meta description
  og:
    title: A custom title for open graph.
    description: Custom description for open graph.
    image: Image for open graph.
    type: article
  twitter:
    title: A custom title for Twitter cards.
    description: Description for Twitter cards.
    image: Custom image for Twitter cards.
    card: summary or summary_large_image
---
Post content goes here.

Check out the metatags docs to learn more.

Add a post Featured posts