Search Engine Optimisation (SEO) for Static Web Design using Hugo the Static Site Generator

1. Introduction: Hi, my name is shown and welcome to my course on search engine and a website asset optimization with the static site generator. In addition to the foundations of search engine optimization, this course also focuses on utilizing Hugo's mini powerful asset optimization features to help speed up your website and increased search engine rankings were looking at image, CSS, JavaScript, and SVG font optimization. While it's not a requirement, it's recommended that you have a basic understanding of static site generators. Before starting this course, I've left the link in the results section below. It can access my course on an introduction to both, not a requirement. It's recommended that you have a basic understanding of that excites us before starting this course. If you need it, I've left a link to my introduction. You can get a course in the resources section below. The course predicts involves fixing a website with poor Search Engine Optimization characteristics. I can't wait to see you in the course. Well, not a requirement. It's recommended that you have a basic understanding of that exciting it is before starting this course. If you need it, I've left the link to my introduction, can get a course in the resources section below. The course project involves fixing website with poor Search Engine Optimization characteristics. I can't wait to see you in the course. 2. Introduction to the project: This is a really short lesson. It's just about getting you started with the course, downloading the files and installing he guy. To get started with this course, you will need to have Node.js installed. You can get that at Node js.org. I've left the link in the resources section. Octave installed Node.js. I'll take you through the process of installing Hugo via npm. You need to download the files for this course. You can see them in the resources section under Getting Started. And then once you've opened up the falls in Visual Studio Code, I'll show you how to go through the process of installing Hugo as an NPM dependency. Once you've opened the folder in Visual Studio Code, Terminal and then new terminal and typing npm install. Once he had anti-war go through and it will download Hugo for you. The way it works. We've got a file called package.json on Jason. In that fall. You'll see under dependencies we have executive and Hugo installer. As you run npm install, those two programs will be installed there, npm packages and then the posts and scroll install script will be run. And the posts install scripts will install Hugo for you. It will install guide based on the version here in other dependencies. Now obviously version at 0.92.1, and that's the version that's currently up to date when I recorded this course. But as time goes on, you'll have to go to the GitHub page and I'll leave the link for it below in the resources section. And you'll have to put that version number individuals, Studio code. You have to leave off the V at the start. You'll see the example here in the package.json file. And if you change that version and you rerun NPM install, you'll get the newest version of Hugo installed, but you will have to make sure you update that version there. After you've run that command, you will see a node modules folder a P. Now if you look at the dot gitignore file off, put the node modules folder into Git ignore, if you do choose to upload your work to get, for example, GitHub won't be uploading that node modules folder and that does become quite large and it will fill up your GitHub allowance quite really if you do choose to commit node bundles, and for that reason, people generally don't commit them to get to GitHub or get they run the npm install command after they've downloaded the repository. For me, give me a quick rundown of how the project is set up. You'll see there's a folder called node modules, and that's where everything is downloaded via npm into the project. And left has to be full. That's not being committed to the Git repository. So that won't be installed by default. You have to take to run npm install. And then down the bottom we have our NPM script section. And that's included by default on the newer versions of visuals geocode script we have is dev, and that's for running the service. You can view the website live in the center. We have to do is hit the play button that will run. We've also got Dave preview and what that does, It shows pages which have a date in the future all have drafts, true? We didn't really use that in this course, but it's there in case you need it. They got build that builds everything in your huge, I saw it into the public folder, but it does not run it in the browser. And it will run all of the production options. For example, I've got upset there to minify. You can see they would put on minified output there for our index.html think rendered to disk. And what that does is it runs the Hugo server so you can be working in the browser. There's also saves all the files to the public folder. We can actually see what's happening in the public folder, waterway, viewing the project in the browser. Now I've got run into this div, preview and production, which mirror the first three options in the list. And we've also got npm check and that's updating your NPM dependencies as they become erudite. That's the easiest way to do it. And we've got posts installed below and that's what runs when we run npm install afterwards. Now flip to fall on Skillshare so you can download the files to get started with this course. But in addition to that, I've left the link for the GitHub repository and put the link there for the standard Lincoln, that's our master branch and that's the code to get started. You can click on the green button, you can download a zip. Or if you're more advanced, you could climb the whole repository. Now, if you're trying to get the false for different lessons, if you click on the master and left with a down arrow, you can choose a different, all the different branches. And I put 81 branch per lesson because I, for example, you need some help with next lesson, which is the head tags. You can go to the head tags branch. You can actually go through. And I've looked at the individual files here on the screen if that helps you. Otherwise, you can download a zip for all the files for that lesson. 3. HTML Head Tags: This lesson is all about HTML head tags. Some are very commonly used and understood and some are forgotten about. The first thing you to include is the character set that's used on the page. That way the browser will display the page according to the characters you've input. Utf-8 is commonly used as it gives you access to nearly every available character in the world, regardless of the language you're using, you might have multiple languages in one page. The next thing is Microsoft Edge compatibility. Now it's not strictly required, but definitely helps to have it there just in case for an older version of a browser, such as Internet Explorer or Edge, this one is really important and that's the default width and scale. And that's because we're gonna be using responsive web design for both mobile and wider desktop screens. Now, if you're using Bootstrap and we are going to be using Bootstrap for this tutorial. These three tags are provided by default in the standard template. Let's check that out now. You'll have provided links to all of these pages in the section below. And there's also section. So first off, we're looking at the Bootstrap five doctors. Importantly, if you are Googling this, you google Bootstrap five. There is version 3.4 available as well on the website and they're completely different. So you will find a link for this page. Bootstrap five, Getting Started, page introduction. If you scroll down, they've got the individual sections for their library. But if you keep scrolling down started template, you'll notice we've got the required Meta tags. They've actually left off the internet Explorer and edge one, but I've included it anyway just to be thorough. So if you were to start from scratch by copying and pasting this code of Bootstrap, you'd be pretty much ready to go. So let's now have a look at our Hugo project to build the false for our website. Now, one way to do it is if we use the build command, that will work perfectly fine, but we're going to use the Renaissance disk dave option that way. It doesn't modify the HTML. We can also view it in the browser at the same time. So then we go into the public folder and we can see all of the files for the site. Now I've actually deliberately made this site pretty much as bad as I could. It is kinda like a lot of things I have seen out there on the internet. So it is actually quite common what you're going to see. But I've tried to include as many mistakes as possible. So through this tutorial, you can go through and fix them up. You look in the public folder. This is the actual site you'd upload via FTP. I've got the index.html file. And you will see that we've got the character set, UTF-8 metatag already there. We've got the internet Explorer and edge compatibility tag there, and we've got our default view width and scale tag. So therefore already been included for you. And that's because I copied and pasted it out of the Bootstrap template. The next thing is the title. So let's go back to the presentation and have a look at how that works. We're also going to look at a web link. Every page needs a descriptive and unique title. You can include the website titles such as the business name, along with the pages actual title, e.g. the page name dash the website's name. For the homepage website. You probably don't want to put the word home in there because that isn't very descriptive or useful. You only get a certain number of characters to play with. So e.g. we might put the slogan of the company in there as well. In hugo, we can program these him loose some logic so that we can use a different title for the homepage compared to the generic page name, dash website name that we use for every other page. I'm just going to show you a quick link to a doc. You'll find the link to all these pages in the results section. Here's what Google has to say about. And obviously Google is the biggest search engine available. And Google says you need to have unique, accurate page titles and names until both users and search engines what the topic of particular pages and the title needs to be within the head element of the HTML document and into unique for each page. So let's go through now to our Hugo project and we'll see how we can fix that up. This lesson is all about HTML head tags. Some are very commonly used and understood and some are forgotten about. The first thing you need to include is the character set that's used on the page. That way the browser will display the page according to the characters you've input. Utf-8 is commonly used as it gives you access to nearly every available character in the world, regardless of the language you're using, you might have multiple languages in one page. The next thing is Microsoft Edge compatibility. Now it's not strictly required, but definitely helps to have it there just in case for an older version of a browser, such as Internet Explorer or Edge, this one is really important and that's the default width and scale. And that's because we're gonna be using responsive web design for both mobile and wider desktop screens. Now, if you're using Bootstrap and we are going to be using Bootstrap for this tutorial. These three tags are provided by default in the standard template. So let's check that out now. You'll have provided links to all of these pages in the section below. And there was also a section. First off, we're looking at the Bootstrap five doctors. Importantly, if you are Googling this, you google Bootstrap five. There is version 3.4 available as well on the website, and they are completely different. So you will find a link for this page. Bootstrap five, Getting Started, page introduction. If you scroll down, they've got the individual sections for their library. But if you keep scrolling down, is that started template. And you'll notice we've got the required Meta tags. They've actually left off. So I'm going to eat and digest. So it's a bit more organized. I'm going to put it in some double curly braces for the logic pennants. If capital is, IF is, and then capital H for home is home. And that will be true if we're on the homepage. And I'll close my curly braces. Now hit Enter, then got the title that will be displayed for the homepage. I'm then going to hit Enter a couple of times and typing. And I'm going to do else. If it's not the homepage, let's display the name of the page and the title of the website. So do that double curly braces and we do dot title with a capital T. And then we do space, dash space, and then we do our double curly braces. And we put in the title of the site from above. So it's dots site with a capital S and then dot title with a capital T. And most importantly, we must finish off this logic with an end tag. Now, there is one problem. We've put it in a Enter after the title tag, and we don't want spaces or new lines present inside our title tags. All we do with Hugo, that's really easy. We put a dash at the start and the end of every tag. Well, we don't want the spaces and new lines around to a PI. So I'll put on these three lines. Some dashes, start and the end. I'm not too worried about. I mean, it wouldn't hurt to put one at the start of that tag and the end of this tag and this data in there is what wouldn't hurt. And then we'll have a look at the output in a minute and we'll see that all those spaces, new lines have been removed. We have retained the space either side of that dash. So we'll save that. Now I know a lot of you guys are new with Hugo. So what we're gonna do now is actually set up some scripts for you already. If you click on the NPM scripts section, That's why I highly recommend Visual Studio Code. There's a dev command down here with a play button. What that does, as you can see, it runs Hugo server and it uses a setting called Disabled faster render, which means every time you make a change, it reloads the entire website. It doesn't have any case. It's also about the GC option and that's called garbage collection and it removes any unused files when you quit. Hit play on that. But watch it run through. It's pretty quick. You'll notice the build time. 139 milliseconds to build with 15 page site. It's watching for changes. It's alive development server, and we've got our address there, so control-click the address and we'll check it out. So here's the site. It's not the most complicated or beautiful Saddam Hussein. But I've tried my best to put as many problems as I can into it. So let's have a look at the output. If you look up in the bar at the top in our tabs, you'll see for the homepage of our SEO ink, the best and worst, nothing's changed there. Let's go through it, our products page or just looking at then as now it says products dash ACO ink. And that's why we've programmed that if you want to reverse that. So it's SEO ink and then products, you can just reverse that line of code we looked at, Let's have a look at the inspected and then we'll look at the source. So if we do an inspection, will close down the body and we'll open the head and look for our title. And you'll see there we've got products dash ACO ink. Now, we did try and avoid any new lines or spaces, and that isn't visible in that view, what you have to do is right-click and view page source. It does help to try and avoid those spaces or new lines because you can end up with extra spaces in there you don't want when the browser renders it. So as you can see there, there's nothing at all between the title tag and the wood products, but we have retained the space either side of the dash. There's no space at all before the title ending tag. Next thing you need to make sure you have is the page's language and this is the primary language of the page. You might have additional content on pages in different languages. But this is the language that we use for the majority of the page and it's the top of the hierarchy. It's a language that's applied to everything unless specified otherwise. Now you do have to do this in the HTML tag and that, so it's applied to the whole page. You need to use the ISO language codes. And that is, the actual language itself is in lowercase. There's an underscore, and then the regional variant is in uppercase. And the two-letter codes for each one, you can actually not worry about the variance if you want it to more generic, but generally speaking, it will have a geographical variant. Luckily, and Hugo. And obviously you could be applying this course to any static style that I make websites system you like. But luckily in hugo, we can use a parameter, a site parameter in the site configuration code language code. We can access that with the dot lang variable. So let's go ahead and let's check it out. So as usual, I've left the link to the doc and I like to link to duck so you guys can do further reading and further learning on your own. Here's what Mozilla has to say about it. They want you to set it in the HTML tag, just like I said. So it is the default for the page unless we specify that, specify otherwise and that's coming up in a further lesson. So back in Visual Studio code, we'll close our head dot HTML. We'll go back to base off dot HTML. And you'll see we've got our HTML tags, but we haven't specified the language. So we'll type in LAN G equals, and then we'll do two inverted comments there. And then we will use the double curly braces. And we'll do dot LAN G with a capital L. And we'll close that. This will apply to every single pay. So as we save that, you'll see we had an update down here. You guys picked up the update in basophil HTML. Let's go back through to the browser and we'll check it out. So to inspection and we will see that we have n dash a uni all notice the AU is in lowercase, and that's a current limitation in Hugo. Hugo does output language codes as lowercase. Let's go back kind of a quick look at the configuration Hugo. Just look at the root of the project, will see a config dot YAML at the bottom, this file before you go. But if you scroll down in the Configure, you'll see we have the language coordinates for external output. That's when you got it outputs a sitemap by default. Look at sitemaps later on in this course. And the next entry down is the default content language. And I'll set that to Australia English is that the websites that I produce given that I'm in Australia. But you can change it to whatever language you like. And that's what will appear when we output the language. The next tag we need for the head, and this is quite a commonly used one, is the Meta description tag. Every page needs a minute description tag because search engines, you've used them for search results, not only for keywords users searching for, but also when they display the search results. They commonly put that meta-description underneath the title of the website. In Hugo, it's quite easy. We can set up each pages description using front matter, and I'll show you what that means in a moment. And we're also going to set up Hugo to use a summary of the page. If a description hasn't been defined. And you can even customize that summary if you want as well. And I'll show you all that in a moment. So here's a duck from Google. They're explaining what we need to put in our description. And he's an example. When we do a search on Google, you'll see the URL of the website and you also see some breadcrumbs, which we'll get into later. You then got the title of the site and then put in the description there straight out of the metatag. So here's an example of the HTML you have to include when a metal, we've got to actually identify it as a description metatag, otherwise it won't work. And then we've got our content after that. So Google shiny where it gets placed in the search, you need to accurately summarize the page content. And it's really important that you hit important keywords when you're writing that summary. You don't just be really vague about it. You've got to put important keyword in that people go in and search for it. In a later lesson, I'll show you how you can check which keywords are trending. We're going to emphasize important parts inside that description. You have to look at what's really important about the texts and make sure you talk about it. Otherwise, people won't be able to find your website when they're doing the searching. So let's get straight into Hugo now and we'll have a go at it. So we're going to the layout. And based on that HTML just to re-orientate ourselves, just say we're looking at the head partial, which displays everything inside the head. So we're go into our partials folder and open up handled HTML. And it's pretty bad at the moment. So we'll go underneath our title tag. And we'll put in METAR. And emmet is enabled by default on Visual Studio code. That's another reason why I like brutal pseudocode. And you'll notice we've got description there, so we'll pop that one in. And then we've got to put some content in and this is where it starts to get interesting. So what we'll do, we'll put in our double curly braces and we'll pull the description out of the current page. The way you that is dot description here has this really good function built-in. It's called default. Now, if you can't find a description on the current page, what we'll do, we'll put a piping. And that's the, you do shift and it's the key above Enter, that's called a pipe. And that lets us run another command after dot description. So we're going to put it in default. Then after default we have to tell who go. Okay, So if description isn't available, what are we going to default to that summary? Now, before we talk about how we can customize the summary, we're just going to save that. We're going to run it. What I'm going to have a go at looking at how it works. But we'll save that. I've already got my server running down here. So let's go into the browser and have a look. So I'm gonna go to the products page and we're going to have a look at the Meta description tag. So we've got a bit of information on this page. Let's go up to the inspection and we'll check out the head. And you'll say meta-description is really simple in this case, it just says we stuck the following products. And the reason that it's doing that is because let's go back to the ego side. Let's go back into the content folder and then products underscore index dot MD. In the products folder, you'll see the only text for the page is we stuck the following products. That's because the rest of this page is dynamically generated based on all of the products that have been set up. This is the only texts for the actual page by default because we haven't set a description and we haven't overwritten the summary. You guys just taking the texts from the page at a maximum length and it's popping it in. So let's first look at how we can customize that by setting a description. So we told her you go to pull but description out of the page. The first thing it tries to do, so let's go and let's set that up. So all you gotta do is you go into your page here. So we're going to our front matter and the front matter exists between these three dashes. That's all the data for the page. Put in description. This is a built-in page. You're able as a custom one so we can access it just by putting dot description with a capital D. So we put a description in here and we'll say at SEO ink, we sell a variety of products for the outdoors, including mountain bikes, quad bikes, and trailers will just keep it simple for now. Just as an example, we'll save that and I'll have a look at the site. So that should be the first thing that you guys pulled out. So go do an inspection. Have looked at the head and you'll see in the description, we've got what we just put in. Let's have a look now. We're going to temporarily disable that description. We'll have a look at how we can customize the summary. Because I think summer is quite useful because it involves a lot less work. So highlight description and we'll do Control K or Command K on a Mac. And that puts a comment, a hash before it. So the summary comes out automatically from here. There's a few things you can do. You can override it with while putting in summary, but achieving the same thing. By doing that. Let's have a look at what else we can do is summary. So I'll put our description back in there. I'll save that. Were they going to navigate to our homepage? So in the content folder, go to underscore index dot MD. You'll see there's a lot more text here on the homepage. Let's first have a look at what Hugo says about summary. So I'll put this link in the resources section as with every other liquid looked at so far in this lesson. So what he does, these three things it does. The first thing it does is, is an automatic summary split. And it takes the first 70 words of your content and it puts it into the summary page variable, which is what we pull if description isn't available, we can customize a length of summary by using the summary links configuration, and I'll show you that in a moment. The next thing you can do is you can copy and paste in these Tag. Exactly. And then he'd go, we'll use everything above that as a summary. And the last thing you can do is what I already showed you and that is typed summary directly into your front metal. So let's go back through. And this one here is kinda self-explanatory. So we'll copy that. And they'll go down to our texts. And what does find a full stop or make one that will do there. And I put in the tag. And then we'll go to our homepage. And we'll say we've got our two paragraphs say Inspect. Up into our description. And you'll see it's only taken that first paragraph. And that's because I put that part in there. So that's the second method. The third method is we override it and I've just fine, I prefer to put in a description that case, but I'll just go in here and I'll type in summary. I don't think this is a good method because you end up doubling up on things that will save that. We'll get the same result. Do a refresh. And you'll see we've got that first paragraphs put into the description, but it's actually not. The first paragraph is the texts we copied and pasted. Let's have a look at how we can automatically set the link. So I'm going to delete that and save. We go into our config dot YAML. And there's a configuration key equaled summary length, that's the length of words. And that's for list pages, which I'll show in a second. And also in our case for the Meta description tag. So say e.g. we set that at 40. It's defaults to 70 by the way. So we'll save that and we'll have a look. A much longer description. Now, there isn't a limit to this because it changes only going to display so much, especially on a mobile customers browser, they can't display a lot of information. So let's go back to our document and you'll see I can only display so many characters now, the general recommendation is less than 150. To keep in mind that while you might be displaying want some text there, it may not actually be rendered in a search engine results if it's more than 150 characters. This next one's a quick one. Alternate output formats, e.g. a. Common output format is an RSS feed for a particular page, whether it's a product's page or the front page or a blog. And he got actually generates RSS feeds automatically out of the box. We're going to include a link tag so that search engines can see that there is an alternative format available. We're going to look at really quickly look at how we can automate that. I've linked to this page in the resources section. You can automatically list all the output formats. And like I said, you get the RSS feed setup by default for certain pages on hugo. So if we copy and paste these texts straight into our website. So we'll go into our head dot HTML. We'll put all this into a partial later. So underneath our description, we can paste in that code there. You'll notice there's already some dashes in there to remove the newline in the spaces. For every alternate output format, Hugo will generate a new one of these lines for you. And we'll put the media type in. And we'll put the fact that it's an alternate output format, and we'll put a full absolute link in there for you for each alternate output format. So let's save that and we'll have a quick look on our homepage. And you'll notice that Hugo has linked a alternate type for a RSS XML feed. And instead of index.html, Let's index.html. And that's because for the homepage who got automatically sets up a XML feed so people can get updates. And the last topic for your head tags is actually quite a complicated one, but luckily it's quite simple with Hugo. That's canonical tags. Now, why that works is if there is multiple URLs for one page, you need to specify to the search engine which URL is the most important one. That way, use for each of those pages are viewCount isn't split between them. And you also don't want the search engine to get confused. Likely Hugo, it's really straightforward. You're not going to have duplicate URLs for a single page. But to make things really clear to Hugo, to search engines, we're gonna be putting in some code there. One thing that is important is next and previous page link. So if you're working with pagination or if you're working through a list of pages here, can generate those automatically for you. And by linking to the same page, the actual URL of the page, you confirm him to a search engine that yes, they are actually on the correct version of the page. So let's have a look at that. So back in our head dot HTML under our alternate outputs, we're gonna do a link tag and the type is going to be canonical. So we haven't actually got that one, therefore, we emit. So we'll do a tab. Now rail, we're gonna put canonical. Then in our HREF. We can just copy this text from our alternate output formats. That's the permanent to the current page. We're going to say that we're going to test it out and then we're going to make a modification to save that. Run the homepage. And we've got the URL to the current page there. Let's get through to a different page or go to products e.g. and then we'll open up the head. Will say we've got a link to the current page. Let's do a modification to it now, because on this page we've actually got some pagination. We've got first page, second page. And it's not actually picking it up on the canonical link and that sort of problem, because if a product exists on the second page, we want the search engine to add a link to that page. So what we'll do, I'm just gonna put a few spaces on either side for now, just keep it simple. We're going to start looking at putting in some comments because things are sounding a bit more complex. So what we'll do, we'll double curly braces. Put in a dash, there's no spaces on new lines. Slash star, and it will put here canonical rail tags and then we'll do a star slash space dash. While we're at it. We might as well put a quick description in here for alternate output formats. Ag, RSS feed. So we're going to change the safe URL to AB abs URL, and that stands for absolute URL. And that means the entire address, the website e.g. down here we've got https colon slash slash CDM, blah, blah.net. We want the entire address, not just the, if we have relative URL, we'd have the lighter part of the address and we want the entire address we're at to be displayed. That's what the search images after, and that's what ABS URL, absolute URL will achieve for us. Let's have a look on the about page, and that's definitely paid. Hasn't gotten the pagination. We'll right-click and inspect and we'll go to our head. And we'll see here and link canonical. We've got a URL which mirrors the pages, is a single-page is not possible. I would pagination on this page. But the Nixon we're gonna do is have a look at how we can set this up for a page that has numbers at the bottom and then his pagination. That's working great. Let's have a look now at customizing it for pagination. So what we'll do, we'll put in some curly braces. And we'll put in if E is with a capital I node, with a capital N. And then we will put in else, and we'll make sure we put some dashes in there so we don't end up with spaces, new lines in our code. Copy and pasting the same thing. And then we'll do our intact and make those dashes in the star in the curly braces. So we end up with a heap of spaces in your code. Now, what's going to change here? Instead of dot permalink, we're going to be including the address of the pagination taught to have a look at that. So as usual, it's in the resources section. You have to scroll down to it, to the pagination. We're not looking so much about how pagination works at the moment, but you keep scrolling down. It shows you how you can access parts of pagination with the pagination paginate object. We're going to looking at paginated dot URL. That's the URL of the current page. Will then looking at pagination dot has private if there's a previous button present, and then that's the URL to it. And then we've got has next and next, let's go through and let's set up that logic. Changed up permalink to paginated dot URL in capitals. And we'll save that and we'll see if it works. And our products page. So I wanted to first of our products pages, just the main page. We right-click and inspect. And you'll see how you out with top slash products. And we'll go into the head and we've got our canonical URL which mirrors it, which is standard behavior down to the bottom or go to a second page. And that's how pagination here. And we'll go into the head and you'll see under conical that it's changed to the second page and that mirrors the top, which is a kind of behavior after, but there is a previous link present and that's not showing up. So let's go through and let's modify that. So what we'll do, we're working in this top part of the if is node. Make a new line and we'll do dot paginated or dot has next. And then we'll copy that first link in there and we'll paste it in, will change canonical to next. And then we'll put a dot. Prev dot URL. And then we'll put an end tag in with actually the side. If the page has a Next button, it will be showing this URL to the next page, will then copy that and we'll paste it below and modify it for the previous. So we'll take change has an x2 has proof. And we'll change our URL down here to paginated dot prev mixed use capitals. And for the HTML tag, it's all going to be lowercase. So we'll save that and we'll help. So we're on the second page and it's put the link into the first page for us, and it's just a standard URL for the first pagination page. Let's now go to the first page and went to loads. And you'll see we've got our standard link, which mirrors the link in the browser. But we've also got our next page link, which is exactly what we need for a search engine. And there is one slight problem. And if you go to the homepage and inspect and have look in the head, you'll notice that we also have a next link for the homepage. Let's put some K1 to make sure that does not get generated on a homepage. That says, if thought is node will do an end, multi-dose is node in brackets, we'll do not. Dot is home with capital I and capital H. So if it isn't a homepage, and that will be true. And if it's got some next or previous links will be in each night and that will come through and that will satisfy the AND operator. So save that and have a look. We've got no more next link there. Before move on. There's one more thing that we can do, and that is the option of a default description. Now that does go against the grain about what Google says, because Google says it have a unique description for every single page. But if it's not a page per se, then we'll provide a default description. Will do that, will change things around a bit. So what we'll do, we'll take out the default plot summary. When do a conditional statement. Else. If thought is page, if it's regular page, therefore, we can extract the summary. We'll do summary. The description hasn't been provided. Then we'll do another else. Then we'll look for dot psi dot params and capital P dot default description. Then put the end tag and then we need the final intact, which is for the width at the beginning. Config dot YAML. We'll do default description. And this is we sell all kinds of equipment. You get the point. E.g. if we were looking at a category page, so we've got categories, setup all these items. We haven't actually set the display of it yet. But if you go two categories, such categories, Let's say these are the different categories and they the items within them. But if we look, then falling back to our default description, you've got a description. We sell all kinds of outdoor equipment and then we go to our bicycles page. We can learn to live in blocks that are for sale. And we're going back to the default description there again. It's now up look at setting the robots metatag. And it's a tag which tells search engine crawlers whether to index the page with a foil links on the page. If you do it different ways we can set that up. If you scroll down past all the information you get to the bottom and you'll see the directives. E.g. if you were to set all, you don't actually have to do it because it's the default for all browsers, but it doesn't apply any restrictions. A very common one is no-index, and that tells us that search engine not to index the page. It doesn't mean that they won't, but it tells them not to. Another common one is now follow that tells us that judge, and not to follow any of the links in that page to discover new pages. And a great way to sit no index n 0 follow is to use the directive none, because it saves you having to type both of them if you compel compatibility reasons. So I know that we're very explicit and we're getting exactly what we want. We're going to provide an option of sending both those at the same time. If you wish the page to be private, e.g. a. Login page, then we'll put in Meta name equals robots and content, no-index. And I follow when that's going to happen, when do if params private. Private, true. If you want that to happen and we're going to revisit that later on in Sitemaps. And if you do my course on searching on your site, will be using that private key as well. We'll put in a new page, so we'll use Hugo knew, we'll do admin dot md. And then we'll do private. It's true. The title as long into secure area around the site. You'll see that for a standard page. We haven't got the no index, no follow. If we go to slash admin, which I haven't provided a menu link for deliberately because it would just be a page. For administrators. You'll see we've got the robots, no index, no follow based on sending private to true. And like I said, we'll revisit that later in this course. What if you wanted to set a custom robots property, e.g. not knowing next and I follow. What we'll do is we'll put an else tag, else-if dot params dot robots that will allow you to put him what did he like? So what we'll do, we'll copy the dot params dot robots placed in there. So now there's the option of setting dot params dot robot to say e.g. you didn't want to go with the defaults. So we'll comment out private with control Casey. And he's got to put in robots. Say you wanted to do no index. So you wanted to search engine to find links, e.g. you could set that. They can say now, I think what new index? I'm going to revert back to the private option. 4. Body Tags for SEO: This lesson is all about HTML head tags. Some are very commonly used and the suit and some are forgotten about. The first thing you need to include is the character set that's used on the page. That way the browser will display the page according to the characters that you've input. Utf-8 is commonly used as it gives you access to nearly every available character in the world, regardless of the language you're using, you might have multiple languages on one page. The next thing is Microsoft Edge compatibility. Now it's not strictly required, but definitely helps to have it they adjusting case for an older version of a browser such as Internet Explorer or Edge. This one's really important and that's the default width and scale. That's because we're gonna be using responsive web design for both mobile and water desktop screens. Now, if you're using Bootstrap and we are gonna be using Bootstrap for this tutorial. These three tags are provided by default in the standard template. Let's check that out now. You'll have provided links to all of these pages in the section below when there was also a section. So first off, we're looking at the Bootstrap five doctors. Importantly, if you are Googling this, you google Bootstrap five, they reservations 34 available as well on the website and they completely different. So you will find a link for these pages. Bootstrap five, Getting Started, page introduction. If you scroll down, they've got the individual sections for the library. But if you keep scrolling down, is this not a template? And you'll notice we've got the required Meta tags. They've actually lift off the internet Explorer or Edge one, but I've included anyway just to be thorough. So if you were to start from scratch by copying and pasting these code of Bootstrap, he'd be pretty much ready to go. Let's now have a look at our Hugo project. If you'd come back into the results section and download the zip file, that's the zip fallen over 0. For getting started. The introduction, you'll have to unzip it and then open it up in Visual Studio code or code editor of your choice. But I do recommend visuals geocode for beginners. It's got a lot of different plugins that you might find useful. And it's really aided use. Either already before I uploaded these falls, I've already compiled the SWOT and you'll find it in the public folder. Now I'll actually deliberately made the site pretty much as bad as I could ease con unlock. A lot of things I have seen out there on the internet, so it is actually quite common what you're gonna say that I've tried to include as many mistakes as possible. Through this tutorial. You can go through and fix them up. You look in the public folder. This is the actual site did upload via FTP. I got the index.html file. And you will see that we've got the character set UTF-8 metatag already there. We've got the internet Explorer and edge compatibility tag there, and we've got our default view width and scale tag. So they have already been included for you. And that's because I copied and pasted out of the Bootstrap template. The next thing is the title. So let's go back to the presentation and have a look at how that works. We're also going to look at a web link. Every page needs a descriptive and unique title. You can include the website titles such as the business name, along with the pages actual title, for example, the page name dash the website's name. For the homepage where you probably don't want to put the word home in there because that isn't very descriptive or useful. You only get a certain number of characters to play with. For example, we might put the slogan of the company in there as well. In hugo, we can program these seamless and logic so that we can use a different title for the homepage compared to the generic page name dash website name that you use for every other page. I'm just going to show you a quick link to a Google doc. You'll find the link tool, these pages in the results section. He's what Google has to say about. And obviously Google is the biggest set change in available. Google says you need to have unique, accurate page titles and they need to tell both users and search engines what the topic of particular page's title needs to be within the head element of the HTML document and into unique for each page. Let's go through now Hugo project and we'll see how we can fix that up. This lesson is all about HTML head tags. Some are very commonly used and the suit and some are forgotten about. The first thing you need to include is the character set that's used on the page. That way the browser will display the page according to the characters that you've input. Utf-8 is commonly used as it gives you access to nearly every available character in the world, regardless of the language you're using, you might have multiple languages on one page. The next thing is Microsoft Edge compatibility. Now it's not strictly required, but definitely helps to have it. They just in case for an older version of a browser, such as Internet Explorer or Edge, this one is really important and that's the default width and scale. That's because we're gonna be using responsive web design for both mobile and water desktop screens. Now, if you're using Bootstrap and we are gonna be using Bootstrap for this tutorial. These three tags are provided by default in the standard template. So let's check that out now. You'll have provided links to all of these pages in the section below. And there's also section. First off, we're looking at the Bootstrap five doctors. Importantly, if you are Googling these, you google Bootstrap five, they reservations 34 available as well on the website and they completely different side. You will find the link for these pages. They get Bootstrap five, Getting Started, page introduction. If you scroll down, they've got the individual sections, the library. But if you keep scrolling down with a template and you'll notice we've got the required Meta tags. They've actually lift off. I'm gonna get antidepressant to be more organized. I'm going to put it in some double paleo prices for the logic. And it's aef dot capital YS is, and then capital H for home is home. And that will be true if we're on the homepage. And I'll close my curly braces. I'll hit Enter. Then got the total will be displayed for the homepage. I'm then going to hit Enter a couple of times and typing. And I'm going to do else. If it's not the homepage, let's display the name of the page and then total the website. Do that, we do. I double-click the prices and we do dot title with a capital T. Then we do space, dash space, and then we do our double curly braces. And we put in the title of the site from above. So it's dot site with a capital S and then dot title with a capital T. And most importantly, we must finish off these logic with an end tag. Now, there is one problem. We've put it in a Enter after the title tag and we don't want ****** or new lines present inside our title tag. So what we do with you got That's really easy. If we put a dash at the start and the end of every tag, well, we don't want the spaces and new lines around it to a P. So I'll put on these three lines, some dashes and start and the end. Not too worried about. I mean, it wouldn't hurt to put one at the start of that tag and the end of this tag and this data they, there is what wouldn't hurt. And then we'll have a look at the output in a minute and we'll see that all those spaces, new lines have been removed. We have retained the space either side of that dash. So we'll save that. Now in our love you guys and new with Hugo. What we're gonna do now I've actually set up some scripts for you already. If you click on the NPM scripts section, That's why I highly recommend Visual Studio Code. There's a Div command down here with a play button. And what that does, as you can see, it runs you guys server and it uses a setting called Disabled foster NDA, which means every time you make a change at it reloads the entire website, it doesn't have any cash. It's also about the JC option and that's called garbage collection and it removes any unused files when you quit, hit play on that, watch it run through. It's pretty quick. You'll notice the build time. 139 milliseconds to build with 15 page site. It's watching for changes. It's alive development server. And we've got our address, they say control-click be addressed and we'll check it out. He's the site. It's not the most complicated, old, beautiful Saddam Hussein. But I've tried my best to put as many problems as I can into it. So let's have a look at the output. If you look up in the bar at the top in our tabs, you'll see for the homepage of our SEO ink, the best and the worst, nothing's changed there. Let's go through to our products page. It will just looking at then as now it says products dash ACL ink. And that's why we've programmed that if you want to reverse that. So it's SEO ink and then products, you can just reverse that line of code we looked at, let's say inspected and then we'll look at the soil. So if we do an inspection, will close down the body and we'll open the head and look for our title. And you'll see they got products, stash ACO ink. Now, we did try and avoid any new lines or spaces that are visible in that view. What you have to do is right-click and view page source. It does help to try and avoid those ****** on new lines because you can end up with extra spaces in there you don't want when the browser written, is it? So as you can see there, there's nothing at all between the title tag and the products, but we have retained the space either side of the dash. And this nice face at all before the total ending tag. The next thing you need to make sure you have is the page's language. This is a primary language of the page. You might have additional content on pages in different languages. But this is a language that we use for the majority of the page and it's the top of the hierarchy. It's language that's applied to everything unless specified otherwise. Now you do have to do this in the HTML tag and it's applied to the whole page. You need to use the ISO language codes. And that is, the actual language itself is in lowercase, there's an underscore and then the regional variant easing uppercase, and the two-letter codes for each May 1. You can actually not worry about the variance if you want it to more generic, but generally speaking. It will have a geographical variant. Luckily and he guy. And obviously you could be applying these cools to any static soil dynamic website system he liked. Luckily in hago, we can use a parameter, a site parameter in the SWOT configuration code language code. We can access it with the dot lang variable. Let's go ahead and let's check it out. As usual, I've left the link to the dock and lock to link to doxy. You guys can do further reading and fifth learning when you're in. He's what Mozilla has to say about it. They want you to set it in the HTML tag. Just like I said, it is the default for the page unless we specify that, specify otherwise. And that's coming up in a further lesson. Back in Visual Studio code, we'll close our head dot HTML. We'll get back to base off dot HTML. And you'll see we've got our HTML tag here. We haven't specified the language, so we'll talk in LA and g equals. And then we'll do two inverted compensate. And then we will usually double-click prices and we'll do dot il INJ with a capital L. And we'll close that. And this will apply to every single page. Says we save that. You'll see me an update down. He you guys picked out the update. Based off that HTML. Let's go back through to the browser and we'll check it out. Doing inspection. And we'll say that we have AN dash AU. Now you will notice the AU easy lowercase, and that's a current limitation in Hugo. Hugo does output language guides as lowercase. Let's go back kind of configuration and Hugo, look at the root of the project. You'll see a config.xml at the bottom and understand some of you haven't seen this before when you guys, if you scroll down, you'll see we've got out language kite, and that's the default language for XML output and it's not used anywhere else. Moving down, we've got the website languages here. And the default code for the website for this website is AU for Australia. And you have to have a language configured for that to work. So below that I've configured AN dash AU as a language and languages, and I've given it a height of one because it's the most important one was the only one, but you have to give it a parameter. So I've given it a white if one. You need to have these configuration. He President for the default content language code to work. Don't get confused with language code that's not for HTML output. The next tag we need for the head, and this is quite a commonly used one, is the Meta description tag. Every page needs a meta description tag because search engines, you'd use them for search results, not only for keywords and uses searching for, but also when they display the search results, they commonly put that meta description underneath the title of the website. In hago, it's quite easy. We can set up H pages description using front Mehta and I'll show you what that means in a moment. And we're also going to set up you got to use a summary of the page. If a description hasn't been defined. And you can even customize that summary if you want as well. And I'll show you all that in a moment. He's adult firm Google. The explaining what we need to put in our description. And he's an example. When we do a search on Google, you'll see the URL of the website and you also see some breadcrumbs a which we'll get into later. You then got the toggle of the site and then put in the description there straight out of the metatag. He's an example of the HTML you have to include. We need Mittal. We've got to actually identify it as a description metatag, otherwise it won't work. And then we've got our content after that. So Google showing you where it gets placed in the search, you need to accurately summarize the page content. And it's really important that you hit important keywords when you're writing that summer. He didn't just be really vague about it. You've gotta put important keywords that people are going to be searching for it and the lighter less than. I'll show you how you can check which keywords are trending. Gonna emphasize. Important parts inside that description. You have to look at what's really important about the texts and make sure you talk about it. Otherwise, people won't be able to find your website when they're doing the searching. So let's get straight into hue guy now and we'll have a gallery. Go into the layouts hold out. And I've taught by sounds like HTML just to reorient ourselves and say we are looking at the head partial, which displays everything inside the head. We're going to our partials folder and open up head dot HTML. It's pretty bare at the moment, so I will go underneath our title tag. Put in Mehta and emit he's enabled by default on Visual Studio Code. Necessarily reason while at Visual Studio Code. And you'll notice we've got description there, so we'll pop that one in. Then we've got to put some content in and this is where it starts to get interesting. What we'll do. We'll put in our double curly braces. And we'll pull the description out of the current page. The way you do that is dot description. He has these really good function built-in. It's called default. Now, if you can't find a description on the current page, what we'll do, we'll put a piping and that's the shift, and it's the key above Enter. And that's called a pipe that lets us run another command after Dr. description. So we're gonna put it in default. And then off the default we have to tell who go. Okay? So if description isn't available, what do we want to default to that summary? Now before we talk about how we can customize the summary, I'm just going to save that and we're gonna run it in one. We're going to have a go at looking at how it works. I will save that. I've already got my server running down here. It's go into the browser and have a look. I'm going to go into the products page and we're going to have a look at the Meta description tag. I couldn't get information on this page. Let's call it to the inspection and we'll check out the head. You'll say meta-description is really simple in this case, it just says we stuck the following products. The reason that it's doing that is because let's go back to the way you guys saw it. Let's go back into the content folder and then products. And underscore index dot MD in the products folder. You'll see the only takes for the pages we stuck the following products. That's because the rest of these pages dynamically generated based on all the products that have been set up. This is the only texts for the actual page. So by default, because we haven't set a description and we have an ivory tower and the summary, you guys just taking the texts from the page. Maximum length and it's pumping it in. So let's first look at how we can customize that by setting a description. We told you guys to pull back description out of the page. That's the first thing it tries to do. So let's go and let's set that up. So all you gotta do is you go into your page here. We're going to our front mat on the front meta exists between these three dashes. That's all the data for the page. I'm putting in description. This is a built-in page variable. It's not like, it's not a custom one, so we can access it just for putting dot description with a capital D. Put a description in, he will say at SEO ink, we sell a variety of products. The outdoors, including mountain bikes, quad bikes, and trailers, will just keep it simple for now. Just for as an example, we'll save that and want to look at the site. And that should be that should be the first thing that you guys pulled out and do an inspection. I've looked at the head and you'll see in the description, we've got what we just put in. Let's have a look now we're gonna temporarily disable that description. All I've looked at how we can customize the summary because I think summarizes quite useful because it involves a lot less work. How lot description and we'll do Control K or Command K on a Mac and then puts a comment, a hash before the summary comes out automatically from here, there's a few things you can do. You can override it with by putting in summary, but economy achieving the same thing. By doing that. Let's have a look at what else we can do is summary. I'll put our description back in there. I'll save that. Well, they're going to navigate to our homepage in the content folder. Go to underscore indexed on MD. You'll see there's a lot more text here on the homepage. Let's first have a look at what he says about summary. I'll put this link in the results section as with every ALA liquid looked at so far in this lesson. So what he does, these three things it does. The first thing it does is, is an automatic summary split. And it takes the first 70 words of your content and it puts it into the summary page variable, which is what we pull if description isn't available, we can customize the length of summary by using the summary links configuration, and I'll show you that in a moment. The next thing you can do is you can copy and paste in these Tag exactly. And then he will use everything above that as a summary. The last thing you can do is what I already showed you in that ease top summary directly into your front meta. Let's go back through. And this one, he is kind of self-explanatory. So we'll copy that. They'll go down to our ticks. How does find a full stop or Mike one that we'll do there? I put in that tag. Then we'll go to our homepage. We'll say we've got our two paragraphs, say Inspect up into our description. And you'll see it's only taken that first paragraph. And that's because I put that party may That's the second method. The third method is we override it and I've just fine, I prefer to put in a description that case, but I'll just go in here and I'll type in summary. All right thing he says a good method because you end up doubling up on things. We'll save that and we'll get the same result. I'll do a refresh. And you'll see we've got that first paragraphs put into the description, but it's actually not. The first paragraph is the texts we copied and pasted. Let's have a look at how we can automatically set the length. I'm kinda delete that. Save. We're going to our config.xml. There's a configuration Qi he called summary length. That's the length of in words. And that's for list pages, which I'll show you in a second. And also in our case for the Meta description tag. Since I, for example, we set that at 40, its defaults to save any Broadway will say that and we'll have a look much longer description. Now, there isn't a limit to this because it changes and only gonna display so much, especially on a mobile customers browser, they can't display a lot of information. So let's go back to our document and you'll see it can only display so many characters. Now, the general recommendation is less than a 150. That brings us to the next little topic here. That's a function here called truncate. And what truncate does is it cuts a string to a maximum length without cutting any words. Or if you're using HTML, it doesn't leave any unclosed HTML tags. We're not gonna use HTML. We're gonna use these truncate function to limit it. And we'll see how we go. We're gonna pick until our head dot HTML. We've got our summary here. What we'll do is we'll put some brackets around the summary because we're gonna do a bit of work to it. Go back and check how our function. So we need to put the word truncating then the size which is gonna be, we'll put it at 150. Important 145 just in case there's a word that's quite big at the end. And then we'll put dot summary is our input. This is a bit of a file sizing in case you set your summary a bit too long. So we'll do truncate. And it's going to be 145. And then dot summary. We'll save that. We'll get to our config. We'll put these back to the default of 70 and we'll have a look. All right, so we're back here and you'll see we end up with these three dots at the end, which is wig, Hugo has truncated and it's limited, limited content there 245 characters. And it's automatically put a three dots into obviously in this case, when you're fine tuning the ACLU website, you probably want to manually put in a description. This next one's a quick one, alternate output formats. For example, a common output format is an RSS feed for particular page, whether it's a product's page or the front page of a blog. And he got actually generates RSS feeds automatically out of the box. We're gonna include a link tag so that changes can see that there is an alternative format available. We're gonna look at really quickly look at how we can automate that. I've linked to this page in the results section. Can automatically least all the output format to like I said, you get the RSS feed setup by default for certain pages on hugo. So if we copy and paste these texts straight into our website, we'll go into our head dot HTML. We'll put all this into a partial lighter. So underneath our description, we can paste in that code there in lattices already some dashes and they had to remove the newline in the spaces. For every alternate output format, Hugo will generate a new one of these lines for you. And it will put the media typing. And we'll put the fact that it's an alternate output format and we'll put a full absolute link in there for you for each alternate output format. And so let's save that and we'll have a quick look. We're still on our homepage. And you'll notice that Hugo has linked a alternate taught for a RSS XML fate. And instead of index.html, It's index.html. And that's because for the homepage who got automatically sets up a XML fate so people can get updates. And the last topic for your head tags is actually quite a complicated one, but luckily it's quite simple with Hugo. That's canonical tags. Now, why that works is if there is multiple URLs for one page, you need to specify to the search engine which URL is the most important one. That way. For each of those pages are viewCount isn't split between them. You also don't want the search engine to get confused. Luckily, it's really straightforward. You're not going to have duplicate URLs for a single-page. But to make things really clear to Hugo, to search engines, we're gonna be putting in some code there. One thing that is important, these next and previous page link. So if you're working with pagination or if you're working through a list of pages here, can generate those automatically for you by linking to the same page, the actual URL of the page you can further into the search engine, the ESA are actually on the correct version of the page. Let's have a look at that. Back in our head dot HTML under our alternate outputs, we're gonna do a link tag and the type is gonna be canonical. We haven't actually got that on there for with emits, so we'll do a tab. Anyhow rail, we're gonna put canonical. Then in our HREF. We can just copy this text for my alternate output formats. The permanently to the current page. We're gonna say that we're gonna test it out and then we're gonna make a modification to save that. Run the homepage. We've got the URL to the current page there. Let's go through to a different page or go to products for example. And then we'll open up the head. Will say we've got a link to the current page. Let's do a modification to it now, because on this page we've actually got some pagination. When we've got first page, second page. And it's not actually picking it up on the canonical link. And instead of a problem, because if a product exists on the second page we wanted to say change into data link to that page. Will do. I'm just gonna put a few spaces on either side for now. Just keep it simple. What kind of start looking at putting in some comments because things are complex. So what we'll do with the double curly braces, put in a dash, there's no spaces on new lines, slash star, and it will put canonical rail tags and then we'll do a star slash space dash. While we're at it, we might as well put a quick description in HE for alternate output formats. Rss feed. We're gonna change the safe URL to add abs URL, and that stands for absolute URL. And that means the entire address, the website, for example, down here we've got https colon slash slash cdn, blah, blah, dotnet. We want the entire address, not just the, if we have relative URL, we'd have the lighter part of the address and we want the entire address we were at to be displayed. That's what the search engine after, and that's what ABS URL, absolute URL will achieve for us. Let's have a look on the about page, and that's definitely paid. Hasn't gotten the pagination. We'll right-click and inspect and we'll go to our head and we'll see he and link canonical. We've got a URL which mirrors the payee. This is a single-page, it's not possible to add page, nationalist page. But the NICU and we're gonna do is have a look at how we can set this up for page that has numbers at the bottom and then he's pagination. That's working great. Let's have a look now at customizing it for pagination. What we'll do, we'll put in some curly braces, and we'll put in if dot iz with a capital I and node with a capital N. And then we will put in else, and we'll make sure we put some dashes in the so we don't end up with spaces and new lines in our code. Copy and pasting the same thing. Then we'll draw in tag and that is in the start, in the Kelly Bryce's end up with a heap of spaces in your code. Now, what's going to change here? Instead of dot permalink, we're going to be including the address of the pagination. Let's have a look at that. As usual, it's in the results section. You have to scroll down to get to the pagination. We're not looking so much about how pagination works at the moment, but you keep scrolling down. It shows you how you can access parts of pagination with the pagination paginate object. We're gonna look at paginated dot URL, the URL of the current page. We're then looking at pagination dot has private if there's a previous button present, and then that's the URL to it. And then we've got hasNext. And next let's go through and let's set up that logic. Changed our permalink to paginated dot URL in capitals. And we'll save that and we'll see if it works. Our products page, I want the first of our products pages, just the main page. We right-click and inspect. You'll see how you out on top is slash products. And we'll go into the head and we've got our Chronicle Yara, which mirrors it, which is standard behavior, right down to the bottom or go to a second page and that's our pagination. We'll go into the head and you'll see it under mechanical that it's changed to the second page and that mirrors the top, which is economy behavior after, but there is a previous link present and that's not showing up. So let's go through and let's modify that. So what we'll do, we're working in this top part of the IFIS node, making new line. And we'll do if paginate or dot has mixed, they will copy that first link in there and we'll paste it in, will change canonical to next. And then we'll put a dot prev dot URL, and then we'll put an N tagging with a dash either side. If the patient has a Next button, it will be showing this URL to the next page. Well then copy that and we'll paste it below and mortar fight for the previous. So we'll take change hasNext to his prev, will change our URL down here to paginate a dot. Prev makes you use capitals. And for the HTML tag, it's all gonna be lowercase. So we'll save that and we'll have four on the second page. And it's put a link into the first page for us, and it's just a standard URL for the first pagination page. Let's now go to the first page and went to lights. And you'll see we've got our standard link, which mirrors the link in the browser. But we've also got our next page link, which is exactly what we need for a search engine. Before we move on, there's one more thing that we can do. And that is the option of a default description. That does go against the grain of about what Google says, because we can say is you'd have a unique description for every single page, but if it's not a page per se, they will provide a default description. I will do that. Will change things around a bit. We will put a description in there. We'll do with dot description. Some dashes and just to get rid of any spaces will do. Then we'll do an else leaves from space, and then we'll do our end. Now. We'll put another conditional knit and we'll do is page. If it's a page, we will provide the summary. So we'll do a summary. Else will do provide dot site, dot params dot default description. Then we will get rid of that space. Hey, we have to put another intake in the config.xml. Will do default description. This is this cell, all kinds of equipment. You get the point. For example, if we were looking at, at a category's page, so categories setup all these items. They haven't actually stopped the display of it yet. But if you go to Categories slash categories, say these are the different categories, the items within them. But if we have a look, then falling back to our default description, you get a description. We saw all kinds of outdoor equipment. Then we go to our bicycles page. We can look at a live inbox and fertile. We're going back to the default description there again. Before we finish off this lesson, there's one more thing I want to show you. We've looked at running the dev server. There's also a div preview and that will show you pages which are set as drafts are the future date. That's not something we're really worried about this course. But I flipped that script there any way for you. There's also the build script. Now, at the start of this lesson, I mentioned that in the public folder you can have a look through and all the files. Now, after you've made changes, if you want those files to be in the public folder, for example, to upload to a server, test it out, you have to hit that build script. That will do exactly what the dev server does, except it's kinda run through and it's going to build everything using in production environment. So those settings will be slightly different and it will dump it all in that public folder for you. A script that I've written here and that is rendered 2D6. I think you were to do a div and it's exactly the same as running the dev server, except that actually brought the files to the public folder and then displays them in the browser lumen when you just run dev, they don't actually get into the folder. They just running through memory. So data is actually much faster. But if you want to have the falls in the public folder at the same time, for example, to look at the size of the file, you'll need to do render to disk div. I've also included preview and production there for you as well, named PM check commands. I mean they had to update NPM dependencies and the post install is there when you run in hearing install and also installed for you. 5. Site Structure for SEO: In this lesson, we're looking at tags place in the body of your HTML document. First I'm going to look at these semantic tags. Semantic tags, we introduced HTML5, summing two tags to help describe parts of the page so that by the browser and the search engine understand exactly what they're looking at. Some common examples. Hera, main section, footer, an aside. These clearly delineate different parts of the website in the results section under this lesson, I've included a link to this page. It's a really good resource for semantic tags. It's referred to as semantic elements on this side, and it goes through a common least. He's got a great infographic here on the right to show how structure is made up with these tags. We're going to now go through the website and break it up using these tags as I've deliberately set up without them. Starting when we finished last lesson. Otherwise, you're welcome to download the files for this lesson. Under the resources section, there's the zip files at the bottom of the screen. Let's get started. We'll go into layouts and then by self dot HTML. One, we'll look at how it's currently laid out. Nicely, has no semantic tags, they are visible. So the first thing we'll do is we'll go into the body and we'll put in the header tag. Now if you just type in header, you'll see Emmett has caught with its abbreviations. You can hit tab and then into dragging the header partial, going to use a main tag. And we'll drag in the main block. Then we'll put in a footer tag and we'll drag in the photo, but we won't drag the script footer in there because that's not related. That's full scripts. Before we continue, unless there's a nav tag there for navigation. Let's have a quick look at the Bootstrap navigation that I've copied and pasted enough the Bootstrap website, go to partials and then Hera. You'll notice I've copied this, copied and pasted this off the Bootstrap website and they've actually already used the NADPH semantic tag for you. So that's ready to go back to the website and you'll see there is the section tag in the article tag than he used to content. So the first thing we look at the section tag and that defines different sections of a document. So some examples there are chapters and introduction, news items or contact information. So let's go back through to our website and we'll look at modifying the front page and putting in some sections. Go into Layouts folder. You'll see index.html, and that's for the homepage. Now, we'll do control Beta. Get rid of the file browser on the left. Here we've got our hero section. And then we've got our second section. He, what we'll do is we'll put in a section. Then we'll have to highlight everything below that and paste it in. Then we'll make analysis section. We'll highlight everything that sits below that. And we'll paste it in there. If after cutting and pasting your code or indentation to be out, you can use Shift Alt F to reset it, it, you have to be careful. The templating tags haven't been broken onto multiple lines because that can actually break the functionality of it. We'll save that and we'll get rid of that extra space at the bottom. Then we'll go over to our control Beta, get the explorer Ababa corner, lift the pain, and then run the dev server. Will check it out. Let's right-click and inspect them. We'll have a look at our sections and see if they're working. So we'll look at what our body, and we've got our header. I have a little bit on NAB setup there for the Bootstrap navbar, and then got the main part of the document. And you'll see we've got two sections setup inside the main. And then we've got our footer at the bottom. If you scroll down, you'll see the footer there at the bottom. Let's now have looked at setting up some articles. Back to the W3 school site, was hold onto article. And it's a little bit ambiguous the way it works, but the examples of articles or forum posts, blog posts, user comments, product cards which we actually have in newspaper articles, they independent, self-contained pieces of content. If you scroll back up to sections, you'll see there are also sections in a document. So we've got an example here. There's an article and it's got a height h2 in it. For our hating, we'll get to heading tags in a moment. Then if we scroll down, we've got another example further on. You'll see how I've got an article with a header inside it. There's a bit of a little article here and it says nesting articles inside sections or vice versa. Articles are independent, self-contained pieces of content. Sections are sections of a document. And there's no rules to say whether you can or you can't put a section inside an article or an article inside a section. I tend to use sections for larger parts of the page and the article for smaller parts, smallest self-contained pieces of content. Let's go through and we'll put in some articles and some headers. Looking at the page, we've got two columns, we've got content over here on the left, and then we've got our content on the right, the photo. We're going to use these content here is an article and then we'll apply a header to the heading at the top. And then we'll go down to our product cards and we will use the card as an article and then we'll put our header and he for that takes there. So let's go ahead and do that. In the index.html file inside the Layouts folder. Down to we can find our heading and we'll make a new line and we'll write an article and tab. And then we'll have the highlight. Everything belongs to the article, will leave the buttons with it. It won't hurt and cut that Control X or Command X. We'll paste it in. You can do Shift Alt F to fix up indentation need be but be careful because it will put some of your commands onto two lines and you can't have that because it will break some of the functionality. Articles setup. Then we'll put in a header heading and we'll look at heading tags in a moment. And that one's ready to go. Well then go down, want to look at the cards Now cards will be different because they've been generated from perimeters site will do is open an article in for the whole thing. Off to put that just on the container. Want to be one. Then we'll put the header. Now the way this works, you'll see we've got range.powerapps.com. If you go into your content folder and then underscore index that someday. You'll say we've got the cards autumn, and then we've got a bunch of cards. So we've got cod, one title card to title and so on. All these dotted guys into the first card and then always thought it goes into the second card. And all of this out, it goes into the third codon. So that's using a range or a loop to generate that. So what we'll do is inside this range, we can put it in an article, that column, the right information when you do it. Then we'll put a header around that article hitting to make that really clear to the search engine. Then we'll save it and we'll check everything still works. If you've closed your terminal, you can click on that button at the bottom and pull it up. And you can check that it's still reloading and rebuilding every time you save it so that there's no arrows there. So let's have a look. Still functioning as we expect, which exclude nothing should have changed there. We'll right-click on it and inspect and we'll have a look. So we've got our two sections and we'll open up that first section. And we'll see we've got our article for our text. We've then got our header. With the rest of the article, will then check out the second section. Slightly different view, he will get into responsive design later. We'll look at our second section. Let's look at an article for the whole section header. Then if we look at one of the cards or three cards, he wrote an article for the card. We've got our header in, such exactly as we want it for semantic tags. Last thing before we looked at, we've got our footer at the end. Next one we're looking at his heading tags, heading tags or hierarchy which iss, which hitting some more important than others based on the text that's contained in the heading and its relationship to the webpage document. You start off with height Tuan, generally for the page title and you work your way down as a headings become less important if you've got multiple products, for example, you use the same heading tag that every property wouldn't go down for each product, you keep it. For example, a heading three for every single product. I'll put a link to this document in the results section is from Google. So they've say to fit headings, you got to imagine you're writing an outline and you've got to make sure that you've got the main information. There's headings. Avoid placing text in heading tags that wouldn't be helpful for defining the structure of the page. There's not just for the helping the user, it's also for helping the search engine as well. It's got to be very clear. Don't use headings where you use, for example, bold. Underline. That's for emphasizing words, that's not for headings. And you have to avoid a radically moving from one hitting size and all that. It does have to be a hierarchy. You've got to use them sparingly across the page. Don't use them excessively that use very long headings. So let's give it a go. Looking at the homepage. We've got the first section here. We're going to create a heading one with the hero heading, then scrolling down, we've got our services section, our services heading a, heading two. And then we'll make all of the headings for our cards are hitting three. We will style the headings a bit smaller than the default hitting three style Hua because we don't want them that beak. So we're in the index.html file in the Layouts folder. What we're gonna do now we'll find the heading. You can see it he would dot params dot heading. What's currently got a div tag. We don't want to read if you want it to be one. So we'll hold down the Alt key at the end of both those div words and will back them out. We'll make it a H1. And the class of H1 is known required because H1 class with Bootstrap displays it exactly as you'd get with an H1 tag. Let's scroll down and we'll look for the card title. And we'll get rid of the H2 tag because we're gonna be making it a heading two to the right of both those div tags will back them out and make it an H2. Then scroll down to your heading title. It's thought it was a heading five. Click to the right of both the devs and we'll make it a h3, but it's being displayed as the heading five. Let's save that and we'll check nothing's changed. Everything's looking exactly the same. If we, for example, right-click and inspect the total, you'll see it's actually an H3, but it's being stored as a h5, which I don't want it that big. Back on the website. If you go into the about page. There's no child pages inside the about section. The About page is a single-page template, will then go into our products. And this is at least template for all of our products. And if we click on one of the products, we didn't get through to a single template for the products. And we go across the maintenance department, that's just a single page and then vehicles storage, not a single-page. And then contact, that's our single.php HTML for contact. Let's go back to geocode and we'll look at fixing those templates up. So I'm looking at Layouts folder and start with what the underscore default folder and what that is is your default fallback templates for single pages and loose pages. And then we'll have a look down with what a contact folder for a single page in the contact directory. This is the template that will be displayed and what our products folder there and that single dot HTML is for displaying individual products. So let's go through, we'll start with the default folder and we'll look at the single dot HTML. I'm moving down through. You'll notice we've got a total partial there. And the reason that's been set up like that is so we've got the exact same HTML for the title being displayed for every page type. We can just set that up once and we can pull that into every page. We can probably make this whole page and article. And then we've got a header tag for the total salt will do. Under our container. We'll put in the header article tag. Then we'll grab that and pop it in there. Then we'll go and check out our total partial will go down into the partials folder, then open up titled dot HTML. You'll see we've got a div with a class of one, so we'll change that to a H1 tag. We use Alt clicking by thousand tangent day one. We'll save that. We can even put a header tag around that. Actually put that hole inside because if a subtitle is present, it will also putting these below the one that's also part of the header. So we'll save that. Check out the list.html inside the underscore default folder. We'll put in. I call for the entire document inside the container to very carefully cut and paste that. And then we'll put affordable. I had a president in thought the total partial. Then hitting down into the range inside that column will go inside the card. Actually. We'll put an article in there. Then very carefully cut and paste inside that and then look for the heading and you can make that a header. Get rid of any unnecessary spaces and just check that all the indentation he said you can reset the invitation with Shift Alt F, but you'll be careful you don't. Multilinear Hugo. Creatinine, multiline areas with the tags have to all be on one line to work correctly. Spice they will save that. Will then go down to the single dot HTML for the contact page, we're gonna H1 and H2, which is great. Just make an article inside the container that spice and then we'll find the headings. We want doing mock, get the partial back into default, and then single and we'll get that partial for the title. We'll put that striding. Lot easier. We'll save that product. Single article, copy everything carefully. You doing the right amount of cutting so it works. Get rid of that space. Toddlers setup, there would be header. We'll save that. We'll check it out. Alright, so our contact page is still functioning. We'll go into our singles and they working products page. So at least I was still working. We'll go and have a look at some individuals and they were working about single-page that's working and we've already checked our homepage. There's one last tag we can put in the body of the HTML document. And then he is specifying secondary paid languages. And that is because we've defined our primary page language in the top-level HTML tag, but we've got a piece of text on his website, which is in another language. We're going to define that with a span. I'm going into my partials hold on. And then header.html. You can say he would put our link. I've put a span there to define language. Lang equals ES, fold the country in capitals. That text into the span will save that. 6. Structured Markup (JSON-LD): This lesson is a topic that allow HIV will shy away from because it can get a little bit complex. And that he's structured data markup. Structured data markup is information which is used primarily for communicating with search engines and isn't something but the actual unusual, we'll be looking at the major search engines for all got together and they devised a standard called schema.org. You can actually get a schema.org and look it up. There's lot of information there. Now there are three formats which Google Support. There's quite a few formats you'll see on skim, a little old, but is that actually three ones which Google will actually support and rate of your website. And that's JSON LD, which is JSON formatted data, which we're gonna place in the head of the page. And that's the one that Google recommends. And for that reason, it's the one we'll be covering in this lesson. There's also a microarray data and RFA. You place those inline in the actual content. And while they're a little bit easier to write, not what Google recommends. And for that reason, and for maximum search engine optimization, we're not gonna be looking at those two. So JSON LD, Google provide some great overviews on common topics and I'll show you those in a moment. If you need more information, you can get a schema.org. Although most of the important information is available from Google, google actually gives you hints on what the important items are that Google will actually pulling from your schema if you listed everything that's available on skimming or OLG, most of wooden end up with a search engine. I've loved his Lincoln, the results section. This is the Google Doc on structured mock-up. This is an example of a search engine result. You can see the title, the URL, the description, but they've also got a writing out of five. We've got a number of reviews and you can probably click on a link to actually say the reviews. And then they've got the price of the product. Now, everything in that line has come from structured mock-up. Another example is the you can put the location of the business, you can put all kinds of things. There's at least here we've got products, just examples, products, location videos, opening hours, event listings, recipes, logos, all kinds of things. So let's have a look now at an example. The example we're gonna do is a product. If we scroll down, he got an example. Someone's done a search for Google Home. Google shining them a price range, and writing reviews for that product. So if we go down, they give us a list of an example which structured data we need to provide. Now it's in JSON format, meaning we're using curly braces and commas. And it's really important you didn't use any of the Coleman's at and I'll go through how that works in a moment. Because if you miss a single calmer, I can actually throw everything off and it wouldn't be valid mockup. So what we're gonna do is we're going to copy and paste this for now. Then I'm gonna go into layouts and going to products and then single.php HTML. Now at the moment we're defining the main block. Then define a mock-up block. And then putting an end. I'm gonna paste in all that data in a moment. We're going to look at customizing it. Just going to pull that back. Before we customize it, we do have to have a place this block. So what we're gonna do, it's gonna copy that name. They're going into default and base off. And you'll see here we've got block main in the head, underneath all the head data. I'm going to copy and paste that block, Maine. And they won't put that name in there. It's important to have the full stops are the blocks or access to everything. Till I contexts. To test this out. This should work for all of our products now it's very generic. Dada will go to a website. We'll go to products, and we'll just choose any products for now. Then we'll right-click Inspect. We'll check in the head and it's getting pulled in from the product, but we're going to customize all that. So it's relative to each product. I think only one product, It's actually got data and the moment product I've been looking at is the buck. It's called roadblock. Working on these products. Look down here, we've got name and we're going to use it's actually in the total, the total partial. We're going to use dot title down he looking back that out. And every product is going to have a page title so we can, and it'll be too hard about that. Then images, this is where it starts to get a bit complex. So the first thing I do is put in an if statement at the start of images section. So if dot params dot images and that's if images have been provided. And I'll show an example of that. If we look at our roadblock product, we've got images provided he under the image's property. And they provided in an array or hugo, they call it a slice. You can provide multiple images there. If that's true. This section we'll display and we'll put an N tag here at the bottom. Then what we're gonna do is look at ranging over all the images that are being provided. So we're gonna do range dot, params dot images. I'm just going to do it at the top for now. So we can say what's going on. Then. Just financial show you how it works. I'm just kinda putting a dot there, a calmer after it. And we'll save that. And we'll check it out and we'll do a few modifications. On the roadblock product. We right-click and inspect he going to the head. Then script t. Notice it's generated box dot JPEG and a calmer after it. There are a few problems. The first problem is that every product that's generated is gonna have a calmer after it. And there's only one product there and we don't want to calm her off to that first product. Because in JSON you don't put a comma after the last item. The other problem is that link is relative to the folder where we need to generate a tool, proper absolute link, and that's what Google wants. So we're gonna, we're gonna get rid of that comma. And then we'll look at how we can generate an actual link, not just a filename. First thing we'll do is we'll look at getting rid of that comma. The way it's gonna work is we're going to work out which item number it is. Now, logically, you would work out which one is the last and on the last autumn, you wouldn't put the color in. An easy way to do it is we'll actually put the commas before the first item that we know color before it. But on every other atom, there'll be a comma before the way that works. For the range, we actually generate an index number as well. When you do that, you've got to put in two variables. You can call them whatever you want. But obviously, if you call them something that makes sense, It's much easier when you come back to it. So we'll call the first variable index comma, then elements, and then colon equals. And then we'll put some code in the if. In a safe and not equal. Index. 0 will put a comma and a space in the end. Now we can still use this dot notation here. Or we can use element. Match up. He got index and element. They're both being used. You doing lots of items, you better off just using the dot notation for the element. But if you're using one to put elements into his house and clear. So let's save that one of the quick look. Fixed up. The common ratio is the first item isn't having a comma before it. But we still haven't. But it's actually not valid JSON anymore because we're missing a comma in there and it's actually not the first time wafted like those in alignment. We're now going to work out the link issue. So we get a absolute link, not just a filename for the current folder that were until it's fixed that up first. Now it's getting a little bit out of the scope of this part of the course anyway, but this is Hugo casts course after all. That image is being provided as a page resource because the image is sitting inside the folder where the page exists. And got an example here we've got our first posts and we've got our images folder, which isn't compulsory. And then you've got your images within the actual folder where our index dot MDC hits. There's a few ways we can access them. One of the ways is resource dot, dot resources dot get match. That's probably the most common one. So let's go ahead and let's have a go at that. Where are we gonna do that? Is What did you learn about heat? And we'll do dollar sign for a new variable image. And because we're assigning it for the first time, we have to use a colon equals sign, image equals know we use dot resources, get match. And then we'll place our element in. The problem we're gonna have is we're inside this range. Therefore, the dot isn't referring to the global dot for the whole project. It's referring to the actual part of the range we're on the assignment, which will be the image itself. So we have to use a dollar sign started that. And that will direct the resources to the root of your project so you can access any variable you want. Then down here, we're going to do image dot. Permalink will save that. It should work. Now I've got a complete absolute link, absolute URL to the fall, which is what Google needs, will then go ahead and delete these three will add an extra image. And we'll check, we'll get our commas through and we'll delete these. Three. Save that. Then we'll go back into products. And for now we'll just copy and paste the boating median to the bikes. Will go here and comma dot JPEG save that. And then we'll go into the head. We'll go down. You can see we've got our two images pulling in there. We've got a comma between them because that common comes in before the first one. What we'll do now is we'll get rid of the space before that comma and the new line. And we'll get rid of these extra new lines as well just to clean things up a bit. And then we get rid of new line before image and after it come in here and where it says aef dot powerapps dot images will put a dash in there to get rid of the new line for the end tag as well. The coma, we want to get rid of the space before, so we'll get rid of that one on there, but we'll leave these integ alone so you get a new line placed in and put some dashes in these variables. That just leaves, that ain't, it gets me line for the permalink, dashing the start and end of range as well. And we'll see how that guy's be close to them. At least one dash I think. Want to keep that new line at the start, will see if we can do that. I'm not sure if that's possible. Rid of that. Pretty close. I'll see if I can pull that come up, but it might not be possible. I'll put a dash in there at the end of the image and that should get rid of the space between image and carbon. But this isn't that important. It just makes it clearer when you're trying to debug code that looking really clean, I'm not gonna remove the boats image. I'll show you what I had to do to get it finally worked with these. Isn't that important, but it doesn't make debugging a lot easier, especially with Jason because you need to make sure you've got your commas in the right place. That's what I ended up having to do to get to work properly. It's a bit hit and miss trying to work out which stations you have to use. A multiple we can do to make our code a bit shorter. Instead of using an if, we can replace that with width, then everything in-between inside these, inside here, the contexts will be changed to dot params dot images. Therefore, over here where we're ranging, which is ranging over the dot because that's params dot powerapps dot suicidal nobody code there. But he would we're using a dollar sign to get us back to the page itself. Makes it will do is the description. We can do that depends how you put your products setup. Quite possibly you'll be looking at DOT content, description of your product. Sku and NPM in manufacturing SKU and manufacturer product number. In this example, I've got them as parameters. What you're gonna do there is dot, params, SKU. You probably want to do a width statement just in case it hasn't been provided. And we'll Control X, Control V. And then we'll do MPN. Dot, params. Factor is part number. Then we'll do brand. Brand. Now reviews are quite complicated. If you are going to be including reviews, you need to have credible information so you can read up on that if you do have credible reviews. And same with aggregate writing, you've got to have some credible information that you've actually linked to goods. Google's gonna check it for you. Now price. So what we have to do here for URL will get rid of those brackets. You can actually get it from our P, the permalink. Because the actual page, so we'll put in, actually don't use inverted commas or it won't work permanent. The actual page, it depends on the current you're using. Mines AUD. And then this will be dot params dot price. Whichever products can have. In theory, you could do with dot params, dot price, but you would have to put a dollar sign in because we are changing hands on price and make it a lot easier to actually leave that dollar sign out. Price there. We don't need valid until the autumn condition. The example here of new condition. There's lots of reading you can do on this page, but we're just going to keep it truly. Put that new condition in there. We'll save it works. Check out the JSON. We've got our description he SKU, MPN, brand. However, we will need to get rid of the inverted commas because it is escaping characters because it believes it's JavaScript. So give me very common on description string and we're gonna get rid of some spaces just so it's easier to debug. Got to description and we'll get rid of those commas. We'll create that for us. The end of all these lines. Put a dash in the width tag and the antagonist should clean things up a lot for us. Having clicking great apart from the description meets a few more things we have to worry about. The rest of the data is looking really good. It's valid. Markdown. So let's now go back and we'll do a couple of things. That problem we've got hears with Stuart, some characters coming in. They look like HTML characters are being escaped also got the new line character being escaped. So let's say I fixed that out. There's two ways we can do this. The first way is you put in a pipe and then planet Phi. But there's one more thing we're gonna do and to make it easier, the other way you can do it is using the variable dot plane with a capital P. It's exact same thing as plaintiff dot content. We're nearly done. We just have the newline characters to remove. They've been they've come through with the plain text With Ease. Plaintiff filed up playing. You're still gonna get this new line characters. And because we're in a script, they being escaped. The only way to get rid of that is to do a manual search for it and replace them with spaces. Let's do that now. The function we're going to use this quarter replace, we have to do is write down the function, replace our input which we dot plane, look for the newline character and replace it with a space. Put replacing. Then we will look for a new line character which is backspace, backspace in, and then put a space in and that should be it. So let's look in. Perfect. Here is a space at the end, but it's not worth trying to remove. One last thing we've got, if dot powerapps dot price at the end. If for example there was no price, this section wouldn't display, but you didn't have a trailing comma after the last object. Mentally, they have a problem. We know that every product will have a price. So for that reason, just take that out. And we'll know that our last autumn will end without a comma. That makes it a lot easier for us. Let's save that and check everything looks good. And everything is looking perfect. 7. Breadcrumbs (HTML and JSON-LD Markup): The breadcrumbs lesson. Breadcrumbs used to help both users and certifications understand the structure of your website. Breadcrumbs enables users to easily navigate up the hierarchy of your website to a page that they've previously been on. To help search engines. You can also provide breadcrumbs as structured data, and this is what Google recommends. I've left the link to this page in the results section below. Here's an example. It's really basic one on the Google page about what a breadcrumb ease and a visual example. And we're going to be using Bootstrap's built-in breadcrumbs classes to help style it. We're also gonna be looking at doing some structured data markup is the breadcrumbs as well. So left to link to this 12, we're gonna get to that second. For now, let's get in and let's say some breadcrumbs. Going to use Bootstrap is built-in classes. Here's an example. So we're gonna go and copy and paste this example into our project and then we will use some code to make it work. I'm going to go into our Layouts folder and then partials and the DOCTYPE HTML underneath Navigation Menu. Put it in our sample breadcrumbs. We may have to provide some padding. We'll see how it looks. We'll save that. And then we will, if you haven't already got the dev server running on the desk and we'll check it out. The first problem that we're experiencing here is the navigation bar is sitting inside a fluid container, whereas the breadcrumbs on. So let's go back to the code. If you look at the map, you'll notice I've put the fluid container inside the mouth. Somatic tag will match that functionality. Fully breadcrumbs. So we'll do.com, dash fluid and tap that. And then we can drag in breadcrumb content. Then we'll have a look at that. So it's looking a bit better. Let's go ahead now and look at how we can generate the breadcrumbs using Hugo. First thing we'll look at is the current page. To get the text for the current page, we use dot title with a capital T. As a few more things we can do to clean it up. If we put a pipe in that shift and the button above enough, we can use human eyes to read any dashes from the total. And then we can use Tidal to capitalize every word. Then got to get some code to generate the parent pages. And we're going to use a feature called inline partials. We'll call the partial and the address to it. We'll make it inline slash breadcrumb. You got to make sure passing the context. Gonna put a dash in there. Then we'll go ahead and we will create the partial, will use define. Then it's already defaulting to the layouts holder. So we've got to define partials slash slash breadcrumb. The reason I've chosen the path of inline slash breadcrumb is when you defining a partial in line, you actually define it globally through the whole of your Hugo site. And falses to define it. For example, partials slash breadcrumb. Then let's virtually creating a Broadcom dot HTML file. And I want that to get in the way of any other false. So I use the folder of inline that way I'm creating a scope of inline and I'm not interfering with my standard partials because we're not printing anything. Put dashes at the start and the end. They don't want to affect the source. And then we'll put an end tag and then inside there will copy and paste the aim, one of these lines. Then we can copy and paste the email text for the total. For the link. We can use dot real permanent default. In fact, he is called the partial, but it's actually pretty much a reproduction of what we've done. We need to extract the row permalink and the total from the parent page if it exists. We'll do for that is we will use dot parent. I'll put them in tagging. Then we'll delete that. First-line. What's going on currently do is it will generate the current page, and it will also generate the parent of that page. But what happens if you have a higher level loving grandparents? You've got three levels. You have to do is inside this with parents statement. We will copy and paste in the cooling of the partial. I will just intent to make that a bit 83 as well. What's happened now is it becomes recursive. So we're calling the partial. Jackson says apparent if as a parent, I didn't sets the text for the bird crumbling, but also it checks if there's a parent of the parent calls a partial, and then it checks either the parent and that parent. And that's what recursive means. It continues to this day for and deeper until it runs out of parents. That's the K. On site. You're going to run out of parents pretty quick. You are only going to have it say three or four levels deep. And that's why you're not going to create a continuous loop and, you know, kind of crash the server. Will save that and then we'll test it out. If you go to the product page, then we're going to boat. And you'll see we've now got the three levels and we put the links that work. That's an example of the recursive behavior and how it goes to each level of depth which is configured for that particular page. Gone to view the source of the page. You'll notice there is no new line between L first list item for our breadcrumbs and the second item. So we go back to our source code and we'll change that so the new line is generated. If we remove that dash, we call the partial and we'll move this one as well. And we'll go and check the results. That's much better display of the bird Chrome source. You don't have to remove area single-space. If you're doing an inspection, it will be removed for you anyway, anywhere mystifying for production, that'll every single space we removed. We're just trying to make it easier to debug. Let's say slink in the results section. It's what, how Google recommends use create structured data for breadcrumbs. An example, he single breadcrumb trail, which is what we're doing with static web design setting start generation. There is an example of string there. And then they've gone through. You'll notice you've got position one for the first one, position two, position three, and you don't have to provide a URL for the last position at around he works out that that's the current page. Let's go ahead and we'll copy and paste all of that. I will pop it in and then we'll start customizing. I'm gonna create a new partial, I'm gonna call it Jason dash dot HTML. And then I'm going to go into the base delta HTML partial. Make sure you put the full stop in there. I'll put some rid of any extra spaces. It doesn't matter that much. It's more fun debugging. Then we'll buy stock coding and we'll save it. And we'll save it comes up to start with right-click and inspect. And then we'll go into the head office, trace an LD, and there is our default breadcrumb. We haven't actually set it up to work with your site. So let's now go through and set up a little bit more complex than the previous breadcrumb, an example. It doesn't work that easily, unfortunately, because of the position numbers. So let's go through and we'll make that happen. The first thing we'll do is we'll put a comment in. We'll put the URL for the dock and we'll just explain. It's the word crumb, structured, markup. Jason. Now we will attack the position later on. But the first thing we'll look at is the faunal least autumn. And this works very similar to the previous code we were looking at a recursive partial. So what we'll do is we'll look at creating this last autumn. Will do. Scratch. And we'll call it list item, the key slice, and then a dict. Then we can copy and paste these three lines. The first one, we will remove the column. Then we will remove the comma at the end because that's not how we provide two. Because we're just creating a standard dictate. We're not trying to create Jason in terms of the name. Okay, back to our handout and we can actually copy and paste that snippet there, cleaning up the total of the page in case it's gotten detach, isn't it? Or it needs to be capitalized. Name. Put that in. But we remove the brackets and because we're using the pipes, we have to put parentheses around because we're providing some transformation that otherwise you could just put in dot title. Now we'll leave physician F and F because we'll attack that in a minute. Because we're not printing any text T, I'll put dashes at the start and the end. Let's factor out a list item. Let's go back to the top. And we've got these two lines. Cut those out here underneath. And we'll get those lines started. We'll do is sign, scratch, dot map. We'll call it breadcrumb. We're doing two of them. So copy that and paste it. And then we can copy that. It takes for the first one. Pasting, they get rid of the column. Will copy the six for the second one. You get rid of the column. We need a third line. Popping in the slice. Get rid of that. We'll go back to the Google Doc. We've just created these first two lines, and that's just key value, key value. We then got a key and the value is an array. We use a slice. We've got to provide the key. Then the value will be an array, copy, list element. Cut that, paste it in. Then we need to provide the right. So when we do that is we'll put in some parenthesis. We'll do scratch. We're going to be getting least atom. Before we can get this to work, we have to go back up the top of the page and we'll define a local scratch. Scratch, colon equals scratch. Scratch. It doesn't pollute the global namespace in terms of Scratch. Get rid of that as comments. We will label all of these texts. We'll generate the JSON data. To do that is scratch, dot, get, breadcrumb. Then we're going to sonify. And then we have to run a safe JS so the strings on escaped. We're going to add some parameters to just solidify, to lay it out neatly. When we're in the development environment because we don't want it to be minified onto one line. Provide a dict. Then prefix. Then we provide one space for prefix. Then we provide two spaces and then we close off the DQ. Save that. And then we'll have a look in the browser. Inspect inside the head. So far so good. First, second law and perfect. And then we've got the K for our deadline and our values coming in as an array. Let's have a look now at how we can generate. The parents will do, go into the HTML and we'll copy and paste the recursive partial and the inline code for that partial that we created earlier. Then we'll paste that in just above our list from scratch. The first thing we'll do is we'll go through and wherever it's called, breadcrumb will all click after the bay. And we'll add dot at the end with a capital D. Because the inline partials, they look quite simple. It's actually a global namespace. And we don't want to try and conflict with inline slash breadcrumb. And then we're working with inline slash bread crumb Dada. Go through and we'll relate the line of HTML. Do some tapping to make things a little bit easier to read. And then we'll copy and paste in Scratch dot add under the partial, and we'll fix up the timing. Now, the first problem you're gonna run into here is Skype we're trying to access tell us on those. Scratch this partial. You can only access things via dot notation. We'll have to do is we have to provide a dict. Dict. And the first thing will be Scratch. Scratch sets sorted and then provide parents. And it will provide the capital P because you can't access dot parent anymore unless you provide three parent has this name dot context. We're going to have to go through and add these to the recursive call of the partial. This is where it gets a little bit tricky. Now, we're inside with the parent, therefore, we can access dot scratch. We'll do is we'll make a new variable called Scratch CTX with a capital C colon equals dot scratch. Let's say here the two dicta items we've got dot, scratch, dot parent, lowercase. We're accessing dicta items. He scratch dot parent necessarily in lowercase and then they are dot scratch dot parent. So now we can use Scratch CTX. Pop that into the recursive call of the partial. And then from scratch dot add, it'll be Scratch, ctx dot add. Say it's at, and we'll have a look in the browser. It's working really well. We've got our home, our products, and our boats were missing the URL. Back on Google, we have quarterly use autumn, then an absolute URL. It's an easy fix. Autumn, and then you don't need parenthesis around it loose. I'm not doing any further transformation with pipe, so we'll say that and have a look. That's great. We've got our arm pulling in there. Let's have a look now at how to generate the position of asset counts up from one. And I would see highest parent being one, and then the current page being the ultimate loss number. We use a scratch to countless numbers up. Before the define scratch dot set. We'll call it count, and we'll set the count to one. Well then look at getting it. So for position in parenthesis, we'll do dollar sign, scratch ctx, dot get, count, FG, scratch CTX because that's how accessing scratch inside these partial and inside dot parent. Then before the end of the parents say if you click at the start of the line, you'll see that bar comes up. Before the end of without parents. We're getting to increase our counter. We'll do we'll do those on Scratch. Ctx dot add. Key is count, and we're going to add one because they integers actually adds together and the number increases automatically for you. That's all we had to use a slice down here without ADD because we want to add to the sauce we didn't want to concatenate takes together. Then for our final position down for the current page, you can paste it in. We have to get rid of the CTX back to a standard scratch. So save that and we'll have a look in the browser. It's working really well with numbers counting up 123. That's working perfectly. Let's have a quick look at the source. Source is generating quite well. That's really easy to debug. There's nothing difficult about the way that it's being generated. And that's because we're using JSON and phi. And we added those parameters with the date that it was all spaced out. Nice, awesome, nice and evenly. 8. OpenGraph and Twitter Meta: Welcome to the lesson on Open Graph and Twitter cards. It's all about generating Meta tags that will communicate with Twitter and Facebook and other social media platforms and also search engines. If your page is shared via social media, the platform will do its best to generate a preview of your page for the post or message where the sharing taking place. But if you generate Open Graph or Twitter Card minute tags, you can have control over this preview and the information that we pass onto the social media platform. You got has some built-in templates for Open Graph in Twitter Cards. Although there are some custom fields that can be added and you could even look into the Hugo source, which I'll show you a new code, even overhaul it yourself for your own use. Search engines, as I said, can also use this information in these tags if they wish. But the primary use is for social media sharing. Just get started by having a quick look at what Twitter actually asks us to do, and this is their official garden. I've left a link in the results section. So they've got to start off with. The first thing you'd want to do is admit Italian. It's called a Twitter card and it's gonna be a summary. And then we've got all the other attributes that you can have, the site, the creator, and so on until let's go through and have a look how he does that. We've got a link here to the Hugo side. We've got internal templates. And there's a lot of built-in templates with hae guys have to scroll down, find Open Graph weight back to that in a minute. What 2D cards says he, for it to work, you're going to need a description for your page. Then you're gonna have to have some images for that page and they only provided as a slot. That's the current page is being set up. Now, the way that you use it, you've got to run this particular code. So let's copy that. Let's pop it into our head. Go into partials, and then we'll go into head will find a spot for it after the kind of cooling. So we just did. We'll pop that in. There. We'll put in the actual Twitter account. There's an optional extra. We'll look at these two last one tier to the site and Twitter credit. So we'll copy those and then we'll paste them in. And they will have to do some logic. So we'll do with dot, dot, params, dot, tweet, dash into that and then dot. And then we can copy and paste that first line. Just want Twitter creator dash as well. We have to set up some parameters to despite these side that will go into L config. And it will scroll down to Parameters. Tab in and we'll do Twitter, site name and then create our account. Probably have to put some inverted commas around the axon, doesn't confuse YAML. We'll save that and we'll give it a run. So we're checking the head and we've got our Twitter card, he coming in. And then we sit down and we put our Twitter site and credit. The reason why I did those two customer wants to HISAT And credit is because it's something which Twitter gives us the option to do. But I'll provide this link to the actual source code if you go down into the built-in templates in the GitHub repository and then open up Twitter cards. You can see how it works. And there is no option there for SWOT and credit, although we always want he thought site dot social dot Twitter, but that's a bit of a complex configuration and it's not officially supported. So that reason often my own. You'll notice that you've got with dot description. And if we description isn't available, then it looks for a summary. Let's have a quick look at Facebook Open Graph. So it's a, it's a system that's designed by Facebook, bees, wasps, and all the social media as well. Here's an example here we've got the URL to the page, the top of content, that title and description in an image. And if we go back, we can have a look at the one that is provided by. You'll see that all these atoms are being populated, including images. Let's have a go and I'll scroll back up and we'll copy and paste that information in fall of Facebook, open breath. Then mcons on Twitter. Just see, understand how you have to use images with these products. That's how we have to provide immediate. You have to put them in the same folder as the content and you have to link to them he under images using a slice, using some square tagged, otherwise, you can do it this way. Get rid of that comma. Let's see other way you can do your images. Let's save that and let's check it out. Check out head. You can see we put our two Descartes he, and then we've got our Open Graph. And it also pulling in the images as well. Is looking good. 9. JavaScript Optimisation: Javascript optimization. These next few sections are all about helping make your pages load faster. Search engines, do you reward people who create pages which load faster and provide a better user experience? This section is going to be a bit of a summary to IIT started as it's quite in depth. And there's lots of different options that you can explore. By using a static site generator like Hugo. You're improving your page load speed, which will help create better SEO out of the box. However, you guy doesn't include anything for optimization of JavaScript. By default. You should always use external CSS and JS files for this kind of content and not include the content inline as I've done in this website example. This enables those simultaneous download and you can control the way that this happens. This also makes debugging much easier as the built-in debugger will show which line the error has occurred on, will be supplying the CSS rules can be found. There are benefits to splitting large bundles. I said it applies to both CSS and JS. With HTTP to multiple requests can be handled at the same time without creating a negative impact on load speeds. And this is within reason. If you have way too many requests, these will eventually slow down the downloads page of the site. For that reason, you should make sure that any large JavaScript or CSS falls as split so that multiple smaller files can be downloaded FASTA simultaneously. Bundles like webpack can easily split large files. However, this can be overly complex and it's easier to just, just to separate different libraries or scripts into different GIS files if need be. By default, if JavaScript is in the head, it will have to be fully downloaded and executed before the browser can continue downloading the page and rendering it. A simple improvement to this is to move the JavaScript file to the bottom of the page just before the closing body tag. The page loads before the JavaScript itself is downloaded. More advanced options are async and defer. By placing the JavaScript following the head and differing, the browser will start downloading the JavaScript following immediately while the rest of the page load, but it won't actually run the file until the rest of the page has loaded. This is a great feature, however, there is no foot fallback for this behavior in older browsers. And an older browser which doesn't support differ. The older browser will download the script and then execute it before continuing your page loading. If you're not worried about supporting really old browsers, this is a great feature and I'll show you how to do it. Let's have a look at the side. Well, first of all, run it and then we'll open it up in the browser. Right-click and inspect and have a look in the head and you'll see I have included the Bootstrap JS file from their CDN. Cdn. So quite quick for delivering these files, but I've included in the heydays people always do you say put your JavaScript in the head. And the problem is that it will become a blocking scripts. So let's go back and let's put a tag on that real quick fix. And then I will look at some more complex ways of improving the JavaScripts fades back in Visual Studio Code, going into layouts and then partials, and then header.html. We'll have a look for the link to the JavaScript CDN. So the first one we've got is Bootstrap JS. All we have to do is put the word differ in there. Then save it. Then we can go and do a quick inspect. Can see there that it's recognizing the word differ. We'll actually start downloading that fall as soon as the page loads. But it won't stop the rest of the page loading, which is a great little way of improving JavaScript quickly without having to get too complicated. But let's go ahead now and look at how we can further improve things. This concept is called tree shaking and also known as dead code elimination. By only including the parts of a JavaScript library that you need, you can reduce the size of the libraries that you include in your website. Do you do this? You need a JavaScript building tool which supports tree shaking. And you need to selectively import the library components that you need through a JavaScript file. You go, Here's the JavaScript builder built-in, which is called ASPE. However, he does not code which supports older browsers because it has no 19 years flop support. How about you can use Babel to Apple to E85 if need be. If we look at Bootstrap's native browser support Italian bees on for ES6 browsers to keep things simple rule and maybe building for ES6 browsers to learn more about S5 and ES6 building with Hugo and ESBL, you have to look at my course on JavaScript building with Hugo. And this also includes babble for further browsers support. Illustrate what I mean with Bootstrap only actually targeting ES6 browses if we go into bootstraps GitHub repository, and then I've helped the dot browsers list RC file. You can see the browsers and its supporting when they build the JavaScript bundle that you can access through a CDN or you can download directly from bootstrap. And for example, they're targeting Chrome version 16 above Firefox, version 16 above. Ios 12 and above, Safari 12 and above, and then not supporting Internet Explorer. And if we go through to ES6, which browsers support ES6, you'll see that all of these browsers, for example, Firefox support an ES6 back in Version 50 for crime supported it back invasion 51. Bootstrap isn't actually supporting ES five browsers anyway. So for that reason, we're gonna go ahead and just output to ES6 to keep this summary quite simple. There's a couple of problems with ASPE, and there are a few things that ESP old won't actually support when you're outputting to ES6 or ES 2015. So he's a bit of an issue, but you can't over-hyped with Babele if you need to. But generally speaking, it's not gonna be a problem. Npm was a requirement for this course and you would have had to use npm to install he go into first place. So let's go ahead and let's use npm to install Bootstrap. So npm install Bootstrap and turn that into a new terminal window. It's downloaded Bootstrap for us. And if we go into the node modules folder and you scroll down, you will find bootstrapping. You'll also find pop ab.js. That's a dependency of Bootstrap's JavaScript. Now we've got Bootstrap installed. Let's write a script. It does a basic build and then we'll go and we'll trim it down. First thing I do is create a new folder called assets. Inside that will create a folder called js. And then we'll create a file called main.js. That main.js file, we're gonna import all of the items from the Bootstrap JavaScript. Navigate that to work. You have to go into a node modules folder and into Bootstrap and then GIS. And you'll have to open up bootstrap.css dot js. If you scroll to the bottom, you'll see the exports. If you go in there and you highlight all of those items and copy them, you can even do it with the callee prices won't make kill off a little bit easier. And copy that in your main.js, right, Import, Paste that in from some quite marks bootstrap, semicolon, save that, that will import every file. Now what you can do to make this a bit easier to read, credit a new line for each one of these components. We're going to trim that down in a minute, but for now we'll just import all of them. Then let them, we'll trim it back. That setup. Now what we have to do is we've got to correct some code which will run this bill, build this import, and pop it onto the webpage. You have to go into the partials folder and then the header.html highlight the line we're importing bootstrap from the CDN and then Control K C to comment it out. And then a new line, we'll start putting in some code. I'm on the JavaScript building page and I'll put that in the results section for you as well. Just go right to the bottom. There's a bit of an example down here we're going to use, we're not going to use any of the options that they've used. We're going to customize it. It will just copy and paste that whole thing to start with. We'll paste it in. We can get rid of the externals and the defines and the options. We will just pull that right back to the dictum. Then we can change it from scripts slash main.js to js slash main.js because that's the fall we are referring to. So I save that and we'll see if it works. You can right-click and inspect and hidden to the console. You'll see that we're getting a JavaScript error and it'll show you the line it's on. And that's because we've removed the Bootstrap JavaScript and now it's letting a little bit too early. So what we're gonna do, comment that out for now. We'll put that into an external file as well and will to fair it. And then we'll come back and we'll get make sure that I bootstrapped being put to work. And what we'll do is copy that. And we might even will just comment out the whole section for now. Let me actually pull up the bottom of this file for now. Just get rid of the script tags. We'll save that. Then you can go into sources, GIS. And you'll see we've got, this is actually a folder on the server which we've just created. And you'll see we've got main.js. And there it's importing all of the Bootstrap components. The first one being popular or dependency. And it's putting them all into one file. If you scroll right ten to that file, you'll see that line which is calling us some brief before. There's that long right into the file. Let's go and set a few options for JavaScript building. And then we'll go from there. So we'll just go through these options real quick and we'll use a few of them that are relevant to us. First one is target path, and that means that the output file will be in a different folder and file name compared to what was important. And we're not too worried about that because we've set our project up fairly well. And I'm happy with outputting to the same folder and phone I missed it. It's important. But moving down, minify, we're going to use the JavaScript build tool to handle minification because it will do a much better job. You guys meaningful at all. So it will be setting that to true. Moving down Target by default and it's ES snakes. And that means that we add putting fall JavaScript file, which only works on the newest of browsers. But we want to output as ES 2015 is five, isn't natively supported and it's quite tricky, but we can output is ES 2015. We don't need to sit format because it's already defaulting to IIFE, which is what we want. Source map, we'll be doing an inline source map for development. Let's go back and we'll set those up. We're going to options. We'll do unify. And then a space. And true. Then we'll do target 2015. Then we make a second one of these will change our minifier option to source map. You would expect that to be true, but the actual option you need, these inline styling option you can sit, which is fine. Now, what we're gonna do is initially declaring a variable. We're then going to reassign it, but only if we're in the development environment. So we do that is we go If a q dot environment with a capital E, that's if it's in development. Then we're going to change our options if that's the case. And then we have to. As usual, we'll put some dashes, start and the end of these lines so it doesn't create any space in our code that we're trying to debug something we can clearly see in our source What's going on. I only take two seconds, but it makes your life a lot easier. We'll save that and we'll have a look. They may have to kill and realized the development of getting this to work. But if you go into inspect and then sources and JS and have a look, it says source MAC detected, which is exactly what we want and makes your life a lot easier when you're trying to track down bugs. It does say, Do you want to pretty print these minified file, but that's actually not correct because it hasn't made me unify. There's probably a couple little things in there and it's picking up on it. It shouldn't go through. And let's run the development server in production mode. We'll see how it's different. You ever look at these NPM scripts that I've included for you? There's render to DSC, which creates files for you. So there's two options you can do build and that will build all the false to the public folder. But to make things a bit easy for you, you can just go to render 2D production, run that and it will run a development server. But it will actually be in production mode. And I have access to the files as well if you need them. I'm just going to kill my other service we didn't have to running on. We'll look at that. Will go into the JS folder, main.js, and you'll see how everything is written on one line. It's got rid of all the spaces. It's also reduced down a lot of the variables to make things more. We can hit the pretty print button and it will, the browser will do its best to make it easy to read on multiple lines, but no guarantee it will be laid out exactly as you wrote it yourself. I'm gonna just go back into the development server. Fanon will change a couple of things around 16 can do is look at fingerprinting. What we're gonna do is we're gonna use a pipe and we're gonna run fingerprint. Then from there we include the source, we also have to include an integrity. So let's go ahead and we'll set up fingerprinting. It's really useful for when you make a change. It forces the browser to download the newest version. It's also good because it means a person cannot go in and create a new JavaScript file and touch it to the side because the browser will block that because the integrity will not line up. We'll go into where it says JS, build or put a space in and then a pipe and we just got to run fingerprint. You could do resources dot fingerprint. Just tell me what results is thought AND gate with a capital G. But you don't need to say, for example, you could write Resources dot fingerprint with a capital F. But it's not required because we've already called resources once we can just do it with a lowercase. We'll do, we'll have to put some curly braces around that. So that will actually put it for us. I'll save that and we'll have a look. We've got our script tag here and it's pulling in the soils. But you'll notice there is a hash at the end of the fall before ab.js. That means every time the JavaScript file changes, a new file with a new hash we've produced in it forces the browser doesn't know that new file with a new hash. There's no confusion there. The Raza, and it's also the integrity tag which has been generated based on this fall. So if someone wants to try and generate a new JavaScript file and attach it to the website. It would not work because it wouldn't match the hash. So whenever it's downloaded off your salary is whatever the user will see on the screen. Now I'm can do anything in-between. Let's get three down and make a partial file. We'll do, we'll highlight everything that we've just created. We'll cut it and we'll save. And then in our partials fall make a new IF are called ES, build dot HTML. We'll paste that in. Then what we'll do is the source back-lit out and we'll just make that a full stop. And we'll save it. And then we will go back to the head. And we'll put in some curly braces. Partial AS build. Instead of providing a dot, which means it connects as everything in the site, we want to provide it to the address of the file. So it's js slash main.js will get rid of the spaces at the end. At the end. So save that and we'll have a look script working. Let's now separate the, the last line into a new file to show you how you can split. I wouldn't slip for one line, but just for the sake of this example, we'll do is we'll call my insulin main.js. We'll call it lambda dot js. And then we'll make a new line and we'll call it assets JS. And then we'll go into our file here. We'll rename that to dot and won't get the last line. I'll make a new file called Assets dot js. Paste it in, and we'll save our head. We'll have a look. We've now got our two files are split into two files. I didn't have I have to remove the dashes at the end of this line so that they were on new lines. 10. CSS Optimisation: Css optimization, this is nonetheless an on increasing page load speed so that search engines treat you favorably. And the first thing we have to do is you'll notice that all the CSS has been provided in line and that really should be provided in an external file to increase download speed. We're gonna go one step further and we're going to try and trim that down. When you import a CSS library, for example, Bootstrap in this case, you can choose to only import the components that you need. But to do this, you need to be importing the SCSS source files and selectively importing the component and then compile it into CSS. You can't just do it by importing a CSS library from a CSS file. There are also some tools, for example, per TSS, which remove unused CSS classes from your CSS files. Look at every page in the site and then look at your CSS file. And they pruned back CSS classes which don't appear in the entire site. Website you're looking at. It's actually already set up this SESS compiling to learn about how to set this up or how to prune. I knew CSS classes. You'll have to look at my course on SCSS and these courses linked in the resources section. We now don't have a look at how we can selectively import the CSS components that we need. We're on the bootstrap five docs page under the Customize hitting and then optimize. And you'll see here we've got a big list of all the different components. And we're going to have a look at the labeling, some of those that you may not need biota photo all depends on your site. You have to get it spot on all parts of your site will become broken. What we're gonna do is we're going to highlight that whole section there and copy it. Then you go into your assets folder and make a new folder called CSS. And then making you following that code main dot SCSS. You can then paste in all the texts. Now, We're gonna have to make some changes because the imports are relative to the Bootstrap folder in Node modules, what I mean going to a new module is followed up and hold onto Bootstrap and then SCSS, then open up Bootstrap CSS, and you'll see the exact same imports are visible. And these imports are relative to this file. In our main.css file, it's like headed in a different place, so I'll have to do some edits to that in a minute. But for now let's have a look at how hue guy does its CSS building and our posts. Css works. The first thing is you guys, SAS and SPSS support. We're not going to go deep into it because I've credited a really big course on Skillshare for that. And most people will be graduating from that course before they get to my SEO course. What we're doing is we're pulling in an SCSS file and we're going to be applying some options and then we're building and I've actually already got it set up in this website for you to make your life a lot easier. After we've then built the from SPSS to CSS, we're gonna run a plugin called post CSS. The texture node modules package. To run that we have to install posts css, processes, CLI, and also autoprefixer. What that does pose CSS is the package that does all the work. And autoprefixer is a plug-in for posts, css, CSS, whatever prefix or what it does is some older browsers do require slightly different CSS classes to work. And Bootstrap hasn't been written with those classes built-in, we have to use autoprefixer to actually make those classes kill your terminal and making you on. And we can do npm installed, don't do the dash G switch because that installs it globally, which can install into this project only. And we're gonna need posts css, posts css, CLI, and auto prefix. I. Hit Enter and now installed for you so that you can install these three packages. Let's have a look at the partial that I've already included for you. I have got a full course on SPSS building and a whole bunch of other things with Hugo and Bootstrap five, including modifying the bootstrap five Code VI variables. Please check that out. I'm not gonna spend too much time on it here. This is a very quick overview. If you're into partials, you'll see a partial code lips as and I call it loop says because it's the current building tool used by Hugo. And I've actually set a priority heat transport obsessive. One day when it is updated and live test, it's appreciated. And they use notes as you are at breaking changes because it will still fall asleep has to be used in that point in time, you'd have to update your code. We're doing here, we're pulling in the source which we're gonna define. We call a partial. What are different options for the development environment, which is everything inside here. And we've got our options for production. And if you look at production to start with, you'll see that we are compressing the output and something you have to specify with leap SAS is where I got to include the node modules folder. That way we can actually call the bootstrap code without having to put the node modules folder. And it will do a search in the node modules folder whenever you try to import some SCSS in the development environment, the differences, we're gonna use a source map. And we're also going to be doing the same thing they were. We include the node modules folder. We didn't have to worry about the output dog because it already defaults to uncompress the code. We're also fingerprinting, as we did with the JavaScript. Make that work. What you've gotta do is you'll have to go into your head. We will highlight all this excessive CSS which probably shouldn't be there, but I have seen it many times before and all the websites. That's gonna be quite hard to delete that because I long that took awhile. Now what we'll do is similar to the ESBL partial love we will on partial and it's gonna record lib slash main.css. Need for doc because you are providing the address to the file. Then we'll run that. But that's probably going to throw an error. Because we need to fix this up. All of these items. If we just go into our node modules, double-check where they're located. Nine modules jump into Bootstrap and then SPSS. And then you'll find all these files. What we have to do from the right of the inverted Communists back to the start of the line and go change all occurrences. You have to use your arrows. And we can type in CSS Bootstrap slash, CSS slash. And we've just edited every single line and that should line up and match this fast talker he or inside node modules. And we have Bootstrap SCSS slash, and those files are there. So we'll save that. And then we'll go and check out the site. I had to restart the server because it did throw an error. Because it is important to working until we fix them up, hit into the going to the inspect tool and go into the head and we'll check Descriptive start with. So it's telling the bottom. Go to our style sheet and its main dot SCSS, and that's big compiled as main.css. We've also got a hash. There, were also got the integrity hash, which is great. Let's now go into the sources and what our SCSS folder here and what our main.css. And it's quite long steel. It's 7,700 lines that will be slot, that will be compressed somewhat in production. But we're going to look at removing some sections that we don't need. To main dot SCSS, you'll need to keep the configuration section at the top. You'll need to keep route and reboot. Very important. You'll need taught and images contain his grid. You won't need tables. Probably any use forms, buttons. You can get rid of transitions and dropped down. Dropdown isn't used for menus. Need button group, you'll need nav, navbar. They both go hand in hand for menus. We're using cards, we're not using accordion, we are using breadcrumb, however, the shortcuts control Casey using pagination, not using badge. I use on my contact form on that particular example there I think using progress. Well this group are close or toasts or modal, tool tip pop over carousel. Also be images or off-campus has other things we're not using. You have to keep help us. And utilities slash API if you really want to get fine, you can't open a few things up and is actually another follow up just like this. And you can comment more things out, but we'll just leave it like that for now. We'll save that and check. Everything is still working. Still seems to work in stole it. Breadcrumbs. I'll just show an example of how it can break. We get back into our list and we looked for breadcrumb. And we comment that out. You'll see the breadcrumb is being broken and it's just gone to a ordered list, which is the actual HTML behind it until we do an inspect Sukkot, an ordered list, and it's been broken. So I'll just fix it back up again. That's working. Let's have a look now at a production build. Don't have looked at the code is minified. It will do, we will kill that serve that go down to render 2D production. A little bit longer to load because it's in production mode. The minify everything. Alright, let's open it up and have a look. We'll go and inspect. Going to sources. You'll say, Well, on one line there, we went to our public folder. Then open up SPSS slash main.css. You'll see how it's removed all the spaces to try and keep that to a minimum. We right-click and open in Explorer. You can say it's a 120 kilowatts of CSS, which is a lot smaller than the original Bootstrap size. Go into our node modules and then bootstrap. Css is the minified. This is a 161. We go down to 120. You save, it's not minified. It's actually two hundred and one hundred millions, quite a bit different from 201 down to 160, with an indication that down to 121, we've taken out some items. We don't need. This one more thing. You probably didn't notice. If you look at the lips as numerous, we're also running post CSS after we've compiled CSS. If you are down to into the root of the project and go down to post sss dot config dot js. You'll notice that when we're not in development is running the autoprefixer plugin. What that does is it looks in this file here called dot browsers least RC. And I've copied and pasted that out of the bootstrap repository. And we looked at before, we Javascript all of these browsers that bootstrap support. It's creating any required prefixes for those browsers. And that's handled automatically by autoprefixer. More about that, as I said, I've got the other course for your checkout. 11. Image Optimisation & Responsive Images: Optimizing images. Now images usually the most heavy resource on any website and an area where you can get a lot of gains in terms of page load speeds and user experience. And it's something that is quite often overlooked. It's easy with responsive images to forget that they can actually be larger than they have to be, since they automatically scaled down to suit the screen size or the container by existing. With Bootstrap, we use the IMG dash fluid class, utility class to create responsive images. And it's a big problem. It's important that you scale down images to a suitable size that it uses aren't downloading more data than they have to. You've got to use a program such as Photoshop to output the images at a suitable size. Lazy loading images is another great way to improve page load speed. And that's where you may just not loaded until the user starts to scroll down and the image approaches the part of the page which is about to be viewed. This speeds up the page load speed as Allen, the images which are visible or a bat to be visible just below the screen, loaded initially. And modern browsers actually support native lazy loading of images. What you have to do is add the loading dash lazy property, the image tag. The image will be lazy loaded. There is however, a popular library, library for lazy loading code. Lazy sizes. Like you saw as is his great because it works across all browsers, old and new. It's got a setting where you can actually tell lazy sizes to put the loading dash lady tagging if it's a new brands that support it. And it also generates the sizes tag for you automatically. That's for source sets. That's the next slide. That's all sets where you might want to scale Daniel images so that the correct size for the page and not too big. But then you realize that if eating images for a mobile screen much smaller than images for a 21 inch desktop monitor began to be. Why different the size required. You could resize the image so it's suitable for 21 inch monitor. But then it won't be way too big for my boss out. Mobile user will be downloading way too much data and it will cause a slow experience because of slow mobile data. We can use soil set and source. It enables us to provide multiple different size sized images in a source set tag. And the browser only downloads the image which funds appropriate for the screen. And it's not just screen size, it's also a screen density. This screen has two times density. It will be downloading an image double the size. It's beneficial for responsive web design so that the mobile years, you just don't have to download a high resolution image. Whereas desktop users can go for the high resolution images. You need to provide a sizes tag. Property said that the browser knows what percentage of the screen is being taken up by the image of the browser isn't smart enough to calculate it. However, lazy sizes is smart enough to calculate the amount of screen width which has been taken up by the image. And that's why I'm gonna show you how to use lazy sizes with source set and how to generate these images using Hugo. So here's the hago Doc page for image processing. I'll leave the link for that in the results section. There's two ways you can do it. We can use a global resource and that's using an out of the assets folder. We're not going to be doing that. We're gonna be using page resources. And that means we've got to put the image in the same folder as the markdown file for that particular page. And then we're gonna be using the resize factor. We're going to be providing a width and the height will be proportional and provided a range of width. So they're gonna be used for resizing. And if you'd like to learn more about the image feature, image processing feature in here, I've got a whole course. It goes through everything there is to know it, It's quite complex. You can do different multiple, we can do resizing, you can fit it to a certain aspect ratio. We can look at different formats. I like to use web people might as well. This is all gonna be quick introduction. Let's start with a product page as an example, let's have a look at the immunity. By inspecting. You can see that the image itself is rendered at far 46 by 365 pixels. But the actual size of it is 6 thousand pixels by ever full hasn't pixels wide? Let's go into Hugo, have looked at how image processing works, and then we'll set it up with a source set. The first thing I'm gonna do is heading to the partials folder and make a new partial code, image dot HTML. And then inside that image, we're going to start off by creating a variable called source. Then will equal page. We'll talk about that page and minute dot resources, dot match. We only matching dot say, and I'll explain that in a moment. We didn't have to generate a resized image. Let's put a variable here called width. And we will resize it to, for example, several 100 wide. And then we will create an image. We'll do C dot resize. The format is 700 and x. But again, I'm pulling the width from above so it could be set in a conflict fall for example. What we're gonna do is send V x and we'll put some comments around that. We will use the print f function will replace the percent v with width. We'll close that bracket. So that's the re-sizing down. Let's now put an image tagging IMG type for source. And we'll put these things on the lines to make things a lot easier because adding a lot of Properties. Source will be m g dot permalink. Thank you. Put the dot capital I and capital paying their ALT. We'll do Alt and I'll show you how that works just like I'll show you how the dot page and how the dots source works. More things we have to do. The first one will be class, and for now we'll just set that as I am GI fluid, we'll get into lazy sizes after we get all this working. And there's a really great feature in Hugo. And then we can pull the width and the height Out of these images that we've just resized. The reason you want to do that and pop it into your HTML is so the browser knows the hot and the width of the image. It's not so much the heart and the width of the browser is concerned about is the aspect ratio. And the browser will combine that aspect ratio with the CSS, containers and columns and rows that you've got set up. And we'll make sure that it allocates enough space for the image that this is for responsive images so that as the page loads, you don't get content flowing and flickering every way you'll have a page rigidly setup from the word go. The way to do that is we do height equals and we do IMG dot height of the capital H. Width equals g dot width capital W. Save that and see how it goes. I'll save the partial will then go into our single.php HTML under the products folder in layout. And we'll highlight the section that's with resources thought GetMax because we're gonna handle it with a partial control K, say the comment it out. Then we're going to call a partial. The partial is name of the image. And then got to set a number. Instead of using psi dot, for example, which we'll provide everything to that partial. We need to instruct the partial me forward. We're going to use a dictionary dict, which is also known as a map. The first one will be source. We've already got a width tag set up above it so we can just put a full stop for the source. This is really important pages using page resources that postulates to know which page are we on. The way you get that in these cases we can use a dollar sign and that data is handled bypass all of these width tags and it'll get us back to the actual page itself. And the last one we're gonna do for now is Alt. Make it really simple. We'll just put the title of the image, the product for now. Keep that simple. We'll say that we'll set the title of the page to keep it simple, it's warming up the best for SEO. We'll get started. Now. Ideally you would do dot title, but that's not gonna work because we're inside a few width tag t. So it's going to use Dollar Dot title. And again, just like page that will get us back to the page. Save that. Then on our page we'll have a look down at the image tag. You can save the size of the image is 700, the intrinsic size, that's the real size, wide pixels, and it's been resized down to 546. And we've got our class, they got a height and width and the Alt. And if you mouse over it, you'll see there's also an aspect ratio of 175 to 117. And that's what the brands will use to allocate enough hot that image, the width is the browser needs, it's responsively militarily. That's already said. And if he had ever on the right and look at the classes, you own the image, you'll notice that there's an aspect ratio attribute the browser is pulling out of it. Latch, the browser isn't so concerned about the height. It's just looking at the width and the aspect ratio. I'll take you through to a step further. We will look at creating some an, a right of width instead of just wheat widths. And then we'll do slots. And for example, we'll do 400600 hundred, twelve hundred, and that's gonna be a loss of wheat. What we'll do is we're going to range over those widths. So the range index, width, colon equals width. So we're going to be ranging over widths and that will generate a bunch of week, which is a singular and also an index. So we know which one we're on. And then we'll put an antagonist. Before we get into OT that range, I'm going to create a variable called source. It will make that a slice. She put a colon equals because it's way, way defining it. And then what we'll do, we will take these texts from ancient, won't pop it in there for now. We're also going to use images. Well, we'll get to that in my mental help. You mean job, he will just make that nothing for now. Then what we'll do is we'll create a variable which only exists inside the range, and we'll call that re-size. We didn't need to access it outside of the range every time we're in a new autumn and the range will end up with a new variable here. That's the re-sizing function. And then we're going to be popping that inside the source it will do, I'll say equals. And then we'll append will put it. We're going to use print f. And we're gonna do then we're going to do percent s, fold the filename. And then we're going to do V for the actual width in pixels and then w after it. Then we'll have to do re-size rail permalink. That's gonna be the percent S will pop in the relative path to the resource image. And for the width we're going to do, you will find you'll have trouble with hue guy printing these actual link. It went one will escape because it's wired. It could be a dangerous URL. So what we're going to have to do there is put some brackets around it and put it in a pipe. Safe URL with capitals URL. We'll save that off to that range is finished. We're going to get our slice of images and we're going to put them together in long string with commas between them. So why we do that? We'll do set equals. The limit. I'll sit and come up spice. What we can do is we can go down into our image tag and hello source will put equals. And it's going to be source it. Now you've already wondering what happened to our image. So what we're gonna do here, we've created a blank humidity outside of the range. And then inside the range we're going to reassign it. Now, I only want to re-assign it if it is the largest image in this slide. First we'll have to do is to sort out widths into ascending order. And we're going to do that is widths equals. We'll do sort. With sales at the moment, I'll have actually put them in the rod auto makes you close that bracket for the slice. But that might not be the case. So we'll do sort width and I'll put the right order. Then we'll go into our range. And we'll see you again. Assigning the re-sizing uses source. It would do an if a queue, if the length of the width, LEN of width. So that will come back with how many items are in the width slicer currently, alien widths will come back with the number four. If four is equal to index, add. Index1. If we're on the fourth, because there's currently four numbers in the slice. If we're ranging on the fourth number, the work I for I ranging on the fourth index starts at 0, but our length to width, we'll come back at four and index will actually be 0123. So we add one to it. So from the fourth item in the range, which is equal to the length of the slice, which is four. I'll put in tag and all tap that inside AC iterate. Then we will do J equals resize and we can't actually put race, I thought real permanent clock we have up here because we're also trying to extract hot and width. And you can't do that if you've already assigned the real PIM linked to it. So we're gonna do roll polling separately and also heart and what separately. Let's save that and we'll have a look. Let's have a look at the source. So we've got our source setup and source. If you look carefully, you'll see that there is the word 1200 in the source and that's because it's resized to 1200. Why don't we one of the biggest source to be the fallback because they didn't know how wide the screen is all the browser which doesn't support source set. And that's why I've got sourcing their head forward to source it. And you'll see, we're starting with the smallest switches, the 400 wide, you'll see the 400 w mix the first item. And then from 400 w up to six hundred eight hundred, twelve hundred W. And we'll also add a height and width as before. The only thing we have to do, these works in the browser and that is set the width. To do that. We do sizes equals, and you've got to specify the amount of screen width which at different responsive breakpoints the image takes up. There's a really easy way to do that and that's with lazy sizes. So we put in auto to get lazy sizes to pick up the image and actually do some work with it. We have to set the class to lazy load. I'll get back to more back to Ledi sizes in a minute. In the meantime, let's have a look at the widths and we'll look at settings and different widths for different parts of the website. We've got our default width t. What you might do is we'll grab those and we'll put them in a config file. Go over to the root of the project, and we'll go down to configure yellow inside. Params will put an image in there. And then we'll do widths into, make sure you have each time. We won't do default, we'll pop that in. You do have to put some square brackets around it and a comma after each one. The other option is, I'll just cut that and I'll show the other way you can released and that is iPad. You can do 400100 thousand, but I think it's much easier and less space if we do it this way. Let's have a look at our product single-page. So we'll do product single. Am. A quick look at the page and work out what to put in. If we bring the page down to a mobile view. In fact, Pictet pull at medium. You'll notice that the size is currently at 516. And then we'll bring it down. Largest point ys false 83. And then here it's starting at 336. So we'll go with 336, five thirty three, thirty three, thirty six comma 533. And then we'll bring it down to the medium size. I will say it's 516. You remove all these holy water because attention to an image fluid. Water is 0 or 535. Change our 53 into 535. Then we'll add some wider widths for biggest screen. So we'll go to 700900100. Probably 1000 is we will set widths to the config entry, which would be sought dot params dot image dot width default, which is what we just place the entry. Then we'll put a pipe in and a function called default domains. First of all, site with a lowercase s. Normally you'd provide it with a capital S like they start site. We can just put side if we'd like. And that's actually a built-in function which accesses outside for us. And that's really useful if you've got a Skype issue. And we do have a Skype issue inside this partial because we don't call this partial with a dot, we provide a dictionary. And we only provide the page contexts. We don't actually provide the site contexts. We have to use the site function lowercase S. We've then got the pathway to our config entry. We should just credit. Then if that doesn't exist. If you didn't have an entry there, that's fine because we have our default. He will go back a minute and we'll update that. What we'll do is we'll do a Q dot format product single. I always like putting in my straightaway. Then we'll copy and paste that in. We'll change default to product single. Move that semicolon as we're reassigning the width variables. So we have to remove the semicolon. Then we'll go into the config file, will grab those numbers, will paste them in. You have to remove the communists of the slice works properly. We have our two different options set up and we've got our defaults also in case there is no configuration provided. Then going to Layouts, folder and product, and I've been singled out HTML. And inside the dict or dictionary for our image partial, we'll type in format as the k. And for the value will put product single with a capital S. And that will line up with dot format Products single. Save that and we'll have a look. If we open up one of the products and we inspect, you'll see that we're pulling in the width, say that we've assigned for our single product. This is one way of setting alternate widths for different images of different pages. Now we're going to install the lights and sounds his library, and we'll do that with the command npm install a lazy sizes. You'll see it's going to download the package of the npm directory. Now let me have installed lazy sizes. Let's have a look at how to get it up and running. So I left a link it in the results section for the GitHub page. We're lazy sizes and there's some instructions here to get us started. After you've completed the first step of downloading it via NPM, which we've done here, and you don't need the save option, that's actually automatic. We then going to use import lady sizes. Going into your assets folder and then J, your JS folder and open up bend ab.js. And then right at the top. And it's important you do this first. We will import lazy sizes. Next thing we'll do is import a plane, which means we can also natively lazy load images in browsers which support in 18th lazy loading. So we don't have any as much JavaScript overhead. I've also included this link and you'll actually find it inside the plugins folder in the lysosomes as GitHub page. So we're going to use the native lazy, lazy loading plugin. So I will copy that line and we'll import that one as well. Then in terms of options, we're going to include these options here. The first option is it will automatically include the loading equals lazy property for you. Even if the browser supports it and say you don't have to include any additional configuration. And the second option disabled listeners. What that does. It means that if your, if the browser supports lazy loading, Lazy sizes won't be listening to the user scrolling. So basically turn off lazy sauces from listening to what's going on, which will speed up the experience in the browser. Good practice to put all your imports first. Then after your imports, it will then run the configuration and we'll put a comment in there. And we're too lazy. Sizes. 19th, lazy loading config. We'll save that. Let's have a look now at the basic configuration for images. Gardens number two. And you'll let us say as a non-responsive option, which we don't want as we doing responsive images with both the source and the source set, we have to do is we have to put the word data dash before the three tags, sizes, source and source it. That means that by default, the browser actually won't make sense of these properties at all. The browser will actually ignore them, but it will pick up the class of lazy load. The browser will pick up the class of lazy load and then the lazy load JavaScript library will also pick up this class have lazy load, and it will convert these three tags into regular tags out the word data, we fold them. At that point, it will lazy load the images when it's the right time. We'll go back into our project. We'll go back into the Layouts folder and then partials and image. We'll go down here and both source set and sizes will use Alt to select them all. We'll write data dash, and we'll save that. Let's now check out the website. There's a chance that I might not have reloaded the JavaScript. We'll check that out and we'll see how it works. If you inspect the source, you'll see we've got data dash SRC and data dash SRC said or source it. And we've also got data dash sizes. And then you'll see lazy. Lazy sizes is converted data debt sizes into sizes five-sixteenths. As you can see on the far left, I can't move my mouse down there, but the image itself is 516 pixels wide, wide. And lice histology has very conveniently provided that to the browser. And that way, now that it's loaded the image, we've got our proper source set and the browser can pick the right image and you'll let us see. Random size is 516, intrinsic size is 336. The reason that's 516 not 336 is because my screen has a screen density of 1.5 times. It's actually had to choose an image at least 1.5 times bigger. Notice we've also got our source there as well in case the browser doesn't support soul sit. One thing we don't have is support for browsers that don't support JavaScript now no, not me browsers out they don't support JavaScript. But let's configure that anyway, just in case. So it's ready. We can support the full array of browsers out there. If you do Control F and no script, you'll see a section called the no script pattern. What they've had to do, they've had to define that there's three things you got to do. They have defined a style. And you'll notice we've got the class of dot NodeJS, Node.js. So I'm gonna put that in the HTML tag brought up the page. They've also looking at lazy loaded images and they're not being displayed. That's if we've got no JS present. It's going to hide everything inside your standard image tag. But then we're going to have a new script tag at the bottom. And we're just going to load the image as per normal, but your browser that supports JavaScript will actually hide the section. The third thing we have to do is we have to actually write a little piece of JavaScript which will take NodeJS and it will turn it into, for example, JS, or it will just remove it entirely. That way if JavaScript is present, these tag won't be there. Peloton of page loads that JavaScript. Javascript has to be right at the top of the page. Let's get that sorted out. We'll start by copying this style. I'm not going to put that in style tags as it's not good practice to do that. We're gonna put it inside a CSS file into assets and then SCSS. And this isn't very organized, but for now, we're going to do is at the bottom. We'll put it right at the top, actually. Best practice, but we'll put it top of this page. We'll put a little comment on there. Lazy sizes, no script support. And there's one more bit of CSS we need to write. Let's go back to the lady sizes docs and have a look. If you scroll down to the section that says more about the API, and you scroll down, you'll see an important part on how sizes is calculated and you cannot use width is order. And Bootstrap doesn't. But look just in case we're going to put this little block of code in and it targets any image which has data sizes auto Anatol copy that, paste that in. We will put the display block on a new line and width on a new line and the final closing bracket. And you will put a comment in there saying work around for width. Nothing we can do. Little reminder. Use important on both properties. If you have issues. What that means is if this isn't working because somebody else has ever writing it, you can put exclamation important at the end of each of these properties that will help override whatever else is getting in the way. Then we'll go into our image partial, partial folder underneath and we'll do no script solid that we can start with copying this whole tag and then we'll put it down a bit. So for example, we don't need data sizes. Will keep height and width. We'll keep the class however, would take out lazy load whose don't want to lazy load will take out source set, but we'll leave our source. They will take out the data part of data, data source so that the browser is able to recognize that it's actually the source of the image. You didn't have to open up your going to layouts and then underscore default and Beta that HTML, HTML tag we're going to put in a class. And it's going to be no dash JS. We'll save that. Because if no dashed ASE is present, it's actually going to hide your images. So what we're gonna do, we're gonna go into the static folder. Normally use a static folder. We're going to main.js. And then we'll write our script. We're gonna do a document dot document element. Make sure it's capital a for element dot class name equals and you're at the same thing again, document, document element dot class name, and we generalise to target the HTML class at the top. This is the most direct way of doing it than we do dot, replace, open, close brackets and put a comma in. And then inside there we're going to put our search, it and the replacement. We're gonna do a bit of rejects. We're gonna do forward slash backslash b to look for the word boundary. Then no dash js, and then backslash, forward slash, come up and they will put in some comments and then we'll do GIS and that's the replacement. Let's save that now to avoid confusion, I'm going to rename this file to static dot js. And there are more modern ways of writing the script and they're actually easier ways to write it the look more logical, but these has maximum brasses vote and that's why I've done it in this fault in more complex matter. Then have to go into the head, going to lay out partials and then handout HTML. And right up top because we want this script to fire off straightaway script source. And we'll do slash js slash static dot js. So it doesn't involve any script building at all. Let's now check out the website. If we view our source, you can say the image is actually loading, which is a good thing. We feed a source, you'll see we've got a class of JS and go and view source. You'll see it starts off as no deaf ds, but then as it loads straightaway, that script fires off and it changes to JS. And then we don't have to worry about the mutants appearing. Back to the product's page will inspect the image. You'll see how it's forcing width to 100% just in case as a CSS era, we've also got bootstraps, image fluid, and it's all working properly. 12. SVG Font Optimisation: Svg fonts, SVG fonts are great system and they've become quite calm place in modern web design. They do have some setbacks. Really easy to use the scale well without the grading and quality, you can change the colors of them easily and use your SWOT colors. How about the font itself contains an entire library of SVG files and you might only use a handful them. They could be, say, 800 different little SVG icons in that SVG font. The user has to then demo the whole lottery. For the page to load, I will need to view a couple of small icons. Like I mean, for example, they keep you the opportunity to actually package up the icons which you want so that the font will only actually contain the icons that suit your site. Audit personally like these kind of system, because I have to go back to the website every time I want to add a new font and after download the font off their website and then add it to my site. Personally locked downloading the SVG files themselves off the website. And then I generate them automatically with Hugo. And the bootstrap icon system is great for this setup perfectly. Head over to the contact page on the website and you'll see we've got some icons setup here on the side. These are the Bootstrap icons, SVG font, which I've included in the site. And in a moment we're going to disable that and we'll look at how to pop these in. The first thing you have to do is go down to the bootstrap icon site and I'll pop this in the results section. The first one is G0, alternative control F, and then geodetic Alt. And you can click on that. You can download the SVG file. We're gonna put it inside an Icons folder in the resources section of your site. Downloaded all four icons. I personally like to put them in a folder called bootstrap sauna. They're a bit sharp, Auckland in case I get icons from other sites so I can go back and check them out. Then what we're going to have to do is we'll go into the partials and then we'll get into the head. And then we'll download the disabled css, important for Bootstrap icons. We'll save that. We'll do, we'll make any partial M. We'll call that partial SVG icon dot HTML. The first thing we'll do in the partial is we will run, say, colon equals resources dot get, and there's a lowercase r on that. And we do a full stop. That's basically if you're getting a fall out of the resources folder and we want to print it to the screen. Will do, I'll say content with a capital C. And we have to let you know that it's safe. Html, none of it's escaped. We'll put some dashes at the end of these so we don't end up cutting any extra spaces and we'll save that. Next thing we'll do is we've got our icon set up ready to go. We're looking at the contents page, the contact page, to the partials photo in layouts then blocks contact and date health dot HTML. We can comment out the eyeline that's for the bootstrap icon font. We just won't easily more within put it in a partial and a partial we just wrote was SVG icon. You don't need dot HTML. And then we put a dot taken, divide everything to the partial. But in this case we are providing just icon. Open up the config.xml and scroll down in the param section till you find the scout for the organization to the address. And you can comment out the lower icon and you can re-enable that top icon. You can say it directs the partial to the location of the GA out on the assets. Icons, bootstrap an engineer out, and then scroll down to opening hours. And you can comment out the SVG font icon. You can enable the physical file and then same for phone and then email that run the server and we'll check it out. Quick look at the site. You'll notice that the icons are working. However, if we look at the advice on Bootstrap icons, they recommend that you use CSS of width and height am so that you can re-size them with font size. We'll do, we'll go into our main dot css. And one way to do it is use the dot BI class because that's what all the Bootstrap icons having them. Then we can do width is 01:00 AM. Hot is one site that, and then we'll go in and check it out. For example, we've currently got font size of four. If I change that to one, you'll notice that increases the size of the icon. We've got our text. Takes colleague, he say secondary for example, 90% gray icon. So that's how we can style the icons and the overheads extremely small for these four columns there, the size is almost nothing, whereas downloading the entire icon phone is quite large. 13. HTML Optimisation: Optimizing HTML files, it's really important when you output HTML files, the output them as small as possible. So they download it as quick as possible. In the browser. You look at man has a built-in minify option, and it does some identification. But in older versions of Hugo, it doesn't remove all the whitespaces. In older versions. To remove whitespaces. This a configuration that needs to be added to your config.xml file. Let's first of all, I looked at the minify option and then we'll get into what to do if you're using an old version of Hugo into the root of your project directory and open up package dot json. And you'll see that we have got under the build script. You'll see I've already put in the dash, dash minify option there. On the Hugo Docs. It says that if we use datatypes minify, it minifies any supported output format, which is basically HTML and XML. It doesn't minify CSS or JS or any other external files. Let's have a look now at what to do with older versions of Hugo. I've linked both these pages for you and we're going to configure minify. And this is what actually happens when you use the unified command. And if you look carefully, we go into quite a few levels deep. We've got keep whitespaces and that's untrue. We've got attend that to false. So what we have to do to put in minify and then TD TWO ELF f will start copying and pasting easy one on Tom sold in minify. And then we'll go into config.xml. Because it's YAML, the order isn't so important that we do have to keep in mind that we have got our params, he pop it in here. I'll put a comment in. Remove all spaces when identifying, putting minify, and then a tab. And then we'll go to the next level Into tab HTML. Then we'll get to keep what spaces. Copy that. Again. We'll just save that with true. Then we'll run the build script and we'll have a look how it looks by default. Then we'll open up public folder and then open up index.html. You'll see there's a lot of new lines. And every time there's new line, That's actually a character that's inserted. Let's go back to config.xml. Let's change that to false. Then we're on the build script again. Then we'll open up public or public folder and index HTML. And you'll see it's removed a lot more whitespace. That's not a big file, but on big files it's going to make some difference and it's definitely worth configuring. 14. Sitemaps and Submission: Sitemaps and submission. So it's really important that once you've got your or your website complete that you generate a sitemap if every single page, because that helps citations work out exactly how your site works. And then it also helps if you submit it to the search engines to get things to move along a lot quicker and also get feedback. So sitemaps are XML files. They're kind of similar to HTML files, but slightly different. And they used by search engines to assist in the process of cataloging every single page in your website. You need to submit the sitemap to say changing so it speeds up the process of crawling the site. And you can also get feedback. For example, in Google Search Console, he go actually automatically generates a sitemap and you can also configure it and optionally create your own template. And let's have a look at how that works. I left a link in the results section as much information from Google, there is a page on how it's structured, but luckily, if we look at what do you guys provided, it's actually already built for us, so there's a couple of configuration options. We can change. All of the defaults will actually sit us. We can, you can optionally create your own template. You've got the options down. He feel sitemap configuration we're gonna do is run with the defaults. I've got back into the site and then we'll run the render to dev option. We've run that so that we'd aren't compressing the output, we're not modifying. Then we'll go into the public folder and then scroll down to start main.xml. And you can see there we've got a list of all the pages in the website. Back on the sitemap. Sitemap templates dictate the link for the built-in sitemap dot xml. And this will bring us to the GitHub repository for you guys source. We're going to have a look at copying everything out of that page. I'm going to go into layouts. I'm gonna make a new file, sitemap dot xml. Going to paste it in there. They're going to make some changes to the pages that are being iterated over to exclude pages where the primary private has been set to true. Will do is currently we're ranging over dot-dot-dot pages. What we'll do is we'll create a new variable, initialize it and it's going to call pages, will equal dot-dot-dot pages and they'll gonna modify that variable. So we're gonna do dollar sign pages and equals. And then you use where dollar sign pages in brackets, params dot private. Make sure there's no dot at the start of parameters to capital P. Inverted commas exclamation equals, That's for not equals. And then we'll put in true and we don't use inverted commas around true because it's brilliant it to the true or false. Then we'll change our ranges to the ranging over dot-dot-dot pages will range over pages. What's happening now is how users still equal dot dot, dot pages. But instead of ranging over all pages where I'm looking at pages where params dot private hasn't been set to true. We'll save that. Then we'll go into our content folder and open up the index.js. Before we continue, I have a quick look at your sitemap and do a quick search Control F for about and you'll see that it exists. What we'll do is we'll open up the index dot md for about and we'll put private. True. Then you'll notice that this piece from your sitemap, you can exclude from the sitemap. I'm just going to comment that out for now control Casey. Robots.txt is a file which is placed in the root of your website, instructs that changes on which pages they can crawl. If configured, Hugo will automatically generate a robots.txt file, which allows search engines accrual every page. And that's the default file that will be produced by Hugo. I'll show you how to generate a customer robots.txt file. You can stop search engines from indexing and admin login page, which isn't a static directory. And also pages which have the parameter of private true set. Here's a link to a document from giggle, and it's an example on how you write robots.txt file. The first thing I have to do ETF to set the configuration of enabled robots.txt the true. Let's start with Paste the Enable robots.txt line. We'll put that in our config into conflict dot YAML. We'll put it down the bottom. He probably before our first indented section. We'll put a little comment in there. I'll just put that in the correct spot. By default, key guys gonna generate the following ticks. And what that text instructs judges to do is to search. Every single page because there's no exclusions. A new user agent style actually refers to every single search engine out there. Couldn't example he have had to disallow every single patient. We definitely don't want that. We're going to sit template up to detail our pages with the parameter of private, true. So a copy all that text and we'll create our file and layouts called robots.txt. Total out and you file or about stock to extinct Pi setting. Just like the sitemap dot xml, we're gonna be changing our range. So open up the sitemap XML that you just worked on. Copy those three lines, the range and the two lines, iliac, and then we can get rid of the branch line and paste that in. This time, we're not gonna be doing if they aren't true, It's if they are true. We can just skip through that whole section and it will default to equals where pages dot params dot product true will work perfectly fine. Save that and then open up the index MD4 about takeoff the comment. Save that, and then go into the public folder. If you've still got several running the Renaissance, this div, you can open up robots.txt and you'll see that it's disallowing the about page. We can think back and we can comment that out. You'll see that it's changed. The next thing is manually disallowing pages. So for example, in the static directory I've got an admin folder for Netlify or CMS. This is an example. We can just put that in manually so we can just type in disallow slash admin. You'll see that pulls straight through. And if we've got a parameter that are coming through as well, you can do is we can get rid of some new lines. For example, if it's just a variable, we can put a dash at either end. Whereas he will just put a dash at one end of the tag. And we'll have a look at that. That's got rid of the ****** for us. I'll take off the private true on the about page, so it's back to normal functionality. And then when we look at RSS feeds, so he generates an RSS feed by default. We'll look at restricting the inclusion of pages with the permanent of property is true just like in last few exercises, so that links to these pages will not be published. Now this isn't necessarily to do with sitemaps and such hallway in this topic of restricting the publication of links to profit pages with my H will set this up. So only he got docs page for RSS templates. And we'll have a look at the lookup order for RSS templates. Determine where we're going to place our modified template. The last slice that's looked these the actual internal template. And then before that we've got the layouts underscore default folder. And the most generic one we can place them there is our assistant XML, such for the homepage. Then we'll go down and have looked at the section posts. We can do the same. Then we get down to taxonomies. And we can do the same. And then Tim categories. The same options available. You just got to be careful because if you go up to the home, for example, we can put it in Layout slash, index, route slash exist on XML. But then when you start scrolling down, that option isn't available when it becomes more specific. I have to place it EME layout slash underscore default slash RSS, XML. The next thing we'll look at is the actual template. Link to the GitHub page. Will copy all of that text. Willing to underscore the fault. And we'll add RSS dot xml. Paste that in. Just say at the top. Where we defining pages. Back to slit lamp black smell. You'll see where you're using the way. We'll copy that. Then we've got our regular pages line. And then we'll put out narrowed down our regular pages to where private isn't true. Let me save that and we've done our modification for XML output. The next thing is submitting a sitemap. There are two benefits of already touched on and that ease your website will be indexed a lot faster if you can submit your website to Google and being low gets submitted my W's index much faster because actually know it exists. I didn't have to do discover it. And the yellow great thing is you'll get feedback, especially from Google. They'll tell you if there's any page areas which are affecting your search engine results. And that's really important because if you go as a problem that you saw it, they'll put up much lower in the search results. If you're registered with google Search Console, I'll give you feedback. Start. I'll give you an email and I'll remind you need to fix things up when your site set up an account with Google Search Console to add your website there. You'll need to either to give it the website to actually add. You need to prove your site or not. You need to either add a DNS record via D and it takes a record Vallejo DNS configuration. That's how we through your hosting provider, or you can add a Google Analytics tag. Obviously you've done that. Google's verify that so you can continue because your sitemap exists, you could either go into your public folder, I'll just show you that now. You can hit him too. You can build your site, go into a public folder, and then upload a copy of your sitemap dot xml. Or you can specify domain.com slash dot xml in the browser. You can download from there. You can upload your sitemap there and you can get started with Google Search Console. Once you've been registered with them for a while, you can get really valuable feedback on the kind of keywords people are using to access your saw it. 15. Mobile First Design: Mobile first design. Now, while we're still on the topic of sitemaps and what we talked about mobile first design. The reason we're talking about mobile first design at the same time as Sitemaps, Google Search Console actually visually looks at the mobile version of your website via a mobile browser emulator on the system. And importantly create mobile first type responsive pages. And this is actually the default with Bootstrap generally speaking. So let's have a quick look. 16. Validate HTML and CSS: It's now going to have a look at validating code. And we're gonna need to validate HTML and CSS so that not just so we can ensure good user experience instead that the code works properly in all browsers, but also so that search engines don't discover areas. Now he's a couple of common and popular validated tools, both HTML and CSS. And we'll have a look at doing some validation. He's the HTML validation. Now if you've already got your page live on a server, that's great. You can just put the address in there straightaway. The other way you can do it is you could upload the file or copy and paste it in. Let's do a copy and paste now. But if you've, you've built it to the public folder, you can either copy and pasting or upload it to the public, public folder. And then for example, we'll go into our index.html. We'll copy all of that with Control a and Control C or Command I can see. And then we'll paste it in there and we'll say, when it says, scroll down, we'll have a look at an example here. It's saying for our script top, you don't need to put in top equals takes less JavaScript that's not necessary for new browsers. However, it's not an error. So I'm just going to leave that it will work with older browsers as well. It's not happy about the ESL school EAS. We probably need to put a capital E is for the second two parts to that. It's also worried that H1 isn't a top-level heading, although we haven't got an insider hit us, that shouldn't be an issue. But that's how you can go through and validate and you should make sure that you fix up all of your arrows so that search engines don't pick them up. Now the CSS, again, if you've got the uploaded Live, you can look at the address. You'll CSS fall. We'd have to do is go into sources and you can work out the address of your CSS file. In this case, I'm going to copy it all direct input and I'll place that may look myosin, this comes from Bootstrap, so I'm not gonna get too concerned about the output. However, it hasn't found the arrows. So that's really good news. 17. Validate Markup Functionality: Validating functionality. Now, back earlier on in this course, we looked at creating some rich text search results via JSON LD mockup. So here's some different ways you can validate functionality on your site now that you've finished working with it. So the first thing you can do is the Google search URL inspector, and I'm totally is linked below and there's also section. And that will give you all kinds of feedback about your side. It'll probably look at the mobile version first, like I just said in the previous video. And then you can go through and make sure you fix up any problems. Then it can, you can do is you can check-out some structured data results. So you can actually popping the URL to a page like the one you probably created earlier on in the course. And Google will go through and it'll have a look at all of these JSON LD that you've credit. And it will then feed back and all link it up to the page and it will tell you which parts of your site understand to which it doesn't. You will, however, have to have uploaded it to a live page through FTP. Or you can go over to Netlify and register for a free account and they'll give you a temporary URL. However, that temporary rarely you will not be indexed by search engine because you will notice that all those temporary URLs are not useful for indexing. The last thing you can do is just go to the Search Console and you can monitor the search results as you go to see what kind of keywords people are typing in. Which keywords are finding their way to your site. 18. Fine tune SEO Keywords: Fine cheating site keywords. You've actually going to go through your site and look at every page you've written and make sure that the keywords that you put in there, or actually the keywords that people are searching for. Now the first link here is actually a tool and it checks for SEO errors. So it makes, it, make sure you've actually got the right tags on every page. And that everything's been setup so that users can actually find the information on your page. And in the second link will look at is actually making sure that the keywords that you're putting on there, ones that people are actually searching for. This is the first one. We'll use Microsoft as an example. It'll take a few minutes to run through them. Just hit the pause button. Alright, so that's loaded. Now. They record we're on page 48. I don't think so, but they're placing that on some of these areas that it's finding here. For example, it says 146 pages have a low word cat. And if you don't have enough words on a page, no one's gonna actually got a very low chance. Someone's actually going to find your page through a search because you're not having that many keywords on the page. Since saying duplicate title tags. Now, if the search engine can separate each page clearly it's gonna have a much better chance of It's showing the user the page here after the title tags extremely important. Sank 30 pages are blocked from appearing in search engines. And that's certainly fine. That could be restricted pages that people have to login to. But if you put your page once you've made it live into this tool, it will actually go through and it will give you a printout. Couple of things here. We've got monthly traffic, that's just an estimation. Organic keywords are words that it believes users will be able to find through search results. And backlinks are people who've actually linked to your website. Now it's really important if you can get reputable websites to link to your website, that actually makes your website of P much more important to a search engine. The second one is Google Trends. For example. If we put search engine optimization, we can have a look at how it's trending over time. Worldwide, for example. You can look at how it's training. We can then do a comparison and we can do SEO. You'll see that SEO is actually slightly more popular than search engine optimization. Will then put in. Organic search. Say that barely anyone. Organic search terms, for example. Making a post about organic search terms isn't gonna win you any people. You've got to use things such as search engine optimization, even better, SEO, SEO seems even more important. You'd want to put both in there, for example. But obviously you wouldn't put that in there. So that's a great site, that's Google Trends.