As a web design company, we’ve noticed that videos on websites are having a bit of a moment, and we totes get it – they’re fun and engaging. Studio Cotton founder Aime and website-builder-extraordinaire is a fan of using video on websites, but only if it’s done right…
We know many of you will be DIYing your websites, and maybe you’ve never used video on your website before, so we’re here to shed some light.
How can video mess up a website’s SEO?
SEO is all about optimising your website for search engines (in most cases, that’s Google), so that they send as many of their searchers your way as possible.
On most websites, it’s the photos that are the biggest files, which means they take the longest to transfer from your website server to your customers, which (if they’re too big) can make your website slower. That’s bad for SEO, and bad for any human who wants to actually use your website too.
Videos are a composite of a whole load of images (and usually an audio track as well) so they’re even bigger files than photos. If you have video on your website and you don’t manage it effectively, you can imagine how that might fluff up your site speed and therefore really fluff up your SEO.
Here are our tips for managing video in a way that isn’t gonna mess up your website’s SEO (spoiler alert: it’s mostly about keeping that file size down).
1. Keep the video under 7 seconds
Let me start by saying, this blog post is all about “moving image” kinda videos – we’re talking about using a video on your website anywhere where you’d normally have a photo.
This is not about “meet the team” or “behind the brand” videos and the like – we recommend hosting those on YouTube or Vimeo, and then embedding them on the website page where you need them.
So, when using video on your website in this way, 7 seconds is a solid ballpark max target, because most people don’t stay on a page (or a section of a page) on your website for longer than that. 7 seconds is a really good rule of thumb for the duration of a video on your website, and then you can set it to loop.
We want to make sure that everything on your website has a purpose and does something, and having a really long video that no one’s going to watch isn’t gonna help you, and it’s going to slow your site speed down for no real reason.
2. Ditch the audio from your website video
Like I mentioned above, everything within the file makes that file bigger, and the chances of someone actually listening to the audio on your video is small – especially if it’s B-roll and just has the sound of waves.
That sound of waves is making your website slower, and is it really worth making your website slower for the sound of waves?
Plus, most people really don’t like audio playing on a website. Imagine being in a cute quiet office like ours at Studio Cotton, or working in a café, and then a video starts playing out of nowhere – no one likes it, especially me.
3. Use B-roll on your website, not brand films
If you are using a video to basically replace a photo on your website, we want that video to be kind of like a photo that’s moving – that’s “B-roll” baby, and it has really taken off on social media recently.
For B-roll we want things like: packing orders, creating your products, your products in use, typing on your laptop, the exterior of your shop, or wind going through reeds (if it’s relevant).
If you’re still not sure what we mean, here are some examples of B-roll that Studio Cotton client manager Cai popped together using some free stock videos from Pexels – thanks Cai. It turned out to be a longer video than we’d be happy to have on our website, so as you can see, we popped it on YouTube and embedded it here 😉
4. Only use 1-5 clips in your website videos
One-clip videos are very lovely for using on a website, and you don’t need more than that, but you can use multi-clip videos to show more angles, more products, or whatever vibe you want to convey.
But if you use too many clips in your website video, again, it’s more data, more colours, more action.
One to five clips is a nice limit, although we’d probably avoid a 2-clip video, because it’s just going back and forth – but that’s not a real issue, just a pernickety issue.
5. Overlay text on blank space
If you are overlaying text on a video – just like you might on the hero image on your website, at top of your homepage – then make sure that the text is over a blank area. So think sky, desks, walls, etc.
Unreadable text is not very useful at all, and, worse than that, it is an accessibility issue. It’s something you see a lot on Instagram as well as websites – tiny, unreadable text on Stories, captions on videos that disappear into the similarly-coloured background… I could rant about it for ages.
Anyway, keep these blank spaces in mind when you are selecting or shooting a video to use on your website. If you’re working with a professional videographer on your content, you’ll need to pop this in your brief for them, because very few videographers will give you half a screen of blank unless you ask.
6. Set a fallback image for your video
When you upload a video to your website, you’ll need to set a “fallback image,” which is basically the image that shows if that video doesn’t load – which is actually really common. The fallback image should be a high quality photo, and it would make the most sense if it’s a still from that video.
But again, choose it for the space – make sure that if you are gonna overlay text on it that you’ve still got that same blank space on that fallback image.
7. And pop some alt text on that fallback image
Like any other image on your website, you need alt text to represent that photo (which then represents that video) just in case someone can’t see it – whether that’s because they’re visually impaired and using a screen reader, or it hasn’t loaded – so that no one is disadvantaged when using your website.
Google also can’t “see” images, so it uses alt text to understand the image and gain context for what your website is all about.
But we’re not shoving keywords in there, oh no no, please no. Alt text should accurately describe what the image shows.
Here are some great examples Aime shared on Instagram:
View this post on Instagram
8. Compress your video before uploading it to your website
Compressing your video essentially strips out any data that doesn’t really need to be there, similarly to how we run our images through TinyPNG before uploading them to a website (psst, check out our 10-minute video tutorial on optimising your website photography).
You can use various video compression engines. Studio Cotton technical director Alex says that there’s no easy one-size-fits-all for video compression, as it’s not as easy as compressing images. A quick Google search will come up with a bunch of options.
9. Use as few videos as possible on the same page
Aime is a one-video-per-page kind of gal, because having video after video after video all loading at the same time causes the emphasis of the moving pictures to be lost. The video is there to get attention, and if everything’s getting your attention, nothing really gets your attention – it’s too busy.
Also, as I’ve mentioned a fair few times already, videos are big file sizes, and if you’re gonna have big files on your website, have one big file, as opposed to 10 big files.
10. Use the slowest video possible on your website
Sometimes video clips move so quickly that it’s a little bit dizzying, and can be as overwhelming as the multiple videos I just mentioned.
In this blog post, we’re talking about using B-roll, background video, and moving images, so think small, slow movement. And if you don’t have any slow-mo videos, a lot of video editing tools will let you slow the speed of your video down – easy peasy.
11. Use landscape/horizontal video – probably not your old TikToks!
You might’ve posted a really lovely Instagram Reel that your audience loved and meets a lot of the criteria for using on a website, buuuuut a lot of social media content is shot in portrait (or “vertically”) to fill the screen of a phone, and we want horizontal images and video for a website.
And it’s not worth bodging it and try to make the vertical video horizontal, as it will likely end up looking poor quality.
Video on a website can potentially slow down the loading speed, so you need to make sure the video is worth it – how subtle is the movement? Is it better than a still image? Does it add something? What’s the payoff?
As you can see, there are so many ways to make video content work on a website – you’ve just got to keep that file size down, and make sure it’s worth using over a still image. You’ve got this!
If you’d like even more bitesize small business advice and website help, make sure to follow @studio.cotton on Instagram, and bookmark the Studio Cotton blog.
