Implementing Video With Search In Mind

As part of ‘Why You Should Be F***ing With Video’ at Leeds Digital Festival 2018, our CTO, Jamie, shares some insights into how to implement video with search in mind. He touches on the different ways to host your video, how to optimise your video to rank better in SERPs, and more…

See below for a full video transcription.

 

VIDEO TRANSCRIPTION:

Jamie: I’m going to talk about how to implement video on your website and then do it with search in mind, too. So, the last thing you want to do is implement a video without playing by Google’s rules, basically, because you want maximum exposure from this kind of stuff. So, Scott’s told you all the stuff to buy, Lee’s told you all the cool facts, and the bigger picture about video, and yeah… I’m going to jump straight into some technical stuff. Hopefully, it won’t be too boring. Yeah, I’ve got slides, unlike Scott, but here you go. 

There’s one big question, basically, with implementing video on your website. One which I’m going to call self-hosted, which is basically meaning HTML5 video, and the other one, which I’m going to get onto in a sec, is third-party hosting, so using a platform like YouTube and any other alternatives like that.

So, we’re going to talk about self-hosted first. So, there’s a few key points of why you’d want to go down the self-hosted route, and number one would be better compatibility for things like autoplay. So, this is something that clients are after all the time now. So, when you’re on the website they want that big, striking video they’ve paid a lot of money for to start playing instantly. So, this is something that a self-hosted HTML5 video is much better suited to. You might have problems with cross-device compatibility, trying to get things to autoplay when you’re using a third-party platform like YouTube. So, you might have that option there, but you find nowadays that iOS, Android, Windows phone, etc. are really picky about which videos they autoplay, and adhering by best practice in order to allow that. So, this is something where you get that fine-grain control to allow stuff like that, which is really important for a lot of client’s websites.

Second one’s no lock-in. So, if you’re self-hosting your videos, you can move them wherever you want. So, you can host them with Amazon, you can host them with Microsoft, you can host them with another CDN, MaxCDN. There’s loads that will host your videos for you and serve them, so you can literally swap out the file sources and then you’re away. You can move the back end wherever you want. This is difference of having a third-party because, for example, if you’re with YouTube, you have all your videos on there, and the next week you want to swap to Vimeo, for example, you’re going to have a hard time. So, you have to reimplement it, so it might be an iframe, might be a JavaScript widget. It might break the look and feel of your website. You might lose all your analytics, so all your video views. You might lose all your followers from that platform. So, there’s a few things to consider there in terms of picking the right platform. 

No dependencies. This is similar to lock-in. If you went with YouTube, for example, what’s to say that in a year’s time, after you’ve built your following on YouTube, that they don’t just shove really extended ads on all the videos and then charge you to get rid of them? And then, obviously, you have got no choice to either adhere to that or move, and then you come back to a lock-in problem. So, YouTube have done this recently, which Lee and probably Chris might touch on in terms of shoving ads at the start of your videos. So, you probably noticed it in the last year, you’ve got to sit through, like, a five-second clip, so that could get worse. No one really knows. 

Much easier for developers and modern browsers. Similar to compatibility for autoplay. So, if a client asks you to do something really snazzy on the video, say they want it to whiz in from the side or they want to overlay some stuff on it, or you want to jump to a specific section of it, or you want to do something really cool like overlay it and green screen it onto something else, you’re going to have a hard time with a third-party provider that’s got an iframe tag, for example. It’s much easier with a HTML5 video tag.

And that also links in to that it’s better for technical SEO. So, once you get into the nitty gritty of video and you’ve invested a lot of money in it, you might want things like subtitles which might be in 10 different languages, and you might want to output them in a specific way that might adhere to Google or another search engine. So, as soon as you start getting into the nitty gritty with those things on third-party platforms like YouTube or Vimeo, they could just put it in the enterprise plan, for example, and start charging you a monthly fee, whereas if you’re on HTML5 video and you’re self-hosting it, you can do what you want. So, it’s much better for adherence on technical SEO stuff, and this is changing daily as well, so they’ll bring out new technical SEO things that Lee and other technical SEO guys will ask the developers to put in. It’s much easier if you’ve got that fine-grain control, so that’s really important.

Just a quick example of what I mean by HTML5 video. So, this is something we’ve done for a client. So, I was talking about making it easier for developers who wanted to do snazzy things, so we’re basically overlaying the entire nav onto the video. You’ve got buttons, call to actions on the video. You’ve got a big sort of translucent overlay on the video sort of playing, it’s looping. And then all these things, if you were to ask someone like me to put this on with YouTube, you’d have a hard time, basically, because YouTube don’t offer the flexibility to allow developers to do this easily, and do it by allowing device compatibility, as well. So, yeah. You’ll have a much easier time doing this if you’re self-hosting it, your developers will. 

So, hosted by a third party. This is like putting it on YouTube. This is the easy route. So, it’s much easier to just grab a tag off YouTube. They’ll offer it for you if you just click Embed. They’ll give you an iframe tag. Stick that on your site and you’re done. So, if you’re not a techie and you don’t want to get a developer involved, then this is the easy route, a really quick and fast way to get a video on your site. 

One of the key points, there are no bandwidth costs. So, if you’re self-hosting these files, you’re going to have to put them somewhere. If you put them somewhere that’s you’re not in charge of, then you’re going to have to pay for it. With YouTube, you can serve as much video as you want. They’re never going to charge you. They’ll charge you for enterprise-level features, same with other platforms.

Better discoverability. So, as soon as you put your stuff on YouTube, everyone can see it. So, you’ve got your channel, you can make playlists, etc, etc. This is really important if you’re a small business getting started and you want to get your videos in front of everyone. 

Easier to set up advanced stuff. So, live-streaming is something that we’re doing today, and that’s something that if you wanted to go down the self-hosted route, you’re going to have a really hard time setting that up, so you’re much better off just going with YouTube for that kind of stuff, or Twitch, or one of the other ones that Lee pointed out.

Transcoding. So, if you’re hosting it yourself, you’re likely going to want to transcode it into the best format. So, there’s multiple ones that I’ll get onto in a sec, but basically, if you’re on a third party, you just stick your file up there and they’ll take care of a lot of stuff, so that’s much easier for non-techies. 

And then, pricing. So, this is something that I touched on a minute ago. So, as soon as you start getting into…say you want to brand the little player. YouTube don’t really want you to do that. They want their branding on there. So obviously, they’re offering their service for free so they want something back. So, as soon as you’ve got HTML5 video rather than this, or a self-host, as I keep calling it, then you can have these enterprise features. You just got to basically get the developer to put it in. 

And this is a quick example of a third-party-hosted video, so it’s just a YouTube embed. So, they’ll give you the code for this. It’s just an iframe, you just stick it in your site and it’s done, styled. Controls work, and away you go. Dead easy. 

Next bit. So, this isn’t really a big consideration for third parties. Like I say, you’ll just save your video, put it up, and then the third party will take care of it all. So, this is just more to do with self-hosting it. So, you got a few different formats. So, mp4 is probably the most common, but you got a few others, like webm. So, webm is Google’s own container. So, it’s totally royalty-free and it’s open source, and obviously, Google, considering it’s theirs, like to push the new features into Chrome a lot faster with webm. So, mp4 tends to lag behind if you want cool stuff like green screen or anything like that. 

Resolution. If you’re serving the files yourself, don’t bother with 4K, because it’s going to take forever to download, and people don’t have high res enough screens to view it most of the time, especially on mobile, and especially when dealing with mobile networks they don’t want that big file. So, generally, we just stick to 720p files on websites. With YouTube, like I said, you do a higher resolution and the then the device can pick or the user can pick. In terms of file size, so if you’re autoplaying, you’ve got to have it muted, so you may as well get rid of the audio track straight away. So, this is something you’d take straight out and you’d reduce that file size immediately. So, that’s a consideration that you’re probably going to want to take into account if you wanted to do autoplay.

And then, tooling. So, there’s numerous ways of converting your files, transcoding them, turning down the resolution, etc. I’m just going to click through a few. First one’s pretty scary. So, first one is ffmpeg. It’s just basically your command line program. You’ll find a lot of the programs that have user interfaces are built on top of this technology. 

So, this basically lets you do anything you want. So, any codex, containers, ffmpeg can do it as long as you know the commands. So, you can Google around it, but a lot of people don’t really want to get stuck into this. It’s a bit of a minefield. But essentially, this is what a lot of things are built on top of, including HandBrake, which is a really popular cross-platform piece of software, totally free. This lets you transcode, you can pick your resolution, your frames per second, your codex, your audio track. You can do subtitles, you can do chapters, everything in here. So, this is a really cool piece of software. 

If you don’t want to do any of that and you’re totally averse to being a techie, then you can use some of these online things. So, I stick stuff in this quite often. It’s pretty easy. But you’ve got to wait for it to upload and download, because it’s obviously on a server somewhere, and you don’t know what they’re doing with your files, so if it’s a commercial thing, or you’re on NDA or whatever, you shouldn’t be using something like this, you need to do it yourself and not send it to this dodgy company who no one knows who they are. But each to their own. Pick what you want. Pick what you find easiest. 

Hosting your files. So, like I said, with self-hosted, you’ve got to host it, so it’s up to you where you put it. We’re big advocates of Amazon’s AWS service, and they provide multiple different services, such as S3 and CloudFront to help you with the stuff like this. So, we’re going back to Lee mentioning Twitch, which is a huge, huge service, streaming God knows how many videos at once. That’s all built on top of Amazon’s system, so they’re using these same technologies, and you can use these, as well, for cheap, which is amazing. So, don’t just stick it in the web route of your website, especially if you have a cheap provider like GoDaddy, or 123 Reg, or whatever, because they’ll probably charge you bandwidth per megabyte or per gigabyte. So, if you’re streaming loads of videos and you’ve not got a CDN between the user and your website, then everyone will be streaming directly from your server and it’ll cost you a lot of money. 

Let’s put that into comparison. We serve about 200 gigabytes a month through that website I showed you right at the start, and it cost us about 15 quid a month. Now, if that was with GoDaddy or something like that, it’d be a lot more money than that, I’ll put it that way. And it’s dead easy to set up. Looks a bit scary at first, but there’s loads of great tutorials about this online. But basically, you’ve always got to use a CDN. Don’t ever put videos on your site directly, because you’ll pay for it and you won’t like it.

Third parties. So, YouTube’s the go-to one. Everyone’s heard of YouTube. Everyone recognizes that little play button with the red background. It’s pretty common, though, so you tend to find big enterprise sites that try to show off their video work, for example, or they’ve paid for TV-level commercials. Sometimes, they’ll come off YouTube and they’ll self-host or they’ll go on a niche platform. So, there’s a couple of niche ones listed there. And that’s just because YouTube’s a bit common now. It seems so accessible that it almost dilutes your brand, so that’s where these other ones come into play. 

So, like Vimeo for example. Vimeo’s great with indie filmmakers, people that want it to look a bit different and you don’t want to look like you just stuck it on YouTube and you’ve done it on your phone. You’ve sort of put a bit more effort into it. And they also offer pro features that are quite affordable, so you can do things like take the branding off the little video player. Or you can change the colours of it. 

And then Wistia, which is more of a sort of marketing-focused one. So, their USP, supposedly, is that they automate loads of SEO stuff, the technical SEO stuff. So, you don’t know how true that is because it’s in the little iframe, but supposedly they inject stuff into your header of your website to help with your SEO in terms of the videos that are embedded on the page. So, how well that works is something that you’d have to test, really. It’s not something that’s cut and dry. But that’s their angle on flogging their video player, similar to Vimeo in terms of their enterprise feature’s quite cheap. And again, lets you take the branding off, lets you change the colours, so if you’re really protective about your website, and your colour scheme, and your brand guidelines, then you probably can’t go with YouTube, or you’re going to get the big red Play button on the middle of it and it’ll look all common.

And my last bit…oh, well, a couple more bits. Playing nice with SEO. So, the whole thing here is making sure that you’ve ticked all your technical SEO boxes. So, like I said, if you put it on a third-party, say you picked Vimeo for example, you’ve immediately got a bit of a problem there because Google own YouTube, so Google are always going to put YouTube stuff or preference towards YouTube as a platform rather than a third-party host that they don’t care about. So, there’s probably some sort of law there that they wasn’t allowed to do that but they’ll find a loophole like they do. So, yeah. 

And if you want to do stuff like I said right back at the start, like you’ve got subtitles in 10 different languages, for example, you’re going to have a problem there because YouTube might not even support those features from knowledge, and if they do, it might be a paid plan or they might move into a paid plan later. And then, for example, if you’ve got a CMS and you want to upload these videos somewhere. You might want the CMS to also host all the transcriptions and all the subtitles, but you’re probably going to have a very big problem doing that if you want to use a third party. Whereas if you’ve got it all self-hosted, you can build that code and you can pull from your CMS, you can use any translation tool that you like. It’s all up to you. 

Always have transcriptions available. This is probably the biggest thing. So, search engines can’t index video themselves. They need the words reading out to them. I mean, best case, let’s say Google decides to try transcoding the videos real-time and ranking that content, probably still going to have a hard time with my accent or anyone else’s, so. 

And that’s…similar point to the third on there, metadata. So, anything you can provide in the tag, or anything that a third party can provide, the more the better. The same with most things on the web now. The more metadata you can provide, whether it’s rich snippets, event data, head meta tags, anything like that. The more you can provide the better, and this applies to video just as much as anything else because there’s so much content there. You’ve got the audio track, the video track, transcriptions in five languages, a title, placeholder image. There’s tons of things you can add to these bits of content and it’ll just make search engines love it. 

Subtitles, always useful. Again, this is another thing going back to self-hosted or third-party. If you’ve got subtitles for your video and you’ve gone to that length of transcribing it and then setting up which time ranges they apply to, then you’re probably going to make a bit of a song and dance about it. So, you’re probably going to want to have it underneath. You might want it scrolling, you might want it to appear, and you lose that flexibility with a third party. You might be able to pay a bit more, like I said, and go on an enterprise plan and do that, but if you’re in control of the code and it’s on your website, you’re going to have a much easier time doing cool stuff like that.

Fallback content. So, this is really important now. A lot of people on mobile networks, you don’t know if they’re going to be able to stream your video, so with the HTML5 video tag, you’ve got the…you can do whatever you want. So, you can detect if they’ve got the internet signal or a strong enough internet connection, and if they haven’t you can show them a little GIF preview, like you can just show them an image, and that won’t screw up the layout of your website. Whereas if you’re using YouTube, or Vimeo, or Wistia, or any other platforms, you might find that you’re struggling to use fallbacks in a decent way without sort of just putting the iframe there and seeing if it fails, which is a bit more of a time-consuming thing for the device to do.

And as Lee says with the multi-channel stuff, best practice, you’ve got a cool video, don’t just dump it out in a video and that’s it on the webpage. Always put a transcription with it. So, you definitely want to get your stuff transcribed. We use a service called Speechpad, it’s dead cheap. You just send them your video, send them your YouTube link, and they’ll do it for, like, a dollar or something. Or a dollar a minute, and they’ll just transcribe it all. They’re pretty good at understanding Yorkshire accents. And you just plug that back into a blog post. You got your video at the top, and if you don’t want to watch the video, if you’re in a library or whatever, you just read the piece instead. It’s much easier for search engines to index that content, as well, which is one of the reasons why our keyword rankings have gone up because we’ve got so much content now from all this video stuff we’ve had transcribed.

Just check my notes… I think that’s it. I just got a quick couple of screenshots about what we’re discussing. So, this is just a Google search of “flaunt digital studios.” You can see there that video thumbnail’s pulled in, so that’s good use of technical SEO in terms of embedding a video in your site. And that’s actually a YouTube embed, that’s not a self-hosted HTML5 video embed. So, that’s actually worked quite well and I was quite surprised by that. I was under the impression that we might struggle to get a picture thumbnail into the SERP with a YouTube embed, but that just goes to show that you can tick some technical SEO boxes or some basic ones quite easily with these third parties. So it’s not the be-all end-all that if you want to comply with more technical SEO things that you need to have an embedded video, HTML5 video. You can use third-parties and do it. I’d love to run a test on that and swap that to Vimeo and see if it still came up. Because, obviously, like I said, Google owns YouTube, so Google are always going to want to put their YouTube stuff in there, but they may not want to put their competitors’ stuff in there, just to make people switch.

Audience: Is there anything against using, say, Vimeo on your own site, but just uploading a duplicate to YouTube for that visibility, then?

Jamie: Yeah, but then what you’re going to do is… You’ve got a few little problems there. So, if you’ve got subtitles and transcriptions that we keep talking about, you’ve got to manage them in two places. All your viewer figures and your viewership is going to be in two places. You’ve got to make a choice about which one you embed on your site, or whether you do both, or whether you do two links. But yeah, there’s no reason why you can’t do that. Is there anything SEO-wise? It wouldn’t be a duplicate content issue there, would there? 

Lee: No. 

Jamie: Yeah. It’s a good idea. You’d have to upload it two places, manage two channels, manage two sets of transcriptions. Other than that… 
Audience: Do YouTube not automatically transcribe?

Jamie: Yeah, but it’s pretty ropy from what I’ve seen. Yeah. You’d have to be speaking the Queen’s English, I think, and very slowly, unlike me. But yeah. If you’re up for the task of managing more than one place at once, then yeah, you can do that.

Yeah, I don’t think we bother with Vimeo and the other ones. It depends on what type of features you’re after, as well. So, Vimeo does some other stuff slightly different to YouTube, and some of the enterprisey-level stuff might be easier or slightly cheaper. But YouTube obviously got a much, much bigger userbase, totally dwarfs the other ones. So, it depends. Yeah. Admin for managing multiple channels would be the main drawback, I think.

And this is an example of one of our pieces of video content with a transcription underneath. So, it’s dead simple. You just put your YouTube embed up at the top. We’ve got the common red YouTube icon. It isn’t a bad thing, really, because we don’t mind. We like YouTube. And your short intro, and then the video transcription. Obviously, we’ve got multiple people talking in that video, so you pass that to Speechpad, am I right?

Lee: Yeah.

Jamie: And they’ll just put the names next to the right people, which is pretty useful, and then that can all get indexed just like a normal blog post, saves you writing it all out. Dead easy. For the cost, it’s worth it to make your content go a bit further. That’s pretty much it, I think. Yep. So, now we’ve gone through the gear. Lee’s gone through all the video overview and video as a channel. I’ve told you how to implement it, roughly, and now Chris is going to tell you how to promote it. 

Audience: Can I ask a question?

Jamie: Of course you can, yeah.

Audience: We produce HTML5 to play videos. Did you come across platforms and browsers which were really picky about making it work?

Jamie: Not modern browsers, no. You might get problems with Internet Explorer 8 or something from the Stone Age. But yeah, the modern stuff’s great. iOS is great now, Android’s great. Any of the modern Microsoft browsers are great. Edge, the latest IE11 I believe is fine with HTML5 video. Some of the more advanced features it might struggle to show you, so if you’re making use of an advanced feature in webm that I touched on like green screening, you’re probably not going to be able to do that. You’re probably going to need the latest or a recent version of Chrome to do stuff like that, but it should fallback. 

And that’s one of the great things of HTML5 is you can supply multiple formats. So, if you’re using webm, for example, you can just supply the ogg file, the mp4 file, and supply them in order of preference, and then it’s up to the browser to pick it. Which is great, because say you put it on YouTube, for example. Those formats may not be served to the browser in that manner, so the browser or the device might not be able to intelligently select the one that it wants to use. So, like Safari, for example, is probably going to pick the .ogg file, whereas Chrome will pretty much always pick the webm file, and then IE or Firefox might pick the mp4 file, whichever one it likes best, so it’s up to the device to figure out, which is the best way, really.