How To Generate Rich Snippets In Serp For Videos Hosted On YouTube

DZone 's Guide to

How To Generate Rich Snippets In Serp For Videos Hosted On YouTube

· ·
Free Resource

We can use Semantic Markup for videos in order to generate rich snippets for the videos easily if the video is hosted on our own server, but the same is not possible if you are using videos from Video hosting websites. But, if you are using videos on your website which are hosted on YouTube, then you have to embed those videos on your website through the code provided by Youtube, make sure not to use iframe embedded code, use traditional one.

Here is an sample code provided by YouTube(Click Image to Zoom) .

<object width=”420” height=”315”?>param name=”movie” value=http://www.youtube.com/v/aGNSU_Y_5IM?version=3&hl=en_US></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=http://www.youtube.com/v/aGNSU_Y_5IM?version=2&hl=en_US type=”application/x-shockwave-flash” width=”420” height=”315” allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

Embedded Code (Traditional)

We need to find out below properties from this code:

media:video –> A URL to the video you wish to be displayed when the user clicks the “play” button.

media:thumbnail –> A URL pointing to a preview thumbnail, which must be a GIF, PNG, or JPG image.

Also, the preview thumbnail must be hosted on the same domain as the video. YouTube does not provide an option to upload a preview thumbnail as they create one.  Here is the trick, in order to find out the path to the image thumbnail, follow below steps.

1. The Thumbnail url will be http://i1.ytimg.com/vi/YourID/default.jpg with the ID of your video

2. You just need to enter the ID of your video here. You can find the id of the video from the embed scr section of the above code, the embed url is http://www.youtube.com/v/aGNSU_Y_5IM?version=3&amp;hl=en_US.

3. The / or = after the “v” is always the first delimiter, and the “?version=3&amp;” is always the second delimiter. Everything in between is the video ID. In other words,http://www.youtube.com/v/VIDEOID?version=3&amp;hl=en_US&amp;rel=0

4. In the above url, your Id is 6mZShors3o0, which is marked in Red in the above code. So, the thumbnail url would be http://i1.ytimg.com/vi/aGNSU_Y_5IM/default.jpg

Note: This thumbnail URL will be useful in creating video sitemaps for such videos as well. You can use http://www.video-sitemap.org/

The media:video url will be the url which contains the video id, i.e,http://www.youtube.com/v/aGNSU_Y_5IM?version=3&amp;hl=en_US

Now we have media:video url and thumbnail url. We will now create the RDfa markup code(You can use Microdata as well); the equivalent RDFa code for the video would be like this(Click Image to Zoom):

<object width=”640” height=”385” type=”application/r-shockwave-flash” data=”http://www.youtube.com/v/aGNSU_Y_5IM?version=3&hl=en_US” rel=”media:video” 
rmlns:media=”http://search.yahoo.com/searchmonkey/media” rmlns:dc=”http://purl.org/dc/terms/”> 
<param name=”movie” value=”http://www.youtube.com/v/aGNSU_Y_5IM?version=3&hl=en_US” />
<param name=”allowFullScreen” value=”true” />
<a rel=”media:thumbnail” href=”http://i1.ytimg.com/vi/6mZShors300/default.jpg” />
<span property=”dc:description” content=”Meta Description Goes Here! />
<span property=”media:title” content=”Title Goes Here” />
<span property=”media:width” content=”640” />
<span property=”media:height” content=”385” />
<span property=”media:type” content=”application/x-shockwave-flash: />
<span property=”media:expirationDate” content=”2032-08-19” />
<span property=”media:region” content=”uk” />

Marked-up code

And that’s all. With above code along with video sitemap, you can generate rich snippets for the videos hosted on Youtube.


Published at DZone with permission of Salik Khan , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}