I have a basic blog setup with Gatsby and at the time of posting this question there lacks good documentation for SEO ponents. There are examples of basic SEO ponents but what I am wanting is a little more in-depth. Maybe, if a solution is reached here it could be contributed to the Gatsby docs for others to benefit.
On top of the usual title and description meta tags and the facebook/twitter open graph meta (which I have done already), I want to add structured data for rich snippets which will vary depending on what the blog post type is. For example, I might have a regular post which would print Article schema, some posts might be How-to, in which case I'd like to print HowTo schema instead of Article. At some point I might write a post with would suit FAQ schema.
I don't know if this is the best approach but here's what I'm thinking:
1. In frontmatter set the schema type I want to true, leave the rest false.
I am also thinking of storing the schema data in the frontmatter but as this data is quite plex and will vary from post type to post type (Article, HowTo etc.) I'm not sure if this is yet a good idea?
---
title: Hello World
description: How to say hello
article: false
how-to: true
faq: false
---
2. Test for true/false in the SEO ponent and print the correct schema.
Below is my entire SEO ponent, which obviously doesn't work but you can hopefully see where my thinking is headed. I have dissected and borrowed from the gatsby advanced starter ponent and the gatsby starter prismic ponent but neither do quite what I need. Here's mine:
import React from "react"
import Helmet from "react-helmet"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Facebook from "./Facebook"
import Twitter from "./Twitter"
const SEO = ({
title,
desc,
banner,
pathname,
published,
modified,
article,
webpage,
node,
}) => {
const { site } = useStaticQuery(query)
const {
buildTime,
siteMetadata: {
siteUrl,
defaultTitle,
defaultDescription,
defaultBanner,
headline,
siteLanguage,
ogLanguage,
author,
twitter,
facebook,
},
} = site
const seo = {
title: title || defaultTitle,
description: desc || defaultDescription,
image: `${siteUrl}${banner || defaultBanner}`,
url: `${siteUrl}${pathname || "/"}`,
date_published: published,
date_modified: modified,
}
// Default Website Schema
const schemaOrgJSONLD = [
{
"@context": ";,
"@type": "WebSite",
url: siteUrl,
name: defaultTitle,
alternateName: headline ? headline : "",
},
]
if (howto) {
schemaOrgJSONLD.push({
/* HowTo Schema here */
})
}
if (faq) {
schemaOrgJSONLD.push({
/* FAQ Schema here */
})
}
if (article) {
schemaOrgJSONLD.push({
/* Regular Article Schema */
"@context": ";,
"@type": "Article",
author: {
"@type": "Person",
name: author,
},
copyrightHolder: {
"@type": "Person",
name: author,
},
copyrightYear: "2019",
creator: {
"@type": "Person",
name: author,
},
publisher: {
"@type": "Organization",
name: author,
logo: {
"@type": "ImageObject",
url: `${siteUrl}${defaultBanner}`,
},
},
datePublished: seo.date_published,
dateModified: seo.date_modified,
description: seo.description,
headline: seo.title,
inLanguage: siteLanguage,
url: seo.url,
name: seo.title,
image: {
"@type": "ImageObject",
url: seo.image,
},
mainEntityOfPage: seo.url,
})
}
return (
<>
<Helmet title={seo.title}>
<html lang={siteLanguage} />
<meta name="description" content={seo.description} />
<meta name="image" content={seo.image} />
{/* Schema tags */}
<script type="application/ld+json">
{JSON.stringify(schemaOrgJSONLD)}
</script>
</Helmet>
<Facebook
desc={seo.description}
image={seo.image}
title={seo.title}
type={article ? "article" : "website"}
url={seo.url}
locale={ogLanguage}
name={facebook}
/>
<Twitter
title={seo.title}
image={seo.image}
desc={seo.description}
username={twitter}
/>
</>
)
}
export default SEO
SEO.propTypes = {
title: PropTypes.string,
desc: PropTypes.string,
banner: PropTypes.string,
pathname: PropTypes.string,
published: PropTypes.string,
modified: PropTypes.string,
article: PropTypes.bool,
webpage: PropTypes.bool,
node: PropTypes.object,
}
SEO.defaultProps = {
title: null,
desc: null,
banner: null,
pathname: null,
published: null,
modified: null,
article: false,
webpage: false,
node: null,
}
const query = graphql`
query SEO {
site {
buildTime(formatString: "YYYY-MM-DD")
siteMetadata {
siteUrl
defaultTitle: title
defaultDescription: description
defaultBanner: logo
headline
siteLanguage
ogLanguage
author
logo
twitter
facebook
}
}
}
`
The problems I can see are:
- How to test for what schema type to use and print it
- Include breadcrumbs schema for all types
- Print only a single schema JSON-LD script tag, avoiding any duplicate schema
- Is using frontmatter in markdown files suitable to store plex schema data
- Retrieving frontmatter data for schema
I have a basic blog setup with Gatsby and at the time of posting this question there lacks good documentation for SEO ponents. There are examples of basic SEO ponents but what I am wanting is a little more in-depth. Maybe, if a solution is reached here it could be contributed to the Gatsby docs for others to benefit.
On top of the usual title and description meta tags and the facebook/twitter open graph meta (which I have done already), I want to add structured data for rich snippets which will vary depending on what the blog post type is. For example, I might have a regular post which would print Article schema, some posts might be How-to, in which case I'd like to print HowTo schema instead of Article. At some point I might write a post with would suit FAQ schema.
I don't know if this is the best approach but here's what I'm thinking:
1. In frontmatter set the schema type I want to true, leave the rest false.
I am also thinking of storing the schema data in the frontmatter but as this data is quite plex and will vary from post type to post type (Article, HowTo etc.) I'm not sure if this is yet a good idea?
---
title: Hello World
description: How to say hello
article: false
how-to: true
faq: false
---
2. Test for true/false in the SEO ponent and print the correct schema.
Below is my entire SEO ponent, which obviously doesn't work but you can hopefully see where my thinking is headed. I have dissected and borrowed from the gatsby advanced starter ponent and the gatsby starter prismic ponent but neither do quite what I need. Here's mine:
import React from "react"
import Helmet from "react-helmet"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Facebook from "./Facebook"
import Twitter from "./Twitter"
const SEO = ({
title,
desc,
banner,
pathname,
published,
modified,
article,
webpage,
node,
}) => {
const { site } = useStaticQuery(query)
const {
buildTime,
siteMetadata: {
siteUrl,
defaultTitle,
defaultDescription,
defaultBanner,
headline,
siteLanguage,
ogLanguage,
author,
twitter,
facebook,
},
} = site
const seo = {
title: title || defaultTitle,
description: desc || defaultDescription,
image: `${siteUrl}${banner || defaultBanner}`,
url: `${siteUrl}${pathname || "/"}`,
date_published: published,
date_modified: modified,
}
// Default Website Schema
const schemaOrgJSONLD = [
{
"@context": "http://schema",
"@type": "WebSite",
url: siteUrl,
name: defaultTitle,
alternateName: headline ? headline : "",
},
]
if (howto) {
schemaOrgJSONLD.push({
/* HowTo Schema here */
})
}
if (faq) {
schemaOrgJSONLD.push({
/* FAQ Schema here */
})
}
if (article) {
schemaOrgJSONLD.push({
/* Regular Article Schema */
"@context": "http://schema",
"@type": "Article",
author: {
"@type": "Person",
name: author,
},
copyrightHolder: {
"@type": "Person",
name: author,
},
copyrightYear: "2019",
creator: {
"@type": "Person",
name: author,
},
publisher: {
"@type": "Organization",
name: author,
logo: {
"@type": "ImageObject",
url: `${siteUrl}${defaultBanner}`,
},
},
datePublished: seo.date_published,
dateModified: seo.date_modified,
description: seo.description,
headline: seo.title,
inLanguage: siteLanguage,
url: seo.url,
name: seo.title,
image: {
"@type": "ImageObject",
url: seo.image,
},
mainEntityOfPage: seo.url,
})
}
return (
<>
<Helmet title={seo.title}>
<html lang={siteLanguage} />
<meta name="description" content={seo.description} />
<meta name="image" content={seo.image} />
{/* Schema tags */}
<script type="application/ld+json">
{JSON.stringify(schemaOrgJSONLD)}
</script>
</Helmet>
<Facebook
desc={seo.description}
image={seo.image}
title={seo.title}
type={article ? "article" : "website"}
url={seo.url}
locale={ogLanguage}
name={facebook}
/>
<Twitter
title={seo.title}
image={seo.image}
desc={seo.description}
username={twitter}
/>
</>
)
}
export default SEO
SEO.propTypes = {
title: PropTypes.string,
desc: PropTypes.string,
banner: PropTypes.string,
pathname: PropTypes.string,
published: PropTypes.string,
modified: PropTypes.string,
article: PropTypes.bool,
webpage: PropTypes.bool,
node: PropTypes.object,
}
SEO.defaultProps = {
title: null,
desc: null,
banner: null,
pathname: null,
published: null,
modified: null,
article: false,
webpage: false,
node: null,
}
const query = graphql`
query SEO {
site {
buildTime(formatString: "YYYY-MM-DD")
siteMetadata {
siteUrl
defaultTitle: title
defaultDescription: description
defaultBanner: logo
headline
siteLanguage
ogLanguage
author
logo
twitter
facebook
}
}
}
`
The problems I can see are:
- How to test for what schema type to use and print it
- Include breadcrumbs schema for all types
- Print only a single schema JSON-LD script tag, avoiding any duplicate schema
- Is using frontmatter in markdown files suitable to store plex schema data
- Retrieving frontmatter data for schema
2 Answers
Reset to default 8I settled on this solution.
In frontmatter:
---
type: howto // Use either 'article' or 'howto'
---
Query for it with GraphQL like you would for your other data:
frontmatter {
title
published(formatString: "MMMM DD, YYYY")
modified(formatString: "MMMM DD, YYYY")
description
type
}
Pass it to your SEO ponent:
<SEO
title={post.frontmatter.title}
desc={post.frontmatter.description}
published={post.frontmatter.published}
modified={post.frontmatter.modified}
type={post.frontmatter.type}
/>
In your SEO ponent, you can use it like this (do the same for all your types). You can setup your Posts and SEO ponent for as my types as you need, FAQ, Course etc:
const schemaType = type
if (schemaType === "howto") {
schemaHowTo = {
// Your howto schema here
}
}
if (schemaType === "article") {
schemaArticle = {
// Your article schema here
}
}
Finally, in React Helmet we have:
<Helmet>
{schemaType === "howto" && (
<script type="application/ld+json">
{JSON.stringify(schemaHowTo)}
</script>
)}
{schemaType === "article" && (
<script type="application/ld+json">
{JSON.stringify(schemaArticle)}
</script>
)}
...
<Helmet>
Just found great article on the topic: https://www.iamtimsmith./blog/creating-a-better-seo-ponent-for-gatsby/
Helped me to create rich snippets dynamically for all pages in my app.
Main idea: pass children in you seo.js:
return (
<Helmet
htmlAttributes={{lang: `en`}}
titleTemplate={`%s | ${data.site.siteMetadata.title}`}
>
<title>{title}</title>
{children}
</Helmet>
);
and then on any page/ponent:
return (
<SEO title={title} description={description} image={image} slug={slug}>
<script type='application/ld+json'>
{`{
'@context': 'https://schema',
'@type': 'LiveBlogPosting',
'@id': 'https://example.',
'headline': ${title},
'description': ${description}
}`}
</script>
</SEO>
);
};