Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gatsby-plugin-wpgraphql-seo

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-plugin-wpgraphql-seo

A SEO component that brings data from Yoast in your Gatsby App with WpGraphQl.

  • 1.4.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
845
decreased by-13.07%
Maintainers
1
Weekly downloads
 
Created
Source

Gatsby SEO For WpGraphQL and Yoast

npm

Takes data from WpGraphQL and WPGraphQl 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 and react-helmet

yarn add gatsby-plugin-react-helmet react-helmet

or

npm install gatsby-plugin-react-helmet react-helmet

Find this useful?

Buy Me A Coffee

Setup Gatsby

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;

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
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

Keywords

FAQs

Package last updated on 06 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc