Takes data from WpGraphQL and WPGraphQl Yoast SEO and provides you with Meta Tags and JSON+LD Schema in Gatsby.
Yarn or NPM install
yarn add gatsby-plugin-wpgraphql-seo
or
npm install gatsby-plugin-wpgraphql-seo
Also, if you haven't already, install gatsby-plugin-react-helmet and react-helmet
yarn add gatsby-plugin-react-helmet react-helmet
or
npm install gatsby-plugin-react-helmet react-helmet
Add gatsby-plugin-react-helmet to your plugins in gatsby-config, alongside any others you alrady have:
plugins: ['gatsby-plugin-react-helmet']In your sites layout setup the context provider to pass the component your general site settings.
import React, { useState } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { SEOContext } from 'gatsby-plugin-wpgraphql-seo';
export const Layout = () => {
const {
wp: { seo },
} = useStaticQuery(graphql`
query SiteInfoQuery {
wp {
seo {
contentTypes {
post {
title
schemaType
metaRobotsNoindex
metaDesc
}
page {
metaDesc
metaRobotsNoindex
schemaType
title
}
}
webmaster {
googleVerify
yandexVerify
msVerify
baiduVerify
}
schema {
companyName
personName
companyOrPerson
wordpressSiteName
siteUrl
siteName
inLanguage
logo {
sourceUrl
mediaItemUrl
altText
}
}
social {
facebook {
url
defaultImage {
sourceUrl
mediaItemUrl
}
}
instagram {
url
}
linkedIn {
url
}
mySpace {
url
}
pinterest {
url
metaTag
}
twitter {
username
cardType
}
wikipedia {
url
}
youTube {
url
}
}
}
}
}
`);
return (
<SEOContext.Provider value={{ global: seo }}>
<p>... your layout</p>
</SEOContext.Provider>
);
};Optionally you can pass options to the context via the options prop.
const options = {
schemaReplacement: {
from: 'EXAMPLE';
to: 'TO_REPLACE';
}
}
return (
<SEOContext.Provider value={{ global: seo, options }}>
<p>... your layout</p>
</SEOContext.Provider>
);Currently this only supports the schemaReplacement option. This will replace the from value with the to value in the JSON+LD Schema.
For each page or template you then need to add the SEO Component
import React from 'react';
import { graphql } from 'gatsby';
import Seo from 'gatsby-plugin-wpgraphql-seo';
const Page = ({ data: { wpPage } }) => {
return (
<>
<Seo post={wpPage} />
<p>Rest of page</p>
</>
);
};
export default Page;
export const pageQuery = graphql`
query GET_PAGE($id: String!) {
wpPage(id: { eq: $id }) {
nodeType
title
uri
seo {
title
metaDesc
focuskw
metaKeywords
metaRobotsNoindex
metaRobotsNofollow
opengraphTitle
opengraphDescription
opengraphImage {
altText
sourceUrl
srcSet
}
twitterTitle
twitterDescription
twitterImage {
altText
sourceUrl
srcSet
}
canonical
cornerstone
schema {
articleType
pageType
raw
}
}
}
}
`;For archive pages
import React from 'react';
import { graphql } from 'gatsby';
import Seo from 'gatsby-plugin-wpgraphql-seo';
const Blog = ({ data }) => {
return (
<>
<Seo
title="Blog Title"
postSchema={JSON.parse(
data.wp.seo.contentTypes.post.schema.raw
)}
/>
<p>Rest of page</p>
</>
);
};
export default Blog;
export const pageQuery = graphql`
query GET_POSTS($ids: [String]) {
wp {
seo {
contentTypes {
post {
schema {
raw
}
}
}
}
}
allWpPost(filter: { id: { in: $ids } }) {
nodes {
...
}
}
}
`;Additional props are provided for overrides and simpler pages:
title: String to override Title
meta: Array of key value objects for meta tags (e.g property, content)
post: WpGrahpQL post object
postSchema: JSON object to replace complete JSON+LD schema;
By default Yoast adds a search action to the schema if you want remove it you can add the following PHP to your functions.php file:
<?php
add_filter('wpseo_schema_website', 'XX_remove_schema_search');
function XX_remove_schema_search($data)
{
if ($data['potentialAction']) {
foreach ($data['potentialAction'] as $key => $value) {
if ($value['@type'] && $value['@type'] == 'SearchAction') {
unset($data['potentialAction'][$key]);
}
}
}
return $data;
}... More docs coming soon
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
