Reflex
  • 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
arshadcnv0.5.3
Reflex
Reflex

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 postFeatured posts

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github