Best SEO practices on Webflow
Is SEO relevant anymore?
You’ve probably heard about the explosion of AI tools like DALL-E, the image generator, and ChatGPT, the new chatbot taking the world by storm.
These AI models have been trained on terabytes upon terabytes of data scraped from the internet, so it’s safe to assume that any question you have, may be answered by a chatbot in the future!
But right now, chatbots are still in their infancy, and we are still going to search engines for our queries - particularly Google. Google has a crazy 83% of search engine market share. It’s still the first search engine to nearly everyone’s minds when they need an answer to a question.
Which is why search engine optimization (SEO) - the practice of making your website relevant to search engines and visitors - is a pillar of website design.
Unfortunately, there is no single simple trick to good optimization. Great SEO is a perfect combination of many factors that boost your website to the top of Google’s search results.
Luckily, Webflow offers a ton of features to help you look flawless in Google’s eyes and get you the rankings you deserve. Let’s check them out!
Clean and simple URL + title tags and meta descriptions
Keeping your URL simple is vital. Both search engine robots and visitors use them to determine what sort of content is on your website.
A common mistake is to add the entire title to your URL, especially for blogs. Consider this example blog post, titled “45 Influencer marketing stats you need to know about”.
That could be www.testcompany.io/blog/45-influencer-marketing-stats-you-need-to-know-about.
But what not just make it www.testcompany.io/blog/essential-influencer-marketing-stats?
When Google provides your page or blog in search results, the title of the page will accompany your URL - so no need to have it twice. Plus, the second URL already conveys the essence of the page in case it’s found without a title.
And in this case in particular, removing numbers from your URL keeps your content evergreen. This means you can now update your influencer marketing post with more stats and build upon your existing SEO ranking instead of starting from scratch with a new post and URL.
Now, about your title. Your title tags are your first impression of your website in most cases. They need to be clear to search engines, but they also need to be clear to viewers. The title needs to describe the content of the page, contain the right keywords, and also inspire the reader to visit the page! A tall order, when you consider that titles should be short, punchy, and under 60 characters.
As well, the meta description is important to optimize. The meta description gives you one final chance to entice the user if the title and URL does not. So give the best intro you can provide to entice clicks!
While it does takes time to think of catchy titles and convincing meta descriptions, the effort is well worth the impact it has on your rankings.
Heading structure
You might think that headers are just for looks, but they’re actually important guideposts for Google robots!
Imagine if I wrote everything in <h3>.
And sometimes wrote sentences in <h4>.
Then suddenly, I switched to <h2>.
It’s not logical, looks strange, and worst of all, Google will penalize your site for this.
Headers are meant to organize your page content into logical chunks that can be consumed easily, both for humans and robots. So make sure you use them properly.
The headline of your page should be in <h1>, ideally with the main keyword and no more than 70 characters long.
Then, as you create content, you can use <h2>, <h3> and so on to create logical sections and subsections.
Google’s robots can detect when your website uses headers in strange ways, so keep your pages clean and use a proper header structure.
Image alt texts
Whenever you add an image to your Webflow website, you can write a short description for it, otherwise known as an alt text. What are alt texts for, though?
Well, say your website image fails to load, or your viewer is using a screen reader or other sort of accessibility device. The alt text is what the browser will show or read to your visitor.
It should provide additional context about the image and how it relates to your webpage.
You don’t have to write pages and pages of descriptions, either. It can be as simple as “Your brand’s header image”, or “Your brand’s product UI animation.”
Aside from making your site more accessible, alt text can also help your images rank on Google search results too! And when your image ranks highly, the post that it came from is often rewarded with a ranking bump.
So how can you write good alt texts? First of all, describe what the image is about, and use keywords appropriately. Don’t just stuff every keyword you can in there, because that makes for a bad user experience (and that’s a no-no for Google).
Secondly, keep your description at a suitable length. There’s no need to describe what someone is wearing down to the smallest detail, for example. A picture is worth a thousand words, but you don’t have to put them all in the alt text.
Semantic HTML tags
A semantic tag is a tag that is clear to both the console and the developer. Think of Client-First - you should be able to understand what the tag is when you see it, as should the console.
These came out in HTML5, and are perfect for Webflow! Nearly every browser understands HTML5, save for Internet Explorer.
Think of your <div> and <span> tags - these tell nothing about the content, and always require clarifying elements, like IDs or classes.
Webflow offers a bunch of semantic HTML5 tags to use in place of <div> and <span>, like:
- <header> defines a header for the document or a section
- <footer> defines a footer for the document or a section
- <nav> defines navigation links in the document
- <main> defines the main content of a document
- <section> defines a section in the document—the spec defines this as “a thematic grouping of content, typically with a heading," so you can think of it as being like a chapter
- <article> defines an article in the document
- <aside> defines content aside from the page content
- <address> defines the contact information for the author/owner of a document or an article
- <figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc.
Whenever possible, I strongly recommend using these tags! Future developers, designers, and team members will thank you.
I invite you to read more about semantic elements on W3School’s site and Webflow’s blog post detailing how to use semantic elements on Webflow.
Submit your site to Google Search Console and generate a sitemap
I’ve saved the best for last - once you’ve done the rest of the checklist and your site is ready to go, next it’s time to announce it to the world! Well, to Google’s world of robots.
By adding your sitemap to Google Search Console, you’ll alert Google’s army of robots that there is a new webpage worth crawling and ranking in their search engine.
There’s a handy tutorial produced by Webflow itself that I strongly recommend you use, it’s simple!
Once you do that, Google will provide you with a report of your website’s SEO condition, and as mentioned, it will index your website from that moment on.
It’s a vital step, so don’t forget it!
Outro
Let’s recap how you can improve your SEO on Webflow.
- Keep your URL, title tags, and meta descriptions clean and simple.
- Use a logical heading structure on each page.
- Add alt texts to relevant images.
- Use semantic HTML tags wherever possible.
- Submit your site to Google Search Console and generate a sitemap.
As you can see, Webflow has a lot of tools to keep your website SEO-friendly. There is a lot more that you can do to boost your SEO rankings, but these are some of the lowest-hanging fruit you can find.
Remember that SEO is a game of increments. If you haven’t kept your website SEO-friendly, you should notice a boost after making these changes. But there is so much more to great SEO - correct keyword usage, how your website is structured, and so on.
If you’re interested in SEO and Webflow, I’d love to tell you more about it. Send me a message and let’s chat about how we can optimize your website!
