seo Question posted in
Some basic information to get you started with this can be found here.

Structured Data for SEO using Gatsby or a SPA

Hello I am interested in adding the following JSON-LD structured data to my Gatsby Site. I have tagged React in this as the response in Gatsby is typically very low. What I would like to do is follow along the example here
https://developers.google.com/search/docs/guides/intro-structured-data

How do I add structured data to a Gatsby or a React site?

I am looking for both a static solution (i.e. for Contact Page) and a dynamic solution (i.e. for a Recipe Page ) to auto fill the values

Tags:

2

Answers


  1. 0

    The best practice for creating and adding SEO is described in this official Gatsby documentation.

    You add an SEO component with React helmet:

    // src/components/SEO.js

const SEO = ({ title, description, image, pathname, article }) => (
  <StaticQuery
    query={query}
    render={({
      site: {
        siteMetadata: {
          defaultTitle,
          titleTemplate,
          defaultDescription,
          siteUrl,
          defaultImage,
          twitterUsername,
        }
      }
    }) => {
      const seo = {
        title: title || defaultTitle,
        description: description || defaultDescription,
        image: `${siteUrl}${image || defaultImage}`,
        url: `${siteUrl}${pathname || '/'}`,
      }
      return ()
    }}
  />
)
export default SEO

    On the bottom you can find some example links. The documentation describes both solutions for static and dynamic meta tags.

    Login or Signup to reply.
  2. 0

    In your SEO component itself create two objects

    First,

      const schemaOrgWebPage = {
    "@context": "http://schema.org",
    "@type": "WebPage",
    url: siteUrl,
    headline: "Your Headline here",
    inLanguage: "en",
    mainEntityOfPage: siteUrl,
    description: "your description here",
    name: "your name here",
    author: {
      "@id": "author name",
    },
    copyrightHolder: {
      "@id": "copyright holder name",
    },
    copyrightYear: "2020",
    creator: {
      "@id": "creator name",
    },
    publisher: {
      "@id": "publisher name",
    },
    datePublished: "date of your publication",
    image: {
      "@type": "ImageObject",
      url: "image url",
    },
  }

    Second, 

      const orgaCreator = {
    "@context": "http://schema.org",
    "@id": `${siteUrl}`,
    "@type": "WebPage",
    address: {
      "@type": "PostalAddress",
      addressCountry: "put your country name",
      addressLocality: "put your locality name",
    },
    name: "your name here",
    alternateName: "your nick name",
    description: description || defaultDescription,
    url: siteUrl,
    email: "your email address",
    founder: "founder name",
    foundingDate: "founding date",
    foundingLocation: "founding location",
    image: {
      "@type": "ImageObject",
      url: `${siteUrl}${image || defaultImage}`,
      height: "512",
      width: "512",
    },
    logo: {
      "@type": "ImageObject",
      url: `${siteUrl}${image || defaultImage}`,
      height: "60",
      width: "60",
    },
    sameAs: [
      "https://www.facebook.com/put-your-user-id-here",
      "https://stackoverflow.com/put-your-user-id-here",
      "https://github.com/put-your-user-id-here",
      "https://www.instagram.com/put-your-user-id-here",
      "https://twitter.com/put-your-user-id-here",
      "https://www.linkedin.com/put-your-user-id-here",
    ],
  }

    Then finally add this inside Helmet tag

    <Helmet>
    <html lang="en" />
    ....
    ....
      <script type="application/ld+json">
            {JSON.stringify(schemaOrgWebPage)}
          </script>
          <script type="application/ld+json">{JSON.stringify(orgaCreator)} 
   </script>
</Helmet>

    If you want to test your structured data, once your site is deployed goto
    https://search.google.com/structured-data/testing-tool/u/0/ and put your website url in there, it will give you an insight on your structured data.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search