Why meta tags matter in Webflow
Webflow is one of the cleanest platforms for SEO. Unlike WordPress with a dozen plugins fighting over the , or Shopify with its liquid template chaos, Webflow gives you a purpose-built UI to set every important meta tag per page.
That control is a double-edged sword. When you get it right, you get clean, precise meta tags that Google respects. When you get it wrong - or don't touch the defaults - you get a site full of generic titles, blank descriptions, and missing og:image tags.
Here's what matters and why:
- Title tags are the single biggest on-page SEO signal. Google uses them to understand what a page is about and decide where to rank it. They also appear directly in search results as the blue clickable headline.
- Meta descriptions don't directly affect rankings, but they control whether someone clicks your result. A compelling description in the right length wins clicks. A missing or generic one loses them.
- Open Graph tags (og:title, og:description, og:image) control how your page looks when someone shares it on LinkedIn, Facebook, Slack, or in an iMessage. A broken og:image means a blank or ugly preview. Shares without previews get ignored.
- Twitter Card tags work the same way for Twitter/X specifically.
- Canonical tags prevent Google from seeing duplicate content when the same page is reachable at multiple URLs.
Webflow handles canonical tags automatically. Everything else needs your attention.
How to set title tags in Webflow
Per-page title tags
Every page in Webflow has its own Page Settings panel. Here's how to get there:
1. Open your Webflow project in the Designer
2. Click the Pages panel (the icon that looks like stacked pages, top-left sidebar)
3. Hover over the page you want to edit
4. Click the gear icon that appears to the right of the page name
5. Scroll down to SEO Settings
You'll see a Title Tag field. This is what appears in Google search results and in the browser tab.
Rules for a good title tag:
- Keep it under 60 characters (Google truncates longer titles in SERPs)
- Lead with your primary keyword
- Add your brand name at the end after a pipe:
Keyword-Rich Page Name | Brand Name - Make every page title unique - duplicates confuse Google
Webflow tip: If you leave the Title Tag field blank, Webflow uses the page name you set in the Pages panel. That name is often something like 'Home' or 'About' - useless from an SEO perspective. Always fill in the Title Tag field explicitly.
CMS collection title tags
For CMS-powered pages (blog posts, product listings, team members), you set the title tag in the Collection Template page settings. Use Webflow's dynamic fields to pull in the item name:
[Post Title] | Your Blog Name
In the Title Tag field, type your template and insert CMS fields via the + Add Field button. This generates a unique, keyword-rich title tag for every CMS item automatically.
How to set meta descriptions in Webflow
Meta descriptions live in the same Page Settings panel, directly below the Title Tag field.
Rules for a good meta description:
- 150-160 characters (Google typically truncates at 160; shorter is fine)
- Include your primary keyword naturally - not stuffed
- Write it like an ad: lead with a benefit, end with a soft call to action
- Make every description unique across your site
Example of a bad Webflow meta description:
Generic page description. We offer services for businesses.
Example of a good one:
We build custom Webflow sites that load fast and rank on Google. See our portfolio and get a free project quote.
For CMS collections, use the same dynamic field approach as title tags. Pull in the item summary or excerpt field if you have one, or write a template with a dynamic insert for the item name.
Important: Webflow doesn't auto-generate meta descriptions from page content. If you leave this field blank, Google will pick its own snippet from your page - usually something unhelpful like navigation text or the first sentence it finds.
How to set og:image in Webflow
Open Graph images are configured in the same Page Settings panel, under the Open Graph Settings section (scroll below the SEO settings).
Setting a page-level og:image
1. In Page Settings, scroll to Open Graph Settings
2. Click Upload Image next to the og:image field
3. Upload a 1200×630px image (the standard og:image size - 1.91:1 ratio)
4. Webflow will host the image and set the absolute URL automatically
5. Hit Save and republish the page
Requirements for og:image:
- Minimum 1200×630px for best rendering across all platforms
- Under 8MB
- JPG or PNG (Webflow supports both)
- Webflow sets the absolute URL for you - no manual URL entry needed
You can also set og:title and og:description separately in this section. If you leave them blank, Webflow falls back to the SEO title tag and meta description.
Setting og:image for CMS collections
On a CMS template page, the og:image field lets you bind a CMS image field. This means every blog post or product page can have its own unique social image pulled from the CMS item.
1. In the Collection Template page settings, go to Open Graph Settings
2. Click in the og:image field
3. Use Get value from a field and select the relevant image field from your CMS (e.g., 'Featured Image' or 'Hero Image')
4. Save and republish
If your CMS items don't have a dedicated image field, add one. A 'Social Image' field in your CMS is worth the 5 minutes it takes to set up.
Common Webflow SEO mistakes and how to fix them
Mistake 1: Leaving the homepage title as 'Home'
The most common Webflow SEO mistake. Webflow defaults your homepage title to whatever you named the page in the Pages panel - usually 'Home' or 'Homepage'.
'Home' is one of the worst title tags possible. It tells Google nothing. It wins zero clicks.
Fix: Open your homepage Page Settings. Set the Title Tag to something like: [Primary Keyword] | [Brand Name]
Example: Webflow Design Agency London | Studio Name
Mistake 2: No meta descriptions on any page
Webflow doesn't auto-generate meta descriptions from your page content. If you've built your site and never opened the SEO Settings panel, you have zero meta descriptions.
Fix: Go through every key page (homepage, services, about, contact, key blog posts) and write unique 150-160 character meta descriptions. For a 10-page site, this takes 30 minutes. It's worth it.
Mistake 3: Missing og:image on blog posts
Blog posts shared on LinkedIn or Twitter without an og:image show a blank card - just a link. Nobody clicks blank cards.
Fix: Add a Featured Image or Social Image field to your Blog Posts CMS collection. Bind it to the og:image field in the Collection Template page settings. Create a branded image template in Canva (1200×630px) and update each post.
Mistake 4: Duplicate title tags across CMS items
If your CMS collection page title tag is set to something static (e.g., 'Blog Post | My Site') instead of using a dynamic field, every blog post shares the same title tag.
Fix: In the Collection Template page settings, use a dynamic field for the title. The format [Post Title] | Blog | Brand Name works well. Use the + Add Field button to insert the CMS field.
Mistake 5: Title tags over 60 characters
Webflow has no character count warning in the Page Settings panel. You can type 200 characters and it'll save without complaint. But Google truncates titles over ~60 characters with an ellipsis in search results.
Fix: Count your characters manually, or use a tool. Target 50-60 characters for title tags. If you're going over, cut brand name or secondary keywords - the primary keyword and page intent must survive.
Mistake 6: Not setting SEO settings on utility pages
404 pages, thank-you pages, password-protected pages. Most Webflow users never set title tags on these. It's low-priority but a sign of a well-maintained site.
Fix: Add noindex via the Page Settings SEO panel for pages you don't want Google to index (thank-you pages, utility pages). For 404 pages, Webflow handles noindex automatically.
Mistake 7: Password-protected pages accidentally indexed
If you've ever made a page public temporarily for a client review, Google may have crawled and indexed it. Webflow doesn't automatically noindex pages when you later add password protection.
Fix: Check Google Search Console for unexpected indexed pages. For any page you don't want indexed, open Page Settings → SEO Settings → enable Exclude from search results (noindex).
Webflow SEO meta tags checklist
Run through this before you publish any new Webflow page or CMS item:
- Title tag set (not the default page name), under 60 characters, primary keyword first
- Meta description written, 150-160 characters, unique, includes keyword and a soft CTA
- og:title set (or confirmed to fall back to SEO title)
- og:description set (or confirmed to fall back to meta description)
- og:image uploaded, 1200×630px minimum
- For CMS collections: dynamic fields bound for title, description, and og:image
- No duplicate title tags across pages
- Utility pages (thank-you, password, staging) marked noindex if needed
How to audit your Webflow site's meta tags
Manually checking every page in the Webflow designer is slow and error-prone. A faster approach: run an automated audit on your published URL.
GetMetaFix audits any published Webflow site in 30 seconds. Paste in your URL and it checks:
- Missing or blank title tags
- Title tags over 60 characters
- Missing meta descriptions
- Meta descriptions over 160 characters
- Missing og:title, og:description, og:image
- og:image that doesn't exist or is the wrong size
- Duplicate meta tags across pages
- Missing canonical tags
It scores each issue by severity and shows you exactly what to fix. The free audit covers everything above. The $29 fix package generates the exact field values to paste into your Webflow Page Settings.
Fix your Webflow meta tags today
Webflow gives you better SEO control than almost any other website builder. The problem isn't the platform - it's that most people build the site and never open the Page Settings panel.
Spend 30 minutes going through your key pages. Set title tags. Write meta descriptions. Upload og:images. Then run a free audit at getmetafix.com to confirm you haven't missed anything.