Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
gatsby-plugin-wpgraphql-seo
Advanced tools
A SEO component that brings data from Yoast in your Gatsby App with WpGraphQl.
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
FAQs
A SEO component that brings data from Yoast in your Gatsby App with WpGraphQl.
The npm package gatsby-plugin-wpgraphql-seo receives a total of 312 weekly downloads. As such, gatsby-plugin-wpgraphql-seo popularity was classified as not popular.
We found that gatsby-plugin-wpgraphql-seo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.