19 Checks Before Launching on Webflow (With Simple SEO Best Practices)
Launching a website on Webflow can be terrifying, especially your first time. Plenty can go wrong, including things you may never have heard of.
When you finish a design, you'll want to publish immediately. Don't. There are a few things you should be absolutely sure of before the world sees it.
So here's a checklist of 19 items to knock out before you hit publish. If you're a business owner who uses Webflow, or a designer in the early stages of an illustrious career, this is for you.
1. The website should probably function correctly
Getting a website to work properly is all fun and games until it's actually live on the web. It's easy to rush certain areas when you're on a tight deadline, or you just can't stop your finger from clicking publish.
Check off 2 through 5 to make sure you're at least ready to impress your grandma:
- 2. Do your buttons and links go to the correct pages?
- 3. Are your forms delivering information to the proper email recipient?
- 4. Can anyone who arrives clearly tell what your website is about?
- 5. Run Google's PageSpeed Insights for an official snapshot of your loading times. If you're in the red, you've got trouble.
Webflow is buggy sometimes
As much as I hate to admit it, live websites often look slightly different on the web than they do in the Webflow Designer. You've triple-checked flexbox alignments, dialed in pixel-perfect margins, and mastered font heights, and it can still come out looking rough.
Webflow has been called a beast, and the most minuscule style or behavioral effect can leave your site looking out of whack. I've seen it bug out completely on several occasions after looking perfect in preview mode. Be tireless when it comes to testing and you'll find most errors.
6. Test your UX on a staging domain
Publish to a staging domain (like webflow.io) and make sure the site works on every device you own.
Test every time you publish. It saves you embarrassing client questions like "Why is a picture of your grandma and her bulldog on my website? And did you mean to put 'Fortnite infinite V Bucks glitch' on my homepage?"
7. Eliminate any unintended sideways scroll
Especially on mobile. You can usually fix horizontal scroll by setting overflow to hidden and giving every section a max width of 100vw.
8. Does clicking your logo take you home?
This is a near-universal user interaction, and it improves UX through plain convenience. Your logo should be clickable.
9. Test your mobile navigation setup
Does the hamburger menu interaction work properly when tapped?
A disclaimer: some things can wait a few days. Publishing before your design is airtight is one of those things.
10. Choose a custom domain carefully
Unless you're building a fictional business website, you or your client will want a custom domain. It signals officiality and security to your audience.
Having yourbusinessname.com feels special, and it costs money. GoDaddy sells custom .coms for $12 a year. Ever wonder what those edgy Danica Patrick commercials in the 2010s were about? Custom domains.
Shorter, more common words and phrases can cost hundreds or thousands of dollars in URL form. So be unique with your name. It'll be easier on your wallet.
Remember: your brand name is only as strong as your offering. There's no need to spend thousands on a domain for some product idea you and your drunk uncle came up with last Friday.
Domain naming is strategic
Think long and hard about what you want your domain to be. It matters for reasons few people realize:
- Your URL can help your SEO. Keep it simple and focused on your offering or brand name. Avoid "the" and other unnecessary article words.
- The words in your .com should run together and look smooth in all lowercase, because that's how they'll appear in the address bar.
- Repeated or tripled letters confuse people. If a customer looking for goodnessstore.com types goodnesstore, they may never find you. That's money out of your pocket.
Small business disclaimer
Don't get nickel and dimed while buying your domain. You need the domain name and access to the Domain Naming Service. In my experience, the extra "security features" are unnecessary, unless you're running some top secret cybersecurity start-up.
11. Host your website
Most websites need a server host to stay accessible 24/7. Ask someone smarter than me (easy to find) if you need the deep details.
I use Webflow to host my own site. They offer free hosting for beginners and small two-page projects, which is great when you're starting out: you can publish as many webflow.io practice sites as you like without spending a dime.
The catch with free hosting is that your site lives on a .webflow.io domain instead of a .com.
Clients love buying .coms
No client wants a webflow.io domain. Get used to explaining that hosting a custom domain on Webflow costs at least $14 a month (about $179 a year), and that paying yearly is roughly 12% cheaper. While you're at it, walk them through choosing a domain name.
12. Properly configure DNS records
DNS (Domain Naming Service) records are silly little records that come with hosting a custom domain, and you need to configure them to use one in Webflow.
Every domain registrar has a "Manage DNS" or "Manage Records" tab somewhere; find it. GoDaddy is the most straightforward provider for accessing and changing DNS records, if you can navigate the nickel and diming. Square is fine too. WHOIS feels a bit outdated.
Configuring DNS might look like Spanish the first few times. DNS sometimes looks foreign to me, and I've been speaking Spanish for 8 years. The safest route is to follow Webflow's video for GoDaddy domains step by step and do exactly what they say.
Every Webflow site should automatically get an SSL certificate once DNS is configured properly. Going live can take several days, sometimes up to a week with certain providers.
Quick checkpoint. So far we've tested the site on a staging domain and run PageSpeed Insights, chosen a user-friendly and easy-to-read domain name, and bought a hosting plan and linked a custom domain by configuring DNS properly.
13. Link form submissions to the correct email
This step is big, and it gets tucked away in the whirlwind of publishing a project.
Before publishing any website for yourself or a client, head to Webflow Project Settings > Forms and confirm every form is linked and delivering to the right email. If you don't have an email you regularly check for Webflow submissions, you may not catch this error for a regrettably long time.
Name your form fields intuitively so your client can see exactly what category of information they're receiving. Fields can behave strangely if they aren't set to the right information type.
Conversion rate optimization
While we're on forms: consider whether your site is optimized for conversion. That means guiding the user gently down the funnel, right to the call to action. Place CTAs and forms at the end of your site, or right after the section you think is most convincing.
14. Title tags, meta descriptions, and URL slugs
These are non-negotiable if you want your pages to have a prayer of getting clicked in search results. A title tag is the title of your page, and it appears in Google search.
Title tags are commonly optimized for click-through rate (clicks divided by impressions). If yours is weak or generic, you'll see a lower percentage of clicks per impression and miss out on leads. Craft a nifty one under about 70 characters that highlights a unique aspect of your business.
The meta description accompanies your title tag in your Google search result. Google sometimes auto-fills it based on your page content, and it's hard to tell when. Write a simple one that stays under the limit so it doesn't get cut off with a "...".
URL slugs are like the slimy, forgettable organisms you put on the end of a fishing line. They come after your top-level domain, like organicallyseo.com/webflow-maintenance. SEO data suggests that simple slugs containing the page's target keyword send positive signals to search engines.
15. Decide on a keyword or user-focused H1
There's a lot of noise surrounding H1 tags and SEO headings. Through all the jargon, the takeaway is that the H1 is the jugular when it comes to telling Google what your page is about, so Google can show it to other people.
If title tags are your communication with users, headings are your beacons to search engines. Some people claim your H1 should match your title tag exactly. I find that unrealistic, since they serve different purposes.
Your H1s, H2s, and H3s should contain researched keywords you've identified as having volume. And your H1 is the first thing a visitor sees when they arrive, so be compelling. Design daringly.
Second checkpoint. By now we've also linked form submissions to the site's admin and crafted title tags, H1s, meta descriptions, and URL slugs on every page that could show up in search results.
16. Accessibility, contrast, and stuff
Consider all audiences when creating a website. Proper contrast and color hues are essential to including people with visual impairments and astigmatism.
Coolors.co has a contrast checker and a blindness simulator to make sure your content is legible to everyone. You can find your complementary colors there as well.
17. Sitemap and robots.txt
Every website should have a sitemap and a robots.txt. Webflow has a checkbox that generates the sitemap for you: navigate to Project Settings > SEO tab, find the checkbox, and check it. You may have to set up the robots file manually.
18. Set up Google Search Console and Analytics
Set up Google Search Console immediately after your site goes live. It's a free tool for monitoring organic traffic and keywords. To verify, go to Project Settings > Custom Code > Before Body, paste the snippet Google gives you, and publish.
Google Analytics works the same way. Go to Admin > Tracking > Tag installation and paste that code on a new line. Voila.
19. Internal linking, orphan pages, OpenGraph
Proper internal linking is one of the most important SEO practices. It means every page you'd want a user to see is reachable through links from other pages.
Orphan pages are pages with zero incoming internal links. They're bad practice for SEO because your stronger pages can't pass any value to an orphan without a link. Make sure every page on your site has at least one link from another page on your site.
If you're interested in blogging and getting others to share your content, edit your OpenGraph thumbnails so your links look right when shared.
TLDR
Going the extra mile on these checks is a great way to get your site out of the gates. If your pages are well-crafted, technically sound, and your launch goes without a hitch, you may be well on your way to warm sands.
Thanks for making it to the end. Share this with a friend, or with the intern who's desperately trying to understand Webflow for you.