GraphQL to Schema Markup

Question

I am building a site with Gatsby and am trying to get some structured data setup to help with my search visibility. The bit I need help with is where there are multiple images in the image array. Here's an example of what I'm wanting:

const schemaOrgJSONLD = [
  {
    "@context": "https://schema.org",
    "@type": "EventVenue",
    image: [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg",
    ]
  }
]

I have 10 images which I can retrieve using Graphql, returning their publicURL:

{data.allFile.edges.map(({ node }, i) => node.publicURL)}

That gives me an output like this:

/static/venue-001.jpg
/static/venue-002.jpg
/static/venue-003.jpg
...

What I need to do is get these returned URL's into the Schema Markup format that Google will accept. So as above the correct output would be:

const schemaOrgJSONLD = [
  {
    "@context": "https://schema.org",
    "@type": "EventVenue",
    image: [
      "https://example.com/static/venue-001.jpg",
      "https://example.com/static/venue-002.jpg",
      "https://example.com/static/venue-002.jpg",
    ]
  }
]

I basically don't know how to convert what graphql gives me into valid schema markup when it comes to multiple images.

score 0 · Accepted Answer · answered Oct 07 '19 at 07:23

In my side, I've created an array before my schemaOrg declaration like that :

let schemaOrgImages = [];
data.allFile.edges.forEach(node => schemaOrgImages.push(node.publicURL));

const schemaOrgJSONLD = [
  {
    "@context": "https://schema.org",
    "@type": "EventVenue",
    image: schemaOrgImages
  }
]

There's maybe a another way to do it but this method works with schemaOrg validation.

GraphQL to Schema Markup

1 Answers1