To develop an effective search engine optimization strategy, you need to understand the two basic pillars of SEO: off-page SEO and on-page SEO/technical SEO.
While off-page SEO focuses on building your website’s credibility and relationship with other sites through high-quality backlinks, on-page SEO or technical SEO refers to the practice of optimizing your page’s content to rank on search engine results pages (SERPs). Some of the more technical on-page items that fall within this category include keywords, canonical tags, and meta tags.
If you’re new to SEO and learning how to add it to your digital marketing strategy, a great place to start is learning more about meta tags. In this guide, we’ll walk you through the basics and best practices of using meta tags to optimize your webpages. You’ll also learn how simple techniques can help search engines recognize your webpages and increase their ranking. Here's what we're going to cover:
What Are Meta Tags?
The term “meta” stands for “metadata,” which means data about data. Meta tags provide information about a webpage and directly influence how search engines view a website. Most meta tag elements are for the benefit of search engines, like Googlebot and other web crawlers.
Meta tags are added to the HTML code of a document to help search engines understand additional information about a page. They’re also used to rank content or pages. Title tags and meta descriptions are displayed in the search results.
In this guide, we’ll provide an overview of the following meta tags:
Robot meta tags
Viewport meta tags
What Is a Title Tag?
The title tag informs search engines, such as Google or Bing, of the title you want to be displayed on the search pages. It can be a simplified phrase of the headline that appears on the webpage. Including a title tag for your webpages makes it easier for search engine crawlers to read, classify, and rank your content.
You’ve likely seen a title tag before. Below is what the title tag looks like on Google search results and where you can find it on a webpage:
The code for a title tag will look like this:
<title>Best Running Shoes | Running Shoe Reviews 2020</title>
Title Tag Tips and Tricks
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
Our On Page SEO Checker is also a great tool to help optimize your title tag. Add your URL and learn whether your target keyword is in the title tag and if your title matches what’s displayed in search results.
What Is a Meta Description?
A meta description summarizes the content of the webpage for search engine crawlers and internet users. It appears below the title tag 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"/>
Meta Description Tips and Tricks
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
What Is a Robots Meta Tag?
Robots meta tags are additional values or parameters placed within an HTML tag. Robots meta tags provide search engine instructions on whether you’d like them to crawl or index parts of your website. They can be placed on their own or together (separated by a comma) in the content attribute.
All the pages and links you create on your webpages are indexed by search bots and web crawlers by default. 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.
A robots meta tag instructing the web crawlers not to index a page would look like this:
<meta name="robots" content="noindex"/>
Add the code to the header section of your webpage. 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.
Robots Meta Tags Tips and Tricks
Robots meta tags restrict how Google crawls a page on your website. You’d want to do that to prevent duplicate content penalties. Here are other instances you may use the nofollow tags:
If your website comments section is not moderated, you can add nofollow tags on the pages to prevent commenters from getting a backlink from your site.
You can add nofollow tags to widgets and infographics from other sites that you don’t fully endorse.
You can add a nofollow tag to any link in your webpages that you don’t want Google to think you’re endorsing.
If you need additional support and information on technical SEO, such as crawlability, meta tags, and 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. This can change depending on where someone views your content, with two common options being a laptop or mobile device.
With 48.6% of internet searches made on mobile devices, the viewport meta tag has become one of the best SEO practices. Web developers use it to address a content’s size and scale, which allows for mobile-friendly websites. The viewport meta tag is then used to instruct the browser, such as Chrome or Firefox, to display a webpage on different screen sizes, such as desktop, tablet, or mobile.
Add the code below to the <head> section of your webpage to set it to mobile-friendly:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport Meta Tag Tips and Tricks
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.
The best advice when it comes to this specific meta tag? Make sure it’s there and enhances user experience by making your site mobile-friendly.