HTML5 Video SEO to Get Easier with Track Element Standard (WebVTT)

HTML5 Video SEO to Get Easier with Track Element Standard (WebVTT)

Share on

The track element has a lot of uses but for the ReelSEO audience, I think one of the best will be the ability to attach a ton of metadata to those HTML5 videos that we’re all starting to publish. Sure, it is meant for other things like subtitles and closed captioning, which are going to be a requirement on pretty much all online video from the look of how things have been proceeding, but any leg up in video SEO is something worthy of discussion.

Here’s what our own Mark Robertson had to say about the new track element and it’s potential implications for SEO:

“Its nice to see that the W3C moving forward with a standard to associate and display temporal metadata with HTML5 video, in this case for timed-text (closed captions, subtitles, etc…).  Many people have been asking for this for some time and in addition to it being incredibly important in terms of accessibility (especially in mobile devices), there are some clear and promising implications with regard to video SEO.

We dont yet know how the search engines will interpret the text track content but I think it’s quite safe to assume that they’ll leverage the content in the future to assist in better interpreting the context of videos on landing pages.  They’ve already implemented schema markup for video transcripts, but, the video sitemap specification still lacks the ability to include support for closed captions. For the most part, the more context you can provide in the form of text, the better for video SEO.  So, though this is very new, it is an exciting and important development for HTML5 video.”

HTML5 WebVTT and the W3

The W3, is the World Wide Web Consortium (W3C) is an international community to develop Web standards. That being said, they’ve recently created a new one called WebVTT, Web Video Text Tracks, a format intended for marking up external text track resources. It looks a little something like this… hit it!

00:00.000 --> 01:24.000 

00:00.000 --> 00:44.000 

00:44.000 --> 01:19.000 

01:24.000 --> 05:00.000 
Scrolling Effects 

01:35.000 --> 03:00.000 
Achim's Demo 

03:00.000 --> 05:00.000 
Timeline Panel

The WebVTT standard required a file be encoded in UTF-8 and labeled as MIME type/text/vtt.

Here’s a quick structure breakdown as well as some cue timings from the specification:

  1. WebVTT timestamp representing the start time offset of the cue. The time represented by this WebVTT timestamp must be greater than or equal to the start time offsets of all previous cues in the file.
  2. One or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters.
  3. The string “–>” (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).
  4. One or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters.
  5. WebVTT timestamp representing the end time offset of the cue. The time represented by this WebVTT timestamp must be greater than the start time offset of the cue.

It offers both horizontal and vertical text orientation and the text can be positioned by giving a percentage from the edge of the frame. Also configurable are text sizes, alignment (start, middle, end), and metadata.

Additionally, CSS properties can be applied to  WebVTT node objects. CSS formatting allowed includes alignment, font, color, background, white-space, font-style, font-weight, text-decoration, display (for CSSRUBY), text-outline, text-shadow, and line-height.

Some of you might say “damn, that looks familiar!” Well that could be due to it being based on the SubRip software program SRT file format which was used as the basis for the WebVTT text track file format.

How to Embed Subtitles/Closed Captions/WebVTT in HTML5 Video

So you’ve got a video and you’ve got a VTT file, how do you pair them up?

In your <video> tag:

<track kind="subtitles" src="subtitles.vtt" />

What Else Can Be in a WebVTT file?

You can do cool things like define who is speaking:

00:18.000 --> 00:20.000
<v Roger Bingham>And with me is Neil deGrasse Tyson

There are three main uses for the VTT file, subtitles and captions were previously mentioned but they could also be used for descriptions which are mainly for things that need to be audio, via a screen reader or other software, for people who are unable to see the video. Essentially, it’s a vocal description of the action in the scene.


There’s a vague, mostly undefined optional piece of text that can be added to the VTT files. It seems that you could put just about anything in there provided it doesn’t interfere with standard VTT cues. One example, from LongTail Video, is the triggering of Javascript events that can then update a map.

From a monetization angle, they might also be used to coordinate companion display ads or other things exterior to the HTML5 <video> tag, update other elements in the page, (like store locaters, discounts, coupons, etc).

Browser Compatibility

As with all new things in the browser world, there’s little support currently, but they’re working on it.

For Chrome you have to enable the <track> element (again see that LongTail Video article). Mozilla has no support at present but are developing it.

If you’re like many of us, you are probably using a more robust video player, like JWPlayer (which I use at GDN) that does both Flash and HTML5, it might already support subtitles via SRT. LongTail stated that version 6.0 of JWP will also have WebVTT integration.

VTT: The Ultimate Video SEO Solution?

We have been using schema markup, subtitles and captions for a while now but with the new WebVTT as a standard it could completely throw open the doors of video search engine optimization and allow for a more cost effective way to get the interior of your video files better understood by Google and Bing, and that my friends, is awesome. For now, at least you can start getting those text track files together for the future.


Video Industry

Share on


View Leaderboards

Most Popular

Read More Insights

How a DIY YouTube Tutorial Video Saved Me $700

How a DIY YouTube Tutorial Video Saved Me $700

YouTube isn't just for watching cats, or Korean pop music. Hundreds of thousands of videos offer invaluable advice to consumers when it comes to DIY projects. We show you how a quick search on YouTube saved over $700 on the cost of a new washing machine.

Read More Arrow pointing right
Thank You, Highlights, and Happy Holidays from ReelSEO!

Thank You, Highlights, and Happy Holidays from ReelSEO!

It's been a very exciting year for online video, and we take a look back at some of the highlights of 2014. We'd also say a big thank you to all of our readers, contributors, sponsors, advertisers, and to the industry professionals who have made 2014 a great year for ReelSEO.

Read More Arrow pointing right
© Tubular Insights & Tubular Labs, Inc.