Most web designers that I've talked to know the importance of SEO, but they don't quite know how to optimize their sites for search.
In other cases, they feel overwhelmed by all that SEO entails, so they just go with the basics.
And I get it – SEO can be confusing and daunting to non-marketing people. The practice is constantly evolving, and new elements get added to the "SEO mix" all the time.
So this guide aims to help Webflow designers understand the importance of SEO meta tags and how to optimize them for search.
This is a self-contained guide with all the tips and tricks that I use when optimizing the sites of global brands at my full-time job.
Here's a list of all the main points covered:
- What are meta tags, and why should you care?
- Optimizing page titles (or title tags)
- Writing descriptive and engaging meta descriptions
- Optimizing meta tags on Webflow CMS Collections
- Meta tags at scale: how to manage SEO tags on large Webflow sites
Let's get started!
1. What are meta tags?
Meta tags are short pieces of text that go in the head section of the HTML source code of a page. These fields are what search engines like Google and Bing display on their result pages.
There are two types of SEO meta tags: page titles (or title titles) and descriptions (or meta descriptions):
Here's how meta tags look in Webflow's Designer, the HTML source code of a page, and Google's search results.
What's Their Purpose?
Meta tags' primary purpose is to inform search engines on the content of a page so they can serve them to the right users. In fact, Google uses page titles as one of their ranking factors.
Meta descriptions are not considered a ranking factor. But since they are displayed on result pages, they play a more informative role for users.
Meta tags inform searchers on what your page is about, and what to expect when they land on it.
In some cases, meta tags are the only visible elements of your site on a Google results page. So you want these to be short and easy to understand, but at the same time, descriptive and appealing enough, so searchers feel encouraged to click on them instead of other results.
Effective meta tags are known to increase click-through-rates (CTRs) – that's the ratio of clicks a page gets to the number of times it was viewed. The higher the CTR, the more visits you can expect to get on your site.
Google uses click data and other user signals to rank websites. Thus, ensuring every page on your Webflow project has optimized tags is a great step to increase your site's discoverability.
See this recent tweet from Rand Fishkin (founder of the SEO tool, Moz) about Google admitting they use click data to rank pages.
Let’s begin with page titles.
2. Page Titles
The intuitive approach would be to write them directly on Webflow's Designer as you go, hit publish, and boom – you're ready. However, you're leaving a lot on the table if you are doing that.
Here I'll give you a couple of practical tips to set your Webflow site up for success.
But remember, there's no such thing as a magic formula to getting higher rankings or organic traffic. Successful digital marketers are constantly testing hacks and new ways to get the most out of their title tags, so this should not be a one-off thing.
Here’s where you should start:
Think about one (or two) keywords to target first
Every page on your site should have a target keyword in mind. This is the topic or query you want to rank for.
For example, if you're optimizing your portfolio website and want people to find you as the type in your name. Your actual name is one of your target keywords.
Keywords that don't include your brand name but are related to the products or services you offer are considered non-branded keywords.
You can use tools like Ahrefs' Keyword Generator Tool to identify non-branded keyword opportunities to include on your meta tags.
This free tool can give you an idea of the search volume behind each keyword (number of searches per month), and how difficult it would be to start ranking for that term (metric known as Keyword Difficulty).
The goal is to then take these opportunity-keywords and embed them on your title tags and meta descriptions.
This process of exploring search terms, identifying content opportunities, and developing content ideas based on those findings is known as Keyword Research.
This is a very extensive topic that i'm not covering here, but I'd suggest you check out these two guides to learn more about the process of discovering keywords:
- SEO 101 Guide by Mangools (SEO Tool)
- Beginners Guide to Keyword Research by Moz (another great SEO tool)
Length
Google controls and limits how page titles and descriptions display on result pages.
They use a combination of character and pixel length for this. So if you write your metas without thinking about them too much, they would probably get truncated, and those valuable words will not come close to potential visitors' eyes.
If you're looking for a ballpark, I'd recommend keeping your page titles between 55-65 characters.
You also want to keep in mind that the title tag length varies quite a lot from one device to the other. Most titles get truncated on desktop these days, but the limit goes up on mobile devices:
That's why I'd highly recommend you use tools to help you write the meta tags on your pages.
Here are a couple of tools to make sure your page titles don't get truncated:
- SEO Minion: funny name but a great tool overall. This is a free Google Chrome extension that helps you audit different SEO elements on a website. They have a small feature that allows you to write page titles and descriptions and preview how they would look on Google's search results.
- Moz Title Preview Tool: This is a great option if you don't want to install a Chrome plugin or don't use Chrome at all. Use this when writing your title tags.
- MetaTags.io: I personally have never used this tool, but I ran across it as I was researching for this article. It seems like a pretty robust tool to test SEO tags and Open Graph elements. Check it out using this link.
Pro tip.
Use Excel or Google Sheets doc to store all the pages on your website and easily manage meta tags. Then use the LEN function to count the character length and avoid going over the limit.
Here's how to do it:
1. Create five columns and name them: URL, Page Title, Title Length, Description, and Description Length.
2. Once you've created these columns, use the LEN= function to help you count the characters on both the Page Title and Description columns
By doing this, you'll know if your titles are going over the 65-character limit.
You can then test one by one (completely optional) using the tools I listed above.
Large Websites
This process might seem daunting and pretty manual if you have a large site (over 50 pages). So in the last section of this guide, I share some tips on how to use website crawlers to help you manage page titles at scale.
Writing Title Tags
When writing title tags, you want to follow the CD approach; which stands for Clean and Descriptive:
C: Clean
Page titles serve an informative purpose for users. Thus, it's key that they are short and concise.
Here are some practical ways to make your site's titles look clean and appealing:
- Place your target keyword at the front, AND, don't overuse it. One time is enough, trust me.
- Use title caps. I've seen pages that CAPITALIZE. EVERY. SINGLE. WORD. Don't do that. Just don't. It will hurt the credibility of your site as it might look "spammy" to most users.
- Add your brand name/website name at the end of the title, and use a vertical bar "|" as a divider between phrases. This will create brand awareness and make it easier to recognize for people already familiar with your brand.
- Make it unique. Please don't use the exact same title for your Homepage, About, and Contact pages just because you're trying to increase your chances of ranking for the same keyword. Each page on your site plays a different role, and therefore, it should have its own unique title tag. Not doing this will definitely hurt your SEO.
D: Descriptive
Page titles need to be short and concise, but at the same time, include words relevant to a user's search.
Think about this: If you were in the market for a new pair of noise-canceling headphones, what qualities or product attributes would be relevant to you?
Perhaps you're looking for the latest models, so a page featuring the current year within its title will automatically become a good option for you. Or maybe you are trying to compare cordless options, so seeing the word "wireless" will certainly capture your attention.
Our brains look for related words as they're skimming through the search results. Because of that, seeing a key word can help users determine if a piece of content is worth reading or not. Thus, you must think about the set of attributes that surround your target keywords and embed them in the title in a way that provides value.
Think about the type of content on your page
I found this to be even more useful when optimizing pages with long-form content (reviews, blog articles, guides, etc).
Stating the type of content helps at setting the right expectations. You are basically telling users what content to expect when they land on the page.
By content type, I mean how the information is structured.
- Is your blog in a list format?
- Is it a full-guide where you teach users something specific?
- Is it a podcast transcript?
- Or maybe it's just a lead-gen landing page with supportive text about your offering?
Once you've thought about that, follow this basic formula on your page titles:
Target Keyword + Content Type + Brand
Here's a great example from an article on Webflow's blog:
Now let's talk about descriptions...
3. Meta Descriptions
Over the last two years, I've seen tons of Webflow sites without optimized meta descriptions.
This is a lost opportunity because if Google doesn't find a meta-description tag on your page, it will populate this field at its will.
In this example, Google pulled on-page text to populate the meta description field, which is not ideal for discoverability.
Remember, page titles and descriptions should complement each other and collectively inform searchers on what a page is about.
Use the meta descriptions to expand on the offering displayed in the page title.
Look at this example from Moment (one of my favorite online camera stores), and ask yourself, would you click on this result if you didn't know the brand?
They could certainly make their page look more appealing and punchy just by making a few small tweaks on their meta tags.
For example, they could mention the different types of gear that's going on sale, specific brand names, and other elements relevant to people doing holiday shopping.
Some SEOs like to leave meta descriptions blank so Google can pull whatever they want to serve users with. However, that's not quite the right approach.
Here's a tweet from John Muller (Webmaster Analysts at Google):
Now that you understand the importance of optimizing descriptions, let's jump straight into my recommendations for writing them.
Writing Meta Descriptions
Here's a list of tips and best practices that have worked well for me in the past:
Think About User Intent
When users search for stuff online, they always have an intent (what they want to accomplish with a search).
Thinking about how your page helps users find what they are looking for is a great way to ensure your metas contain the right set of keywords.
Intent is often categorized under three main groups: navigational, informational, and transactional.
Similar to Keyword Research, this is a very extensive topic, but here are some ideas on how you can leverage user intent:
Think about this: If you search for "MacBook pro 13 inch", your intent could be transactional as you're likely trying to compare pricing options and potentially buy one.
Results for transactional queries usually feature product pages, pricing information, and tons of eCommerce sites.
Whereas if you type in "MacBook pro 13 or 16", the intent is more informational, which means the searcher is likely researching options to make an informed purchase.
The results for this query might include review websites, frequently asked questions around both models, and even YouTube results with product comparison videos.
So how can you use these insights?
If you think people searching for your target keyword have a specific intent, try to add closely-related words that match that search intent and will likely grab their attention.
This concept also applies to websites trying to capture customers at a specific location (such as a part of a city or a county).
In this case, consider including elements such as phone numbers, street names, and zip codes on the meta descriptions. This will make your page more appealing to users searching for local businesses.
User intent is the most crucial piece of advice I can give you when it comes to meta descriptions – and SEO in general.
Here are more best practices to keep in mind:
- Write descriptions using a regular sentence structure with caps on the first letter and end with a period (or full stop).
- Unique and easy-to-understand sentences tend to better capture users' attention (and they look more legitimate) than descriptions with traditional sales wording. I recommend you get creative here while naturally integrating your target keyword.
- Make them actionable. With a couple of words, explain what they should do next, and what they can accomplish by visiting your page. It could be as simple as "visit to learn more." Or something more developed like "Contact one of our brand specialists to get a quote."
- Consistency is key: Write descriptions with the same brand voice or tone you used throughout your site. Being consistent with your tone will also help users recognize your brand, among other search results.
- Character length: According to Moz's Meta Descriptions Guide, the optimal length is between 60-160 characters. However, I'd try to limit them to 156 characters. I've seen some descriptions in the past get truncated at 160, but that's just me.
As I mentioned in the Page Title section, it'd recommend you use a meta tag preview tool to help you write your descriptions. This will reduce the chances of your tags getting truncated on mobile and desktop results.
4. Meta Tags on Webflow CMS Collections
Being able to dynamically generate pages using Webflow CMS Collections is freaking awesome!
But what I love more about it is how you can use its features to automate the creation and maintenance of SEO meta tags using CMS Collection Fields.
In this section, I'll show you two approaches to optimizing meta tags on CMS Collection pages
When choosing one, I suggest that you think about the role you expect these pages to play in the generation of traffic to your site. Also, think about how you want users to interact with them.
It might sound confusing, but let me explain…
Terms used in this section
Before we dive into each approach, I'd recommend you read Webflow's Glossary of Terms.
This page provides Webflow users with quick definitions for all the CMS terminology I used below. Use it as a reference if these following terms don't sound familiar to you: Collection, Collection Fields, Collection Items.
Approach 1
Use CMS Collection Fields to dynamically generate unique and structured your meta tags.
Follow this approach if...
- The CMS Collection doesn't play a key role in your site's traffic generation. For example, I'd do this with blog category pages, article tags, and other non-essential Collections.
- Another use case would be if the collection has many items, new items are frequently being added, and it would be such a pain to manually write unique titles and descriptions.
The good thing about this approach is that you can achieve an extremely high level of customization by just using CMS Collection Fields.
How does it work?
Basically, you use CMS custom fields to dynamically generate the SEO tags on pages within that specific CMS Collection. You place these on the SEO settings of the CMS template page, which allows all collection pages to have the same structure.
If that sounds a bit confusing, let me show you an example from a real estate client:
As you can see, I managed to achieve a good level of customization by mixing and playing with the different Collection Fields.
The awesome part is that you can combine Collection Fields with static text.
For this example, I used this to add the brand's name on the title tag, specific call-to-actions (CTAs) on the description, and other bits of text that make the description more keyword-rich.
Things to consider
- In some cases, you will end up with meta tags that are either too short or slightly above the character limit.
- Setup these fields as Required elements, so you don't ruin the structure if you forget to fill in one when creating new items.
- You won't be able to manually write some and dynamically generate others – or at least I haven't found a way to do that yet.
Approach 2
Create two custom Collection Fields and set these to populate the title tag and meta description fields.
Use this approach if...
- You need each collection item to have non-structured meta tags that you can manually update.
- The CMS collection is small in the number of items.
- I also recommend you also do this on product detail pages (if you have an eCommerce website), and blog posts.
This process gives you the most versatility because you can move and tweak your meta tags as much as you want without affecting other items within the same CMS Collection.
How does it work?
Let's use this exact page as an example. The article you're reading now is on a CMS Collection called "Hub Posts".
Articles within this Collection are meant to be key drivers of traffic to my website. Thus, I want to have full control over their meta tags. I also like to make updates and test different tags to see which perform better on search.
Step 1: Create two custom fields (one for the title tag and another for the meta description):
Field Settings
- Use a single-line text setting as these are meant to be short pieces of text.
- Add a limit to the number of characters you can input (65 for titles and 156 for descriptions).
- Set these two custom fields as "required", so you never forget to publish something without meta tags.
Step 2: Set these to populate the two fields located on the SEO Settings of the collection template:
Feel free to add your brand name at the end of the title too. Just make sure that you count the number of characters, and subtract these from the Title Tag character limit you initially set on the custom Collection Field.
And that's about it! Reach out to me on Twitter if you have any questions about how to do this :)
5. Meta Tags on Large Webflow Sites
CMS Collections can help you automate the process of creating and updating meta tags on small-to-medium websites. However, things can get hairy pretty quickly when your site has tons of pages, sections, and multiple CMS Collections.
So how do you do manage meta tags at scale? You would use a website crawler and an old-fashioned spreadsheet – apologies if you were hoping to hear something more "sexy".
Here I will give you some tips on how you can use a website crawler to help you manage and update meta tags on large Webflow projects.
But let's start with the basics first...
What is a website crawler?
"Crawl" or "Crawling a site" is an SEO term that refers to the use of bots to follow every link on a site and create a full picture of the entire website, including pages, images, links, pdfs, etc.
This is pretty much what Google bots do. They go across the web "crawling" websites to understand what they are about, so they can later rank them in their SERPs.
Some tools mimic Google's bots and allow you to easily see your website as Google would see it. You can then use these crawls for auditing your website's elements and spot optimization opportunities.
In this case, we'll use it for meta-tagging purposes.
In this case, we'll use an online website crawler called Seolyzer.
I'm using Seolyzer because it's free, it stores old crawls in the cloud, and you can crawl up to 10,000 URLs per month on their free plan.
You may also want to check out ScreamingFrog, which is another excellent tool, but their free license has a limit of 500 URLs per crawl.
How do I use Seolyzer?
1. Create an account, and follow their quick guide on how to set up your site.
2. Run your first crawl (this usually takes between 30-min and an hour depending on how big your site is).
3. Export the crawl and the list of URLs as an excel document:
4. Open the spreadsheet, and delete all columns but the following: URL, meta_title, meta_description.
The end result should be a spreadsheet with a full list of all the pages on your site that are indexable (can show on Google's results), and their meta tags.
Finally, here are some benefits that
For new websites: this exercise should provide you with a clear picture of all the pages that need meta-tagging optimizations.
For websites that are already live: use this spreadsheet to check if your existing tags meet the SEO best-practices mentioned above. Additionally, you'll likely find if there are any low-hanging fruits worth fixing.
---
Shoot me a message on Twitter if you have any questions about this article or Webflow SEO in general!