Meta tags are a part of your website’s HTML code. They help search engines understand information about your website. And that influences how your website appears in search results.
Meta tags also tell browsers how to show your website on your device. In other words, they can make sure your website displays correctly for both desktop and mobile users.
And that tells Google your site is mobile-friendly. Which can help your site rank higher in Google’s search results.
So meta tags are an important part of SEO.
In this guide, we’ll walk you through the SEO basics and best practices of using meta tags to optimize your web pages. You’ll also learn to help search engines recognize your web pages and increase their ranking.
What Are Meta Tags?
Meta tags provide information about a webpage and directly influence how search engines view and display website.
They're added to the HTML code in the header of the document. Here’s one example:
<meta name="description" content="Save time & budget. Stay creative with your content while Semrush takes care of the data.">
Meta tag elements can be for the benefit of search engines, like Google. The example above is setting a meta description that tells Google about the page. And Google and other search engines often display the meta description in search results.
Meta tags can also benefit your customers by helping improve user experience. For example, the viewport meta tag tells the browser to render a webpage according to screen size.
There are several types of meta tags. We'll provide an overview of some of the most commonly used ones:
- Meta descriptions
- Robot meta tags
- Viewport meta tags
In addition, we'll go over title tags. Title tags work like meta tags because they also help Google understand what your page is about. And like the meta description, Google uses your title tag when displaying your page in search results. However, title tags are technically not meta tags.
What Is a Meta Description?
A meta description summarizes the content of the webpage for search engine crawlers and internet users. It usually appears below the title on the search engine results page.
The code for a meta description tag looks like this:
<meta name="description" content="We compiled our list of the best running shoes for 2020 and organized it by brand, category, and fit, so you can find the right shoes for your training. See which shoes made the list"/>
Optimizing Your Meta Description for SEO
Although meta descriptions are not part of Google’s rankings algorithm, they’re still included as snippets in Google search results to enhance the accessibility of the search results for a searcher.
So, think of meta descriptions not as a ranking factor but as a way to increase your click-through rates (CTRs). Make sure you’re adding creative descriptions with target keywords for your homepage, internal pages, and blog posts.
Put these best practices to work for click-worthy, effective meta descriptions:
- Keep it under 160 characters
- Create distinct summaries for each page
- Avoid duplicate meta descriptions on your website
- Use sentence case
- Be accurate, descriptive, and concise
- Match search intent
- Only include your target keyword where it makes sense
Our On Page SEO Checker can also help optimize your meta tags. Add your URL to discover whether your meta tags are optimized for SEO and if your title matches what’s displayed in search results.
What Is a Robots Meta Tag?
Robots meta tags provide search engine instructions on whether you’d like them to crawl or index parts of your website. All the pages and links you create on your web pages are indexed by search bots and web crawlers by default, so you can use the robots meta tag to control how Googlebot handles that indexing.
The robots meta tag looks like this. It's in the header section of your webpage:
<meta name="robots" content="noindex">
You'll add your instructions for the search engine inside the content attribute.
Some common parameters include:
- Index: This tells web crawlers to index the page. If a page is indexed, it can be seen by people using search engines. If you don’t add anything to the code, this is the default.
- Noindex: This instructs search engines not to add the webpage to their index, which means the page won’t show on the search results page.
- Follow: This allows search engines to follow links you’ve placed within your webpages and leads the reader to other pages. This is also the default if you don’t add any parameters to the source code.
- Nofollow: This instructs the search engine bots not to crawl links on the page and that you don’t endorse the links. Some sites use it as a safety net to notify search engines that they’re not practicing spammy link techniques.
- Noarchive: This informs search engines not to cache or show the page.
If you are using WordPress, there are many plug-ins available that can help. For example, Yoast’s advanced setting can be modified to set robots meta tags. Other content management systems (CMSs), such as Squarespace and Wix, also have the same options.
Optimizing Your Robots Meta Tag for SEO
Robots meta tags restrict how Google crawls a page on your website.
For example, you might use the noindex parameter if you don’t want Google to index duplicate content, which isn’t great for SEO.
And you may want to use the nofollow meta robots tag if you don’t want Google to crawl links on that page.
For example, if the page is a comments section and you don’t want people to spam it with links to their own site to gain backlinks for themselves.
If you need additional support and information on technical SEO, such as crawlability or HTTPS security protocols, use our SEO Toolkit. It audits your website with 60+ on-page and technical SEO checks. It’ll also point out the top issues that need fixing so that you can work on your money-making pages first.
What Is a Viewport Meta Tag?
To understand this section, we need to define a viewport first. In its simplest form, the viewport is the user’s visible area of the webpage.
So if someone is viewing your website on a mobile device, they’ll be looking at it through a much smaller viewport than someone who sees your site on a desktop computer.
Add the code below to the <head> section of your HTML to set the page to be mobile-friendly:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport meta tag instructs the browser, such as Chrome or Firefox, to display a webpage on different screen sizes, such as desktop, tablet, or mobile.
And it’s a key component of responsive design, which is a way of encoding HTML elements to automatically change their shape and size to adapt to the user’s device and browser.
Responsive design makes displaying the right page instantaneous. That provides the best user experience, so responsive design is Google’s preferred method for displaying content to mobile users.
Because more than 50% of internet searches are made on mobile devices, the viewport meta tag has become one of the best SEO practices.
Optimizing Your Viewport Meta Tags for SEO
Your website visitors may likely leave your site if they’re trying to access it on a mobile phone and you only have the desktop version.
You can’t blame them, as it can be difficult to navigate and read. However, this will increase your site’s bounce rate and be a negative sign to Google that can hinder your search rankings.
Google also says it can understand pages with responsive design better than pages that don’t use it. So it may rank those pages higher than pages that don’t use the viewport meta tag and responsive design.
What Is a Title Tag?
The title tag tells search engines which title you want to be displayed on SERPs. It can be a simplified version of the headline that appears on the webpage.
The title tag also sets the page title for display in browser tabs and when the page is shared on social media.
Including a title tag for your web pages makes it easier for search engine crawlers to read, classify, and rank your content.
Below is what the title looks like on Google search results and in a browser tab:
The code for a title tag looks like this:
<title>Best Running Shoes | Running Shoe Reviews 2020</title>
Optimizing Your Title Tags for SEO
The title tag is one of the most important meta tags because it’s visible to search engines and people who use the internet.
It’s your first opportunity to capture a searcher’s attention. It may be the piece of information that convinces a person to click on your webpage.
Follow these recommendations to help you come up with creative and descriptive page titles:
- Add a title tag for each webpage
- Avoid long headlines — under 60 characters is best
- Avoid generic and vague titles, e.g., “Home” for the homepage
- Use title case or sentence case
- Match search intent
- Avoid clickbait titles
- Include a target keyword when appropriate
- Create a distinctive title tag for each page on your site
Improve Your Meta Tags Today
There are many elements to SEO, but you don’t have to be an expert before you can understand and improve the meta tags on your website. Marketers such as yourself can use tools like our SEO checker to audit your pages for SEO status and gather information about your competitors. It’ll also make some recommendations that you can implement straight away.