How To Add Responsive Videos With Schema Markups In Genesis 2.0

Schema’s Markup is a good way to optimize your content for Search Engines.

I am using Genesis Framework on MakeWebWorld and one of the reason is fully compatibility of schema markups.

There are many kind of schema markups which can define each and every element of your blog. One of them is for the embedded videos.

In this post we will check how can we enhance our video embeds with schema markups in Genesis 2.0.

I am going to use YouTube embeds in this example but this code can be used with any service with some small tweaks.

Create ShortCode for Video Schema Markups

We will create a short-code for embedding videos with schema markups. This shortcode will add required structure of schema markups and the video in the blog post.

You can copy the code mention below and add it in the function.php of your child theme.

[gist file=”7219498″ username=””]

Now lets understand the use of this shortcode.

Schema markups needs some values to provide details about the video. Below are the informations we have used in this short code.

src – This should be the youtube id for the video.

title – The title which you want to use for the video. It will be displayed with H2 tag.

duration – It is duration of the video. You need to use hour, minute and second format like TH01M10S05

thumbnail – It is the thumbnails image.

description – This is description field which can be used to publish something about the video.

Here is an example of the short code use for one of the YouTube video:

[gist file=”7234573″ username=””]

Lets Make the Video Responsive

Genesis 2.0 compatible themes are mobile responsive themes and we would like to make our videos also responsive.

The embed video should also be a responsive and adjust according to the screen size.

You can copy the below css in the style.css of your child themes.

[gist file=”7220025″ username=””]

How To Check The Schema Markups

Once you have add the code in function.php and style.css, you may want to check if the markup is working correctly.

You can go to Google Structured Data Testing Tool, enter your url and check the schema markups.

This way you can check if your markups are recognized correctly.

Once done you will have Responsive Videos with Schema Markups in your Genesis 2.0 child theme.

Though I have used Genesis 2.0 in this post but the code is generic and can be used with any theme as long as you can figure out the place for PHP code and style.

Hope this post will give you an idea on schema markups for your videos.