DEV Community

Cover image for Exploring 5 meta tags to help beginners with SEO
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Exploring 5 meta tags to help beginners with SEO

In today's article, we will be learning about meta tags, what they are, why we need them, and how they work.

Meta tags are tiny snippets of code that have two main goals:

  1. Telling search engines on how to display your web page
  2. Tell the browser how to show it to visitors

Let's get right to it and check out these five important meta tags for SEO.

1. Meta title

This is the title as we show it to Google.

We can add a meta title with the following code.

<title>Top 10 Chrome extensions for developers πŸ‘€</title>
Enter fullscreen mode Exit fullscreen mode

Some tips for using titles:

  • Each page should have a unique title
  • Don't make titles too long (50-60 characters is optimal)
  • Don't overdo it with keywords
  • Write a descriptive title for your page

How a title looks in Google:

Title in Google

2. Meta description

After the title, the biggest win is the description. As the name suggests, it's a brief description of your web page.
They can be any length, but Google generally shows around 150-160 characters.
They should provide a good description where you tell the user what this page is about.

Here are some guidelines for meta descriptions:

  • Avoid duplicate meta descriptions on your website
  • Don't include double quotation marks, and Google will cut the text there
  • Write a relatable copy. The person must understand what he is going to read

This is how you can add a description tag in HTML.

<meta name="description" content="I write daily web development tips that help you become a more efficient software developer.">
Enter fullscreen mode Exit fullscreen mode

Meta description

Note: Search engines may decide to show other content on the page over the description

3. Meta charset

This tag MUST be on every page. Leaving this out can really impact your website not being indexed.

These are the two major ones:

  • UTF-8: Unicode character encoding
  • ISO-8859–1: Latin alphabet encoding

Find a full character setlist here

Why it's important:

  • It can show wrongly formatted characters in your code.
  • People might think your page is bogus and not valid
  • Search engines might not understand your content
  • Google states UTF-8 is the most adopted set

You can add a charset like this in HTML

<meta charset="utf-8">
Enter fullscreen mode Exit fullscreen mode

4. Meta viewport

A viewport tag is used to tell a browser what to do with several screen sizes.
By having this tag, we tell google we are mobile-friendly.
And we all know Google ranks mobile-friendly sites higher!

How to add a viewport in HTML?

<meta name="viewport" content="width=device-width,initial-scale=1">
Enter fullscreen mode Exit fullscreen mode

The content can be different, but this is a widely adopted default.

Read CSS Tricks full guide on the responsive meta tag.

5. Meta robots

A last one important, but not required for SEO, is a robots tag.
With a robots tag, we can give search engine bots what to do with this page.

It can have the following options:

  • index: Tell the bot to index this page
  • noindex: No, don't index this page
  • follow: Follow links on this page
  • nofollow: Don't follow any links on this page

Use these robot tags only on pages where you want to restrict a bot. (Like admin pages)

A robot tag will look like this:

<meta name="robots" content="index, follow">
Enter fullscreen mode Exit fullscreen mode

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (6)

Collapse
 
madza profile image
Madza • Edited

All of these are important for crawlers. These are also acknowledged among Lighthouse's best practices. πŸ˜‰ It's important to know that search engines ignore keywords tag during the process of indexing (I've seen some people still using it in modern sites) πŸ˜‰

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yes, keywords are totally useless these days!
As for description it's being faced out, my own blog hardly gets indexed on what I describe.
Google for instance just picks a line that suits.

Collapse
 
amt8u profile image
amt8u

Just out of curiosity. Do search engines completely ignore the page content? If I set all my meta tags correctly with empty page, crawlers will still index?

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yes they will, but it might affect your position.
They only way they'll ignore you is by using the robots to noindex, nofollow

Collapse
 
bedell23 profile image
bedell23

Great Article Chris!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you Bedell, glad you enjoyed it!