Are we right in the head?

[00:00:05] Nathan Wrigley: Hello there and welcome to the No Script Show.

This is our third in a series looking at various components that make up a website. Today we're talking about the head element as it's unseen by visitors. The head is easily overlooked, but a few mistakes can have a dramatic effect on the site overall. As with all episodes in this series, this is in two parts.

First, we'll talk about. Head elements from a technical design and accessibility, SEO as well perspective. Then we'll follow up with a YouTube video looking at some coded examples. And as always, there's David Waumsley who does all the hard work. Hello David. Hello. we call

[00:00:47] David Waumsley: this one, are we right in the head?

And as we've established, I definitely wasn't right in the head, but I've been getting professional help.

[00:00:54] Nathan Wrigley: you, yeah, from a variety of different websites. I might add, not from the medics. I, read the show notes, which you always, you know, very faithfully put together for us. And I have to confess, it's been a long time since I looked at something, which I'm gonna call so basic and it really alarmed me that this incredibly crucial and basic thing I basically didn't know anything about.

no, not great. Yeah.

[00:01:22] David Waumsley: So we got some show notes. Sure. We bring them up then. Indeed.

[00:01:25] Nathan Wrigley: There we are. So are we right in the head? Let's, let's kick it off. So the first one, what is the head?

[00:01:32] David Waumsley: Yeah, so what I've got here, it's fairly simple. It's A-H-T-M-L element for machine readable metadata on web documents, and this is something which I don't think I ever knew as well.

I knew that there could only be one head on a page and I didn't know that there were only eight tags that are supported. No, me neither. And they are, we know these Title link, style, meta and script and no script knew those. Yep. Base and template. I didn't really, I think I understand base. Do you?

No, that was the

[00:02:10] Nathan Wrigley: alarming thing. The first ones that you mentioned. So title, link style, meta script, no script. That was all fine and self-explanatory. However, I saw base and template and Yeah. Basically didn't know what either of them were for.

[00:02:22] David Waumsley: I think, to be honest, I dunno why I stuck on this.

'cause, I don't know. And I think base is the one where you can set the URLs that I used so you could change the whole, it has a knock on effect. So if you are only including these certain URLs, it's a little bit like you can leave the full domain name off your document forward slash so you could have your base being.

no script show and then you could change that to something else, I think. Got it. That's what it does there. Okay. template I'm not so sure on. Okay. We'll just

[00:02:52] Nathan Wrigley: swiftly move on.

[00:02:54] David Waumsley: Yes, let's do that. And it typically follows the doc type HTML, tag that we have, which is a lot simpler these days.

And we would talk reminiscent about the times in the early HTML, where there all these different versions you're

[00:03:08] Nathan Wrigley: have. That's right. It was like a full two lines of impenetrable stuff that you had to basically copy and paste. I could never remember what was required, so I would just copy and paste it every time.

But it was, set and it was XT X-H-T-M-L and all of these numbers and things followed on. But then I think HT ML five came along and, I don't know, I think you said about 2010, something like that and boiled it all down to this simple declaration doc type HTML, which made everything, all of that nonsense go away.

[00:03:37] David Waumsley: Yeah.

[00:03:37] Nathan Wrigley: Yeah, because you literally had to

[00:03:39] David Waumsley: pick, didn't you? Which team were going to be on, Yeah. and, generally the head is the, first thing that goes in the HTML element itself. And I've just put here because somebody else told me this, will mention that person, Harry Robertson. It's a good idea to go and validate.

People don't do this these days, but there is the [email protected], which is good for HT ML validation. and we passed. I've just done it on our site. Oh,

[00:04:08] Nathan Wrigley: okay. Great. Yeah. So we passed. You followed all of those things. You didn't include a tag that couldn't be included or shouldn't be included, and you've got your, document declaration correct.

A bravo, yeah. First thing.

[00:04:19] David Waumsley: Yay. I do that now and I haven't done that. We used to do that in the early years. Again, used to have those little tags that you could put saying that this was

[00:04:28] Nathan Wrigley: valid. H-T-M-L-I know, yeah.

[00:04:31] David Waumsley: Yes, nobody does. Nobody does that these days, but perhaps we should. But there is a caveat with that because a lot of what is seen as good practice is often used in a lot of inline modern CSS.

And if you do that, is gonna churn out lots of errors. 'cause it doesn't recognize modern CSS in there. if it doesn't validate, it's not necessarily a problem. okay, so let's talk about the essentials that we need in a head element. These three things that we really must have in there.

And that's a meta tag to set the documents character set to what is UTF eight, which, oh, David, come on. What does that mean? He says, because you can't see it on the screen there, but I'm hovering over it 'cause I've put it in there. It means Unicode transformation format eight

[00:05:17] Nathan Wrigley: bit. Okay. I didn't know any of that, and I still don't even get what that does.

Like I get it. You've got to include it. why eight bit? I'm not asking that as a question because I'm, I don't know if one, but, anyway, it's required, but what if we made it into a nine or a seven? What would happen?

[00:05:36] David Waumsley: I don't, I don't know how it works, but

[00:05:38] Nathan Wrigley: anyway,

[00:05:38] David Waumsley: we know what it does.

We know we need it. Yeah. Yeah. It allows all those. All those unicodes that are in your fonts or available, any way to be able to use them. And I use them a lot actually. I use like little arrows and stuff and yes, triangles all over. And if I didn't have that, I don't think it would recognize them. So yeah, so we've got that.

And we need a meta tag at two set of view ports to initial scale of one for responsiveness. If we don't, we'll be on our mobile phones and it'll try and show us a desktop view, too wide. We need that and we need a title tag, a name for the document. So particularly screen readers for accessibility so they can read that first and know where they are.

[00:06:19] Nathan Wrigley: which, so sorry, just quickly. Then those three are the basics. Like we, we have the, list of eight that you can use, but those three are the ones that you must have, you cannot pass go unless you've got those three included. Yeah,

[00:06:30] David Waumsley: I suspect you prob you've just get. Problems with it, won't you?

You'll get problems with your characters, you'll get problems with scaling. Yeah. And you'll just annoy a lot of people who won't know where they are. Accessibility and a title. Yeah. Good point. Yeah. Yeah, so really the rest of this is about the common issues. Many of these. If not most, I didn't know.

And this is through other people's work. So for accessibility to meet, basic, the basic standard I've put down here will tag 2.2. We must have title tags that describe the topical purpose of a page. And I've got, for those who can see it on YouTube, I've got the document up here. So we just need to make it clear and consistent what our pages.

are telling us on this. So typically I think, and I used to be terrible at this, I used to keep my, I used to put keyword cram stuff 'cause I was into the SEO all the stuff and I didn't have a consistency. It wasn't, now it is about, and it's no script show on our thing and contact, no script show and keep it simple.

the one that was really fascinating, the first bullet point I got here was to avoid special characters and certain types of punctuation. And it's, again, Sarah Suan an accessibility course, which she, it was a sort of passing reference to it, but it's really dangerous for screen readers to be able to put certain things in, so dashes are safe, but when it comes to the vertical line or the pipe, or the line symbol, or whatever you call it, a screen reader.

May choose, depending on which one or combination with your browsers. Choose to read out pipeline or just pause as it would do with the dash. Oh, pause would

[00:08:13] Nathan Wrigley: be

[00:08:13] David Waumsley: a total catastrophe,

[00:08:15] Nathan Wrigley: wouldn't

[00:08:15] David Waumsley: it? no, pause is fine. Just to pause between the, pause. Oh, I see.

[00:08:19] Nathan Wrigley: It's not gonna end there. It's literally no, just create a, like a one second pause.

Okay. Got it. Got it,

[00:08:24] David Waumsley: So it'll work as a dash. So the safest thing is Dash. And honestly, you've been good. You were just telling me that you've generally gone dashes. Suddenly I have this.

[00:08:32] Nathan Wrigley: Yeah, I only went with dashes just 'cause I went with dashes. I could easily have done pipes, but I just went with dashes forever.

So that's what I've used. But pipes to me look more. Appropriate un unless it happens to coincide with a lowercase L, in which case it looks sometimes like you've got two or three Ls next to each, other. So that's weird. But I didn't really, I didn't realize that obviously, back in the day when I started doing titles, I didn't realize that the pipe was gonna be read out by a screen reader.

but there you go. Avoid at all costs. Good, bit of advice. Yeah.

[00:09:07] David Waumsley: Yeah, exactly. I jumped onto it only recently thinking they look quite cool people do this, use pipes. I'm gonna use pipes. And now I realize that it could cause some accessibility problems. But just not only that, interestingly enough, Google also, and I've linked to a document where they say this, they say avoid vertical lines, but I don't think they explain it.

But there is a SEMrush, experiment that they did. A case study where they changed their, pipes for dashes and, it's not entirely conclusive, but there was a improvement on the visitors they had to the site for doing that, which isn't that interesting?

[00:09:44] Nathan Wrigley: Yeah.

[00:09:45] David Waumsley: So,

[00:09:46] Nathan Wrigley: you, not only is it not recommended for the accessibility side of things, but it also appears that Google etal are also giving it some negative weight.

[00:09:58] David Waumsley: I dunno why it would change things. it must be a visual thing. Perhaps people can read dashes, it makes more sense. I don't know. But anyway, according to their bit of research, so there's another benefit to doing that.

[00:10:12] Nathan Wrigley: yes. Still, I've gone off my points here. You're on keep title short and consistent across pages.

I suppose you covered

[00:10:18] David Waumsley: that a little bit already. Yeah, I, did, I jumped ahead and so I'll go on to the next one, which is keep the title near to the top of the head for quick loading because obviously if you are on a screen reader or even even if. we'll move on to that and how the order's important.

But if that comes in last, it can be very confusing If something's blocking your title coming up, you don't quite know where you are. And it's even worse for a screen reader, users who need to know where they've landed. So yeah, that's, a key thing. And it's not in the head, but it's worth mentioning that not setting the HML language attribute to something is a wagg fail as well.

Interestingly, even. The present stats on this, it's roughly, it, was amongst the top million sites. There is 15% of sites that don't have one still, which is quite incredible, isn't it?

[00:11:08] Nathan Wrigley: Yeah, that is interesting. I, again, not something because I'm a CMS user and kind of assumed that my CMS.

Doing all of this correctly, all of this is fascinating, and when we finish this episode, I'm going to go and, berate myself for what my CMS of Choice is actually doing.

[00:11:27] David Waumsley: No, it's doing, I think on the sites that I see with you. It is. Got it. And it's got the, interesting thing about that one is, so it, great Britain is the one that's been chosen for yours.

So gb is. it says English as the language, and that's all screen readers can deal with. They're not going to pick out particular accent for England, but you have got England with it.

[00:11:49] Nathan Wrigley: can I go deeper? Can I select Yorkshire Britain as well? It'll make, yeah, but it'll make no

[00:11:55] David Waumsley: impact on those people, but it

[00:11:57] Nathan Wrigley: should.

Okay. Moving on. UX page load. Yeah, I see you've got a dash there. Well done. No pie.

[00:12:11] David Waumsley: this is the interesting bit for me and this is why I thought it was its own topic. So there was a great talk by Harry Roberts, who's a, performance expert. He works on all with all sorts of big, companies. So he is done a lot of research and there's a really good, I've linked to it, the video there.

Where his talk is about getting your head straight and he demonstrates how important structure is, what the order you put things in your head really impacts on your page load. And I'm just gonna cover this quickly 'cause we'll look at it in the next video where I've got the sort of code really that's there.

But, I think the key points for is, that. firstly is that it's the biggest because HTML renders everything from the top of the page, line by line. It makes the head the biggest render blocking element on your page. So from the start, it's. Anything that doesn't need to be in the head.

He says shift out. So if you've got all these sort of trackers or even some CSS that can go in the body these days and any Java script that doesn't need to be there, get rid of it, get it out the head because that will speed things up. His other main point is, avoid things like imports and redirects to other third parties.

And you think where has to call out? Grab some information in there. I don't, there was a big debate, and I dunno if you ever fell on one side of this, about using Google fonts, whether you should, locally load them or whether you should be using their own CDN for this. And there was a lot of people argued.

That the CDM was faster than anything you would like. Yeah. In

[00:13:48] Nathan Wrigley: terms of speed, I was always swung. mo more recently I was swung just by the GDPR argument, not by the speed argument. So that kind of settled it for me. I didn't look at that. Again, it's like Google fonts. I, want to load those locally now just because the Germans are gonna come and get me if, if I don't.

And so that's, that was decision made and, I honestly, I'd forgotten that there was any kind of. Possibility that it would be loaded quicker. My expectation though, would be that if you loaded it from a CDN, given Google's might, and the fact that it's got edges everywhere, I would've thought that would have been quicker.

But it is another request. It's got a, it's got to be requested, then it's got to satisfy that request. but yeah, I don't know.

[00:14:34] David Waumsley: Yeah. according to Harry, no. really it all slows it down. and honestly I did a big for a long period actually, but. Using a page builder. And a lot of the people there thought it was faster with that.

And also, WP Rocket, which I used as a plugin, used to argue that it's better to use the CDN. Okay. And they used to pre-render that or, ahead of time. But no, in what all my experiments, it was the opposite. Local loading was always faster. So I think Harry's right on that one, but it's just Okay.

Interesting. And the other thing, this is the, I thought was the most interesting thing in this talk was that we should put synchronous JavaScript before synchronous CSS or really any CSS. And I didn't know this. And the perfect example is, and I would've done this, I'm sure, yeah, it's not true any longer, but used to get, the Google Analytics code used to be synchronously loading in the early days, the legacy stuff.

[00:15:30] Nathan Wrigley: Yep.

[00:15:31] David Waumsley: And it would always tell you to put that at the top of your head. Yeah. And you would go, nah, I'm not putting you, doesn't matter. Top. Yeah, that's right. I want the CSS first. You put it last, but what Heaves recognized out this, and I thought this is the most revealing thing, is that. It will block it because the JavaScript needs to know it.

It sees JavaScript, but it needs to know whether it refers to any CSS that you might have, which it might well

[00:15:56] Nathan Wrigley: do. Yeah.

[00:15:57] David Waumsley: So if you put the CSS first, it goes, hold on. We have to read the whole, just wait there. We have to read the JavaScript and then we'll come back to your cs. Yeah, so it, it blocks the whole thing, yeah.

Synchronous JavaScript and you before your CSS.

[00:16:10] Nathan Wrigley: that makes perfect sense when you say it out loud, but again, yeah. Not something that I had given much thought to. 'cause those, things are usually mysteriously hidden away and you don't bother looking at what the content of that JavaScript package might be.

but it does make sense. If it's gonna call some CSS, why not allow it to have access to the CSS because it's, it the JavaScript comes first. Yeah. Makes sense.

[00:16:34] David Waumsley: And the other thing, I think that was most revealing, but something that doesn't really affect me. But if you have these, CSP headers or content security policy headers, that restrict, where you can bring in things from, you restrict the sources that you, that a lot of people put them quite low.

and they would, according to his research, it would break that parallel preloading that you automatically get, so everything will simultaneously load at the same time. If it can do, if you see, oh, okay. And if you put this somewhere down the bottom, it breaks all of that happening.

so you need to put that right at the very, top. He doesn't mention it, but interestingly, I double checked it and it's actually one of the policies, if you're using a content security policy for security reasons, you need to put it as one of the first things in your head, not just for performance as well.

So

[00:17:29] Nathan Wrigley: yeah, so four important points, most of which I would completely have. Forgotten about and disregarded, therefore, but that's, none of that is hard to remember. Is it? That all makes sense. I'm never gonna be using the CSPs anyway. In all honesty, it's, and most of it, again, in all honesty, I'm letting, WordPress, the CMSI use handle much of this, but it all makes sense doing it that way.

Yep.

[00:17:52] David Waumsley: Yeah, there is. a quick little tool. I'll just bring that up over here, which is a little bookmark you can use that's been made by Harry, where I've actually got it in here.

[00:18:03] Nathan Wrigley: Yeah, I saw that. I, put it in as well and I had a quite, a very quick play. Did

[00:18:08] David Waumsley: you,

[00:18:09] Nathan Wrigley: let's just go

[00:18:09] David Waumsley: back to our site.

[00:18:10] Nathan Wrigley: What does it, yeah, you can click it there.

Now. You might have to reload it. I don't know.

[00:18:14] David Waumsley: No, I think you should come in there. yeah, its pointed out this isn't very revealing. It's pointing out that a blocking style sheet that we've got is the fact that I've. I've got a link to my style sheets here. It's actually a bundled together one rather than inline.

So there's a ongoing argument isn't about whether where you or when and where you should use inline CSS. And where you should interesting enough is quite interesting. Of course, I went to his site just so we can show Harry the person behind all of this. There is, and if we stick it on his, oh, look at this.

He's got black Mark here. His title is blocked by JavaScript. Oh. But of course. No, it's actually, I had a quick look. I thought it's, what's he doing then? He is actually got a little bit of JavaScript, which is measuring the performance of his head. So he's obviously Oh, okay. He's obviously doing some testing at the moment.

Yeah. He's, being very,

[00:19:06] Nathan Wrigley: thorough. Yeah.

[00:19:07] David Waumsley: Yes. anyway, so great little bookmark on that. I think maybe I need to refresh just, oh, we didn't need it. So

[00:19:13] Nathan Wrigley: that's ct, what's that called again? That was, yes, further down. It's,

[00:19:19] David Waumsley: you find it, you'll find it on CSS wizardry if you go to our site.

Anyway, the link is there. Yeah. dot com and CT will get that page up and then you can just add it to your bookmark there.

[00:19:31] Nathan Wrigley: Perfect. Oh, okay. And I'll read that into the audio. So the, this show is gonna be on no script show. Oh yeah. Slash 23, the numeral. So no script show slash two three. You'll be able to follow the, follow the links and get that one.

[00:19:47] David Waumsley: Anyway. I, thought that gives a great, as I've made the point here, there's lots of other things to talk about with speed, preloading stuff, speculative loading is something that we'll look at a little bit later and that, do you have any thoughts on the inline CSS? I've noticed that with the WordPress stuff.

There's been a move to stick a lot of your CSS in the head now in line.

[00:20:09] Nathan Wrigley: Yeah, and in all honesty, I've I've just deferred that responsibility to the CMS itself. it's, this whole show is so interesting to me just because of the fact that I've relegated almost every decision. To the CSS, and so I will have thoughts on it going forwards, but up until this point, the answer is basically no.

I haven't been doing any of that. I've just been using a theme, the author of whom I respect, hoping that they're doing all of those bits and pieces correctly. And again, with things like plugins hoping that they're honoring the this that we're talking about. But I'm sure that if I was to go in and inspect it.

Probably wouldn't be the way I want it. it's always been a style. did you say whether things should be in line or not?

[00:20:55] David Waumsley: Yeah, I just think it's been, yeah, I've always gone

[00:20:56] Nathan Wrigley: with a style sheet, to be honest. Yeah.

[00:21:00] David Waumsley: most of what you have hasn't because of the fact that the CMS is, and it's not just WordPress.

I say it's typical for WordPress, but also, we've used the 11 base blog for our site here. By default, I changed it. It, he was outputting it in line. and I've changed it. To go to a link. Which Go to a style sheet. yeah, Which is a render blocking thing. But I, think the thing is, the advantage of, inline is the fact that you stop that render blocking.

But the disadvantage is that every new page you go to after that, you haven't got it cached any longer. So it has to. Reload that from your inline. Whereas that's true. Yeah. Yeah. So that's your, if you think people are going to go to more than one page, then probably, you better, it makes sense

[00:21:49] Nathan Wrigley: to go with a resource rather than inline.

Okay.

[00:21:52] David Waumsley: Yeah. Yeah, I think so. Anyway, it's just. We won't get into that any further. let's move on to next thing. So UX design side of things. So yeah, there's an element of design that comes into our heads, even though users don't see it. We have fons and we have our metadata for our social networks, open graph and Twitter images or X images as they maybe call it now.

So there's a bit of news on that. So I thought this was really fascinating. It's really recent. It's only Safari 26.

[00:22:20] Nathan Wrigley: Yeah.

[00:22:21] David Waumsley: I didn't know this either. Yeah. Yeah. It's just in June and I think it's fully out now. And actually if you look, so they're supporting SVG Favicons, and actually if I just go to the link here, we'll notice, can I use these, right?

So globally we're at almost 78% now with this. And honestly, since I start, I put started this article maybe a couple of weeks ago. Yeah. And it's probably gone up. by 2%. okay, so obviously this,

[00:22:52] Nathan Wrigley: huh? Because of safari. 'cause of Safari 26. Yeah. So it's across the board now. Safari was the holdout. Now safari's come on board.

You're basically good to go. Svg.

[00:23:01] David Waumsley: Yeah. and the good thing about the SVD Fon is that you can have light and dark modes with it. Something you can't do with the,

[00:23:10] Nathan Wrigley: when you say you can do light and dark modes, does it not automatically do you have to. Predefine a light in a dark one, or does it render it differently if it detects that it's on dark mode, for example?

[00:23:23] David Waumsley: No, you'll need to put it, you'll need to use the CSS, prefers. That's it. That's it. Color scheme and have an alternative to switch to. But it means it supports that. Quite interesting. I'm just looking at the, can I use here? So it's actually a lot lower, 60, nearly 62% in USA and 64. percent in uk, but of course here in India we are way ahead of you.

Nice. 94%. I wonder why, what is it that we're doing differently? I think it's probably there are less users of, and I think this is where the hold off would be of, mobiles. With Safari on it. Less, apple products, I would guess. Okay. and nearly everybody's on the mobile, so Yeah. Got it. So supported there where I'm Okay.

Anyway. Yeah. So, we still need our ICO fallback. With that on our side, I've really just put a very simple one. you can really spend a lot of time, you can either embed, can't you, different sizes in that format. Yep, So it works in different, and I haven't done that. You've just gone for the one teeny tiny one.

A one tiny, yeah, because I think this is the way forward, but I think it's really fascinating. We'll look at the code anyway a little bit for the SVG icons, but I think it's really cool that you can now create your icon and within that SVG you can add in your preferreds color scheme and the. Device is going to swap.

and it's actually on our site here, but we'll show that I think in the video. the other thing, social media wise, yeah, a great little tool, that I like to use is meta tags.io, which allows you to check what you've got on your site. So I've done it on here and it shows you all the sort of how.

Your image might show on the different platforms. I like that. That's right. Yeah. you can generally get away. So this is the generic one on the about page that I've used. But actually what we're doing on our site is we're bothering the YouTube thumbnail. So when we put the YouTube video up, it's outputting on those episode pages that, but yeah, I think that's pretty cool that you can.

use if you put enough pad in around it. So you need a sort of rough Yeah. You just get away with

[00:25:39] Nathan Wrigley: one, can't you? If you just make sure that it's not too Exactly. I, it's just not bleeding to the edges unless it's just ordinary gradients or colors. Yeah.

[00:25:48] David Waumsley: Yeah, exactly, because Twitter's slightly different to Facebook, or Facebook is a little bit odd because it's usually a 16 to nine ratio, yeah. And that's what Twitter uses, but the other doesn't, anyway.

[00:26:00] Nathan Wrigley: do we still care about things like that though? What I mean is like, how is it that those platforms still have the sway that they have over this kind of stuff? I guess it's just because they are the way people are consuming things, but, although there's like a hotbed of people who use X globally, it's a tiny platform.

Form really compared to the likes of Facebook and Instagram and TikTok. But nevertheless, I guess they just, yeah, they set the agenda and they get to keep the, they get to keep the spoils.

[00:26:27] David Waumsley: Yeah. And if you've got the format, the two formats for, the open graph, it's gonna be used by all the other ones.

blue Sky and Slack and

[00:26:37] Nathan Wrigley: all those kind of things. On, my SEO plugin of choice in WordPress, it, just requires those two, it calls it Facebook and Twitter. and you just, and it gives you a demo much like you've just seen inside the plugin, and you can judge for yourself whether you've got the alignment wrong.

But mostly if you just have a little bit of a board around the edge of nothingness, then it, anything will work. You only need one. You don't need two.

[00:27:02] David Waumsley: Anyway. I put it down as a problem. I didn't explain that. Yeah. Just because you could have them missing, and I had it missing. I forgot the social media on somebody's site and they were going, oh, it looks really awful.

And of course what it does is it takes the first thing in the dom, which was actually a mega menu in our case, a tiny image in it. It was so I had to put a generic one in there. But, yeah. we'll move into that more. Let's talk about the. Technical, SEO. So just a little bit about what we might wanna include in our head.

we've, robots is probably something that we might want to have a met name of robots so we can control the. Search engines crawl.

[00:27:42] Nathan Wrigley: try to control no real control of that at all. But yeah,

[00:27:47] David Waumsley: you are onto something there. Let me just go over here. There is ours, sorry for those who are just listening, but you'll, you've got loads

[00:27:53] Nathan Wrigley: in there.

That's

[00:27:55] David Waumsley: interesting. I've just done it and, it'll be close to your heart here, but you'll see here that I'm disallowing. Claude Bot,

[00:28:02] Nathan Wrigley: Amazon bot. Oh, interesting. All the ai I'm trying do you for a minute imagine that they're gonna honor that. Do you think, for example, chat, GPT bot is gonna come along and go, oh, disallowed.

Yeah. Fine. We'll disallow it. That's fine. I don't know.

[00:28:18] David Waumsley: I've got that and I've also got robots written in their head as well, saying No AI as well. okay. These are my two things. It'll be fascinating to, I, I dunno if I'll know, but I, certainly do see. On a lot of my sites that it's used on a lot more server resources now.

Oh,

[00:28:34] Nathan Wrigley: did you see that CloudFlare have been taking steps, about this because they obviously don't believe.

That the declaration there, disallow, for example, chat, GPT or what have you, they're obviously not taking that seriously because they've got this, new thing where they're going, to basically drop traffic and they govern about 20% of the web. So they've got fairly sharp teeth, but, they're either going to tie them up in a kind of like an endless loop of content, which you know, is not real, but is.

Kind of, it's there, but it's not actually what they want to consume or they're just gonna drop the traffic unless you pay them. I dunno if you caught sight of any of that, but I definitely wouldn't be trusting these companies.

[00:29:17] David Waumsley: Yeah, I got it from your other show. I wouldn't have known about it.

Okay. Yeah, it did amuse me, but yes, same as you. I'm. I'm not sure if I want another big megacorp to help me with the problems of other mega corps,

[00:29:29] Nathan Wrigley: Yeah.

[00:29:29] David Waumsley: That's

[00:29:29] Nathan Wrigley: a good way of encapsulating it. Yeah. Okay. Yeah. Maybe Cloud Flow is our friend now, but who knows what they'll be in a decade's time.

Okay. Anyway, there we go. That was the robots one. Where are we next? Canonical.

[00:29:41] David Waumsley: Yes. Canonical. Yeah, it, which confuses me. This, oh, I've got robots twice on my list here, but that's, oh, that's okay. Yes. It should be so canonical. You've got two ways of ex exclude to avoid the duplicate content issue. And duplicate content issue isn't something you get penalized by with the search engines.

There's, it's just that for, you want to be listed for the right. Direction to that content, don't you? So C canonical tags are a good way, or the other way is to go with, and this is written wrong on my notes, so I'll change it. A MET data that's saying this content is no index or something. So you, yeah, So just to ignore it if it is a duplicate. So they're quite key things. I've got canonical working and it. To be honest, it's a bit of a mess. Maybe we'll look at it in the next, session. 'cause I have to put all this programming in to make sure that when we've got all these separate pages that I dynamically created with the system, that I had something that was changing my, data there to, read that out as a different page.

Oh gosh. Yeah. So it got, it can get quite complex. Probably It's a lot easier sometimes just to Okay. Say, index, and then the one I didn't even know about, It's just doing this research on their ones, the alternative language for X on that, for internet, again, it's another duplicate content thing.

you're supposed to really specify which language you're primarily in. Also. Otherwise, you can get duplicate content issues with that if you've got different languages.

[00:31:07] Nathan Wrigley: So for example, if a page is in, is once in Italian, once in English, once in Spanish, and what have you, is to declare it with this alternative language.

[00:31:15] David Waumsley: Yes, I think so. So you can end up with some problems there. Okay. And finally, this's, just the other one that we needed to put in, which is again, a link, alternative, which is leading to where your feed pages, if you've got RSS feeds, which we do in this, we do. there was something interesting I do think from the technical SEO side of things, and I, did a test.

I used, this was a deal about ages back because it's quite expensive. There's a web auditor, which is I remember that. Yeah. Yeah, exactly. And there is a, an alternative for partly free screaming frog's, SEO spider, where you can crawl your pages. So I did this. Recently, and because I didn't put forward slashes on some of my addresses in my head, I got.

So many 3 0 1 redirects, but I have, sorry, again, to those people who are viewing this, I did actually put, there is a link there that shows our results on this. So it's quite, useful to, to see

[00:32:16] Nathan Wrigley: where there are issues. sorry, was that a, an, was that a missing? Trailing forward slash at the end of the url?

Yeah,

[00:32:24] David Waumsley: so yes, no script show and often I've put that in the dynamic URLs without the trailing slash but our setup automatically goes to the trailing slash so when I put it in there, it's having to do this redirect every time. Okay. Got it. Which is obviously going to have some slight impact on the user because it means their browser has to do more work.

[00:32:45] Nathan Wrigley: I again, haven't given that enough thought, but I will give that enough thought. But it's one of those things that when you paste the URL without the trailing slash, it looks more human readable. So let's say you paste that link into an email or something like that where you know it's being consumed by eyeballs, then you have the intuition that it'll look better if it's not got a training slash, or at least I do.

But obviously then the browser has to do work to say, wait, no. Add it. Okay. Yeah. Good to know. Yeah.

[00:33:13] David Waumsley: our setup is to always have the trailing slasher, which I think is pretty much the same in most WordPress if you automatically put it in. Yeah. And it's probably taking care on that, but with me doing it myself manually.

Exactly. Yeah. I left them off and I create a whole bunch of issues here. But yeah, I think these tools are pretty good. obviously this. Premium thing, and I was lucky to get some deal earlier on, but it does a really good job of picking out all the sort of silly redirects that you can get as a source of your head.

there are some errors which are showing on here, but I'll just tell you that this is a bot error. So it's saying it can't find something, and it's also saying there's some broken links, but in natural fact, it's the bot, it's, CloudFlare protecting me. Oh, from, the bot crawling my email address.

[00:33:58] Nathan Wrigley: Okay. Okay. I can well understand why they're doing that. Yeah. Okay. Swings and roundabouts with CloudFlare today then.

[00:34:04] David Waumsley: Yeah. Yeah. So they're doing a good job there, but they are showing me errors on there, but that was, yeah. So we've tied it up our head a little bit now. Yeah.

[00:34:14] Nathan Wrigley: I've always had a fairly messy head, to be honest.

And, now I'm feeling as if I've had a qua. I've had a, I've had a smart haircut and a buffing up. No, that's really interesting. That's great. Just. For the people who are listening to this once more, if you wanna follow the bits and pieces that David has put on that page, it's gonna amend the few things I think probably that he said needed amending no script show slash 23.

And then in a few moments from now, David and I are going to record a, visual version where David goes through this in more detail on the screen, so less audio, more video, and you'll be able to find that. no script show slash learn slash 14 with a trailing slash I might add. but it looks better like that, so I'm leaving it like that.

So there you go. You'll be able to find that as well. So there'll be some, addendum to this content. Is that it? Have we done for this one?

[00:35:11] David Waumsley: Yeah. then, we'll, we're gonna look at the head now as a component in a bit of code that the way it's set up actually on our site. I just thought it's quite interesting what, Where the series might go actually. Yeah,

[00:35:23] Nathan Wrigley: yeah. Honestly, there was like, that's 1 0 1 basic stuff that we've just covered, and I knew way less than 30% of it. So

[00:35:32] David Waumsley: yeah, I was just, I, was flushing red all the way through reading this stuff, putting it together, going, oh my god. Basic, stuff.

[00:35:39] Nathan Wrigley: Okay, so in which case we will, we'll pause the recording there and, we'll see you next time.

If you're listening to the audio, if not, come and join us for the video. See you in a bit.

[00:35:48] David Waumsley: Bye.

[00:35:49] Nathan Wrigley: Bye.