Community Plugin
View plugin on GitHubGatsby Plugin SEO
Install
yarn add gatsby-plugin-seo
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-seo",
options: {
siteName: "Example Company",
defaultSiteImage: "/img/logo.png",
siteUrl: "https://example.com",
twitterCreator: "@twitterhandle",
twitterSite: "@twitterhandle",
globalSchema: `{
"@type": "WebSite",
"@id": "https://example.com/#website",
"url": "https://example.com/",
"name": "Example Site Title",
"publisher": {
"@id": "https://example.com/about/#organization"
},
"image": {
"@type": "ImageObject",
"@id": "https://example.com/#logo",
"url": "https://example.com/img/logo.png",
"caption": "Example Company Logo"
}
}`
}
}
]
};
// src/pages/index.js
import React from "react";
import Layout from "../components/layout";
import { SEO, useSEO } from "gatsby-plugin-seo";
const IndexPage = () => {
const { siteUrl } = useSEO();
return (
<Layout>
<SEO
title="Home"
description="Description of the site/home page."
pagePath="/"
schema={`{
"@context": "http://schema.org",
"@type": "WebPage",
"mainEntity": {
"@type": "Organization",
"name": "Example Company",
"image": "${siteUrl}/img/logo.png"
}
}`}
/>
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
</Layout>
);
};
export default IndexPage;
Options
{
siteName, // required
siteUrl, // required
defaultSiteImage, // if blank and each page doesn't supply an image, will throw runtime error if requireImage is set to true
twitterCreator = "",
twitterSite = "",
globalSchema = "",
requireImage = true,
htmlLanguage = "en",
locale = "en_US",
defaultAuthorUrl = "",
defaultPublisherUrl = "",
appleTouch = "/img/apple-touch-icon.png",
favicon32 = "/img/favicon-32x32.png",
favicon16 = "/img/favicon-16x16.png",
}
Contribute
Bugs, ideas, issues, PRs welcome!