Gatsby.js

Repository: https://github.com/flayyer/integration-examples/tree/main/examples/gatsby

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

Install @flayyer/flayyer:

Terminal.app
yarn add @flayyer/flayyer gatsby-plugin-react-helmet react-helmet

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

gatsby-config.js
plugins: [`gatsby-plugin-react-helmet`]

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

pages/index.js
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 (
<div>
<Helmet>
<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" />
</Helmet>
<p>Hello world!</p>
</div>
)
}
Last updated on by Patricio López Juri