YouTube video embeds are great for SEO
SEO = Search Engine Optimisation
Why? You might be wondering. Well, let me explain! You write a blog post, you wait and hope it gets a great Google ranking on page one, it doesn’t happen because it’s a competitive niche, so what to do? Create a video to supplement your blog!
Playing this video loads a YouTube embed in privacy-enhanced mode.
This technique works towards better SEO results three-fold:
- Video might keep people on your web page longer while they watch, this can be a positive indicator to Google that the result matched their query really well.
- An embedded YouTube video gives you not one but TWO chances to appear in video search results, the first, your blog post appearing under video search results within Google, and again in the same place but linking back to the YouTube page.
- Sometimes Google might include a video thumbnail in the main results page, which could give you a better click through rate than your competition, another great indicator to Google to continue returning your page as a result for users.
First video result linking to website blog article:
First place page one of Google video SERP (Search engine result page)
Second video result linking to YouTube video page:
First place page two of Google video SERP
Use lazy loading on YouTube video embed for speed
Great you might think! You fly off to YouTube, upload a video to supplement your blog, and embed it with their embed code generator. Sorry to do this to you but… now try running your web page through PageSpeed Insights. See that poor pagespeed result? That’s being caused by your video embed code.
But Hilary, you cry! You told me to embed video but I know Google doesn’t like slow web pages what gives?? Well. I have a solution. It’s known as lazy loading, you can use it for images too but today I will direct you towards the code you need to implement it for video.
Codepen lazy load video code: How to “Lazy Load” Embedded YouTube Videos
Use YouTube nocookie domain for lazy loading with enhanced privacy
You can adapt your preferred embed code to use the nocookie YouTube supplied method for enhanced user privacy. So instead of https://www.youtube.com/embed/ you would swap in https://www.youtube-nocookie.com/embed/ instead.
How to generate video schema for YouTube embed
By inserting video schema:
Videos can appear in Google Search results, video search results, Google Images, and Google Discover.
Source: https://developers.google.com
Sample HTML microdata code for YouTube video schema:
The code I’ve included below, also incorporates my HTML to allow for lazy loading the video.
<div class="youtube" data-embed="zc4MMSvDH10" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="PT27S" />
<meta itemprop="uploadDate" content="2021-05-08T22:59:42Z"/>
<meta itemprop="thumbnailUrl" content="https://i.ytimg.com/vi/zc4MMSvDH10/hqdefault.jpg" />
<meta itemprop="embedUrl" content="https://www.youtube-nocookie.com/embed/zc4MMSvDH10" />
<div class="play-button"></div>
<meta itemprop="name" content="What is bespoke web design?" />
<meta itemprop="description" content="Bespoke web design is a term I’ve often used, a service I provide, but let’s define it! The word bespoke in its historical usage refers to custom made tailoring, such as a suit, or a jacket, with the tailor referred to as a ‘bespoke tailor’. But when we apply the word bespoke to web design, what do we mean?Read the article at https://www.proximowebdesign.ie/blog/what-is-bespoke-web-design" />
</div>You can also use JSON code in the head of your website to achieve this. JSON is a preferred solution for many, however whichever method suits you, Google will recognise either one.
Sample JSON code for YouTube video schema:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "VideoObject",
"name": "What is bespoke web design?",
"description": "Bespoke web design is a term I’ve often used, a service I provide, but let’s define it! The word bespoke in its historical usage refers to custom made tailoring, such as a suit, or a jacket, with the tailor referred to as a ‘bespoke tailor’. But when we apply the word bespoke to web design, what do we mean? Read the article at https://www.proximowebdesign.ie/blog/what-is-bespoke-web-design",
"thumbnailUrl": "https://i.ytimg.com/vi/zc4MMSvDH10/default.jpg",
"uploadDate": "2021-05-08T22:59:42Z",
"duration": "PT27S",
"embedUrl": "https://www.youtube-nocookie.com/embed/zc4MMSvDH10"
}
</script>How I generate YouTube Schema for Textpattern or HTML
I have created a dashboard for running only on my local server, and I would truly encourage those of you out there with HTML/CSS/JS to do the same. It’s well worth the investment of time, there are APIs not only for YouTube (which is so handy for generating schema and lazy loading friendly markup), but also for a multitude of other SEO tools, like the W3C Validator, Google PageSpeed Insights and more.
Dashboard screenshot generating schema with YouTube API
I make use of a form within Textpattern to reference my generated code, this means if I want to blanket update of schema or classes for the multiple embedded videos throughout my site I have that option. This is achieved by the use of a Textpattern shortcode which then references a Textpattern form.
Theres great info here from Hubspot on how to get a YouTube API key along with great info on Wordpress plugins to go with your video embed plan if that’s your CMS of choice!
Make a start on creating an API request and seeing the retrieved data using JavaScript: https://developers.google.com/youtube/v3/quickstart/js
I like this code snippet using JQuery and the YouTube API v3 on StackOverflow for it’s simplicity, and you can easily write output code into a textarea, just edit the code to include for all of the variables you need like title, description, length etc: https://stackoverflow.com/a/32866645
Make sure your new YouTube embed is mobile-friendly
You might find the css code below handy, it’s what I use to make sure my videos don’t break the width of my page on mobile.
.youtube {
background-color: #000;
color: #fff;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}You can check out my video embedded above to see how this works. With mobile friendliness being incredibly important to users, it goes to follow it’s then important for Google too.
Your YouTube video embed checklist
- My YouTube video embed is privacy enabled, ie. using the youtube-nocookie embed url.
- My YouTube video is lazy loading and having the minimum effect on Google PageSpeed Insights results.
- My YouTube video embed has JSON or HTML Microdata video schema which better helps Google understand my content, and makes me eligible for special placements in SERPs.
Test rich results for video schema
My favourite tool is Google Search Console, and yet again here it doesn’t let us down. Once Googlebot visits your website and begins to recognise your video schema markup, you’ll begin to see it appear directly inside Google Search Console which is really satisfying.
Video Schema Pages in Google Search Console:
Video Schema Valid in Google Search Console:
You can also manually run your page through the Rich Results Test and see if the schema is being correctly picked up.
You now know how to embed YouTube videos the right way!
Congratulations for making it to the end of this blog. Appreciate you. I know it can be really hard to stay on top of these requirements so please do drop me a message or a tweet anytime and if I can help I certainly will! If you implement any of this advice I’d love to hear about it. I incorporate this technique as part of my own professional SEO services to great effect.
Video embed schema results
Check this out. Below you can see screenshots from this exact blog post, showing all of the different ways video can show up for you in search engine result pages.
