If there’s one part of a website that suffers from the consequences of cargo cult coding more than others, it may well be the <head> of a site template. Over time, we simply get used to copying and pasting the mundane necessities that go in there… but are they really necessities? Are you sure you know what all those meta tags do?
Followup Resources
- <head>: The Document Metadata (Header) element
- <link>: The External Resource Link element
- Death Of A Meta Tag
- Defer non-critical CSS
- Link types
- Meta Description
- Meta Keywords: Should You Use Them?
- Nine Best Practices For Optimized < title > Tags
- Open Graph: Take Control of Your Snippets on Facebook
- Using the viewport meta tag to control layout on mobile browsers
- What’s in the head? Metadata in HTML
Transcript
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Welcome to Episode number 81 of the Drunken UX Podcast. And today we’re gonna be talking about getting your head on straight. I could not resist using the pun for this topic. What we’re gonna be going into is all the crap you see inside head tags and what it is, why it’s there and what you can do to use it effectively. Ladies and gentlemen, boys and girls, Cats and dogs, lemons and asparagus. I am your host, Michael Fienen.
Did you say lemons and asparagus?
That is not what I said. I swear. That’s what you think. You need to go back and listen to the role. Are you feeling OK?
Oh, you know what? I’m throwing this hat. And it was muffling the sound from the headphones. And I was like, Why is it so quiet tonight? And then I just realized, Yeah, that actually made a big difference. I’m your other other hosts. And
folks, if you’re enjoying the drunken UX podcast, please run by our kindly sponsors over at the live at Manning Conference Siri’s. They are launching off here in 2021 with their next conference. That will be on February 16th from 12 to 5 p.m. Eastern Standard time. This is the graph data science conference. You’ll be able to hear from top data scientists and learn cutting edge graph data techniques for making predictions and explaining outcomes.
You can go get your free ticket to that show that show that we were just talking about concerts earlier and now shows around mind to that, uh, that conference over at drunken you x dot com slash graph data.
You should come and check us out on the twitters and the facebook.com/drunkenux and instagram.com/drunkenuxpodcast and also at drunkenux.com/discord. Come and talk with us
about that cord. No, only that they should make like a competitors to discord. Called that cord that cord that Yeah, there that’s even better. I wasn’t even thinking about it well enough discord in that cord. I don’t even know what I would make it for. I just think it needs to exist. It’s like the Norman Claire or they need to make a companion. Products called that cord, and that
would be good.
This evening I’m having myself a nice little glass of ah oh, more 12 year Isla smoky, Not art. Big Smoky. Um, I like Bowmore. I like Bowmore because it is smoky without, like having that really strong, you know, PD flavor to it. It’s just smoky and nice. Um, and it it leaves you feeling like you drank it like it is. It’s not like the drunk, since it’s only bottled at 40% but it just it leaves a scotch flavor in your mouth, which some people don’t like.
I like scotch. Enjoy drinking scotch. So that that is a very nice like I can chew on it a little bit very chewy. Scotch. I like it, though. Nice.
I’m, like, a little more than halfway into another finish like that. And yeah, I know. It’s I’m pretty sure I got in a headshot already. Know? Yeah, I’m a dead man walking
Michael. Going fast enough for this. E didn’t hear you complaining earlier. I wanna I wanna ask what this was all about. That that sass was giving you some grief you were doing. You were nice money practice. Unfasten it.
All right. So I’m working on this app for, like, as a volunteer thing. And just I I asked on Twitter last night, Um, to the rails community. What is the current, uh, kind of throwaway design template where we just want our, like, visual appearance? Not to suck, but that’s it. You know, like, what? Bootstrapping today, But like something more contemporary. And then I just remembered today about the US wds that we talked about.
That’s the United States design system. Yes.
Um, they had a rails jump for it, but the rails John was a little out of date, so I just grabbed the source directly. And then I, like, plugged it into all the spots, and it mostly worked like I got the CSS to render, but the fonts wouldn’t render. And so what I What I learned is you have to do you have to put the fonts into your ass up pipeline, and then you have to use the rails method font dash girl instead of just regular you girl.
But the most important part is that you have tohave the font name wrapped in double quotes in this case for the US wds. And it’s funny because it was actually a comment above this block that said to do in rails, this doesn’t work and throws an error. Not sure why? Well, I figured it out.
It’s because it needs Are you gonna make it commit back to the project? I actually,
you know, I should I probably will.
I think that that would be a very nice thing for you to do for the community. We’ll drop some links in the show. notes. Thio that stuff too, in case anybody wants to follow up or hold Aaron accountable and make sure he commits his solution to the project.
Okay, yes, that’s fine,
folks. This week we’re talking about all the crap you see in head tags, and at first this may sound like, Well, do we know all of these things? This is why are you wasting time with elementary stuff? Guarantee you? I promise you we’re going to teach you something that you didn’t know here.
I think that this this topic is one of those. It’s kind of like a bone to chew on, right, like it’s a simple topic. But there’s there’s some depth in here. And I was saying before the show that reminds me of the kind of thing that if you don’t know about this stuff and these details within here, you might feel compelled to solve a problem that’s already been solved.
You know, we all use the link tag to include our style sheets, but apparently it has a bunch of other purposes to that even I didn’t know about. And so if you don’t know those things, you don’t know that they exist or to include them. And I think that there’s a lot of that here. And it’s important to know this stuff.
Fluency, right? It’s about fluency. Yeah, or to borrow another one of my new favorite phrases idioms. So when we talk about the head tag, we aren’t talking about the header tag. We’re talking about the head tag that comes in right after the HTML tag before your body tag. The head tag exists as a vehicle for metadata. I want to start with a simple pop quiz for Aaron. And even though he has access to the show notes, so he may Mudcats honor Look.
Okay, well, we’ll see. Uh, there are five acceptable Children tags who have inside your head tag. What? Are they all right? You can I mean, reverse. Engineer it.
Okay. Title
link to
meta re, um
style three or four. They have even lost count. Yes,
Um, I know over the last one because you can use these tags for multiple purposes. Oh, a script
script,
Right. I did it.
So I did not
look by the way
script style link title Meta which on their face, Like I say, this sounds very simple, right? How are we going to do a whole episode on this? Stick with me now? There is actually 1/6 1. There is 1/6 1 that is almost never used. But can be I and this one, I’m I’m intentionally trying to stop them. I didn’t write this in the show notes, so don’t even try to cheat. The sixth one
is
face base. The base tag. Have you ever heard of the base tag? No. It lets you. You know, when you write relative you RL’s in a page. The base tag is used to determine what those girls are relative to by default their relative to the page in question. But you can enter your own base tag to change what their relative to it is such a unique circumstance that if you know why you need it, you know, to use it.
Probably. And actually I lied. There’s 1/7. You could figure out what this one is. Based on what you know and what has already been said, it’s not some weird name that you’re not gonna be familiar with. In fact, you know this tag? Um, this tag is a sibling to one of the other tags that is allowed in the head. Um, this tag completely includes the name of one of the five based tides. Yeah, all right. I’m gonna That’s a lost cause. I’m gonna give you
Yeah, yeah, yeah.
I don’t know if I could give you another one without literally saying it at that point
completely. So that that’s the name of other taggers completely included in this one’s name.
No script. Oh, you can do a script tag. And then as a it’s not often, you know, it’s not something you see frequently anymore, but you can do it. No script. So, technically, seven tags that you can use. Andi, we’re gonna have links to, like, some helper articles on some of these tips tricks. Things like that we won’t go into all of them will save some surprises for that, um, the title tag. The advice.
Everybody knows title tag. There’s nothing really special, I think, to tell you about it. It’s the title of your document. It’s meant to be the title of your page.
I think I think we can say some things about this in terms of like how to use it So when you’re assembling the page title,
um, you want
to make sure that the title of the page you are currently on is the first thing in the title? Yes, So if you’re looking at the contact page, you should say contact. First reason why is because the browser tab will show whatever the title it can. Usually, it’s just the first, like 5 to 8 characters, so
you could get upwards, depending on how many tabs you have open at a given time. And I was doing some testing on this, actually earlier. Just to see for myself 21 characters is a pretty safe number for what it’s worth.
Yeah, I see that right now
it’s more than you would think. Yeah, but I mean, it is very much dependent on how many tabs you have open. Sure, I don’t think it’s more than 25. I think when when you have, like only a couple tabs open. I think 25 is 26 but it
begins from the left and then truncate runs out of space. So you wanna have that page title first, And then after that, you wanna have Well, you can. You don’t have to, but you probably should have the title of your site. So if you it’s like which it’s co. Then you wanna have, like, contact on the other dash or Piper separate or some kind,
which it’s coat. And if you want to imagine, you know why. This is if I If I’m researching some products at your website and I’ve got four or five tabs open and all four or five of those tabs just say widgets, co widgets go widgets go Widgets, widgets, go. I have no idea what might individual tabs are. You want to start with most specific and work till the specific people know where they are.
They they know they’re on your site, and when they’re looking at a bunch of tabs, you need to give them what little bit of context you can.
I think it matters for S e o purposes. But I mean, just it’s free information and you can concisely describe the page that people are visiting right now. Why not assemble it?
And you’re right by default, the title tag will be what is used in searching your result pages eso what you have in that space is, you know, if you want to think about it in that context, that will be what people read when they see it in Google or Yahoo or being as it were. That’s all I have to say about title. I don’t know there’s anything otherwise special or interesting about it. Um, meta tags.
This is where I think we can chew the bone a little bit. There are, ah, lot of med attacks. The meta tag itself is what it sounds like. It’s the tag called Meta, and it’s kind of meant to be a a Swiss Army knife tag.
What it’s it’s information about the page, like meta like, you know, self describing economists. Um, it’s information about your information.
I mean, you could put entirely self serving information there for all you care and all anything else is gonna do is it’s gonna see those tags and be like, Well, I don’t know what that is. I’m just not gonna do anything with it. The the use case I have seen there are like, you know, some people run site crawlers like their own site crawlers for things, and they could use that to track things like last mod date or something like that.
You know, they are trying to show it to the user, but it’s useful to their tools. You know, their tool sets so they’ll use a meta tag and they’ll tell the system. Look for this meta tag and it’ll tell you what you the R C m s will print this out when the page is updated. Now, you know what your delta is if you’re crawling the site or something along those lines, So let’s But let’s talk about the common ones, right, Because there are a lot of meta tags.
If you go, just open up some sites right now and look at what gets put out. You’re going to see a lot of meta tags. There is one. I want to start with X-UA-Compatible. This is the http-equiv attribute of of a possible meta tag. Usually you will see it with content equals something along the lines of like e equals edge. That’s pretty common. Stop using this tag.
Yeah, I just don’t This is Tony, is that this is a time better things to do with your time.
I am making it okay. for you to say. We don’t need this anymore. Um, the reason you see this is a backwards compatibility thing for Internet Explorer. It was originally used so that you could say, Well, we’ve designed this page to work with I E 10 so you can tell it I eat in for your compatibility so that I when somebody opens up Internet explore, it would basically run it in sort of a compatibility mode inside the browser so that it would render correctly.
The reality is we have moved. Most people aren’t even bothering to support I e. 11. At this point, edge is chrome. You know, it is the Web kit engine. So there simply isn’t a lot to be gained out of this unless you absolutely have to support an old version of IE. I like your page is built for I e. 10.
And if that’s the case, you have my condolences. Yeah.
I mean, at that point, you need to fix the bigger problem, not using the stag, but that’s why you will see that tag. Um, and I think a lot of people throw it in there out of habit at this point. Like the only reason it shows up that much is because people of copy and pasted head code for so long in a lot of cases. So stop using it, please.
Like I said, you have my condolences.
Medicare set. This one is usually up at the top or almost stopped the care set Is the character set? Usually almost always. It’s set to utf a. I’m pretty sure every browser defaulted to utf anyway, But you don’t necessarily have to have it in there. Other values you could theoretically see. Somebody said it to utf 16. There is a 16 bit version of utf um, you may see excepto ask e ask using appropriate value. You won’t. Nobody does that. But you can, um
just to give you I’ve seen it set the ISO codes before.
Yeah, it could be set to a specific I So, um, the difference between like if you were to say, Well, what’s the difference in utf eight and ask? Ask e has a name space for 128 characters. That’s it. 128 characters is not enough to represent all the letters and glyphs and things that we need a keyboard toe output, especially across most languages. UT f a. An eight bit representation of language supports 1.1 million characters.
What a million is significantly more than 128 view
Yeah, by just a few a little
bit. E think
it might be enough for most English characters on May Be a Couple Cliffs. Yeah, and this is another one of those cases of where, if you really do need to change it for encoding reasons, you know you need to change it like anybody working in character sets outside of utf eight. No, they’re doing it and have a reason for it. Typically, um, that most common, it’s probably be, you know, foreign language support sometimes gets into other isso character sets.
Um, something else. Just to mention, though, about character sets, browsers using other ways to determine the character set of a page. Um, there is an http header called content type that gets passed by the browser itself. There could also be user settings that, you know the individual user will have to say. I want my content in utf a, um, browsers have some heuristics built in where if you don’t have any of that, it will try to discern what the right characters that is.
So this is another one. You can throw it in there just for the sake of habit. It’s not necessarily gonna break anything by not having it, though. You think it infers.
I think it in first DCF eight if you don’t provide anything, but it’s good to have provided. Regardless,
The next meta tags that I’m gonna tell you not to use is meta keywords.
Yeah, I remember when those were relevant.
Those were relevant a long time ago. Yeah, there is an article there rather seminal article from 2000 and two, written by Danny Sullivan that was called the Death of a meta tag. Um, so in 2000 and two, he wrote this article about how medic e words were not useful. The basic problem just came down to early search engines used key words because it was an effective way. It’s just like using a card catalog.
Right key words were a way of indexing content, and our tools weren’t smart enough to figure out key words, you know on their own. But it didn’t take long for people to learn. Well, I’ll just put the keywords in that I want people to find. Regardless,
this is before Google’s page rank algorithm. Oh,
yes, this goes way back. I mean, in 2000 and two, you know, things were still remarkably rudimentary.
Well, actually, let me correct that. Page rank might have been around, but s e o as an industry wasn’t really maturity. The
algorithms were still very simplistic. Yeah, basically worked on indexing and matching.
Yeah, there was sort of this understanding that, like using the keywords thing, was intended to be done in good faith and
people immediately
people people did not use.
They’re not using
faith. And so because of them, we can’t have nice things
to this day, depending on who you talk to in S C O fields, but also people who work, you know, behind the scenes. Some will actually tell you that they use medic e words as an indicator of low quality content. They can count against you, um, or like, even like you can use them. And you can use them, right? And they know if you’re using them, right. And it’s just kind of one of those things where it’s like at at best they will do nothing for you.
And at worst they will be used as a signal that you’re content may be spam. So but here’s the thing. It’s not that simple. You probably should be leaving this out if you work in any kind of like highly competitive space where you’re seeing a lot of like keyword bidding for things like advertising cost per click stuff like if you are, you know, to go back. Thio Aaron, you said widget code.
You know, if your widget co. And you are trying to bid on keywords like widgets and good widgets and best widgets and things like that, you don’t want those keywords just necessarily out in the wild on those pages because what you’re doing is giving your competitors advantage on your own S seo strategy. They can look at that. Oh, that za really good point. Yeah, it’s your
thought about
that. You’re just giving the competitive advantage to him by saying, Here’s the key words were targeting Have fun and they could go bid those same keywords then as a result. So probably don’t make that obvious on Don’t put them out there like that, You probably should include them. If you’re using a custom search engine that takes advantage of them.
This used to be something like the old Google search appliance, the Google Many You could have them index things like custom meta field. So you could say, Hey, we’ve got a keyword field. Use that as part of the signal. You know, in terms of how your index and content on our site, um, you could still do this with other. You know, you could have elasticsearch do it. You could make solar do it. Um, there are a number of those tools.
They also don’t have to. And the reality is most of those platforms obviously can’t buy a G s A anymore. Anything but, um most like self run tools, have much better options available to them than that. So But if you if that’s your platform and if it’s some legacy tool that you know is baked in tow, a lot of other stuff you may be stuck with that you know, for a while until you can get off of it.
So that is a reason to have them because you are deriving value yourself from them. You’re not like betting on Google’s CEO algorithm or something. Then you probably could think about including them if you really care about your international cio. Uh, what people have discovered is some of the international search engines like Yandex, Baidu and neighbor Navarre. No, I’ve never I don’t know, neighbor.
I hadn’t heard of that one, but it came from the research. Uh, they may be using keywords as a signal for search quality. No, there. So it may be worth including them. If you really care about Internet, if you’re an international company and you really care about international search results, they could be factoring in there. Um, no, guaranteed.
I don’t think I don’t think there’s anything wrong with including them in the good faith way they were meant to be used before. Like, if you’ve got, like, a handful of key words that you think are relevant for the page that you’re displaying and you want to list those out on your meta tag, I say go for it.
You know what I think the problem is and why, at the end of my my last point here is probably just leave them out. Yeah, I mean, you could do that to the reason I say that is including them is just extra maintenance. Then it means constantly being sure that your content is still being honest to those keywords.
Those keywords may be perfectly accurate when you first create a page, but as that page changes over the course of a year or two or three years, maybe at the end of that it no longer reflects some of those keywords, and somebody has to go in to maintain them. And so it’s. It is an extra signal that you sort of have toe handhold.
And because modern search engines rely on keywords in the sense of they analyze your content and they’re already smart enough to know a what are the actual key words you are using in your content. But what are also, you know, the synonyms and stuff that people would look for that would get them to this stuff. They just don’t need it. It’s the tools have outgrown that resource, so to speak. So if you use it, use it in good faith.
If you don’t need them, don’t bother, uh, to go along with that, though Now we get into the stuff that we do say absolutely. Keep them meta description. Eso we say. Don’t use keywords. Why would we say Use a description? The description is used by default. Your meta description is what will show up like in search engines when you share something on face, mate. Yeah, similar to a title, there is sort of a limit on the useful length of it.
Generally, people say, don’t go over 300 characters. Realistically, only about 160 characters of it is useful to the end user to somebody else’s, whereas, and I said this earlier, like the head tag is all metadata about your page. It’s not meant for human eyes meant for machines, but machines can make it human readable. So when Google generates a search engine Result page, it takes your meta description and presents that to the user.
But they’re not going to get more than 160 characters of that. So, and on mobile devices, it’s even less. I think it’s 130 characters on mobile devices, but less than a tweet less than an old tweet from a couple years ago. Classic classic Tweet light wheat. A tweet classic like that one better. Um, that’s what the meta meta descriptions for. You should absolutely have it and at the very least, in a basic CMS WordPress, whatever.
Make the meta description just be the excerpt from the Post and just at least be the start of the content. Well, that’s a good idea. You know, it’s the teaser or whatever, but there’s something there to show up, because here’s what’s gonna happen if you don’t include one, Google is going to try to figure it out for you.
The search engine crawlers and indexers are going to say, Well, we want to show the user something about your page, so we’re gonna just go with the first content we think is right. And don’t let them decide that for you. Um, and in the best case, make it custom. Like actually craft the description that is meant to be read from something like a search engine page for the user.
Give him a very brief, you know, here’s what you’re gonna find on this page, even though the page itself may have a ton of content on it, so mhm good strategy and again we’ll have some articles that have additional strategy for stuff like that. Um, robots. The robots tag. Robots tag is fun.
That’s where you get to say which robots are about to visit your site, right?
Uh, yeah, Like if, Like, c three po data in keep c threepio out.
Johnny, Johnny five.
But the robots tag is really about Google and Yahoo and other crawlers in general, there are There are crawlers that are not search engines for people who may not know that, um, you can have crawlers for all kinds of things, but the robots tag lets you set things like no follow. So you tell it. Hey, you can crawl this page, but don’t follow any of the links that are on it. Uh, you know, especially if it’s something archival.
Perhaps you can have no index with no index search and seize that page, and they should. They, you know, they are by no means bound to, but most of them will honor it and say, Oh, we shouldn’t indexes page. We should pretend like it doesn’t exist and just move on. Um, that’s really useful. You know where this is, where I find it like super helpful is we have development and staging websites that are technically out the while like they’re publicly accessible staging sites.
Um, and we don’t want Google picking up on those and indexing those and thinking they’re a conflict with our production side or anything. So being able to leave the robots and we, of course, used like a robot’s not txt file and stuff, too. And that is along the same lines in terms of, you know, functionality. But this just lets you have granular per page level robot settings.
If you wanna control, uh, whether or not something crawls it or follows it, and you can leave it off if you don’t care it all, you don’t need to include this tag. But if you want some gate keeping on that, you know, maybe it’s ah protected content. Maybe it’s content that you want for paying customers, but you know, but you don’t have it password protected or something.
There’s plenty of reasons why you would want that. So that’s it’s a useful little little helper guy that can live out there after robots. I have view port the meta Vieux port tag. This one, I
actually don’t know for sure what this does. I’ve always kind of assumed just from the attributes that it has, that it’s kind of defining like the but what the view port is intended to
portray
This is like, zooms in or not. This
is one that is very, I think along what you were saying earlier, right? I think people copy and paste it a lot without really understanding what it does. So first and foremost,
yeah, I’m one of those people.
If you do not have a responsive website, you should not be using this tag ever. This tag is meant to be used for responsive websites and responsive websites only, um, and specifically what it is doing and again the the This is one that’s also incredibly hard. You almost need to set up a page and play with the settings and look at it on a mobile device and really see how your settings are affecting um, what it does on a mobile device.
But what it’s basically doing is you’re telling the browser how to scale the view port. The view port isn’t necessarily the screen with the view port could be wider or narrower. Um, in some cases, depending on what your you know, your situation is you may say my view. Port has to be 800 pixels wide, like the stuff we built is not made to be seen at less than 800 pixels wide. And you’ll get horizontal scrolling in those cases.
Um, it lets you set scale with Vytas. Well, technically, um and so here’s a good way to look at this, right. Have you ever, Aaron like you’ll see this a lot on let’s say, a news article, go to a news articles website, right? And it looks nice. It looks like a nice size. You can scroll on it up and down, but you can’t pinch zoom in. Have you ever have you ever taken note of that?
I really love it when I can’t do it, and it never occurs to me. It’s one of those things where I work in technology, but sometimes I’m just like, Oh, I guess today the technology isn’t working like it’s supposed Thio. Oh, well, I don’t know if you really think that, like, there might actually be a riel like reason why it’s misbehaving. I’m just like, oh, the grand ones aren’t like cooperating today.
This tag is the reason, because you can basically say, Oh, no, our content is responsive. It’s set toe already be viewed right? We don’t want people zooming in or out on it. The big where you see this really breaking stuff is when people do it on a non responsive site, and as a result, you end up with a whole like giant Web page zoomed all the way out like it looks like you’re looking at Amazon from 50,000 ft or something.
Amazon doesn’t do this for what it’s worth, but like, you know, a site like that where you have to pinch zoom just to get it on. But you can’t because they’ve locked in the scale. It’s It’s a way of controlling responsive behavior on devices. It came out originally. The whole reason this happened was because in 2007, Apple released a new product that people might know as the iPhone, the iPhone,
iPhone. You know
it. Actually, the problem wasn’t that it was gonna get big. It’s that it’s screen was very small, and with a small screen and a small browser, people were very quickly having to figure out How do we make our websites look good on this fancy new device that people are now walking around with that lets them see our page anywhere. Um, and so that that was the birth of this tag came out because of mobile safari.
Um And so, like, say the easy way to understand this is go read up on it and then go experiment with it and look at it on your site. If you have a good, responsive site, you don’t need this tag. Um, if you have a non responsive site, you don’t want this tag. It’s it’s kind of a weird like there’s sort of a weird in between area where you want to use this, Um and yeah, all I can say is, go, go play with it and kind of see how that effects things.
Um, the last group, the last big group here, is sort of a collection of tags known as open graph. Been open graph. Ah, you’ve done open graph stuff with things like
our RDF and things. Um,
okay, so open graph is a metadata standard in the same sense that, you know, scheme, Aziz, our metadata micro formats. Um, the original open graph protocol, um, was based on RDF A
Oh, it’s the O G. T s. Right. Okay,
so it’s It’s this RTF format that lets you provide any, because again, RDF is
rich documents.
Um, the meta tags, by their nature, are just a tag with attributes like property or name or content. And what you put in those, like we say, it’s up to you. You can make up your own tags. And so what the open graph protocol did is they said, Cool. That’s what we’re gonna do. We’re gonna use the meta tag and create our own, uh, data format that just sits on top of this nice, flexible meta tag.
What they look like is it’s a meta tag, and the attribute is like property equals O G. Colin site Underscore name, and they’ll have, like, content equals something.
So where this gets used and why this matters open graph is a social. It’s a social media thing. It’s designed to help win sharing content. You know, Facebook is the one who created it. This is
it’s for making the sharing cards like when you when you share the Twitter or Facebook, right? This is what it
includes. So this is how it gets that information. And it’s how a page when you look at it could have one title, but it actually reads as a different title in the browser. Maybe it doesn’t include the site name. Or maybe it includes some abbreviated words. Thio take you or make use of the space. So there are a lot of these fields. As it turns out, you normally will see title type image. U R L But it actually goes way deeper than that.
You can have audio, you can have description. So, like in the case of description, if you have an open graph description that will take precedence over your meta description when you’re sharing something, otherwise Facebook will default to meta description. That’s why these are feel like, Why, why, Why would I put the Open graph title? I already have a title tag. That’s right, and it will use the title tag.
It will use the meta description, but this gives you a way to provide a particularly curated experience for those share cards, knowing that they have limited space toe display text, um, the image eyes incredibly important because you can have different images. Twitter can have different images from Facebook. That way they have different ratios. They have different image sizes in their feeds. So you can define different images that way.
Um, locale. You can define locale you can provide secure. You are less for your images. Um, you can define height and width so that it knows exactly how tall those images are. Um, there’s just a lot of different ways to define this data, depending on, like, realistically. And I don’t think we’re doing this. And as soon as I start talking about it now, I think I should go check this.
Um, I should include an open graph audio paige in the Drunken UX episode posts because I could define the actual audio source in that open graph tag so that when it gets shared, Facebook knows there’s audio content associated with this. Yeah, so that that’s us getting s e o minded. A little bit there. All right. I guess that’s not so much s e o as it is ECM social marketing. I’m sorry. SEM is search engine marketing, not social marketing.
SEM scanning.
It is also that. Believe it or not, words can or letters can be many things. So the S So that’s that’s your meta tags. That’s the round up. Let us know about other meta tags that you use or you like. There are many Mawr, obviously, um, common ones, uncommon ones. But the last chunk of stuff I want to talk about is the funnest part, which is CSS and JavaScript. So CSS and JavaScript often often is included in the head.
Um, CSS in particular, tends to get included with a tag called Link. This is not a link to the past. This is not Zelda. A link to the past. This is not the final no Zelda games. Very well, actually. Ah, the link tag is technically has nothing to do with style sheets. Eso Before we actually talk about style sheets, I want to talk about the link tag and what its role is it? The link is
What is it? 2027 different types of usage is for the link
tag.
I think I’ve seen maybe a handful of
the The link tags specifically specifies relationships between the current document and an external resource that’s straight from the M D N um, link tag is just there to literally link one thing to this page s Oh, yeah, there are 27 different, and that’s a moving number depending on where we are in the spec. It’s a living spec. Some links are being deprecate ID. New ones are being added.
Um, the one you see with CSS obviously the most often is style sheet. What you see. And I should also say this when we say that link type, what we mean is when you see Link REL equals rehl is the relationship. What is the relationship? And strictly speaking, that applies to anything that is a link, not just the link tag. So and a tag can have a rail. A relationship?
Yeah, So one. I’m looking at the West right here. One of the attributes is external. So on a tag, if you have a link that’s going out of the site, you could do rally equals ext external. And the bonus here is that you can use CSS and use an attributes elector. Have those links show up differently, or have them display with an iconic
media. Wikipedia is the classic example of this Anytime they have a link that goes away from Wikipedia, they have the little away arrow next to it. Yeah, every Just use it and attributes selector and just say every a tag that has rally equals external. Do this little after element and show in S V g with a narrow or what have you? Um, but and there’s a list and we’ll have the list because not every list can apply to every, um, tag.
But there are a lot of other ones that you may see done with the link type Canonical I’m canonical is one that I’ve used a lot because we have several blog’s at our company and those blog’s share content
eso to
tell Google that we have We don’t want you thio index five versions of the same content which Google will score you down for. They will think you’re just spamming content if they detect many pages with the exact same thing. So instead, on your duplicate pages, you put a link RL equals canonical and then include the u r l of the original post. And then it just knows. Oh, this is just content being repurposed.
All I need to care about is the original one. Um, canonical can be very important, even though, you know, a lot of people may not run into a need for it. Um, author, you can have You could have seen that will have something work. Icon icon shows up a lot. Um, you’ll see, Like the apple icon. Right. Um, this is Ah, a way to show the not just the browser, but, like, if you joining your mobile device.
This is where I get a lot of use out of this. If you have a web page like I’ve got a restaurant I love, but they aren’t on door dash or they don’t have their own. They use, like, one of those platforms for online ordering. And so I just pull that web page to my you know, my phone screen. And it just creates an app like shortcut there and using the icon Link tells your phone What what graphic to display for that.
So you can have a custom graphic for that is specific to your page or your item at that point. Um, so it’s like, what, Apple touch icon? I think that’s the one that apple uses and you could have, you know, others define their license. See license frequently. Um, you’ll see. Ah
manifested. Yeah, there’s are you
there’s manifest modules. And, yeah, pre load is one here we’re going to talk about in a minute about how important that one is for performance, so links can do a lot of things, but most people get introduced to them as the way you include a style sheet. So let’s talk about style sheets by their nature. When you include link round, equal style sheet and your CSS file. That is what we call render blocking. And sometimes you will want that.
Maybe you don’t want your page to be visible until the style sheet is loaded. That’s fine. That is a choice you can make. Um, in some cases, you may say, Well, I want people to see my content first. It don’t want that. I don’t want to be blocked by just not having our fonts yet or something like that. So sometimes you may not want that stuff to be rendered blocking in their ways.
Get around that one of the common ones that we’re gonna get to here at the very end, is putting it at the bottom of the page so that heads processed. And then it goes through all the dom content and gets that rendered before it gets to your CSS. To your point. Erin freeload. You can actually use a link. REHL equals pre load Andi.
Use another tribute called As As Style Sheet and give it your CSS file, and it will load your CSS a synchronously that way, but it’s it’s semi a synchronously. Basically what it does is it moves that to the very top priority of what it’s supposed to download while it’s doing everything else. So you conspired up that getting of that those elements
I see on here I’ve never seen this before. But one of the ones, if you news there’s a rail equals first and there’s really equals. Next rail equals last and really equals prev. Um, sure for previous
Bloodsworth, first and last are deprecate ID.
What they do, though, is they specify. If you have a series of pages that are in a sequence or a series of links that are in a sequence and one of them goes forward, one of the goes backwards. You can use these rail attributes for that.
Same with pre fetch pre fetch is all about the next page, not the page. You’re on. So you could say link Rehl equals pre fetch and it will tell the browser Hey, the user is probably gonna go to this stuff next, so you should probably go ahead, just download it and have it ready. Browser support for it is a little funky because of bandwidth type issues like on a mobile device. Being greedy about data usage is a little frowned upon.
So there’s There are some some browser behaviors to just be aware of with that stuff. Ah, but with your what? What you get with style sheets is this sort of interesting cross breed of linking to style sheets or including styles in line, which you’ll see a lot of, um, or one of the new sort of hotness is is putting all the CSS that you need for all your quote unquote above the fold content having that readily in lined in the header in the head, um, and having the rest of your CSS at the bottom of the page.
Eso yeah, there’s there’s some combination type things there. Similarly, with scripts with script tags. You can use the A sink or defer attributes because again JavaScript will be rendered blocking. If if the browser hits it and it’s being told, Go get this file or run all this Java script. But if you say a think or defer, a think means do it now. But keep doing the other stuff. Differ says. Do it at the end. So there’s it’s a flow control type thing.
So it’s it’s all performance. It’s all about just trying to get your stuff quicker. And here’s how I want to talk about this. I was looking at some pages. I just want to grab someone. I said, How big are their heads? I’m just curious. Like how much for stuff has to be processed before about seven seven, just seven? No more than that. Just say, um, well, that is a number that is included.
Amazon had 242 lines of code well, 140 lines of code inside their head. Google had 116 NFL had 758 read. It had 252 and Patryan my God! Patryan had 4298 Line eso Why do they have this Patryan have 4298 meta tags. No, they do not.
What s what they
have is in line CSS and jobs. When we say in line, we mean it’s not in a dot Js file that’s being read in or dot CSS file. It has just been No, I would say copy and paste it. It’s probably rendered. It’s not that somebody actually writing it there, but they’re build tools or whatever are just putting it all in the head. Now there are reasons to do that. A When you put your CSS or your Java script straight into the header.
If reduces an http request, you don’t have to call that file now and wait on it as soon as the H T HTML document is read, all of your supporting material is read in with it. Um, amp is all about this. If you know about AM pages or have used at pages, um, they require you to include your CSS in line because all about speed, it’s all about, you know, tiny file size so there is valued and and to what I have just mentioned, you know, putting all of your above the fold CSS.
You want that to be immediately available because you want all that first stuff toe look right. Um, but the stuff below the fold isn’t as important. So if that CSS is loaded last, no big deal. The problem with this approach is it’s not being done efficiently in Patry INS case. The patryan website has all of the stuff, but they aren’t. They aren’t men. If I ng any of it, none of it’s modified.
So the amount of space they could save just by reducing new lines and white space they could save a ton of bandwidth on those pages by doing that, because you are now assuming they are doing this on every page. You know the thing about having a Java script file or CSS file is that could be cashed. But if you’re rendering all of this out in the head every time, it means that entire payload has to be downloaded every time somebody visits the page,
right? So it makes sense for a thing like, because it’s single serving, but not so much when you’re browsing a site and viewing more than one page, right?
Um, yeah, it’s just I I would not recommend somebody build a page that way. It’s inefficient, It’s non performance, and they’re just better ways of going about it. This gets us to sort of the wrap up here, which is what’s the difference between putting all this stuff?
And when I say all this stuff the CSS and JavaScript in the head versus right before the end of the body one is fuck flash oven styled content by having your seat, you feel like, Yeah, I don’t like that e just want to say fuck ah, folk. Having your CSS in the head means your page will look right once it renders if it’s before the closing tag of the body, your page can render before the CSS is ready. That is neither good nor bad.
It is just a choice you make as a designer and developer whether or not you want that, that’s just a consequence that you should know about the Java script. If it’s in the head now, there are certainly ways you can if you’re this is assuming you’re not deferring it. This is assuming you don’t have an your stuff inside in ah, window on load event handler JavaScript in the head cannot act on the body because the body hasn’t been loaded yet.
So if you’ve got javascript that is manipulating your page, it’s better to defer it or put it before the closing body tag. Just for those reasons. It’s kind of just a matter of figuring out what what you need and where you need it in that situation. Ah, because you are not required to put either in either place, it’s just a understand the consequences, you know of doing one versus the other.
At that point, what I would do the way I would solve this problem is in an ideal world, because I like the idea of saying, Take all of your critical CSS That’s the CSS in the top chunk of your page and have that min ified and compressed down all the white space gone. All the comments gone. All the new lines gone. Turn it into the smallest blob you could have and put it in the head and then have all the rest of your Java script in a CSS file in the footer.
Um, if you are a huge on Web fonts and you absolutely need those Web fonts, their use a pre load tag, the bump your fonts all the way up to top priority so that they are ready and raring to go, there are some other. If you use fought display, you can control Web font behaviors. Well, that’s a different topic. Um, with Java script. I just make it. I have it. I just always put my job script in the Footer.
I don’t like the idea that I need JavaScript doing something in my head. The only exception to that is Google tag manager, because they need to be in the head for that because it acts on the page and does things and all that. So, um, it kind of needs to be up there, but that’s a special case. It’s a third party tool. That’s where it needs to go. Um, that’s my advice. Agree? Disagree. But you do what’s right for your website.
Great story, Michael.
Thank you for that story. No story. It’s advice. You can take it or leave it. I’ll take it. Thanks, but that’s what we got. Eso let us know what tags did we not talk about? What What advice did you give that was wrong through, You know, did we tell? Tell it the wrong way. Let us know, um, and go look through. We’ll have in the show. Notes a bunch of links to advice on everything from open graph to loading noncritical CSS later.
Thio using your link, relationship tributes and all the things in between. Otherwise, stick with us for a minute. We’ll be right back.
folks, I hope this was helpful for you. We’ll plan to do some or little topics on other kind of basic baseline site developed type stuff here in the near future. I like this. I think it’s a good way to kind of dig into things that we take for granted. Um, I think a lot of the stuff is easy to just not think about, Um, you know, the reality is, if you’ve got 4000 lines of code in your head, that’s 4000 lines of stuff that the browser has to download before it could even start rendering a Web page.
So this kind of stuff, I think, does matter for a number of reasons from S E o performance, um, to sharing and everything in between. So let us know what you think and what’s helpful for you or tags that you find useful or tags you don’t find useful. Um, and give us a shout over on Twitter or Facebook at slash drunken you X, um Instagram is slash drunken UX podcast, and our chat room is always available at drunken you x dot com slash discord.
Uh, got a lot more coming up this season, but for now, I just wanna tell you we’ve got cut things. You got things?
No, double him. I gotta stop drinking
these. Or maybe I need you to drink a few more. We’ve got four more episodes. Drink before we get off the horn tonight. Tonight? Yeah. I’ve got guests coming in here in a minute.
Oh, my God. I wonder how many I have to drink before I hit like Ballmer’s peak. And I say really profound things, but not
like blacking out in passing. I hate to tell you this what is, but it’s a myth that I already know. It’s it’s just a myth. Because listen, the only possible way you could do that and actually like, have it makes sense is if you told people to keep their personas close, but their users are.
Bye. Bye. Uh, you fucker.