Tech Marketing Zone is brought to you in partnership with:

Salik Khan  is a Proud Indian Muslim, Music Maniac, Sufism Lover, Kalam Wala Boyand Digital Evangelist/ Web Analytics Consultant. His key expertise are researching latest Algorithmic updates, technical SEO consultancy, E Commerce Optimization, User behaviour Analysis and Online Hadoop Training .  His motto being – “The more I read, the more I learn. The more I learn, the more I realize how far I am from being an EXPERT”. The only way of finding limits of the possible is by going beyond them into the impossible. When not SEOing , he is  Baawraman on Twitter on his blog

Salik is a DZone MVB and is not an employee of DZone and has posted 3 posts at DZone. You can read more from them at their website. View Full User Profile

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

01.31.2013
| 3185 views |
  • submit to reddit

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” 
resource=”http://www.youtube.com/v/aGNSU_Y_5IM?version=3&hl=en_US&” 
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” />
</object>

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, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)