• Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base

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

module.exports = {
siteMetadata: {
title: "Reflex",
description: "Starter for Reflex.",
siteUrl: process.env.SITE_URL || "http://localhost:8000",
plugins: [
resolve: "@reflexjs/gatsby-plugin-metatags",
options: {
types: [

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.

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
- Writing
- Stories
title: Title of the Post
description: A description for meta description
title: A custom title for open graph.
description: Custom description for open graph.
image: Image for open graph.
type: article
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 postFeatured posts

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github