14.3 Custom title and meta description - Video Tutorials & Practice Problems

<v ->There's one final detail</v> we'd like to add to our site, which is some extra information in the head of the site, to identify what the site is about. So in particular we're going to add a custom title and add some meta information that describes what each page contains. There are several reasons to do this but the most important one is search engine optimization because the web spiders that go around and crawl the web will look at that information and use it to figure out what your page is about. And so let's take a look at an example of that. We search for Learn Enough at Google. You can see that there's a whole bunch of stuff here this is pretty much all us, right? Just learn enough and learn that all of these results are our sites. And if you just go down, it's pretty much all our stuff. There's an Amazon page. But this cluster here is the result of good site design in terms of title and meta tags and other aspects of the site. And in fact, this is a subject of much interest to both me and Lee. I condensed the subject of SEO into one tweet once upon a time. It's not actually possible to put it all in one tweet but you can get pretty far. So I'm gonna show you that. <v Lee>Go ahead just type it in.</v> You could always search for SEO in one tweet. <v Michael>Actually that's true.</v> Let's search the web for SEO in one tweet. Look at that. It's right here. Number two, SEO in one tweet get the title meta and heading tags, right? So the headings being things like H one and H two and really after H one and H two, it doesn't matter. <v ->So-</v> <v ->Right.</v> <v Michael>Probably after H one, it doesn't matter much</v> but so get title meta and heading tags right and then make something people want to link to. So this second one is pretty tough. That's up to you to make something that people care about enough to link to. But in this section we're gonna show you the title and meta tags. We've already got this working. So someone were to Google Code Dangerously for the site that we're on their live web. You could probably find this if you made something people want to link to. So in this section, we're gonna take care of the title and meta tags as well. And this will give us a chance to do a little bit more Jykell and specifically Liquid, because we're going to wanna customize the title and description for some of our subpages like the blog and maybe individual posts. <v Lee>Right but then also have a default one</v> for any other page that doesn't have a custom one. <v Michael>Right and in fact,</v> let's just take a look at this right now, right now you can see if we had another tab that Safari actually does show us the title of the page, test page Don't Panic. So if we look here, that's here. So what we're going to do now is change this so that we have a default, but that we can also override it if there is a custom page title. So for example, where is it? This here, this is one of the blog posts. You can see, we have a title. So we wanna set things up in the head so that we can swap in this title and include it as part of the main title. If there is one that exists. So there's a way to do that. Using what's called a conditional, this is our first example of a conditional in Liquid. <v Lee>It's kind of like the</v> for loop in that we're telling Jekyll to do something using Liquid, but in this case, instead of saying, do something for a period of time until you know, you've done it for all of the things that are on site. What we're gonna do here is say, if there is a title then use the custom title else, use the default one. So right. Michael's gonna add that. <v Michael>Yep so this is,</v> if, there's a special variable that Jekyll provides us, called page, and we can access the title of the page which is right here using page.title. So if page.title, then what we're gonna do is, include some of this, just do this here. We're gonna say page.title included with the Liquids syntax like that and then just have the vertical bar. <v Lee>And just a point here, when you add a custom title</v> it's always a good idea to keep the title of your whole site on there as well. Just because- <v ->that's why we kept this here</v> <v ->Yeah, just because you want the search engines</v> to always see certain names associated with things. So you want your site name associated with the title of like a blog post or things like that. So you don't want those to become disconnected. <v Michael>Okay so this here is Liquid.</v> This is Liquid. The rest of it is just HTML. And then we'll say else, just have the default so we can indent it to indicate structure and then. <v Lee>And if.</v> <v Michael>Yeah, so before we did this,</v> we had a list of posts for post and site. That post in this case, just limit one, other examples. Where was it, it was the blog index, right. So four posts inside that post and so on. Here as well. But then the way we ended the loop was with end four. So this is a specialized way of ending, which is and if. So we save that and go back to our main page. Nothing should change. Oh, wait, this was on the blog. So you can see it. So here's test page Don't Panic. But if I go to one of the blog posts, you can see it has the title of the post. This is especially important if you have a blog post that targets keywords that you might think people are gonna search for. So we really want that post to have the right keywords in the title. Let's give an example of just adding that to a page that doesn't have one yet. We can go to our blog index here and we can add in, say title Dangerous Blog. Actually I'm not gonna save this yet. So let's just go to the blog and see it's the generic title. So that's this right here. That's this branch of the conditional, this is the else part. And then when I save this now suddenly page.title will be non-blank. So by the way, if you're wondering about this, this is just the way Liquid handles things. So page.title is false if there isn't one defined and it's true if there is one defined. So it says if page.title, well if it's true, then it evaluates this branch and if it's false, then it evaluates the else branch. So right now it's false because there isn't a page title but once I save this, now there is one. So it should have the page specific title. So if we refresh this, there it is. Let's apply the same idea to making a custom meta tag. We've seen meta tags before. Where's the? Here it is. So, so far we've got a meta tag for the character set and then the view port for mobile. But you can also add other meta information, in this case we're gonna add a description of our site. So let's build it up the way we did before. <v Lee>Where do we put this leading?</v> <v Michael>Put it right after the title.</v> <v Lee>All right?</v> The meta tag- <v Both>Yeah.</v> <v Michael>It can pretty much go anywhere.</v> <v Lee>It can go anywhere.</v> <v Michael>It can go anywhere on the page, probably.</v> <v Lee>Right yeah.</v> <v Michael>Now it's important to understand that this title</v> which is being exposed to the user via this tab is different from the meta tag in the sense that the meta tag won't actually display. If you view the source, you'll see it, but it's not actually a sort of a user facing thing. This is purely for machines that interact with our page. Just add a meta tag and we're gonna add one called description. So name equals description, and let's give it content. And this is the kind of thing you wouldn't necessarily guess just, this is why you have a tutorial. We'll say, this is a default. This is a dangerous site. And if I save that and refresh, nothing will change. We'll just go to the homepage. So it's not visible, but if we inspect it we can see in the head here, now we've got the meta tag. And so we can do exactly the same kind of conditional acceptance, that if page.title we can add a description. So let's do that same procedure. So remember, as with this here we can add a title using just this front matter. We can also add a description. We can add anything we want, any variable. So we're gonna see if page.description, then a custom thing, and then else the default, and if, so in here we can do just the custom description. So let's copy this. Content is going to be this Liquid syntax page.description. So let's go to the blog. That's the one we're gonna customize. And let's add a description here. So if we look at the current source, we'll see that it's got the default here, but now if I refresh it I can just refresh in here. There it goes. Now it's the new description. So this is the kind of thing that's read by the web spiders that are used by search engines to figure out what a site is about. And one more thing I wanna show you which is what happens if you do something that I have often done, which is to have the wrong end. In fact, in the Ruby programming language, which is one of the languages that I use most often, you just end a conditional like this with the word end. And so this actually breaks the site. This is loading from the last version, but if you, just the last version that worked, but if you look at the log here, you can see it's got a syntax error. So it is important occasionally to look at the Jekyll server log because sometimes there are these silent errors and it can be really confusing if you wonder why isn't it working the way I expect it to. And the answer often is that there's just some syntax error. So restore it, refresh, and now it's working. So you can see that there are a whole bunch of different things you can do right Lee? There is just a bunch of different meta tags you can add to a site? <v Lee>Exactly, there's a whole set called the open graph</v> that lets you define a whole bunch of meta tags for how your site will show up when it's shared by people on like Facebook. And we actually have a link to that. All those tags work very similar to this where it's just meta, then a name and then content that goes in it. So, you know, it's, it's the kind of thing that with the little technical sophistication and Google-Fu, you can work out, it all works the same. <v Michael>Right, right.</v> So this is the basic idea. So now you know how to add front matter like this and then write a conditional. You can add everything you want to your site. This is really the low hanging fruit in terms of the title and description. I mean, honestly, the meta tags are probably less important than the title, but as you develop a site and it becomes more mature and you wanna like add all of those little details, there are extra meta tags. So it's good to know that you've got the basic technique. And then like, as Lee mentioned in the text we linked to resources for adding extra meta tags as needed. So if people start doing lots of shares on Facebook and you wanna customize how it looks then you can add extra meta tags. But this is the essential foundation to understand how to add meta tags and how to add customized information. So this is really useful and we'll be putting this to more use in future tutorials where we'll actually be doing more customization of the title tag.