npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-plugin-wpgraphql-seo

v1.4.2

Published

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

Downloads

3,282

Readme

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?

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