Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashhitch/gatsby-plugin-wpgraphql-seo
Gatsby Plugin to Bring Yoast Seo Data into Gatsby via WpGraphQL.
https://github.com/ashhitch/gatsby-plugin-wpgraphql-seo
gatsby hacktoberfest wpgraphql yoast
Last synced: about 2 months ago
JSON representation
Gatsby Plugin to Bring Yoast Seo Data into Gatsby via WpGraphQL.
- Host: GitHub
- URL: https://github.com/ashhitch/gatsby-plugin-wpgraphql-seo
- Owner: ashhitch
- License: mit
- Created: 2020-10-17T16:14:27.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-22T16:21:37.000Z (almost 2 years ago)
- Last Synced: 2024-09-21T10:43:46.483Z (3 months ago)
- Topics: gatsby, hacktoberfest, wpgraphql, yoast
- Language: TypeScript
- Homepage:
- Size: 691 KB
- Stars: 13
- Watchers: 2
- Forks: 8
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby SEO For WpGraphQL and Yoast
Takes data from [WpGraphQL](https://www.wpgraphql.com/) and [WPGraphQl Yoast SEO](https://github.com/ashhitch/wp-graphql-yoast-seo) and provides you with Meta Tags and JSON+LD Schema in Gatsby.
## Basic Setup
### Install package
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](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/) and [react-helmet](https://www.npmjs.com/package/react-helmet)
```
yarn add gatsby-plugin-react-helmet react-helmet
```
or
```
npm install gatsby-plugin-react-helmet react-helmet
```
## Find this useful?
### Setup Gatsby
Add `gatsby-plugin-react-helmet` to your plugins in gatsby-config, alongside any others you alrady have:
```js
plugins: ['gatsby-plugin-react-helmet']
```
In your sites layout setup the context provider to pass the component your general site settings.
```jsx
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 (
... your layout
);
};
```
Optionally you can pass options to the context via the `options` prop.
```jsx
const options = {
schemaReplacement: {
from: 'EXAMPLE';
to: 'TO_REPLACE';
}
}
return (
... your layout
);
```
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
```jsx
import React from 'react';
import { graphql } from 'gatsby';
import Seo from 'gatsby-plugin-wpgraphql-seo';
const Page = ({ data: { wpPage } }) => {
return (
<>
Rest of page
>
);
};
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
```jsx
import React from 'react';
import { graphql } from 'gatsby';
import Seo from 'gatsby-plugin-wpgraphql-seo';
const Blog = ({ data }) => {
return (
<>
Rest of page
>
);
};
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;
```
### Removing search action from 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
$value) {
if ($value['@type'] && $value['@type'] == 'SearchAction') {
unset($data['potentialAction'][$key]);
}
}
}
return $data;
}
```
... More docs coming soon