Wordpress & Web Development

Getting Rich Snippet Video Previews Into Your Search Results

James Bruce 05-05-2013

Producing your own video content is great. Search engines and users alike love video content. It increases user engagement – keeping visitors on your page – but moreover it’s just makes your content more interesting, adding value. You’re already doing this? Awesome – but do you upload them all to YouTube and just embed them on your site? Yes? Then you’re doing it wrong.


We’ve talked about Rich Snippets How to Add Rich Snippets for Reviews to Your Wordpress Blog Read More before – pieces of meta you can add to a page that Google will understand and potentially include in the search results. Authorship is one example; here’s one of my own search results, standing out nicely on a video game review search.

rich snippet video

In short, users are more likely to click on something when it’s not just a bland text result.

What you really want then, is for Google to recognize that your page contains a nice juicy video that you put time into creating, and to rank that page higher or with potentially more visibility. Here’s another result from the same search result, though it’s actually ranking further down the page since it’s less relevant. Still, it highlights nicely rich, video content.

rich snippets video google


How To Get Video Previews into Google

This is not an easy task, and as ever – there’s no guarantee that your site will benefit from them. However, here are the basic steps needed:

  1. Host your own videos. Don’t use YouTube.
  2. Make sure they are marked up correctly.
  3. Use an HTML5 video player.
  4. Submit a special video sitemap to Google.

What’s Wrong With YouTube?

There’s nothing wrong with YouTube per se, but you’ll be in competition with yourself. YouTube is indeed a great inbound marketing tool. Users may stumble across your video, love the content and try to find more at a site address listed, particularly if it’s a viral teaser or “full instructions at the link in the description” type video. But they may also just click through to another related video and never visit your site at all.

The point is that when you make YouTube videos to accompany the page you’re trying to rank with, you’ll more than likely be outranked by your own video as a YouTube result; it won’t be a pretty thumbnail pointing to your page, it’ll be pointing to YouTube. There’s a time and place and a reason to use YouTube videos. Outranking your own content is not one of them.

Hosting & Player

The simplest option here is to upload video content to your own site, so we’ll use that for demonstration purposes. There are ways of using a premium Vimeo account, or some other third party hosts, but since you already have webspace you might as well use it. If you’re expecting a lot of traffic, be sure to have this all cached with a CDN (see my tips on how to speed up a WordPress blog 3 Ways To Speed Your Site Up With The Cloud The Cloud is the answer to all the worlds problems, it would seem - a buzzword technology that sends computing full circle right back to where it started - with a thin client model and... Read More ).


Next, we need a suitable player – something that outputs HTML5, but can fallback to Flash or Silverlight when absolutely needed. For this, let’s use MediaElements.js; it’s a capable player for all kinds of media. You can find it directly from the WordPress dashboard.

rich snippets video google

Usually we would embed the video using a shortcode like this:


However, this won’t result in Schema.org markup being used, so instead we’re going to manually code it like this:

<video width="600" height="400" controls="controls" preload="true" itemprop="video" itemscope="" itemtype="https://schema.org/VideoObject">
<source src="[VIDEO URL]" type="video/mp4" />
<meta itemprop="name" content="Technophilia Technology Podcast, Episode 63 - Generic Podcast Listener"/>
<meta itemprop="contentURL" content="http://technophiliapodcast.com/podcast/tech63.mp4" />
<meta itemprop="description" content="Episode 63 of Technophilia Technology Podcast" />
<meta itemprop="thumbnailUrl" " />

Which still results in this:

rich snippets video google

Warning: Don’t switch back to visual editor or your code will be butchered apart. Yes, not ideal. The best would be to adjust or code your own plugin that would load the MediaElements.js player AND output suitable markup. Nevertheless, this is what we have.


Check your markup using the Rich Snippet Tester, but be aware that it won’t show a video preview in the tool – just check if the markup is correct:

rich search snippets

Video Sitemaps

Unfortunately, this is where things get really difficult. If you search the WordPress plugins directory for “Video sitemaps”, you’ll find a few plugins claiming to do this. However, they only work with YouTube links, which for our purposes is completely worthless. There isn’t a free WordPress plugin that will work for our needs, but you can manually code a video sitemap like this (I’m being lazy and not writing a proper description, but you should):

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
 <video:title>Episode 63 of Technophilia Technology Podcast</video:title>
 <video:description>Episode 63 of Technophilia Technology Podcast</video:description>

(included above are the basic minimum of required fields, except for duration – in seconds – which optional but recommended)

Alternatively, Yoast – the creator of the famous WordPress SEO plugin (featured on our Best WordPress Plugins The Best WordPress Plugins Read More ) – offers a premium plugin to handle this side of things, and it integrates nicely with the MediaElements.js player. The downside is the price, at a whopping $60 for a single site or $250 for a developer licence. Then again, if you’re putting at least an hour into making each video, they really deserve a little love and attention on the SEO side.

Submission To Google

Finally, log into Google Webmaster Tools and point it toward your video sitemap. Mission accomplished.

rich snippet video

It’s a shame there’s not an easier way to do this, but that’s what you get for being on the bleeding edge of Internet developments. Video previews in the search results will give you a competitive edge, but remember – if your accompanying content or the video itself isn’t up to scratch, that effort will have been wasted.

Do you know of a better way to handle this in WordPress? Let us know.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Jonathan Hamilton
    October 22, 2013 at 9:51 pm

    Hi James,

    Your blog entries are very interesting and useful, especially this one, thank you.

    I have a dilemma; After reading your blog above, I was sold on the idea of self-hosting and completely sold on the Yoast SEO for video plugin.

    I have bought and activated the Yoast plugin and am seriously happy with that purchase.

    I then read this article:


    Which has some compelling arguments about why not to host. In particular the bandwidth and multiple formats / sizes argument seems strong.

    I am a relatively new WordPress developer. The site I spend most of my attention on is my own blog: http://pinkpiggy.biz, I am currently leaning toward sticking with YouTube, but am happy to be convinced otherwise.

    My main query is - if Google can't scan a video's actual content for SEO purposes, then why does it matter whether it is hosted on YouTube, Vimeo Pro or privately? I'm sure there's a good reason, I just genuinely don't get it though. I would have thought the text surrounding the video would be more important which would surely make hosting on YouTube just as powerful as a private host setup.

    Could you cite some specific examples of a site competing with its own video on YouTube?

    Sorry for the rambling message, thanks again for the excellent content. I really look forward to your response!

    Best regards,


  2. William
    August 18, 2013 at 5:46 am

    Problem is when your video are stored in "extra data" in the post. You can either modify the plugin to do a query in the "extra date" and add the video to the XML file or you can put the schema data direction in your php template using the "extra data"

    The former may take you some time so you may want to just add the schema to your template.


    • MakeUseOf TechGuy
      August 18, 2013 at 8:45 pm

      I'm a little confused - is this a problem you've faced, or are you referring to something specifically in the article? I've never heard of videos being stored in custom fields (if that's what "extra data" you're referring to?)

      • William
        August 18, 2013 at 9:10 pm

        Just giving my input. Yes I was refering to custom fields.

  3. brox
    May 15, 2013 at 6:28 am

    Thx for the nice post. One more thing. What about Product Rich Snippets ?

    I read that you can use it for products, but only for products you sell directly from your website ? Does that mean, if you sell through affiliate links like amazon, there is no way that a product image will show up on the google search engine ?

    On the google help site I could find some example codes, but I never saw any image showing up for products.... confused now..

    What are your thoughts about this ?

    • MakeUseOf TechGuy
      May 15, 2013 at 6:35 am

      I'm pretty certain you can't add rich snippets if you're just embedding amazon products. If you have your own content around that product, your own product description and photos, coded on your end, and are simply linking a buy button to amazon - that might work.

      • brox
        May 21, 2013 at 10:44 pm

        Makes sense. And what happens, if you do have both ? A video and a product rich snippet.. both will show up in the search result ?
        Or just one of them ?

        One more thing about the videos. I tried to code above and so far it looks like it works.. have to wait a few weeks I guess till google picks it up, but so far no errors.

        The only thing that doesn't work is the thumbnail... the thumbnail in the video actually.. you know, like on youtube, you can pick I guess from three thumbnails you like.. and that's the one that will show up before the video plays.. a placeholder image, nothing more.

        the thumbnail in the code is there.. but I guess that's the thumbnail for the rich snippet, because it's just inside the macro-data tag.

        But what about the thumbnail for the video preview ?

        • James Bruce
          May 22, 2013 at 8:47 am

          I think you can have both, but they would need to be distinct elements on the page. The video would be marked up with video snippet, while the product above it has product snippet.

          Have you specified a video thumbnail? As in: http://technophiliapodcast.com/wp-content/uploads/2013/04/tech63.png

        • James Bruce
          May 22, 2013 at 8:48 am

          eugh, comment stripped my code - see the code samle above for how to specific the actually thumbnail. I believe it's a separate thumbnail to just the regular post thumbnail.

        • brox
          May 28, 2013 at 3:54 am

          Well, still bot sure how this thing works. I can't find many rich snippets for videos, and if I can find some, they all do have the open graph code in it. So I am not sure what is really working.. the structured data or the open graph ?
          or is it the same ? still confusing...

          I could create my video, .mp4 format and plays like a charme, chrome, firefox, ipad, etc. But I doubt that the strucutred data information with the meta tags is all !?!?

          Why can I always only find video rich snippets, if I can find the Open Graph meta tags in the source code ?
          Just coincidence ?

          However, I would love to go through a step by step process, with a simple wordpress site, even if it takes a week or so, to make sure I understood and this thing works....

          In the article you have posted, it's nice how you did it, but I also have to say, I can't see as rich snippet in the google search engine... or did I miss something here ?

          I can find videos as rich snippets, which are on youtube... I think this happens automatically.. wouldn't it make sense to tread the rich snippet video I am hosting on my own server, exactly the same ?

          I just don't know what code youtube is using..
          but if I could get an example, a template.. I think that would be the solution.

          Again, I only can find video rich snippets in the google search engine when Open Graph Meta Tags are present... does it mean, it doesn't work without ?

          thank you so much for getting this thing working !!!

        • James Bruce
          May 28, 2013 at 7:37 am

          Hi brox. Forget OG meta tags, they have nothing to do with structured markup. They are used by any site that wishes to curate the way their page is shared on facebook (by specifying the right thumbnail that appears or description etc). Totally unrelated.

          Just because your video plays in a browser doesn't mean it has any structured data. Unless you've specifically added them, or using a plugin that will add them for you, they wont be there.

          If you've added the code, the rest is up to Google - and like I mention, it's up to them if your site even gets the privilege - simply having the code doesn't automatically mean it will work. If your site is not important enough (in Google's eyes, I mean), it may do nothing.

          The easiest thing to do would be to post a URL here so I can have a look and tell you if the snippet code is correctly being added.

        • brox
          May 28, 2013 at 9:50 pm

          Thank you so much James for your help, I really appreciate that.

          Ok.. that means, I should not really focus on Open Graph code, that's another story, right ?

          Correct.. I do not have any structured data on my website yet, and this is what I want to do. So here is the status. I do have my site and the video on it. The video is an .mp4 video, hosted on my own server.

          The video code itself is from http://mediaelementjs.com
          I took from there site the code, because I simple use their word press plugin which supports HTML5 - and yes, I love it, it works like a charme.

          So here is the code I am using, it's on the medialementjs.com websit, they call it OPTION B:



          So I used that code on my WordPress site, just changed the name for the video and the path. Done.

          A funny thing, and I don't know why, but after typing the exact code above into my WordPress Post, my code looks like this.



          Anywyas, maybe the plugin itself added the correct path to the flashplayer.... called moxieplayer.swf ????
          I don't know actually, why and how this all changed, but again, it looks like the plugin added some missing parts automatically.

          However, the video works fine with that code.

          Now.. that's where I am at... and now I would like to add the Schema.org Markups. So what I did is this:

          schema.org markup code:

          Video: The name of my video

          [Broken URL Removed]
          <meta itemprop="name" content="What ever my content is"
          [Broken URL Removed]
          <meta itemprop="about" content="What ever it is about"
          [Broken URL Removed]
          <meta itemprop="genre" content="what ever genre it is"
          <meta itemprop="headline" content="My Headline"
          <meta itemprop="language" content="EN"
          <meta itemprop="keywords" content="keyword 1, keyword 2, keyword 3"
          <meta itemprop="isFamilyFriendly" content="yes"
          <meta itemprop="text" content="my text"

          My description


          So that's about it.

          Ok.. I used that code, right before the code of the video... unfortunately, it ruins the output of the website. The video still plays, but I get an empty space, field or column in the browser. And that "empty field" is basically coming from that code.

          So the questions are:
          a) How should I use that code ?
          b) Where to put that code ?
          c) Is the code actually correct ?

          I also realized, when I use that code.. it looks like, that this code also tries to create another video output.. but it fails, and that's causing the empty space field on the browser.

          so what you think I am doing wrong here ?

          Thank you so much for any little help,
          appreciate it !

        • brox
          May 28, 2013 at 9:51 pm

          ufff... sorry about that.. just saw that the code I wrote, was actually executed in the browser... how can I write a code within the post field ?

        • brox
          May 28, 2013 at 9:54 pm

          ok.. just wrote the entire thing into a .txt file.
          you can download here:


          I hope that helps !

        • MakeUseOf TechGuy
          May 29, 2013 at 7:42 am

          The plugin transforms the code you put into the editor, yes, and is transforming links into multiple players. Don't use a plugin, just include the mediaelements js file and hand code things like I showed above.

        • brox
          May 29, 2013 at 8:15 pm

          ok. .thank you.. makes sense... the plugin is just a mediaelementjs plugin.. which is rewriting the code...

          I think I understood now.. but there is one more thing.
          When I use the standard code, I always get blank fields rendered on my website.

          for example, I use this code:


          and it's rendered as a blank field.. which is not cool...
          because so I get all the time ( ) fields.

          how can I avoid this ?

        • brox
          May 29, 2013 at 8:16 pm

          --- code example below-----
          meta itemprop="duration" content="T1M33S"
          meta itemprop="thumbnailUrl" content="thumbnail.jpg"
          meta itemprop="contentURL" content="http://www.example.com/video123.flv"
          meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123"

        • James Bruce
          June 2, 2013 at 5:53 pm

          Apolgies for the late reply Brox, got lost in my inbox. I'm not sure what you mean by blank field though - could you put up a tet page somewhere so I can actually take a look at the output?

        • brox
          June 4, 2013 at 11:15 pm

          Thank you very much, appreciate all your efforts.
          Ok.. I have a first success... yeeehaaa...

          But.. it's just a mini-success. Why ?
          My video rich snippet shows up, but only in the video search results of google and not in the web search results.

          The video itself is on a separate post, and the URL is not the main page, so not the root URL http://www.example.com

          My website is found in google thorugh my root domain, but not through the post - the post I have the video.

          Does that mean, I only have to move my video to the root page ? What I mean is, should I create a page, add the video with all the schema.org data to that page, and making sure that this page shows up as the main root url domain ?

          What you think about that ?

        • MakeUseOf TechGuy
          June 5, 2013 at 7:34 am

          No, that's not really a problem with the snippet so much as your general SEO. If your pages aren't ranking in the top 10 anyway, then adding a rich snippet is not going to make them rank any better. As for putting a video on the homepage, I mean, without knowing what your site is it's very difficult for me to help.

  4. macwitty
    May 6, 2013 at 12:32 pm

    Seems to be worthwhile to make two videos one for website and one for youtube