The world is an ever-changing place, and so is your website.
Sometimes, pages are no longer useful. Products go away. Content becomes irrelevant, and those pages just get deleted.
But links to those pages might still exist. They can exist;
- In Google’s search results, if your page has been indexed
- On other websites, who have linked to you
- In social media posts, email newsletters, etc. that you or others have posted
- In QR codes that have been printed
- In your visitor’s web browser bookmarks, history, and desktop shortcuts
If that page was ever popular, those links just might never go away.
So what are the best practices here?
When I remove a page or a CMS item from my site, I still want to maximize the value of that traffic, so I'd 301 it to the next-most-appropriate page. That might be a replacement or related product, or a category page. Or it might just be the homepage, or a contact us page. It might even be my search page.
We want to make certain that;
- Users get the best experience
- Google knows what to do with that page listing in its result pages ( aka SERPs )
- Your search engine rankings don’t suffer
Best Practices
In Webflow-hosted sites, we have two main tools to deal with removed pages;
- The 404 page, which will naturally appear when someone requests a page that does not exist. This includes a page or CMS item that has been marked Draft or Archived.
- 301 redirects, which are configured under hosting settings.
It might seem like there should be more. after all, HTTP also has 302 redirects, 307 redirects, and 410 GONE responses. Don't we need those too? In fact, we don't. Honestly, these two Webflow features give us everything that matters.
Here’s how to use them effectively.
Use your 301 Redirects
When you remove a page, make it a practice to add a 301 redirect. This is the smoothest and best experience for your customers, and it’s also the best experience for Googlebot.
- Your user gets the most relevant content, now.
- Google now knows that page is gone, and that requests should be directed somewhere else instead. Since your target page is already indexed by Google as well, those listings just get consolidated. Nice.
- External sites, bookmarks, social media posts, browser history, QR codes... will all still work. They’ll continue to take the user to the most relevant page possible.
Importantly, if you are hosting a website for a client, understand that they do not have access to these redirect settings through the editor- which means when they delete a CMS item, anything that was linking to that URL will now get a 404 page.
If this happens often, you might monitor your Analytics for 404 errors, and add those as 301 redirects on a regular basis to keep that experience clean. You could even set up a notification alert on your 404 page to alert you immediately. Log them to a Google Sheet, and you'll always know what people are trying to access, that no longer exists.
Make your 404 Page Useful
Rather than just notifying users that “hey! that page does not exist”, you can help your users find what they are looking for.
Depending on your site, you can;
- Show related products
- Show useful links like home, contact us, your products page and your search page
- Make searching easy by integrating it into your 404 page
On larger sites, I like to add a search field into my 404 page, and automatically populate it with a parsed URL. That way, if someone searches for /product/knitted-plant-holders and my client has removed that page, I'll present a search field with product knitted plant holders already in it, to make it easy for them to find the next most similar thing.
All they have to do is click search.
In some cases, where it makes sense, I'll even auto-search.
Make your 404 Page Context-Aware
You can take your 404 page to another level if you like.
When a user arrives on your 404 page, the URL they requested is still visible and is accessible in script. Since Webflow uses well structured URLs in collections, you can look at that URL to figure out what type of thing they were trying to find.
Were they trying to access a current real-estate property under /listings/? Ok, let’s 301 redirect them to current listings then.
Were they looking for a particular person under /agents/ that no longer works at the company? Or perhaps that agent got married, and changed their name. Whatever the case, let’s take them to our agent directory.
What, that /news/ article is gone now? Let's send them to the main news page.
Don’t Overcomplicate Things
Sometimes, devs and designers overthink this process, and worry about the distinctions between the different HTTP result codes;
- 301 Moved Permanently
- 302 Found
- 307 Temporary Redirect
- 400 Bad Request - aka Page Not Found
- 410 Gone
There are lots of options. In reality though, Google recognizes that even with all of this specificity, the web is not a tidy place where everyone follows the rules. And most publishing systems including Webflow don't offer this level of specificity.
Does it matter? Not one bit.
From Google's perspective there's very little difference between 404's and 410's. And neither affect your SEO directly. However, if you are delivering 404's on inbound site links from other sites, Google will remove that credibility from your score, which will ultimately reduce your pagerank.
This is why 301's are a better choice. They help preserve your pagerank, and can give your visitor something useful. It's simply a friendlier and more natural way to say "that page is gone now."
Getting Geeky
Tbh, I can’t think of any situation where I’d use this approach... but I am a geek, so I think about these things.
What if there were a legit situation where returning a 410 actually had value? How would I accomplish that while using Webflow's hosting?
Externally Hosted 410 Page
If you really need to deliver an alternative HTTP code like a 410, you can do that by 301 redirecting to an external page that returns that 410 response code.
Webflow’s 301 Redirects allow you to redirect to external pages, so you can set up a page on a hosted service like Netlify, which returns a 410 code, and simply redirect people there.
- Create a simple, branded page for your 410, that matches your site design
- Upload that to an external site... an Apache server, Netlify, Firebase... whatever
- Configure it to return a 410
- Setup a subdomain and assign a subdomain, for clean branding... like system.my-site.com
- Setup a 301 Redirect in Webflow, to redirect the pages you want there, e.g. to https://system.my-site.com/410
That gives you the ability to apply some branding and information to your page, rather than just dropping users on a dank gray page.
META http-equiv
Another approach for some search engines might be to use an http-equiv status- but in general I’d for
<meta http-equiv="Status" content="410 Gone"/>
I'm not certain how you'd imagine this working, because those pages would normally only be 410 Gone
Manually Removing Results
It's also important to remember that if you just want to manually remove your URLs from Google’s search results, you can do that directly through Search Console.