Meta Tags

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes Barracuda Boss and Scott

CSD. Welcome to Syntax.

In this Monday, hasty treat, we're gonna be talking about meta tags. And I'm not talking about Facebook things or whatever. Metaverse.

Metaverse or whatever logo or brand they wanna steal from. Yeah. We're we're talking about Meta tags here. So what is a meta tag? Why might you use them? And what are some of the varieties of things that maybe you don't think it. About when you think about meta tags. My name is Scott Tolinski. I'm a developer from Denver, Colorado. And with me as always is Wes Bos. Hey, Scott. Hey, Wes. How's it going? I was listening to,

some of our podcasts, and I keep saying, I'm excited to talk about Whatever topic we're having, and I was like, I should stop saying that. That's I say the same thing every day. I'm excited to talk about

meta tags. And, you know, we we just have The podcast is built by, like, a a Markov generator or a Markov chain.

That'd be great.

Sponsors today. We've got 2, Sanity and Sentry.

I'll talk to you about Sanity. I'll let Scott talk to you about Sentry. Sanity is, the structured content CMS, it's the unified content platform that powers better Better digital experiences. What does that mean? Sanity is the platform that you use to build your website or your Application. You go in and you define all your data types. You define all of your inputs. You can relate things to each other, and then Sanity gives you both this thing called Sanity Studio, which is the actual UI for editing your data. They give you a wicked, API.

Either can be REST, can be Grok, can be GraphQL, whatever it is that you want. You pull that into your website.

They have all kinds of tools for Collaborating on your data, for uploading your images, for, cropping your images, for relating your data, for doing Conditional fields, you name it. Sanity has got it. Check it out for your next website, sanity.i0forward/ syntax, double the free usage tier. Thank you, Sanity, for sponsoring. I think, just about every, like,

doc or technical explanation should be followed with a large heading that says, What does that mean? That's that was really nice because you said some some tech stuff. What does that mean? What will it explain it? Yeah.

Well, this episode is also sponsored by Century, which is the perfect place to track your errors and exceptions.

And what does that mean? It means it's a place where you can see every time a user has an error or a bug or a maybe not even a bug, but maybe Something that just wasn't captured the way it needed to be and therefore is being surfaced as a bug.

These types Some things can pop up and exist in your web app. And if you aren't tracking them, you might not really know that they're even happening. I mean, for me, there were some issues that were causing some, let's say, console errors, but there there were some issues with the our our web component video player that was causing Some century bugs.

But if you were to look in the console, you'd see them, but the average user wouldn't necessarily experience that as anything other than maybe a blip or something when they're In their video player, well, I I took some time and I crushed all those bugs this weekend, and it was so extremely awesome to be able to Head into Sentry and just click on some stuff and then click resolve. That way I know if it's been a regression or not. Something that I should have fixed and that Actually wasn't fixed.

So now it's it's so amazing to be able to see that how many times has this bug occurred, that little, like, chart. Now is it a flat plane? Because I fixed the bug and there's no more. So if you wanna try out Sentry to keep track of all of your errors and exceptions in your web app, it. Head on over to century.io.

Use the coupon code tasty treat, all lowercase, all one word, and you'll get to 2 months for free. And thank you so much for Century for sponsoring and continuing to sponsor Syntax.

Okay. So meta tags, meta meta meta tags. Meta tags Are the things that kind of tell the browser robots and other things Just some meta information about your application. Just some information about the application that it's visiting.

And these can be anything from What what the encoding of the characters is, or even at some point it was used heavily for SEO, and now there are all sorts of different things. So let's get into the very 1st meta tag,

which is charset. That's a Pokemon, and,

it is a Pokemon. Yeah.

It. No. The the char char set? Car set? How do you say it? I always think it's car set because it's character. I guess character.

Yeah. You're right. But it's also Charizard is in there. Yeah. That provide I always like to think of these these meta tags as information about the page That is not part of the body of the document. So we didn't, like, an entire episode on, what was it, the link tag And how the link tag does all this weird stuff. And that was just associating, like, resources, whereas the meta tag is just more information about the page. And and, yeah, that first one, charset, it specifies the encoding of the HTML document. So that is almost always going to be u t f 8.

I remember a bug that would pop up Where if you did not set this, there would be, like, a weird encoding on I believe it was on Characters that had accents on them.

I forget exactly what that is, though. I don't know if there is a default. I think the default is whatever your browser is set So if your website is in a specific character set, then you need to make sure you explicitly set that with your Meta tags so the browser knows how to display it. If your website's in a different character set, then u t f eight, then

Hopefully, you're doing that on purpose, but because that's not something that really, really you encounter very often because

UTF 8 really is the sort of standard for everything. So I I don't know if I see anything else other than UTF 8 very often, if ever. Yeah. I would Like to I remember years years ago, maybe, like, 10 years ago, Google had this thing called, like, Google code search, and you could search the entire Internet and see How often people were doing things like using u t f 8 or or using a specific CSS selector or things like that. It'd be really cool to have that again just to get some ideas of, like for this show, I specifically went to GitHub, and I searched for The meta tags is just to see what random ones people were using, but it's not as good as actually searching real websites.

Yeah. And it definitely says that, UTF 8 covers all the almost all of the characters in the world. So there really is No reason to use anything other than UTF 8 unless, of course, you're you're doing it for a very specific reason.

Next one is going to be a tag I feel like it's often forgotten until, like, the very first time you load up the site in a web browser Yeah. On your mobile phone. And then you're like, Why is the website so zoomed out? Oh, wait. I forgot the viewport, meta tag. So it's meta name viewport, And then there's some other properties like content with equals device hyphen with comma initial scale Initial hyphen scale 1.0, which really what this tag and what those characters are doing is saying, hey.

Don't try to display this website as anything other than as the viewport defines its size. Right? We're not going to try to zoom this thing out in a desktop view on mobile. We're always going to keep the device viewport

To be the actual width of this website. Yeah. And that's probably I would say almost every website needs that width equals device width. Where you would wanna do that is if you had, like like, when these phones first came out, and you wanted to still have a desktop experience it. On a mobile phone, you can pan around. You could set that to be something else or, I remember people explicitly set it to 320 Pixels when the iPhone first came out because that was the only mobile browser out there, which is really funny. You can So use this meta name viewport to disable zooming, which is extremely frustrating when a website has that.

But If you are building the only really use case for that is if you are building, like, an app out of HTML CSS And you need to stop people from accidentally zooming in or or things like that.

It can be really frustrating when you can't. And you have to then make sure that you can still zoom things like photos and whatnot because when you can't zoom in at all on a website or even, like, When I'm reading something on a website sometimes I'll just Yeah. Oh, yeah. Zoom that up just to like like a list of ingredients on a on a, a recipe. I'll just, like, zoom up just the list of ingredients to fit the thing. So I probably would not put that on there, but it is definitely doable if should you need it. Yeah. And anytime you're messing with some of those things, you are inherently putting, like, a a block between you and the built in accessibility

features or your users in the built in accessibility features in the browser because those things are there for a reason. You know? Like you said, zooming in and and just any of that stuff, You should probably be giving your users that capability. I know I know sometimes people really put art in front of Art or commerce in front of accessibility and general usability, and just a caution against that.

Don't do that. Next one we have here is SEO and page data. This is probably the one you know meta tags mostly for, and this is for providing more information about the page, most likely to robots that scrape your website, I need to display most likely your Google search results. So, meta description is when you Google something like If I Google Les Boss, arrow function, what shows up is, turn into an arrow s function removing parens with a single param arrow function implicit return. So what Google did there is it just scraped the headings off of mine. What I could do with that is I could override that by by writing a meta description, and that's what's gonna show up when somebody views. Those couple sentences underneath each of your, each of your search results will show up in that specific piece, and that's really, important for both SEO and getting people to click through to each of it. So it's worth like, for example, for all my courses, if I Google, West Boss Gatsby. So I was just saying, if you want to specifically say what it's there, you need a meta description. I was trying to give an example of one of my websites, and then I realized I wasn't doing a meta description. I was just doing open graph descriptions, which we'll talk about in a second, And I should probably be setting those. There's also author and copyright you can put in there.

Again, more information there is, you can put dates in there when the thing was written. Lots and lots of information about that. There is also

some interesting blade tags that have cropped up. You know what? They they seem like it's a little bit more recent, but it's actually they've been around for a little bit. These meta Name, theme, color, and then content is, of course, the theme color as well as MS application tile color. Although I The MS application tile color has been around since Windows Phones. The theme color one, the first time I used it was, Oh, a good amount of bit ago when Android's Chrome started changing their theme color based on the The theme color of the site, and it made the the the phone applications. It made the browser based applications on Android really look like apps, because it just felt a little bit more integrated into the system.

That's one thing I think that Ios has never really gotten super good. It's a little bit better now in the latest versions of things with Safari and even desktop Safari now taking on the theme color. But in these things can be really nice. And me, personally, I would make it a priority to set these before launch. Not because it's going to be doing anything Super substantial, but it can really add a nice little finishing touch to your application and make it blend in just a little bit better here.

Can I tell you about a hilarious TikTok that I follow? And it's called That's a Nice Touch. That's a nice touch. And it's it's this guy From I think he's from New York, and he just, like, goes to restaurants and just, I don't know. It's sporting events and whatever he's doing in his life. And whenever he sees a nice touch, he just goes, I'm over here at this, like, at this restaurant, and they put their, coffee in a, stainless steel cup. Now that's a nice touch. It just goes around his life it. Nice touches.

That's hilarious. That's yeah. That's a nice touch. Hey. That's a nice touch. Using the, theme color and the, meta tag? That's a nice touch. That's a nice touch.

We should have a segment of our show now call. That's a nice touch. Yeah. Oh, when you, push to your repo, render.com and nullify.com

automatically deploy,

nice touch. That's a nice touch.

As a couple dead tags that we have here, meta keyword back in the day, for SEO, all you had to do is provide a list of keywords for your website, and that would show you up, that those do not, play into any search engines Results anymore. Those have been dead for a long time, so there's there's no sense in putting keywords in there. There's also X UA compatible.

This was back in the day where we had this thing called Chrome Frame. And what Chrome Frame was, when people are using IE 6, It would replace the rendering engine of IE 6 with Google Chrome, when you put this meta tag in there.

And then if people had Chrome Frame installed, they would use Chrome as a renderer.

Frustratingly enough, that's still part of the default Emmet Exclamation mark tab to give you a base HTML layout.

But Chrome Frame has been been dead for years years now. This is just not necessary. I e six has been dead for years years. So, that's not necessary anymore. Also, I think that also on older versions of IE, You were able to emulate IE 9, 10, and 11.

And what that would do is it would ensure that You were using the latest version of IE or you could specifically set a renderer engine if you had some weird app that only worked in IE 10. But, again,

Not really used anymore. They're I would call them dead. Yeah. It's it's funny because I remember when these were actually usable, And I remember just thinking like, oh, this is so just fill it with keywords, and then all of a sudden everybody was like, yeah. Let's just put, You know, a ton of spam keywords in here. But also, I guess it's not like scalable at all in terms of like where the Internet is Today in terms of meta tags, I just remember that being such a simple way to do SEO.

Hey, SEO. Make sure you have, You know, your h one tags or whatever, and make sure you have your meta keywords. Wow. That was nice and easy.

None of these backlinks.

Robot tags. You know, robot tags are for crawlers.

So literal robots as in your Google search crawler. Those types of things looking. Now typically these are just done through a robot, dot txt file.

However, they can also be done here within the meta tags themselves. And the meta is just name robots, And then content is the values of that robot. So noindex, nofollow tells the, robots, Google, to, hey, don't Search this site. Do not catalog the contents of this site and do not suggest it. So meta name robots content, Noindex.

Nofollow is not something you will want to do on your website unless, of course, it's like a development environment, a staging environment, Something that you do not want to show up in Google search results because I can tell you firsthand, there's been a number of times where, clients We'll say, hey. We did we hired off this this work to this firm. It's not being, it's not showing up in Google at all.

You see, and you find that little bug there or something. Somebody did that in development so that people can't find the site in development and then didn't take it off before going to production.

So if you are making yourself one of those checklists for this type of thing, make sure that this is on your checklist, that you have your robots Set up a, set up correctly.

I I also just learned a a new one, which is meta name equals rating, content equals adult. So I didn't realize this, but if your website contains adult content, you can put that in there, and that will, ensure that it is filtered out from Search results. Probably regular search results and images and things like that. So there's that as well if you're working on adult websites.

There is Google site verification.

So if you are using any of Google's tools, like Google Webmaster Tools is is one that will give you stats and, tell you when there's potential issues with your mobile website or or whatever.

You often need to prove that you own a website before Google will give you that information.

And this is actually Not just something Google does. A lot of websites will do this. They say, okay.

Prove that you own this domain name. And there's always a couple different ways that you can prove it. Sometimes you upload a file.

But one popular way is you just set a meta tag into the header of your thing. And then when Google crawls it, they'll say, okay.

We told you to put that there, and we see that you put it there. So that leads us to believe that you do own this website. Yeah. And those can sometimes be a giant PIA too. Have you ever tried working with Apple's verification? No. For, for what? For the,

pay touch Apple Pay? What that's? Yeah. You have to generate, like, a certificate, and then you have to do some stuff in Xcode. It is, let me tell you, just endlessly off. It stinks.

It's no good, especially compared to to Google's version of the same thing.

Just trying to get it to connect there.

There's also these open graph and social network tags. You might have heard the term open graph before. An open graph Is the these are type of meta tags that allow social media sites to understand a little bit more about your site.

And I've always been kind of fascinated with these tags. They do feel like a ton of clutter to me. I don't know how it feels like to US, but It it often seems like the majority of my index HTML file is these stupid open tags or Yeah. Whatever just because they take up so much space. There's so many of them. It. So these are the types of things that if you ever posted into Discord, Slack, or Twitter, or whatever, Facebook, and it has that nice little box With a preview of whatever it's talking about rather than just some sort of a generic image for the site. That's where the open graph images come into play here.

These are so that social media and third party sites really understand what the content is on the site that you're sharing.

And that way, you can make things look really super nice. Yeah. You have the full control over how these things show up. And also, it's worth knowing that if you ever You ever share a URL and you see the wrong data there? Facebook, Twitter, I believe a couple other probably Pinterest uses them as well. They provide these tools where you can scrub their cache of it because, it's funny. Sometimes you see a link being shared, and you can tell that it's like to do fill in title for this website.

And then the thing goes live. And And on Twitter, it's like that. You could very quickly get rid of those and scrub them out, which is is really good. You know what? I've also had a lot of trouble with them in,

CSR based environments where the client side rendering because these types of tags, even with React Helmet, the the the site's not gonna get Rendered when you're pasting a link into, like, Twitter, so to say. So if you're using React Helmet and wanting to use these, The open graph tags, these things often need to come directly from the server response for the site. Yeah. I it. I would go as far to say, I think they always need to be server rendered. Yeah. I I do wanna say that because I I'm not confident

about that statement. There's always these random blog posts That say, like, oh, yeah. Google searches JavaScript client side rendered, but, like Yeah. No. I don't believe it.

You have to have these server rendered because what happens is that Facebook, Twitter, or whatever, they just scrape the HTML of your website and parse out all these meta tags as as data.

It it's kinda nice. If you go to any of my websites, I still have the Twitter meta tags, which are unnecessary now because Twitter has moved From using their own meta tags over to OpenGraph, which is it's nice to have a some some bit of a standard for that type of thing. And then any other website that Whether it's Notion or Slack or whatever,

they all can use the same OpenGraph meta tags. Yeah. And so that that often so the way these tags work, I don't know if it's been mentioned. It's a meta property, and then inside of the property, it's typically OG a colon and then whatever it is, o g colon image, those types of deals. So if you ever see in your meta tags, o g colon anything, that it that is o g equals open graph, not original hamster.

Other random ones I found when searching is, meta name equals generator, that will tell you which CMS has rendered out. So often CMS WordPress did this for a long time. I don't believe they do it anymore.

A security hole. Yeah. It was a bit of a vector because you're basically saying I'm running an insecure version of WordPress. Yeah. Yeah.

But it's kinda I wonder if my is this Gatsby do it? Please try w p hyphen admin on this and try some generic passwords. I'm just looking at, my meta tags on my own website, and I have this x u a compatible I equals edge, which I said is dead.

I'm Pretty sure that I didn't put that in there. Maybe Gatsby did. Maybe I'm wrong about that being dead. Maybe it's still worth throwing in there just in case

Somebody is putting it on there. Meta tags can often feel like a, do I need this or not? Is this doing anything or not? Am I Yeah. Just talking to myself in a giant, you know, giant void.

Gatsby has a a meta tag of generator, and that's Kinda nice because if you wanna know if a website has been generated with whatever framework or CMS, you can see that, it's it's thrown in there. In my case, mine says Gatsby 3.5.1.

And the reason that why that's not a potential Vector for security or like a security issue is that if you if you say WordPress is the creator of this thing, There are WordPress specific vulnerabilities where you'd go to either attempt to get access to the database or get access to the admin accounts or whatever.

Where with Gatsby, it's a static site. So just by saying, hey. This is static HTML. That doesn't that doesn't make your site any more hackable because there's no server component there at all. It's It's just saying, hey. This is some client HTML that was created by Gatsby or React or whatever.

Just to make that clear. On on the flip side of it as well is that Taking this tag off of your WordPress site is not gonna make your website secure. No. No.

It's people are still Trying it.

I'm gonna see look for no. WordPress no longer puts the generator tag in there. I remember at a certain time, people were hiding it as, like, a a way to fix their security holes. And it's like, no. That's that's not gonna help you. The these bots are Gonna try anyway. The fix to that is actually,

staying up the day. Yeah. Actually, having to sync your WordPress.

Yeah. You know, it's funny. We, we often would would go through great lengths to to hide our page. But I bet if you look at your Google Analytics or anybody looks at Your Google Analytics, there will be a somewhat amount of traffic to a wp hyphen admin or attempted traffic to that URL route because, man, people who are trying to compromise things just or bots, I should say, just look for that page. They'll just hit those to see open open WP admin pages.

There's also meta HTTP equiv, and if you're what this does is it sets The HTTP header of the content type. So usually, what happens is if you're sending JSON or a text file or XML or or an image down the line.

You usually set those headers as part of your server response. But there's also the ability To explicitly set the content type with a meta tag, I don't know when that would be all that helpful because Wouldn't it always be HTML? I guess the example that I'm looking at here is the you can set the care set car set In there as well, there is you can do content security policy there, which I think we should have somebody on it for a show about that. I think that'd be kinda Interesting. I have some friends that work at Stripe that that do that type of stuff.

Yeah. That those are the people you wanna talk to. People talk working with payment. Yeah.

Meta HTTP quip refresh and you can that will explicitly tell the browser to refresh itself after how many seconds. Mhmm. That's interesting. I guess that's kind of a neat way to do it without JavaScript.

You could just refresh the page every single however long. Or you could just insert that tag into the page it. With JavaScript. Oh, that's a big brain.

It when you are done. Interesting. That's big brain. I found this page on Apple's a Safari HTML reference that says there are specific meta tags for Apple.

Apple mobile web app capable equals yes.

Oh.

And that will allow the web application to run-in full screen.

Otherwise, you have the regular tabs and and whatnot.

Apple mobile web app status bar style. So This one, is when you are in full screen as to what color that thing will be.

Format detection, you can turn off. So this is a a really handy one is, actually, I don't even know if Apple does this anymore. Remember what, phone numbers would be automatically highlighted on Ios? I don't know if you remember the if or if you had an iPhone when it did that. I probably didn't. Yeah. They used to be, It would detect phone numbers in websites, and you'd be able to tap them and and send a a call them immediately.

I believe Apple stopped And now you have to use the anchor tag with a t e l colon in front of it. Mhmm. But it looks like there is a meta tag for turning that off.

For whatever reason, if if your website has, like, tracking numbers that look like phone numbers and they're incorrectly you know, sometimes you text somebody a number And it thinks it's like a tracking number for FedEx or or a phone number or something like that.

You can explicitly turn that off.

And then Apple has some docs on the viewport, which is I don't think I maybe that started with Apple, but that's that's a standard now, I would think.

Yep. Yep. Yep. So I think that's the meta tags. Surprisingly interesting world of meta tags. There's you can do all kinds Stuff with it. Make sure those are server rendered. Make sure you check them out on your your website because it helps with SEO, also helps with, robots crawling your page, displaying previews, things like that, as well as the actually user experience when somebody is specifically on a mobile device.

Sick.

Well, that is it, and we will catch you on Wednesday where we have a really interesting show for you where we have a guest on.

And I guess that's all I'm gonna tease there. It's gonna be It's gonna be a good one. It's gonna be a good one, so check-in on Wednesday. We'll see you there. A Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.