What Is Webflow?
Why Is SEO important?
Websites compete to get on the first page of Google search results. Google's algorithm ranks pages according to many different criteria--general interest being among the most important. The more websites link to a particular page of yours, the better your page ranks in the web results. That is a topic for a different time, though; here we want to focus on two other significant points, namely getting people to click on your link and having a clean structure for the user (and the search engine) to understand what the page is about.
Below is a list of 7 simple steps to start your journey into search engine optimization, beginning with a fresh Webflow project. While the pages generated by Webflow already rank great on Google, there are a few additional steps to understand and set up.
Checklist for starting out with a fresh Webflow page
One. Set up Webflow's SEO configuration
- The first step is to go to your dashboard, click on the three dots, and select settings. Finally, click on the SEO menu item.
- On the SEO page, make sure "Disable Webflow Subdomain Indexing" is set to YES. If you do not have your own domain yet, now would be the time to either buy a new one (see the Hosting menu item) or connect an existing domain.
- It also makes sense to add some items to robots.txt and remove pages that will never be landing pages. These pages will never be shown as a search result in Google. For example, I have added ecommerce pages, the error pages, the search result page, the newsletter result page, and an internal CMS page to the "ignore list" of robots.txt:
- Finally, make sure that you have the "Auto-generate Sitemap" activated. This helps search engines to discover all (and especially new) websites without much delay by providing them with a list of all the pages of your website.
Two. Complete missing tags
- Staying on the "SEO" page, enter the full URL of your website into the "Global Canonical Tag URL" field at the bottom (for example, for my website, I have entered "https://www.lode.de").
- Click on "Projects" and then on your project to switch to the design view.
- Press "p" for pages and go through the settings of each static page (click on the gearwheel).
- Scroll all the way down to "Custom Code" and copy the following code into the "Inside <head> tag" text field:
- Replace "yourdomain" with your domain (e.g., www.lode.de) and "slug" with the slug that was defined at the top ("General"), for example "contact" if you are working on your contact page (in my case, "https://www.lode.de/contact"). This ensures that each page will be found at exactly one place and prevents text duplication, something frowned upon by search engine algorithms.
- You can safely skip the "Utility pages" (or any other pages you have added to the robots.txt in the first step).
- Similarly, go through the settings of each CMS Collection page and Ecommerce page. For the collection pages, you have to use only the parent folder and add the slug variable separately by clicking "+ Add Field" and selecting "Slug." For example, for the project pages of this website, the entry looks like this:
Three. Define the intent of each page
- Usually, people differentiate between four different types of intent: informational, navigational, commercial, and transactional. For each website, pick one intent and possibly reorganize the contents of your pages accordingly.
- The idea of informational pages is to provide, as the name implies, information (or entertainment) to the visitor. Pages of this kind deal with educational material, describing how or what something is, or they rank items or provide checklists. While they might lead to a product or service you sell, that would be a link to another page.
- Next, navigational pages are about helping the user to find a particular part of your website. While those are superfluous on small websites, finding the right place is essential on larger sites. For example, someone might be looking for a manual of a device he bought, or a movie she wants to watch. Instead of browsing through your website, many people use their navigational intent and the brand name as starting points for their search.
- The goal of commercial pages, on the other hand, is preparing the visitor for a purchase. While commercial pages are similar to informational pages, they are tailored to finalize a purchasing decision (with words like "cheapest," "versus," etc. in the title).
- Finally, transactional pages are all about finalizing the purchase. The visitor wants a specific item and now looks for shops or service providers that have that item or service for sale. Again, adding words supporting that intent ("purchase," "buy," "deals," etc.) helps the visitor to make a decision about whether your page is the right one.
- For each page on your website, make a conscious choice in which of the four categories it falls. Each page needs to have a specific purpose. You need to ask yourself what the value of a particular page is for the visitor. Check out this article on semrush.com for a more detailed discussion of the topic.
Four. Add SEO titles
- Having figured out the intent for each page, let us adapt the titles shown on the website, in search engines, and when sharing something on social media.
- For each page, go to the page's settings and you will see the "Title Tag" entry as well as the "Open Graph Title." For simplicity, you can use "Same as SEO Title Tag" for the latter, although you might sometimes want two different titles.
- The "Open Graph Title" is shown when sharing the page on social media, while the "Title Tag" is the first line in the search results in Google.
- Depending on your intent, you might want to use two different phrases, especially because on social media, your title will be displayed alongside a picture and your aim is for the post to be shared. Meanwhile, on search engines, people are looking for a specific thing and your title has to address that inquiry.
- For CMS collection item pages, you can use fields from the collection to automatically create your SEO title. My recommendation is to instead have a separate SEO text field for each collection. This way, you can tailor each element of your website to the need of the user. Of course, for transactional pages you might want to go for a different approach, but especially blog posts benefit from this customization.
- To accomplish this, go to the settings of each CMS Collection and click "Add New Field" and select "Plain text." For the "Label" use "SEO Title" with a help text like "Corresponds to search intent. Contains target keywords. Consists of 15-40 (max 60) characters. Motivates users to go to the website. Triggers emotions. Informational, commercial, transactional. Step-by-step guide, Listicle, Comparison (e.g., ahrefs vs. moz), Review, or How-to guide. Needs a main selling point (price point, best laptops of 2022, ...)." Set 15 to 60 "Minimum/Maximum character count," leave Text field type as "Single Line," check the "This field is required" box, and press "Save Field."
- Finally, go to each collection page and "+ Add Field" for the "Title Tag" entry. Add "SEO Title" and the CMS entries are connected with what will be displayed in Google as search results.
- There is also a small tutorial for title tags on the webflow site itself.
Five. Add SEO description
- Similar to SEO titles, SEO descriptions are shown below the SEO titles in the Google search.
- For each page, again, enter a suitable SEO description text.
- Once finished, add again a new field ("SEO Description") to each CMS collection and use, for example, the help text "Is unique. Describes the specific page. Contains target keywords. Consists of 1-2 sentences (140-160 characters). Is not necessarily a sentence (may include price, manufacturer, .etc.). Target an emotion. Calls to action."
- Back in the page view, press "+ Add Field" of the "Meta description" item for each template and select "SEO Description".
- Again, if you think that the text in the search result needs to be different than the text below a shared social media post, edit the "Search description" field differently, maybe even create yet another field in the Collection to have separate texts for "Open Graph Description" and "Search Description."
Six. Fix images
- First, make sure images used on your website are not too large. You can use tools like GIMP to compress JPG images down to a quality of 70% without loss of visible quality of your larger images.
- For certain images like diagrams, a lossless format like SVG or PNG might be your first choice. If you need help, we provide services to optimize the images of your website.
- Make sure that each page has an image providing immediate visual information of what the page is generally about.
- Ideally, create separate versions of these images with an aspect ratio of 1.91:1 (for example, 1200px by 630px).
- For naming an image, ideally, have the file name describe roughly what the image is about. This helps finding them later and could possibly also improve your search engine rank. For example, I have renamed one of the image files I am using from "Shutterstock_758302255.jpg" to "man-standing-on-mountain-looking-into-the-distance_758302255-1200.jpg" which contains all the relevant information for later searches.
- Upload these pictures into your asset library (press j or click on "Assets" on the left) and copy their URL by clicking on the little gearwheel while hovering over the icon and then press the small copy symbol. The copied link should begin with something along the lines of "https://uploads-ssl.webflow.com/".
- Paste this URL into the "Open Graph Image URL" of the corresponding settings page and the image should show up in the preview above.
- Finally, for collection items, you can select an image directly if it is linked in the collection. It is up to you to decide if you create a separate image reference in the collection (with the 1.91:1 aspect ratio) or have external services crop your picture automatically.
- Congratulations, the pictures will now show up when sharing your page!
Seven. Clean up the structure of your pages
- Each page should be like a small book with (mini) chapters, sections, and a table of contents.
- The H1 heading should be the title of your page. Use it just once at the top.
- Use H2 and H3 as sections and subsections to organize your page. The logical structure of the page should be clear when scrolling quickly down.
- Make sure no heading level is skipped. For example, do not use H3 headings directly below H1 headings.
- Add a summary and possibly table of contents at the of the page.
- Have you noticed how you can sit for hours in front of YouTube or TikTok to watch "just one more video"? Make sure you never lose the reader on your pages and always provide suggestions for other articles to read at the end of each page.
That is of course only the beginning and there is plenty more to learn about SEO. These were just a few tips to clean up a default installation of Webflow. In the end, the key is great content, people linking to your website and sharing your articles and content. And don't forget video! More about that in a later post. If this post made you curious about Webflow, check out this link. If you are interested in working with us to improve your website, we provide editing and coaching services by chat or video.
I also recommend the "Introduction to SEO: Tactics and Strategy for Entrepreneurs" course on SkillShare (1 free month).
Know someone using WebFlow? Why not share this page with him or her? :)
Treat your website like a book. Organize it in chapters, sections, and subsections, and tell the reader what comes next when reaching the end of a page.