Please refer to this guide first to understand how to handle meta-tags for SEO.

Install @flayyer/flayyer:
yarn add @flayyer/flayyer gatsby-plugin-react-helmet react-helmet

Just add the plugin to the plugins array in your gatsby-config.js

plugins: [`gatsby-plugin-react-helmet`]

Then on your pages use react-helmet to manipulate the contents of the <head />:

import React from "react"
import { Flayyer } from "@flayyer/flayyer"
import { Helmet } from "react-helmet"
const flayyer = new Flayyer({
tenant: "your-tenant-slug",
deck: "my-project",
template: "main",
variables: {
title: "Hello world!",
export default function PageIndex() {
return (
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta property="og:image" content={flayyer.href()} />
<meta name="twitter:image" content={flayyer.href()} />
<meta name="twitter:card" content="summary_large_image" />
<p>Hello world!</p>
Last updated on by Patricio López Juri