Use meta tags to optimize your site’s organic performance.
When planning a search engine optimization (SEO) strategy, keywords and content quality are probably the first things that come to mind. But hidden technical elements also affect your site’s visibility and reach.
Enter meta tags, which outline valuable information about an HTML document. They help search engines populate search engine results pages (SERPs) and browsers render pages responsively on different devices.
Let’s explore the most commonly used attributes and how to use meta tags for SEO.
Understanding meta tags: What are they?
Meta tags are self-closing HTML elements in a webpage’s <head> section that label specific characteristics, such as its title and description. Website visitors rarely see what you put in these tags, but search engines rely heavily on them. Their web crawlers use this metadata to index a page, and this indexing informs search results.
Meta tags consistently use the same element () with "name" and "content" attributes. What makes each meta tag unique is the specific values you assign to these attributes. For example, here’s the meta title tag and meta description tag for this page:
<meta name="title" content="How to write meta tags and why they matter for SEO">
<meta name="description" content="Learn how to use meta tags to improve your SEO strategy and increase click-through rates. Discover which tags search engines typically look for when indexing pages.">
Do meta tags boost SEO?
Including meta tags in your <head> element doesn’t immediately impact your SEO — search engines don’t reward you for simply adding them. Instead, it’s what you put in them that matters.
Google's web crawler evaluates factors like the uniqueness of your meta descriptions when determining search rankings in their SERP. To optimize your meta tags, make sure you’re following best practices for selecting relevant keywords and include the right types of meta tags for your content.
Get 13 need-to know tips on website SEO — whether or not you use Webflow.
Get 13 need-to know tips on website SEO — whether or not you use Webflow.
The 4 most relevant meta tags
Meta tags have undergone several evolutions over the years, but below are the four most important ones to include in your code.
1. Meta and header title tags
Page title tags define what appears in the browser tab and search engine results. This title tag can differ from a page’s header, which you’d indicate using the <h1> tag. These two attributes are similar but serve slightly different purposes.
Think of a title tag as a call to action — this language tries to convince people to click on your website instead of competitors’ sites. Headers focus on describing the page’s content, often going into more detail than the title tag.
For example, here’s how the HTML for this page identifies the titles:
- <meta name="title" content="How to write meta tags and why they matter for SEO | Webflow Blog">
- <title>How to write meta tags and why they matter for SEO</title>
- <h1>How to select meta tags that improve your SEO strategy</h1>
Search engines are supposed to use either your meta title tag or <title> tag to create search results, but a 2023 study from Zyppy discovered that Google rewrites 61% of page titles in search results. To do this, they mash up your meta title, <title> tag, and <h1>, then sprinkle in a few target keywords to create a new title tailored to a specific search intent.
Initially, these rewrites may not seem like an issue, since Google is trying to reach more readers. But their rewrites may be too short, less descriptive, and unbranded, creating a weaker perception of your page.
Here are some best practices to prevent search engines from rewriting your title tags:
- Keep titles between 51–70 characters. According to the same Zyppy study, Google is more likely to rewrite titles that fall outside these limits.
- Follow meta keyword best practices. Use primary keywords to summarize the main topic — but avoid keyword repetition.
- Write similar titles for the same page. Your meta title tag, <title>, and <h1> should all be similar to ensure Google can identify the page topic accurately.
- Include your site name. After the title, insert a vertical pipe (“|”) followed by the site name, just like in the example above that includes “ | Webflow Blog.” This practice increases the title’s readability, reducing the likelihood of a rewrite.
- Avoid boilerplate language. A primary aspect Google uses to determine a title’s quality is uniqueness. If too many of your pages use the same word structure, like “10 ways to do X,” Google will likely rewrite the titles in search results.
- Use parentheses ( ), not brackets [ ]. Google tends to remove brackets entirely, sometimes even the content within them. The reason is unclear, but if you need to add a note to your title, use parentheses, which get rewritten or removed far less often.
2. Meta description tags
Meta description tags summarize articles so search engines can provide a brief synopsis, called a snippet, after the title in search results. For example, the meta description tag for this page looks like this:
<meta name="description" content="Learn how to use meta tags to improve your SEO strategy and increase click-through rates. Discover which tags search engines typically look for when indexing pages.">
With any luck, search engines will use that description to create the search result snippet, but the meta description tag is another one that search engines often rewrite or ignore.
Here’s how you can write descriptions that are strong enough that search engines will use them:
- Aim for 145 to 160 characters. When Google rewrites descriptions, they keep the character count in this range, so make sure your meta descriptions stay within that limit so they don’t get truncated or ignored.
- Make them unique and high-quality. Search engines can detect when your descriptions overuse keywords, so write in complete sentences that use natural language and proper grammar. Use sentence case. And don’t duplicate meta descriptions on different pages.
- Use relevant information. Descriptions should accurately summarize your content. Otherwise, search engines are more likely to pull something from your content, like a sentence in your intro.
3. Meta robots tag
Developers use the meta robots tag to tell search engines how to crawl the page. Here are the two most common instructions:
- “index”/“noindex” tells web crawlers whether to add the page to their index, which is the database search engines use to create results. If you use “noindex,” the crawler will still explore your page to look for links, but the page won’t appear in search results.
- “follow”/“nofollow” tells web crawlers whether to follow links on the page.
The default setting for web crawlers is to index pages and follow all their links. You don’t need a meta robots tag if you want them to do that, but to reverse either instruction, you use “nofollow” or “noindex.”
For example, here’s how a meta robots tag looks when you’re telling web crawlers to index a page but not follow any links in it:
<meta name="robots" content="index,nofollow">
You can use meta robots tags in the following ways:
- Use “noindex” for pages you want search engines to see but not surface in search results, such as top-level navigation pages that are just a list of links.
- Use “nofollow” when you don’t want the links on a page to be associated with your site, such as lists of user-generated content where links could point to sites you can’t vouch for.
- Use both on pages you hope no one will see, like error pages. They make poor search results and usually only include links for redirects or exporting error logs.
4. Meta viewport tag
The viewport tag instructs browsers how to handle a page’s width and scale. It also tells search engines that you probably optimized for mobile devices. Here’s what a standard viewport tag looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
“Device-width” refers to the screen resolution the browser is rendering on. When you tell it to scale the page to that width, it sizes elements accordingly, which is essential if you use Flexboxes or CSS grids. Visitors won’t need to zoom out or scroll horizontally to see everything on a page, and this improves the user experience on every device.
Optimize your website with Webflow
Crafting targeted meta tags for your pages helps improve website indexing and search visibility, allowing you to reach a wider audience. And once you’re ready to implement, you need a robust web platform that makes optimization intuitive with built-in tools.
With Webflow’s native SEO tools, you have complete control over meta tag optimization, without relying on developers or writing code. Customize meta tags for each page, or automatically generate meta tags with dynamic SEO settings for collection pages — perfect for blogs, product listings, or any template-based pages.
Build, optimize, and launch search engine-friendly websites with Webflow today.
Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.
Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.
