How to add VideoObject Schema structured data to Cloudflare Stream videos in WordPress

Here’s how to create a custom block in WordPress that will add Schema structured data for embedded Cloudflare Stream videos.

Most people who create videos upload them to video services like YouTube, Vimeo, and Wistia and then embed them on their WordPress posts. To make those videos eligible to appear in Google Search results, video search results, Google Images, and Google Discover, they can use a plugin like Yoast Video SEO, which will add VideoObject Schema structured data for the embedded video.

If you’re not like most people – apparently I’m not like most people – and you intentionally keep your videos off of video destination sites like YouTube, you’re out of luck when it comes to WordPress plugins that support adding VideoObject schema. Fortunately, you can create a custom block using Genesis Custom Blocks (previously Block Lab) by WP Engine.

I prefer to use Cloudflare Stream because it provides full-featured and affordable streaming that I fully control. Additionally, it doesn’t have ads, it allows me to specify which domains can play the video, and it streams perfectly on any device and network condition.

VideoObject custom block for Cloudflare Stream

When I first began this project, I tried to make a custom block with every attribute needed to embed the video and include the Schema structured data. I abandoned that approach because it created too many options to configure. It was quicker to configure and copy the embed code directly from Cloudflare Stream.

Cloudflare Stream embed code

I created a textarea option to paste the embed code on the custom block. I immediately discovered issues with that approach. WordPress has built-in security checks and character converters that stripped out some of the code and converted other parts to HTML entities (e.g., & to &). I was eventually able to fix those issues, but it took a lot of unnecessary code that had to be added to functions.php. So I scrapped that approach.

My final solution was to paste the Cloudfare Stream embed code into a native WordPress ‘Custom HTML’ block and couple it with the custom block I made with Genesis Custom Blocks. The custom block outputs the related VideoObject Schema, and since the structured data is in JSON format, it can be located anywhere on the page and in the HTML.

Creating the block template and adding dynamic VideoObject Schema structured data

Genesis Custom Blocks are made up of two parts:

  1. Content blocks that you create and configure in the WordPress Admin
  2. Block templates that you create and add to the theme

When I create custom blocks, I usually create the block template first. The block template contains the code used on a post or page when the custom block is used in the editor. I created a file named block-cloudflare-stream.php and added the VideoObject schema in JSON format. I then used the block_field function – a plugin feature – where dynamic data would need to be inserted. This is what the code looks like:

Additionally, I made a preview page that is displayed in the editor when the custom block is added to a post or page. It’s named preview-cloudflare-stream.php and it appears when you’re not editing the custom block.

I’ve made these files available to download and use. This should make adding the custom block easier for you and give you a better idea of how the code looks in the PHP pages.

Download block templates (.zip)

Creating the ‘Cloudflare Stream Video Schema’ custom block

Adding the files, thanks to the downloadable block templates, is the easy part. The more tedious task is creating the custom block. You must follow the instructions exactly as they’re specified. In particular, the Field Name (slugs) must match, or the block template won’t dynamically insert the values you specify in the editor.

First, create a new block with Genesis Custom Blocks. Name the block Cloudflare Stream Video Schema and name the Slug cloudflare-stream. Change the Icon to the Play icon.

Create custom block

The default setting for adding fields is Editor Fields. However, I recommend clicking on Inspector Fields and adding them there because it will put the input fields on the sidebar. That keeps the main editor window from experiencing a layout shift when you edit the block, and adheres to the design pattern of editing block attributes in the sidebar.

Add the following fields and field attributes.

Required fields for custom block
LabelNameTypeNew Lines
Video IDcs-idTextN/A
Namecs-nameTextN/A
Descriptioncs-descriptionTextareaNo formatting
Hourscs-hoursNumberN/A
Minutescs-minutesNumberN/A
Secondscs-secondsNumberN/A
Widescreen Imagecs-widescreen-imageImageN/A
Square Imagecs-square-imageImageN/A
Portrait Imagecs-portrait-imageImageN/A

Once you’re done adding the fields, they should look like this.

Inspector fields

Add Cloudflare Stream video and Video Schema block

In a new tab or window, navigate to the Cloudflare Stream section of the Cloudflare Dashboard. Find the video you want to add to WordPress, configure the embed settings, and copy the embed code.

Cloudflare embed code

Create or open in edit mode the post or page where the Cloudflare Stream video will be added. Search for the Custom HTML block and click on it.

Select Custom HTML block

Paste the video embed code into the Custom HTML block.

Paste Video Embed

Next, add a new block and search for the Cloudflare Stream block you just made and click on it.

Select custom block

Add the following block attributes.

When you save and publish the post or page, the video will now have VideoObject Schema structured data associated with it in the HTML. The embed and structured data will look similar to this in your HTML.

I encourage you to test the page to ensure the Schema structured data validates and is eligible for Google’s rich results.

Related Articles