Gatsby blog post – How to add rich snippets to a video embedded from YouTube

I have a blog running with Gatsby + the Netlify CMS and sometimes I want to add to the blog post an embedded video from YouTube. I want to create for those videos a videoObject schema with the following structure:

   {
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "VIDEO TITLE",
  "description": "VIDEO DESCRIPTION",
  "thumbnailUrl": "VIDEO THUMBNAIL",
  "uploadDate": "2018-04-16T08:01:27Z",
  "duration": "PT4M43S",
  "embedUrl": "https://www.youtube.com/embed/JypYtPhDeiI",
}

Does someone know what is the best way to do this?

Thank you in advance!

Regards.

Answer

You should be using React Helmet & JSON.stringify.

React helmet is a component that lets you control your document head using their React component. JSON.stringify is a method that converts a JavaScript object into a string.

Create a const with your schema markup:

const videoObject = {
  "@context": "http://schema.org",
  "@type": "VideoObject",
  name: "VIDEO TITLE",
  description: "VIDEO DESCRIPTION",
  thumbnailUrl: "VIDEO THUMBNAIL",
  uploadDate: "2018-04-16T08:01:27Z",
  duration: "PT4M43S",
  embedUrl: "https://www.youtube.com/embed/JypYtPhDeiI",
};

Then output the schema using react helmet & JSON.stringify like this:

import React from "react"
import { Helmet } from "react-helmet"

<Helmet>
  <script type="application/ld+json">{JSON.stringify(videoObject)}</script>
</Helmet>