Wrap Your Head Around: Meta Tags.

What is a Meta Tag?

Meta tags are HTML tags that we use to provide information about a website and it’s content. They are put in head head of a document, to be used by search engines and browsers to make sense of the content within our page and understand what a website is about.

If you “View Source” or “Inspect” almost any web page, you’ll see meta tags within the head of the document providing all sorts of useful information about it, such as a document’s character set, description, keywords, author, and viewport settings. Search engines use this information to help index a page and get a better understanding of it.

Why Use Them?

When it comes to SEO, (Search Engine Optimization) Meta tags play an important role. Particularly the title tag and the meta description. This is because these tags are what you will see on a search engines results page (SERP) when you search for your site. It’s important to have unique meta tags for every page, with a relevant title and description.

It almost goes without saying that users will not click on your site, if it isn’t related to exactly what they’re searching for.

How To Use Meta Tags.

Meta tags are self closing. Which means rather than having content between an opening and closing tag, all of the data for our meta tags gets defined as attributes in key/value pairs.

<meta name="example" content="this is an example of a meta tag" />

Many of the most popular meta tags are just a simple combination of a name and content attribute.

Essentially we’re saying “This is our data, and this is what it does”. The name attribute serves the purpose of being descriptive of the data itself. The content attribute’s value, is the actual data associated with the name.

Although the name attribute is most common, a meta data attribute can be any of the following:

• name: provides document level data that applies to the whole page. This attribute allows us to define the name of our metadata, and is paired with the content attribute. Essentially we are telling the browser what data we’re providing it.
• http-equiv: if this is used, the element can provide information similar to that found in an HTTP header.
• content: is the value associated with the name or the http-equiv attribute.

• charset: defines the character encoding, or character set we are using, to the browser. In most cases we use Unicode, which covers most symbols that exist in just about every language.

  It is also the only valid encoding for HTML5 documents.

    <meta charset="UTF-8" />
  

• itemprop: this is user defined meta data that cannot be represented by the standard types and attributes.

  *This attribute can not be used on an element that has any existing name, http-equiv, or charset attributes. in other words, it must be used by itself.

Popular Attributes and Values.

Now that we’re starting to wrap our heads around meta tags, lets take a look at some of the most commonly used meta elements and some of their attributes. There are a lot of different meta tags, some are important, others don’t work any more and are depreciated. I’m only going to go over the important ones here to keep it relatively simple. These are the ones that should be used on every page, either for the benefit of the user, or a search engine.

Title

I realize this doesn't start with “meta”, but each page should have a <title> tag. This serves as the name of our webpage for search engines and visitors, and is most prominently displayed in search results.

<title>Wrap Your Head Around: Meta Tags</title>

Description

A few short sentences of what content can be expected on your website. Usually displayed beneath the title in a search result.

<meta name="description" content="An informative article about HTML Meta Tags.">

Charset

To display a page properly, the browser needs to know what character set to use. Currently we use Unicode, or UTF-8 which covers almost all of the characters and symbols in the world! Additionally, the HTML5 spec says this is only valid charset, so we don’t have much of a choice, not that we’d need one.

<meta name="description" content="An informative article about HTML Meta Tags.">

Viewport - Setting it for Responsive Design.

Because this particular tag is so important to making our pages responsive, I thought it best to give it a space of its own.

We use the viewport meta tag to tell the browser what kind of device is being used. This makes web browsers aware of what device being used to view our page, and scales it appropriately. Lets break this down:

content="width=device-width tells the browser that our pages width should match the width of the current device.

initial-scale=1.0 scales the initial zoom level when the page is loaded by the browser.

So this tag basically says “match our pages with to the with to the device being used, and make it full sized (100%) ”. So whether we use a watch, phone, tablet or desktop, our content will be sized and scaled appropriately.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The End

<meta name=“conclusion” content=“End of Article” />

Thanks for reading my quick overview of meta tags. I covered the basics above, but there is always more to learn.

If you want a more technical explanation, I’d recommend checking out the MDN Docs.