Master HTML 5 #11: HTML Meta Tags

Learn the essential meta tags for HTML5 documents: charset, description (150-160 characters), keywords (3-5 terms), author, and optional refresh tag. Meta tags matter less for SEO than they used to, but these belong in your document's head.
Chapters
This video is going to be about the metadata and the meta tags located in the head section in your HTML web page. Now meta tags are not used as heavily as they used to be back whenever the search engines relied a lot on the stuff in the metadata. Now there are, however, a few that I would suggest to include in your web page because they are used by the search engines and how your site info is displayed in the search results and by some browsers in how they load or reload your web pages. Now the meta tags go in between the opening and the closing head tag like the title tags do. Now here are a few meta tags that I think you should include in your web page markup: description, keywords, author, and charset. And while I do not— and while I do not use this one, some people I spoke to say that if there are elements on the web page like ads for example that change when the page is refreshed, then adding the meta tag that auto-refreshes the page might come in handy. And I'll cover that here in just a second as well. So I've got my Komodo HTML editor open and I want to go up here and just below the title tag— it doesn't matter if it's below or above— I'm going to go ahead and enter in the charset tag. And this is a little bit different in HTML5 versus HTML 4.01, and this being an HTML 5 page as shown by the declaration here, we need to use this form for the charset. That's the opening bracket meta space and then the charset equals attribute with UTF minus eight as the value. And again, if you're looking at the code of an HTML four page, then it would look a little bit different. Actually, there's a lot more to it. So I'm going to go and hit the return key, and this next one is the meta description tag, and you've got the opening bracket meta space and the name. Name equals attribute with the description as the value, and you've got the content equals attribute with the actual description of that web page being the value here. And it's this information that's going to show up in the search engine results next to your listing. And you've got a limit somewhere around 150, maybe even 160 characters— not words, but characters. So you can have a larger description, but only that amount will show up in the description area. This is the description area that I'm talking about. So if this description here went on to like 250 characters, well, you'd only have about 150 or 160 characters showing up here and maybe a dot dot dot at the end. So it's a good idea to get as much of your information out in those first 150 to 160 characters that will best describe your webpage. Now I'm no expert on search engine optimization, but I would go ahead and consider using some pretty powerful keywords in this description area that are also located on your webpage. Speaking of which, that brings me to my next meta tag, and that's the keywords. Oh, and by the way, don't forget to close this out. This is one of those single tags that do not require an additional closing tag. In other words, this is not an actual closing tag for the meta tags. It's all contained within the same tag here, a single tag, but you just add a space, forward slash, and then the closing bracket. Let's go ahead and add in that next meta tag. And again, this one is our keywords meta tag. And just like before, we've got the opening bracket, meta, space, then the name equals attribute, keywords being the value, space. And then like the description, we've got the content equals attribute, and then inside the double quotes here we've got different keywords. Now of course this here is just a description of this tag, but the keywords are separated by comma and a space. And like the description, there is a limit here, so I would make this very limited. As a matter of fact, I'd probably keep this to 3 to 5 keywords tops. Now since this is on meta tags and not search engine optimization I'm not going to go into a great deal of description on what keywords are or what the description should be, but just know though that you should not go overboard with the amount of keywords you have listed here. Now another one that I don't use that much, but I have seen that it is a good idea to include, and that's the author meta tag. And the last one here I do not use because I frankly don't find the need for it, but as I said, some folks say that it works pretty good, and that's the refresh tag. And that's the opening bracket meta space http-equiv equals, and then you've got the double quotes with the word refresh in the middle, and then you got the space, and then the content equals attribute 30. This is the number of seconds, and this is the number of seconds that the page will remain before it automatically refreshes. So if you want your page to refresh every 15 seconds or every 45 seconds, then adjust this accordingly. Let me just go ahead and make this 5 seconds just for the sake of testing it. Let me go ahead and save this and let's open this in, oh, let's say the Chrome browser and see if this refreshes here. Yep, if you blinked you missed it. Every 5 seconds. Okay, so that does work. And that's going to bring to an end this video on meta tags. Thanks for watching and you have a great day.










