The ultimate guide for SEO in Webflow
We have put together a list of SEO tips you can set up natively in Webflow. However, there are some more advanced techniques that are outside Webflow's scope and will help you rank your website better on Google.
1. Heading structure
Headings help organize the content of a web page by dividing it into different sections. In order for your web content to be accessible and user-friendly, you should use <h1>, <h2> and <h3> tags.
H1s are one of the most powerful on-page SEO and UX elements you can use. Each page only needs one H1 tag. To put it simply, the H1 should describe what the content is all about. The H1 should contain some of your keywords and be between 20 and 70 characters in length.
To structure your content into sections, each subsequent section should start with H2 and be followed by H3, H4,...You can use the HeadingsMap extension to determine if your website has the right structure by viewing the heading list on your website.
2. Title Tag and Meta Description
The title tag and meta description summarize the main idea of a web page and is displayed on both the search engine results page and in browser tabs. In Webflow, you can easily set up both in each page's settings.
Title Tag
The title tag is often the first impression of your site. Title tags are therefore an important SEO step, as they should satisfy all search engine requirements and, at the same time, be appealing to users. You should write a title that describes the content of the page, includes keywords, and evokes emotion or thought in the user.
You should use a catchy headline to attract readers' attention and encourage them to view the site's content.
When writing blog articles try using words like:
- HOW
- WHAT
- WHY
- WHERE
- BEST
- REVIEW
- ULTIMATE
- or NUMBERS
Great article about page titles.
Meta Description
The meta description, also known as a page description, should provide users with information about the web page. You can imagine it as your webpage's pitch.
Don't forget to create meta title and meta description fields on your website if you have dynamic pages (CMS).
Do not use the same page title and description for all your pages.
3. Image Alt Text and Images Optimization
With alt text, all users, including those with visual impairments, are able to access your visual content. In addition, images are a great source of organic traffic.
Make sure you set alt text for your blog posts and other CMS pages.
This article gives some examples of good and bad alt text for images.
4. Semantic HTML Tags
Beyond pure efficiency and search engine performance, semantic tags have many benefits. They help us build better site structures, and more importantly, they make websites much more accessible.
Webflow provides a simple means to add semantic HTML5 tags to elements in your design through the Settings tab.
Webflow’s HTML5 tags include:
- header - header for the document or a section
- footer - footer for the document or a section
- nav - navigation links in the document
- main - the main content of a document
- section - section in the document
- article - article in the document
- aside - content aside from the page content
- address - contact information for the author/owner of a document or an article
- figure - self-contained content, like illustrations, diagrams, photos, code blocks, etc.
5. URL slugs
The URL appears below the title and above the description in search engine results. Therefore, you should keep your URLs clean and readable in order to increase click throughs.
Make sure your URLs are SEO-friendly:
- Include keyword.
- Be descriptive and meaningful.
- Easy to read.
- Use relevant categories/subfolders.
- Contain around 3 to 5 words if possible.
6. OpenGraph Settings
OpenGraph is what you see when you share your website on social media or in a message. Essentially, it's a picture that shows your website's title and some details.T
he majority of OpenGraph features can be set up natively within Webflow. The meta title and description can be reused, along with a link to an image that best describes the content of your website.
.jpg)
7. Clear navigation structure
Navigation is a fundamental element that impacts usability. We want our users to be immersed and in control of the website that predicts their actions and helps them get things done properly and fast. Without a good navigation system in place, users will struggle whenever they interact with a website.
Keep your navigation simple and straightforward and ensure there are no orphan pages.
You should also use breadcrumbs as additional navigation on your website. Breadcrumbs are hierarchical navigation links that appear on a specific page and tell you how the page is nested within other pages. Breadcrumbs are incredibly useful in providing contextual information about the users’ current location and where they could go. It facilitates reverse navigation.
8. Internal Links
An internal link is a link that takes you from one page on your site to another. SEO-wise, a good internal linking structure can help search engines find and index the pages on your site.
How to work with links on your website:
- Use text links instead of image links.
- Avoid generic text inside your links such as: learn more. Use more descriptive words instead, such as: Learn more about SEO best practices.
- If you are sending users outside your website always use the open in new tab setting.
9. Advanced Publishing Options
You can find some more publishing options in the Hosting tab of your Webflow dashboard.
- Enable SSL - SSL certificate for better security and SEO benefits
- Minify HTML / CSS / JS - minifying can help load your website faster
- Use Secure Frame Headers - protects your website from clickjacking attacks
10. SEO Tab in Webflow dashboard
There are several things that you can customize here.
Disable subdomain indexing
First of all, make sure you have disabled subdomain indexing. You can tell search engines which page to crawl by writing a robots.txt file and you can also prevent Google and other search engines from indexing your site’s webflow.io subdomain by disabling indexing. This will create a unique robots.txt only within the subdomain, directing search engines to ignore this domain.
Robots.txt
You can block search engines from crawling certain parts of your website, prevent duplicate content, and give search engines useful guidelines on how to better crawl your website by using the robots.txt file.
Auto-generate sitemap
You can enable the auto-generated sitemap here. The sitemap.xml of that project will be generated automatically by Webflow once you have done this. It will be updated each time you publish your website.
Global Canonical tag URL
Canonical tags are a way of telling the search engines that a specified URL is the master copy of a page. By specifying the "canonical" or "preferred" version of a page, duplicate content issues are prevented. This can be very useful for your SEO since search engines often penalize duplicate content.
11. Set up your Google Search Console
Setting up Google Search Console is the best way to make sure Google will crawl your new website.
How to do it:
- Add your site to the Google Search Console
- Paste your ID in your Webflow project settings
- Verify your site
- Submit your site to Google for indexing
- Submit your website's sitemap
12. Structured data - Schema.org
By including structured data on your site, you can help Google better understand the meaning of a page and help it improve search results.
Here are some examples of structured data that you can implement:
- Article
- Breadcrumbs
- FAQ
- Course
- Podcast
- Local business
- Logo
- ...
Great tutorial for setting up structured data in Webflow is in this tread.
13. Delete inside CSS and interactions
Make sure you clean up your CSS styles in Style Manager. This will allow your website to load faster.
The next step is to delete all unused interactions.
So, let's sum it up
Achieving high search engine rankings is a discipline all by itself, and there is a lot you can do to ensure your website is at the top. Webflow gives you easy access to the core SEO setting and provides the Audit panel that flags common accessibility-related issues so you can address them before publishing your site.
By following this guide, you will be able to further optimize your website so that you can begin ranking at the top. If you need assistance with your Webflow website, contact us!
