What is the title and description for in the head of a web page

Hey there, this video we're going to learn what the Title is, in your Head Tag, and we're going to look at what a Description is. The very short version is, in Google search results, that is the title, that is the description. We need to add it to every page. Let's jump in now, I'll show you how to add it, what the pros and cons, what you should do, shouldn't do. Let's get started. 

All right, so let's start with the Title Tag. So this gets added to the top of every page, in the head. Ours got added there automatically by VS code. So what is it? It is a way to describe what's on the page. So this word ‘document’ here is just a placeholder. You can type anything in here. You'll notice though, it's not really code language, you can write ampersands, and you can write, brackets, and all sorts of things. Could be anything you want to write in here. You don't want it to just be anything. Let's say, this is one of, kind of thought that really describes this page. It's 'Learning HTML description and title tags'. That's going to really describe the page I'm trying to build here. 

Now if I save it and I go out to Chrome let's see where it appears. So, Chrome, there's the document that I'm working on. You can see the word 'document' there. That was from earlier on, before we've replaced it. If we hit 'Refresh', you can see, that's where it kind of ends up, that's your Title Tag. It ends up in the tab, but that's not that exciting, right? 

What's really important is, where that gets used by Google, and its search results. Remember, we did this search earlier on for underlining in HTML. We did that search. See these chunks of blue text here. These chunks of blue text are the Title Tags. So whatever you write in there will appear in this little list. So you can imagine, if you lift it as document, first of all the word, document, Google's just not going to list your page, because it's too vague, and there's probably a million pages online with the heading Document. So you need to make it unique for every page, which is a bit of a pain. 

So if you've got 20 pages on your website, you need 20 different Title Tags for each page. And it needs to really describe what's in that page. It's about 50 characters. You can see, some of them get a little bit longer, some of them are shorter, but be really concise and exact about what's in the page. Don't call it, like Home page. If it was me, for my site, mine is called 'Web Design Tutorials by Daniel Scott'. Would be a good Home page Title Tag for me. So that's the Title Tag. 

The other tag you should add, and it's not there by default, and very common, just underneath, is adding the description. So what is the description, before we make it, it's this chunk. That there is the title, that there is just your website address. This thing here, you have control over. You can tell Google what to put in this description. Sometimes it ignores it but most of the time it won't, it will list it here. This is a bit more marketing than it is--

Like this one here, be really concise, really good keywords that really describe what you're doing. Down here is kind of like, we all know it, right, when we're doing a result, that we search, we check that to make sure you're kind of in the right ballpark. Then you use this just to confirm that you are, you know, you get more into the details, and just kind of-- just checking you're in the right sort of zone. This is where it's more marketing than it is, let's say, coding. 

So down in here let's add the Meta Description. By default it's not in there, because you can't survive without a title, but you can survive without a description, but in my opinion you should definitely add it. This is where it's kind of some ugly syntax, but you type it up once with me now, and later on you can just come back and copy and paste this one. So it's called a Meta name. You need to add all that syntax. I'm just using the shortcuts that appear, via VS code, but you need name, equals, and you need the quote marks. And inside of here, this one's called Description. It needs to be spelled exactly like that. And we need the name as description. 

The content is going to be what you want that description to be. So this is where you get to put-- so in here you want about 100, between 120 characters, or 150 characters. So 120 is what generally will appear in mobile results, and 150 on desktop. You can see here, this one here got given quite a big chunk, whereas this one got cut off quite small, so this one is going to go really small. 

Meta Description, sometimes as well, doesn't matter how long you make it, Google will cut it off. So make sure all your good stuff is at the beginning of that paragraph. Just make it one, and make it about 120 characters. Now the one thing for this is, it kind of brings up a good point. Can you see this little-- this guy's gone red. If I save this, and let's view the page, let's refresh it. It's gone a bit crazy, it's like, hmm, what? That was in the Head tag, why is it displaying down here in the body? It's because we forgot to close out this Meta description tag. I say we, me. 

So it has an opening there, and can you see, all of them have this closing angle brackets. So at the end here, closing angle brackets, you'll see the red disappears, and back here, 'Refresh'. Oh, it's back to normal. So if you ever have red stuff, bad. Often you'll notice the difference when you get into previewing in Chrome, it will kind of show you, everything will go haywire. 

All right, that is the Meta Title. Meta description, copy and paste that into a notepad, so you've got it handy for when you're doing it next time. So you don't have to type it out every time. Really essential to pages. Let's get on to the next video.