Adding Meta Titles and Descriptions in Webflow

Why Meta Titles and Descriptions Matter

Meta titles and descriptions are a lot more important that a simple tickbox exercise on your SEO checklist. They give you the chance to capture people’s attention and entice them to explore your website. Over the years, I’ve noticed how getting these right can make all the difference in attracting visitors.

The meta title is the clickable headline in Google search results, and the meta description is the paragraph underneath, that gives a quick summary of the page. Together, they form your first impression, so it’s worth taking the time to get them  right and experimenting with what works and what doesn't.

A good meta title should be clear, concise, and include the main keyword you’re targeting. In my experience, placing the keyword at the very beginning of the meta title significantly improves visibility. I’ve tested this approach across different projects, and it always seems to deliver noticeably better search rankings, sometimes moving you up a few pages. The meta description, on the other hand, should explain what the page offers and encourage users to click. Think of it as your mini sales pitch.

Step-by-Step Guide to Adding Meta Titles and Descriptions in Webflow

1. Navigate to the Page Settings

To add a meta title and description in Webflow, start by going to the Pages tab in the left sidebar of your Webflow dashboard. Locate the page you want to optimise and click the gear icon next to it to open the page settings.

2. Find the SEO Settings Section

Once the settings panel is open, scroll down to the SEO Settings section. This is where you can add your meta title and meta description for the page.

• Meta Title: Enter the main title that will appear in search engines. Aim for around 50-60 characters, and make sure to include your primary keyword close to the beginning.
• Meta Description: Write a brief summary of what the page is about. Ideally, keep this between 150-160 characters and include relevant keywords that clearly describe the content. In your meta description, include your primary keyword and weave in related terms that Google often makes bold in search results (SERPs) to increase the likelihood of attracting clicks. This is a secret trick that I've found to be really beneficial for improving click-through rates.

3. Write Effective Titles and Descriptions

Here are some tips for writing compelling meta titles and descriptions:

• Keep It Concise: Search engines usually cut off meta titles after about 60 characters and meta descriptions after about 160 characters. Make sure the most important information appears early.
• Include Keywords: Use relevant keywords naturally, without stuffing them. This helps search engines understand the topic and users see the page's relevance.
  
  For meta tiles, just use one keyword, your primary keyword, and place it at the very beginning to improve your chances of ranking higher. Whilst it's tempting to write multiple keywords in your meta title, it actually does more damage than good.
  
  For the meta description, use your primary keyword and any additional secondary keywords (similar phrases or search terms that people might search for) and weave these into your description without making them feel out of place.

• Make It Enticing: Meta titles should trigger curiosity and be enticing enough to encourage users to click. I often use tools like Headline Studio to brainstorm ideas and improve the effectiveness of meta information. It's amazing how a small tweak, like adding an action word or rephrasing the headline, can significantly boost click-through rates.
• Use Separators for Extra Information in your Meta Titles: If you're adding extra information in your meta title that is separate from the main keyword, it's common practice to use a '-' or a '|'. I've experimented with both, and I've found that using the '-' works well when the additional information is closely related to the main keyword, while the '|' is more effective when you want to clearly distinguish between different elements, such as a unique benefit or a secondary keyword. Ultimately, use whichever looks clearer for your audience.‍
• Be Persuasive: Think of the meta description as a mini advertisement for your page. Use action-oriented language and consider what would make someone want to click.

For example:

• Meta Title: "Affordable Landscape Gardening Tips - Landscapes Blog"
• Meta Description: "Discover practical, budget-friendly landscape gardening tips to transform your outdoor space. Learn how to create a beautiful garden without overspending."

4. Preview How It Looks in Search Results

Webflow offers a preview that lets you see how your meta title and description will appear in search results. This preview is helpful for ensuring that both the title and description are within the recommended character limits and look appealing.

5. Publish Your Changes

After you've added and optimised your meta title and description, click Save and Publish your site to make the changes live. Remember, it can take some time for search engines to reflect the updates, so be patient.

Meta Titles and Descriptions for Collection Pages

If you're working with CMS collection pages in Webflow, adding meta titles and descriptions is just as important and you need to do it in the same way as you would a static page. In Page Settings, navigate down to CMS Collection pages.

When it comes to adding metadata, you can approach this in two ways:

1. Create Custom CMS Fields: You can create custom fields within your CMS collection specifically for meta titles and meta descriptions. This way, you have full control over what appears in search results, and you can tailor each item in your collection with unique SEO metadata.
2. Link Existing Fields in Page Settings: Alternatively, you can link existing fields from your CMS to the meta title and meta description fields in the page settings. For example, you could use {{post name}} - Landscapes Blog for the meta title and {{summary}} for the meta description. This method helps to automate the process and ensures that your meta information stays up to date with your content.

Best Practices for Meta Titles and Descriptions

• Avoid Duplicates: Make sure each page has a unique meta title and description. Duplicate metadata can confuse search engines and negatively impact your rankings.
• Focus on User Intent: Think about what users might be searching for and tailor your title and description to address that intent.
• Use Action Words: Encourage clicks by using verbs like "learn," "discover," "find out," or "get."

Final Thoughts

Adding meta titles and descriptions in Webflow is a simple yet powerful way to improve your website's SEO and click-through rate. By taking the time to write clear, compelling titles and descriptions, you'll make your site more enticing to both search engines and potential visitors.

In the past, I've found experimenting with slight changes and different keyword variations in your meta titles and descriptions can sometimes lead to significant changes in your site’s performance. If you have more questions about optimising your Webflow site, feel free to explore our other resources or reach out for help!