Friday, 28 March 2014

How to Markup Videos on your website

If your video is appearing in the SERP for a targeted keyword, it enhances user experience. We are already optimizing our video sitemaps in order to increase visibility of videos in the SERP; a video sitemap helps Google to find videos and thumbnail images in a proper manner. Google is constantly improving its indexing system in order to provide best results to users. You can use yahoo search engine monkey, in order to markup your video content.  If you mark up your pages with Yahoo! Searchmonkey Video tags, Google will, as stated here, recognize these and list your video in the search results. When optimizing content for Google, why are we using Yahoo’s technology? The reason is pretty simple, Google supports it. Unfortunately, there is no tool which you can use to generate an RDFa markup code for your videos. You have to generate the code manually but it’s not a tedious task.

Other than XML Video Sitemaps and MediaRSS enhancements, Yahoo! Searchmonkey code goes straight into your pages. This has the benefit that Google will recognize your videos without any additional submission of feeds or sitemaps. Depending on how you embed video, this might be fairly easy to add or might take some more work. The reason is that it starts with attributes on the object element and some JavaScript based injection methods might not have an object element. While optimizing videos, you can either have a video which is hosted on your own website or you can embed a video from a video hosting website like Youtube, Vimeo or Metacafe. As far as video optimization is concerned, we should have videos hosted on our own server as it is relatively easy to optimize a video if it hosted on the same server as compared to other video hosting websites. We will take both the examples and will learn how to optimize video in both cases. Google also supports Facebook shares; please refer http://support.google.com/webmasters/bin/answer.py?hl=en&answer=162163&topic=1088474&ctx=topic to learn more on this.

Case 1: Video Hosted On Same Website:

Below is normal HTML code which is used to add a video on a webpage.



Now, we have to embed our RDFa code in the above video content.  To start with, we have to specify RDFa namespaces (refer to introduction of RDFa above, if you have forgotten about namespaces). 

Namespaces:

xmlns:media=" http://search.yahoo.com/searchmonkey/media”
xmlns:dc="http://purl.org/dc/elements/1.1/"

Once we are done with the namespaces, there are some properties which we have to add in the markup; they are compulsory properties, we have to add them. 


Google recognizes the following Yahoo! SearchMonkey RDFa properties.

Property
Description
media:video
(Required.) A URL to the video to play when the user clicks the "play" button.
xmlns:media
(Required.) Must consist of the following URL: "http://search.yahoo.com/searchmonkey/media/".
media:thumbnail
(Required.) A URL pointing to a preview thumbnail, which must be a GIF, PNG, or JPG image. The preview thumbnail must be hosted on the same domain as the video.
xmlns:dc
A valid URL to the Dublin Core namespace. The only acceptable value is "http://purl.org/dc/terms/". Required only if you are using Dublin Core metadata such as dc:description
dc:license
Indicates the license for this content. You may use dc:license or cc:license.
dc:description
A short (up to 200 characters) description of the video. Take this description from the meta data of the page.
media:title
Specifies the title of a video. Up to 60 characters. Again, this can be taken from the title tag of the page on which the video resides.
media:width
The video's width in pixels, including any "chrome" provided by the third-party player.
media:height
The video's height in pixels, including any "chrome" provided by the third-party player.
media:type
The video's MIME-type. Currently, the only acceptable value is application/x-shockwave-flash.
media:region
An international region where the video may be played. The default is * (play in all regions).
media:duration
The duration of the video, in seconds.


As mentioned above, media:video, xmlns:media and media:thumbnail are required properties, which you have to add in the markup, though, it is always beneficial to add as much information as you can, so try to use all the properties.

Based on the knowledge we have gained so far, the RDFa embedded code for the video is as below:





In the above piece of code, in order to differentiate the original code and the added RDFa markup, red color has been used to denote the added markup and black color code shows the original video code.  As the above code indicates, we haven’t altered the original code; we have just added few extra lines. While performing this, you need to make sure that you haven’t changed the original code of the video; make sure that the original code remains intact. If unsure about adding the RDFa code, please feel free to comment your query below.

While, media:video, xmlns:media and media:thumbnail are required properties, we have to use all possible properties which can describe you video content.

Note: In dc.description and media:title, use Meta description and title of the page, respectively. 

Case 2: When Videos are hosted on YouTube:


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.

Here is an sample code(old custom code) provided by YouTube:




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/6mZShors3o0?version=3&hl=en_US&rel=0".
3        The / or = after the "v" is always the first delimiter, and the "?version=3&" is always the second delimiter. Everything in between is the video ID. In other words, http://www.youtube.com/v/VIDEOID?version=3&hl=en_US&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/6mZShors3o0/default.jpg

Note: This thumbnail URL will be useful in creating video sitemaps for such videos as well.

The media:video url will be the url which contains the video id, i.e, http://www.youtube.com/v/6mZShors3o0?version=3&hl=en_US&amp 
Now we have media:video url and thumbnail url. We will now create the RDfa markup code in the same way as we have done for the video which is hosted on the same site.  The equivalent RDFa code for the video would be like this:

Feel free to ask any queries regarding RDFa and Semantic Markup of videos on your website.

1 comment:

  1. nice and very qualitative information,you can also post your article in video format converting your text in to video automatically

    ReplyDelete