On this Craft Cms lesson you'll learn a simple way to manage your SEO meta tags using expressions and global variables.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Hey guys. Welcome back to another lesson. On this one I want to just take a look at some of the best practices for SEO using craft. So what I want to do is go over to our layout. On this kind of daddy wrapper, we have the scripts and we have the styles and we also have the meta. This meta is what Google uses to index and find your site or your pages.
Right. So all of that, it's going to go inside that kind of block of content using the template inheritance. We're going to go into one of our inside pages in this case, movies. We're going to use that to pull in that block of head and we're going to paste in those dynamic fields. All right so, within these fields, we know we want to have custom fields for each individual page.
So what we want to do is just replace this static content with something that that page would typically have. So let's imagine we're going to create custom fields for SEO. In this case, I'm going to call the description SEO description. So that's the handle we're going to create in just a little bit, and then for the title, the same thing, right?
So we would have. entry.seoTitle. Another thing we could do is put all of these fields into an include so that we can simply call that and apply it to all the other pages in a much faster way. So I'm going to quickly do that, call it _seo, and we know that it's going to live in our includes folder, just like that.
All right. So let's head over to our craft control panel and create those custom fields under a new group called SEO. The first field, of course, we called SEO title. Notice how the handle has the second word with the capital letter. It's a plain text field, so we can do that same thing for description.
And for description, we can also toggle the allow breaks or allow line breaks. Next we want to assign that to a section. So let's add in that field, using the drag and drop field layout,
let's jump into our entries and choose just a movie and just add in some fake data, just so that we can make the test on our browser.
Once we refresh that and we go back to the movies. We're going to get an error because right now the actual template movies does not have information of the entry, SEO title assigned to it. We don't have that for the actual movies template. We have that for movies and we have that for actors, but we don't have that defined for the actual movies template because that's not created yet.
So we need to think of a way of creating a backup. If that doesn't exist. How do we do that? We do that using the no conditional. And that's a simple, double question expression (??) that we add into our tag. And then we put in, what do we want to show if the SEO title is not defined, right. If there's nothing there.
So that's what null means. It's just doesn't exist. We do the same thing for description and we can just have the backup description and title just so that we can see it workout. So if we refresh the page, boom, it's working fine. If we click on any other movies, for example, if we go into the joker, then we're going to see that that SEO is not working yet.
That's because we're missing on that little block of snippet in that template. So we just need to copy this block head of includes SEO. We're going to copy that. We're going to paste it across all the pages that will have potentially SEO access. So for example, we open up our channels page. Just paste that in right before the block of content.
There we go. And now it should work because now we have that little block, it's pulling it from the SEO. Pretty cool.
All right. One thing I want to finish off with is globals. So global variables allow us to create globals for editors to access. So for example, that little backup title, we can give it a global variable.
So I'm creating first a group or a global set, and I'm going to create a tab and we're going to drag in the SEO title and description inside that. We're going to click save and once I save this information, I can see that on the left panel. So if I click globals there, I'll be able to access this global variable SEO global, and then SEO title and description.
So this is where we want to use a global variable in this instance. Where the backup description and title can be replaced by that. Here I'm just adding the global site name. This site name is going to be pulling it from the sites. We're going to see that in just a little bit, but right now let's just go ahead and replace this with the global variable.
The way we do that is we remove the quotes. We add an SEO global, which is the variable group set and then the field, right? So SEO title and SEO description. Okay. So let's go ahead and I see where that actual names are happening. So the top name over here in the control panel takes care of the system name.
So stream VR network. If you save that, it's going to show up on the control panel of Craft. You can find the site name, variable under sites, and you'll see here that SVR is the current name of the one single site that we have happening in Craft.
We could use eventually the system name, if we want it to, if that's something easier for whoever's administrating the website content, but that's really up to you, the strategy of what you guys are planning to do with the SEO header. So for now, let's just keep it to the site name. Just keep it short and simple.
And let's jump to the next lesson and let's take a look at pagination. All right. I'll see you there.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS