Meta Tags

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 whereas the meta tag is just more information about the page. And and, yeah, that first one, charset, Where if you did not set this, No. For, for what? For the, and you wanted to still have a desktop experience

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

that those do not,

play into any search real websites.

Frustratingly enough, that's still part of the default Emmet 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 which is really funny. You can So use this meta name viewport to disable zooming, 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 It would detect phone numbers in websites, and you'd be able to tap them and and send a a call them immediately.

nice touch. That's a nice touch.

You were using the latest version of IE or you could specifically set a renderer engine coffee in a, Characters that had accents on them.

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.

some interesting

Exclamation mark tab to give you a base HTML layout.

engines That'd be great.

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,

like apps, because it just felt a little bit more integrated into the system.

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

that's not necessary anymore. Also, I think that also on older versions of IE, Sponsors today. We've got 2, Sanity and when you put this meta tag in there.

automatically deploy, Search this site. Do not catalog the contents of this site and do not suggest it. So meta name robots

This was back in the day where we had this thing called Chrome Frame. And what Chrome Frame was,

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

You were able 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.

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

to emulate IE 9, 10, and 11.

stainless steel cup. Now that's a nice touch. It just goes around his life it. Nice touches.

Today in terms of meta tags, I just remember that being such a simple way to do SEO.

Chrome started changing their theme color based on the we often

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

And what that would do is it would ensure that You can explicitly turn that off.

robots and other things

I remember a bug that would pop up 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.

about your application. Just some information about the application that it's visiting.

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

Okay. So meta tags, meta meta meta tags. Meta tags

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

That's

it is a Pokemon. Yeah.

syntax, double the free usage tier. Thank you, Sanity, for sponsoring. I think, just about every, like,

Yeah. And it definitely says that, Hopefully, you're doing that on purpose, but because that's not something that really,

cropping your images, for relating your data, for doing there's that as well if you're working on adult websites.

the browser

meta tag, 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.

doc or technical explanation Rendered when you're pasting a link into, like, Twitter, so to say. So if you're using React Helmet and wanting to use You should probably be giving your users that capability. I know I know sometimes Yeah. You know, it's funny. We, Vector for

which is charset. That's a Pokemon, and, ensure that it is filtered out from Search results. Probably 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.

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.

It. No. The

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.

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

it? Yeah.

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.

Are the things that kind of tell

UTF 8 covers

whatever it is that you want. You pull that into your website.

And these can be anything from OG a colon and then whatever it is, o g colon image, staying up the day. Yeah. Actually, having to sync your WordPress.

really you encounter very often because

Either can be REST, can be Grok, can be GraphQL,

that was really nice because you said some some tech stuff. What does that mean? What will it explain social media sites to understand a little bit more about your site.

should be followed with a large heading that says, What does that mean?

maybe not even a bug, but maybe Something that just wasn't Robot tags. You

or a The podcast is built by, like, a a Markov generator or a Markov chain.

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.

How often people were doing things like

and now there are all sorts of different things. So let's get into the very 1st captured the way it needed to be and therefore is being surfaced as a bug.

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 the, theme color and the, meta tag? That's a nice touch. That's a nice touch.

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,

Pixels when the iPhone first came out because that was the only mobile browser out there, is when you are in full screen as to what color that thing will be.

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,

meta tag. So it's meta name viewport,

Next one is going to be a tag I feel like it's often forgotten

mostly for,

Again, more information there is, Sentry.

what shows up is,

if I Google,

as the viewport defines its size. Right? dot txt file.

I remember people explicitly set it to 320 They have all kinds of tools for Collaborating on your data, for uploading your images, for,

people really

each of your search results will show up in that specific piece, and that's really,

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, clients Is the these are type of meta tags that allow

robots that scrape your 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, 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 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,

Don't try to display this website as anything other than WP admin pages.

it. On a mobile phone, you can pan around. You could set that to be something else or, which is extremely frustrating when a website has that.

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, I don't know when that would be all that helpful because and he just, like, goes to restaurants and

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

meta description is when you Google something like If I Google Les Boss, it specifies the encoding of the HTML document. So that is almost always going to be u t f 8.

Initial hyphen scale 1.0,

out of HTML CSS

and this is for providing more information about the page, most likely to

which really what this tag and what those characters are doing is saying, 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 Metaverse or whatever logo or brand they wanna steal from. Yeah. We're we're talking about What what the encoding of the characters is, or even at some point it was used heavily for SEO,

If you are building the only really use case for that is if you are building, like, an app at this restaurant, and they put their, 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,

hey.

And then there's some other properties like content with equals device hyphen with comma initial scale The theme color of the site, and it made the the the phone applications. It made the browser based applications on Android really look 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.

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,

put art in front of Art or commerce in front of accessibility and general usability, and just a caution against that.

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

arrow function,

We'll say, hey. We did we hired off this this work to this firm. It's not being, 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.

a staging environment,

robots, Google, to, hey, don't

I I also just learned a a new one, which is meta name equals rating,

regular search results and images and things like that. So

Google search crawler. Those types of things looking. Now typically these are just done through a robot,

unless, of course, it's like a development environment, 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, meta tags. And, you know, we

Noindex.

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,

it's not showing up in Google at all.

None of these backlinks.

know, robot tags are for crawlers.

tells the, 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.

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

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.

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,

The open graph tags,

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 And I should probably be setting those. There's also author and copyright you can put in there.

You usually set those headers as part of your server response. But there's also the ability if you had some weird app that only worked in IE 10. But, again,

which I said is dead.

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.

It it's kinda nice. If you go to any of my websites, I still have the Twitter meta tags, which are unnecessary say what it's there, you need a meta description. I was trying to give an example of one of my websites, But

To explicitly Conditional fields, you name it. Sanity has got it. Check it out for your next website, sanity.i0forward/

where the client side rendering because these types of tags, even with React Helmet, the the the site's not gonna get

There's also meta HTTP

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 Hey, SEO. Make sure you have, You know, your h one tags or whatever, content, 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.

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

set 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, Whether it's Notion that will tell 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

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

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.

WordPress did this for a long time. I don't believe they do it anymore.

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.

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,

that says there are specific meta tags for Apple.

Somebody is putting it on there. Meta tags can often feel like a,

you which

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.

if you if you say WordPress is the creator of this thing,

now because Twitter has moved but it's not as good as actually searching

It when you are done. Interesting. That's big brain. I found this page on Apple's

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

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, From I think he's from New York, And this is actually I need to display most likely your Google search results. So,

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,

the content type with a meta tag,

There are WordPress specific vulnerabilities and make sure you have your meta keywords. Wow. That was nice and easy.

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

or Slack or whatever,

Wouldn't it always be HTML? Otherwise, you have the regular tabs and and whatnot.

whatever 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, 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, And that will allow the web application to run-in full screen.

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.

and if you're

Apple mobile web app capable equals yes.

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 Don't do that. Next one we have here is SEO and page data. This is probably the one you know meta tags

Meta HTTP quip my meta tags on my own website, and I have this x u a compatible I equals edge, It's people are still West Boss Gatsby. So I was just saying, if you want to specifically

it's it's thrown in there. In my case, mine says Gatsby 3.5.1.

framework or CMS, you can see that, as as data.

what this does is it sets The HTTP header of the content type. So usually, what happens is if you're sending

CMS has rendered out. So often CMS 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, 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

or or an image down the line.

where you'd go to either attempt to get access to the database or get access to the admin accounts or whatever.

JSON or a text file or XML

these, 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,

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,

I'm Pretty sure that when people are using IE 6, It would replace the rendering engine of IE 6 with Google Chrome, and that's what's gonna show up when somebody views. Those couple sentences underneath each of your, I'm gonna

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.

which is is really good. You know what? I've also had a lot of trouble with them in, 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

security or like a security issue is that Nofollow is not something you will want to do on your website Well, this episode is also sponsored by Century, which is the perfect place to track your errors and exceptions.

Other random ones I found when searching is, meta name equals generator,

Trying it.

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, 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,

And don't forget to subscribe in your podcast player Just some meta information

This one,

Well, that is it, and we will catch you on Wednesday 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

Sick.

robots crawling your page, displaying previews, things like that, as well as the actually user experience when somebody is specifically on a mobile device.

Oh.

And I guess that's all I'm gonna 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.

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,

for a full archive of all of our shows, And the reason that why that's not a potential These are so that social media and third party sites really understand what the content is on the site that you're sharing.

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.

which is 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,

Head on over to syntax.fm

phone numbers would be automatically highlighted on Ios? a Safari HTML reference 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?

where we have a really interesting show for you where we have a guest on.

Apple mobile web app status bar style. So

or drop a review if you like this show.

In this Monday, hasty treat, we're gonna be talking about

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,

it's the unified 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.

we just have So literal robots as in your That's hilarious. That's yeah. That's a nice touch. Hey. That's a nice touch. Using

meta tags. And I'm not talking about

the structured content CMS, And you need to stop people from accidentally zooming in or or things like that.

I'll talk to you about Sanity. I'll let Scott talk to you about Sentry. Sanity is,

Meta tags here. So what is a meta tag? Why might you use them? And

content platform that powers better Better digital experiences. What does that mean? API.

Facebook things or whatever. Metaverse.

Scott. Hey, Wes. How's it going? I was listening to, CSR based environments

tell you when there's Yep. Yep. Yep. So I think that's the meta tags. Surprisingly 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, And then Apple has some docs on the viewport, there would be, like, a weird encoding on I believe it was on There is Google site verification.

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.

Just trying to get it to connect there.

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, 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

So if you are using any of Google's tools, like Google Webmaster Tools is is one that will give you stats and, I don't think I maybe that started with Apple, but that's that's a standard now, I would think.

There's also these open graph and social network tags. You might have heard the term open graph before. An open graph

It's no good,

into the header of your thing. And then when Google crawls it, they'll say, okay.

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

But one popular way is you just set a meta tag 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,

especially compared to to Google's version of the same thing.

let me tell you, just endlessly off. It stinks.

potential issues with your mobile website or or whatever.

Boss and Scott

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,

Monday. Monday. Monday.

the tastiest web development treats coming again hot. Here is Wes Barracuda

CSD. Welcome to Syntax.

the craziest,