How to add Video Object Rich Card in website or blog

In order to get a Fully enhanced Rich Card for video objects in your website you have to use the Structured Data Markup for Videos.
If your website supports AMP – Accelerated Mobile Pages, then Google Search will work as an entry point for Searching and viewing videos and you will see rich cards of your video in search results.

There are three conditions or solutions to Add Video Structured Data in your website.

1. IF you are Using AMP and want to use JSON-LD code.
2. IF you are not using AMP and want to use JSON-LD code.
3. If you want to use the Microdata code for video objects which is the Standard video markup.

Video Markup results appear with a badge which encourages users to click on them.

For Case 1-
AMP and JSON-LD Code You can take reference of following code –

<script type=\”application/ld+json\”>
{
\”@context\”: \”http://schema.org\”,
\”@type\”: \”VideoObject\”,
\”name\”: \”Website Development Training Using Php and MySql\”,
\”description\”: \”Learn website development from scratch. Learn the concepts of Core and Advanced PHP with MySql Database Management\”,
\”thumbnailUrl\”: \”http://digital-marketing-course.slidescope.com/wp-content/uploads/2017/08/ista.png\”,
\”uploadDate\”: \”2017-08-25T08:00:00+08:00\”,
\”duration\”: \”PT2M56S\”,
\”publisher\”: {
\”@type\”: \”Organization\”,
\”name\”: \”Slidescope\”,
\”logo\”: {
\”@type\”: \”ImageObject\”,
\”url\”: \”http://digital-marketing-course.slidescope.com/wp-content/uploads/2017/08/green.png\”,
\”width\”: 240,
\”height\”: 40
}
},
\”contentUrl\”: \”http://digital-marketing-course.slidescope.com/wp-content/uploads/2016/09/Rec-057.mp4\”,
\”embedUrl\”: \”http://digital-marketing-course.slidescope.com/website-development-training/\”,
\”interactionCount\”: \”250\”
}
</script>

You have to replace the content of your video with our content.

Change – Name, Description,
ThumbnailUrl – Web address of the Video Thumbnail you want to show,
date of video upload in the format given above,
duration of the video in the format given – 2 minutes and 56 seconds is PT2M56S,

For Case 2
IF you want to use JSON-LD code for a non AMP version of your website you can use this code in script tags:

{
\”@context\”: \”http://schema.org\”,
\”@type\”: \”VideoObject\”,
\”name\”: \”Your video title here\”,
\”description\”: \”Your Video description here\”,
\”thumbnailUrl\”: \”urlofthumbnail.jpg\”,
\”uploadDate\”: \”2017-02-05T08:00:00+08:00\”,
\”duration\”: \”PT2M34S\”,
\”contentUrl\”: \”http://www.example.com/video567.flv\”,
\”embedUrl\”: \”http://www.example.com/videoplayer.swf?video=567\”,
\”interactionCount\”: \”1234\”
}

For Case 3 – If You want to add schema to your page in Microdata format you have to change the HTML of you video object refering to following code :-

<div itemscope itemtype=\”http://schema.org/VideoObject\”>
<span itemprop=\”name\”>Title of your video</span>
<span itemprop=\”description\”>Your Video description here</span>
<img itemprop=\”thumbnailUrl\” src=\”https://www.example.com/thumbnail1.jpg\” alt=\”thumbnail text\”/>
<meta itemprop=\”uploadDate\” content=\”2015-02-05T08:00:00+08:00\”/>
<meta itemprop=\”duration\” content=\”PT1M33S\” />
<link itemprop=\”contentUrl\” href=\”https://www.slidescope.com/video567.mp4\” />
<link itemprop=\”embedUrl\” href=\”https://www.slidescope.com/videoplayer.swf?video=567\” />
<meta itemprop=\”interactionCount\” content=\”4321\” />
</div>

In all the cases the interaction count is the number of times the video has been interacted.

You can refer to official Google Help Page for Structured Data Type = Videos – https://developers.google.com/search/docs/data-types/videos

 

Leave a Comment