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.
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:
- Content blocks that you create and configure in the WordPress Admin
- 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 on IPFS 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.
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 required fields and field attributes.
Once you’re done adding the fields, they should look like this.
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.
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.
Paste the video embed code into the Custom HTML block.
Next, add a new block and search for the Cloudflare Stream block you just made, and click on it.
Add the following block attributes.
- Cloudflare Video ID
- Name of video
- Description of video
- Duration of video (At least one field – hours, minutes, or seconds – must have a value)
- Images (Square and Portrait images are optional)
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 validate and test pages that use the video block to ensure the Schema structured data is eligible for Google’s rich results.