The Meta Tag

#Basic Html (1).png

If anyone ever tells you that you add too many hashtags to your photos on Instagram or Facebook, you should tell them to kindly fuck off that you’re practicing your Meta-Data skills.


That’s right, Meta Data.

Read: Meta Data = Data about Data, but more importantly, data about your perfectly lit picture of avocado toast. This Instagram metadata sums up what your picture is about, and is represented by none other than your #avocado #basic #brunch tags.

Take that, people who say you spend too much time on your phone!

The Meta Tag:

If you’re new to building websites or haven’t had much experience working with them, the Meta Tag may look odd and a little extra – and it kinda is. But a little extra never hurt anyone, right?!4636679461_81dbbb37ea_b.jpg

The Meta Tag resides within the Head Element and explains to search engines (i.e. Google) what your webpage is about!

What types of Meta Tags are there, you ask!?

Well, the first two we’ll look at are: Description and Keyword.

The Description Meta Tag is a space for you to write the short description you want users to see when they search up your webpage on Google. It is also space for you to help search engines show your webpage as a suggestion when people search for content that matches your webpage description!

Screen Shot 2018-09-23 at 8.33.20 PM.png

The description of my webpage is “Basic HTML”.

The Keyword Meta Tag is similar to the Description Meta Tag, except instead of using phrases, you include single keywords(!) that allow search engines to find your page.

Screen Shot 2018-09-23 at 8.33.56 PM.png

The keywords I use to describe my page are “HTML, CSS, popculture and tutorials”. Don’t judge me.

Let’s look at how to use them!

Put Your Instagram Tagging Skills to use: 

In order to incorporate the Meta Tag into your webpage, you’ll need some code:

Le Example:

Screen Shot 2018-09-20 at 12.45.34 PM.png

You’ll see the Description and Keywords Meta Tags!

Your Description should be fairly easy to come up with because it is exactly what your page will be about! Try to make it less than 160 characters (RIP old Twitter). Or if you’re like me, make it less than 20 (jk plz don’t do that).

Now, let’s put your Instagram hashtagging skills to use!

As most of you know except for you Instagram ‘models’, less is more when it comes to hashtags because the more curated they are, the better! Same goes with your webpage keywords! Try to use less than 8 keywords in your Keywords Meta Tag.


And viola! Now your webpage is more search engine friendly – which means more people are likely to visit it!

Make your webpage look amazing on any device:

The next Meta Tag to look at is the Viewport Meta Tag.

While it may seem less glamorous than the Description and Keyword Meta Tags, this tag is actually as important as your makeup primer. It makes your webpage look amazing – anytime, anywhere.

Le Example:

Screen Shot 2018-09-20 at 12.48.54 PM.png

The Viewport Meta Tag allows your webpage to look proportional and legit on whichever sized device used to access it (Read: tablet, phone, computer).

Aaaaand that’s pretty much it for that one, but like I said, it’ll make your webpage look amazing any time and any place!

Let your browser know you’re using the most current HTML(5):

The last Meta Tag that we’ll look at is Charset, or more simply, which types of characters you’ll be using in your code and on your webpage.

Le Example:

Screen Shot 2018-09-20 at 12.51.02 PM.png

You’ll see that the value for Charset is UTF-8 and I still don’t fully understand what it means but I’m pretty sure it’s just the one that means you’re using normal words and characters.

And everyone is using it.

So obviously I will too.

Up Next: Stuff you’ll actually see on your webpage!


Leave a Comment!