SEO is very important for the Inbound marketing efforts of your online business.
In this guide we will look into what are meta tags. How to use them and what are the main ones you should not ignore.
What are Meta Tags?
In your website's HTML code - Meta tags are used to give information about the webpage. This information is known as "metata" of that page. This data is not for your visitors or readers. But rather for the search engines and other crawling bots.
Google uses this metadata to understand better about your webpage and the type of content that exists on that page. This information can be used in many ways. Whether it is for better search suggestions or showing different elements in the results like rich links etc.
Must use meta tags
There are a few meta tags that you shouldn't ignore. As these can provide very much valuable insights to the search engines. Which will lead to better search rankings.
1. Title
The <title> tag is used to give the title of the webpage. This is the first thing that the search engine will see when it crawls your webpage.
This is also the first thing that the user will see when they visit your webpage. As it shows up in the browser tab.
Usage:
<head>
...
<title>My Title</title>
</head>
...
Ideally you should keep your title to be less than 60 characters.
And make sure that the title of each page is unique.
2. Description
The <meta name="description" content="This page will teach you how to SEO" /> tag is used to give a description of the webpage.
Since this will show up in the search results, it is important to make sure that you nail this to make sure people find it relevant to click on your link.
Ideally you should keep your description to be less than 160 characters.
The description meta tag doesn't necessarily affect your google ranking but it will help you improve the click through rates.
Make sure that every page which has different content has a unique description meta tag.
Remember to keep the meta tags same as your page's content. Otherwise you're inviting bounce rates. There's this beautiful article on how to reduce bounce rates you might want to check out.
3. Viewport
This is used to tell the browser how it should control the responsiveness of the webpage. It is a must if you want to have your website mobile-friendly.
We recommend using the following viewport tag:
<meta name=viewport content="width=device-width, initial-scale=1">
4. Alt attributes
That's right. Image's alt attribute is also a form of metadata that your website should share with the search engines & browsers.
Usage:
<img src='/puppies.jpg' alt='cute puppies cuddling in grass' />
The alt tag is used to give a description of the image. This is used to make sure that the image is accessible to people who are visually impaired.
Not only it makes your website more accessible. It also helps search engines like Google decide whether your page contains content that could be relevant to some search queries.
5. Canonical
The <link rel="canonical" href="https://www.example.com/page-to-canonicalize" /> tag is used to tell the search engine that the page is the canonical version of the page.
This is used to make sure that the search engine knows which version of the page to crawl. This is important because if you have multiple versions of the same page, the search engine will crawl the most recent version.
The most common usage for this meta tag is when you have the same content under multiple different pages or links - covering the same subject.
Word of caution:
The canonical tag should be used only when you have multiple versions of the same page.
If the two pages connected by a canonical tag differ too much in content... The search engine will simply disregard the tag.
6. Social Meta Tags
Open Graph (OG) meta tags are used to tell the crawlers of Facebook, Twitter, etc... about the content of the webpage.
Twitter also uses their own implementation called Twitter Cards
You can learn more about it here... How it works and how to properly use Social Media Meta Tags.
But the main ones are:
- og:title
- og:description
- og:image
- og:url
- og:type
- og:site_name
- og:locale
Pro tip:
You should use absolute URLs for the image. Here's why relative URLs are not a good Idea for your og image meta tag.
Conclusion
You want to make sure you are not leaving any stones unturned when it comes to setting up the perfect meta tags for your website.
These can be a huge game changer for your website. Not only they can help you improve the search rankings of your website but they can also help you improve the click through rates.
Very small changes but huge impact on Accessibility, SEO, and user experience.
Nail the content of these tags. We will help you get better with these in future guides. Make sure to subscribe to our newsletter.