Creating closed captions for your video and audio content that’s displayed on your website is not only beneficial for users with hearing impairments and those in sound-sensitive environments but also beneficial for SEO, so that the search engines can crawl and index the content.
1. Check your website for closed captions with Pagespeed insights
The easiest way to detect if you have closed captions available on your website videos is by using a free online tool such as PageSpeed Insights (developed by Google). Essentially, Google scans your website videos for these tags: elements with [kind=“captions”]
These are opportunities to provide alternative content for audio and video, which may improve experience for users with hearing or vision impairments.
To do this, you can implement these tags by providing closed captions (CC), as opposed to open captions.
Read blog: What is the difference between Closed and Open Captions?
Closed captions are provided as video transcript files recognised as .VTT files. A VTT file, or Web Video Text Track file, is a plain-text file that stores timed text tracks for videos. VTT files are commonly used for adding subtitles and captions to videos.
2. 3 Steps to create closed captions for your videos and boost SEO
Step 1 - Upload your video to VTT file generator
Create your own VTT file:
A basic VTT file must be formatted correctly in a plain text file (or code editor). Typically it looks like:
WEB VTT
1
00:00:00.000 --> 00:00:07.020
caption line 1
2
00:00:07.120 --> 00:00:09.040
caption line 2
3
00:00:09.140 --> 00:00:11.050
caption line 3
(1)
Step 2 - Validate your VTT file
Paste your transcript in to VTT file validator, to check it is formatted correctly, if not it will provide quick feedback on which lines need correcting and how to fix them. (2)
Step 3 - Upload your video and .VTT files to your website
At the beginning of this article, we mentioned that you need to add elements with [kind=“captions”] for accessibility compliance. Here is what you do to implement it:
Simply copy and paste this code in your website editor, and edit it to include your video link, and the code also shows an example how to add multiple language files, delete the second line if only providing English captions:
<video width=auto height=auto controls poster=”video-thumbnail.jpg”>
<source src=”VIDEOURL” type=”video/mp4″>
<track src=”yourcaptionfile.vtt” kind=”captions” srclang=”en” label=”english_captions”>
<track src=”yoursecondcaptionfile.vtt” kind=”captions” srclang=”fr” label=”french_captions”>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
3. Conclusion
Making your videos accessible with closed captions is a simple yet impactful way to enhance user experience, improve inclusivity, and boost your website’s SEO. By checking for captions with tools like PageSpeed Insights, creating properly formatted VTT files, and embedding them correctly in your website’s video player, you ensure that your content is accessible to a wider audience.
Is your website costing you customers? Here's why you need a more effective SEO strategy
A tailored SEO strategy boosts your visibility, drives qualified traffic, builds credibility, and helps you outpace competitors—all while improving user experience and conversion rates.
Take the first step with our custom SEO packages, designed to enhance your site’s visibility and performance. Let’s work together to create a website that attracts, engages, and converts.
References
- Creating your own .VTT file, QuickHelp Support Centre
- < video > elements must have captions, Deque University