Homepages are hard.
It’s a high-stakes page because your homepage isthe most visible page on your website. For most companies, the homepage gets more traffic than any other page.
It’s a difficult page to design and write because it’sthe page for which you know the least about your visitor. The visitor hasn’t clicked anything yet, so we don’t know much about them. It’s also the page with the most diverse traffic sources and the most mysterious “direct” traffic.
Designing a homepage and writing the copy is one of the great digital marketing challenges and homepage best practices can be a big big help.
Let’s start with the big goals of every website homepage:
And of course, it needs to check all the other boxes:rank in search for the business category, load quickly, be mobile friendly, integrate with Analytics and other tools, comply with privacy laws, meet accessibility requirements, and be easily updated, be faithful with consistent brand messaging.
It has a lot of jobs to do.
To help your homepage be a better front door, here is a checklist of homepage best practices. This is our how-to guide for writing and designing an effective website homepage. Like all best practices, these aren’t rules.
Best practices are really just good hypotheses.Try them and measure the impact.
This is a framework for considering what to put on your homepage …and what to leave off. Here’s a visual diagram of all of the homepage design elements we’ll cover:
Here is a breakdown of each homepage design element with tips for each, from the top of the page to the bottom.
1. The company logo
We’ll start with the obvious. The logo goes in the top left (at least on93% of websites) or in the top center. Here are the few best practices for logo treatment:
Big logos add visual noise without actually enhancing the brand. The logo is obvious because of its placement in that key position in the top left, not because of its size. No need to shout.
A “lock-up logo” is a logo that includes the logomark and the business name together in one element. These also sometimes include a tagline. But the tagline in the logo image is often too small to be legible, especially on mobile devices.
Some websites add the logo to the hero area in an image so it appears a second time. Or in an image. Or in a video thumbnail. This kind of over-branded wastes space that could be used for other important things, such as telling the visitor what business you’re in.
2. Homepage headline
The headline is at the top of the visual hierarchy. It is the 6-10 word version of what the company does, formatted with the <h1> header tag.
The job of the header is to tell the visitor (and the search engine) where they are. Remember, the first question of every visitor to every web page is “Am I in the right place?”
If you’re a world-famous brand, you can use a clever tagline and everything will be fine. But for the rest of us, clear is better than clever. Don’t be vague and don’t use it for announcements. The homepage header is the 8-10 word version of what the company does.
ProTip: The Backyard BBQ Test
If I met you at a BBQ and asked you what you do for a living, and you replied with your homepage headline …would I know what you do? Or would I be totally confused? The best homepage headers pass this test.
This is a key place to indicate relevance to search engines, which means using the primary target keyphrase. Along with the <title> tag, the <h1> header is probably the most important piece of SEO real estate on your website. Using the target keyphrase should come naturally if you wrote a descriptive headline for the not-yet-brand-aware visitor.
3. Brief introduction
This is the short text that appears high on the page, sometimes right below the header, summarizing the value proposition of the business. Ideally, this text places the business squarely within a category (positioning) yet sets it apart (differentiation).
The trick is to do it all in just a few lines of text. Any longer and you have a blocky paragraph that visitors won’t read it.
If you were tempted to write a clever headline, this is the place to use those little gems. If you have a clever headline and descriptive intro paragraph, flip them. Results are better when the headlines are clear, but the copy is clever.
4. Call to Action (CTA)
Some visitors are ready to get in touch. This might be their tenth visit, right? When they’re ready, visually prominent calls to action give them a clear path forward.
For header CTAs, “Contact Us” is common.55% of B2B lead generation websites have “contact” in the top right. But consider using a stronger, more specific verb wherever you have room.
Inour guide on button design, we showed how specificity correlates with clickthrough rates.
Also, don’t assume that all of the homepage calls to action should bring the visitors to the contact form. It’s possible that the next step in the user experience should be a case study, a portfolio or a service page.
Your Google Analytics account will show you which pages correlate with conversion. Guiding visitors to these pages, rather than your contact form, may be better aligned with their needs and your results.
We asked an old friend and digital marketing pro for his input on homepage CTAs:
Justin Rondeau,Invisible PPC
“Your homepage isn’t a campaign landing page –you’ll cover multiple concepts, different offerings, different products, and link to multiple areas on your site. THAT’S OKAY. Unlike a landing page, your homepage shouldn’t have a 1:1 ratio in regards to your primary CTA and total links on the page.
Some folks will be ready to convert right away…those people click the button above the fold because you spoke clearly and directly to their needs. Others need a bit more of an understanding and will dig further.
One CTA type isn’t enough. People want to interact how they like to interact. Give them the option and you’ll see more opportunities coming from your homepage.“
5. Navigation menu
Next up is the navigation menu. Horizontal menus that collapse into a hamburger icon on mobile devices are standard and used by90% of marketing websites.
Just like the headline, your menu is at the top of the visual hierarchy. Most visitors will scan it almost immediately.
Here are two tips from a separate article aboutwebsite navigation best practices.
Vague navigation labels (services, products, solutions) aren’t super helpful to your visitors. But descriptive navigation labels tell the visitor where they are and tell the search engine what you do.
Little dropdowns create visual friction without much payback for the visitor. Big dropdowns (better known as mega menus) still have that bit of friction, but they offer so many options the UX benefits outweigh the cost.
6. Site search
This isn’t a homepage best practice because not all websites need a search tool. Our research finds that53% of websites have a site search tool.
Does your site need an internal search tool?
You only need a site search tool if you have a big site. It’s worth considering if you have 500+ of anything: pages, products, articles, resources or jobs.
If you have descriptive and clear navigation labels, visitors will click or tap. Visitors generally prefer to use the mouse rather than the keyboard.
Are your visitors using your site search tool?
If you have one, you’ll know if it’s useful to visitors by checking Analytics. There is a built-in event in GA4 calledview_search_results. Filter for it in the Events report and you’ll see if visitors are using your search tool.
Recommended by LinkedIn
If they using it, you can do somesite search analysis, which is like using cheat codes for digital marketers
How to add site search to your website?
When it appears in the header, it’s not just on the homepage. It’s a “global element” which means it’s on every page.
Site search tools are added to headers in one of two ways.
Not very obvious, they add very little visual noise, and they have lower engagement levels. Appropriate for sites when most visitors don’t need to search.
Very obvious, takes more space and often has higher engagement levels. Appropriate when searching is one of the primary ways that visitors interact with the website.
Use the first option unless you have high confidence (or strong evidence) that visitors really want to search.
7. Hero image/video
Usually, but not always, there will be an image or video in the featured area at the top of the homepage. This is the largest visual element. It is in the highest position. It is on the most popular page. So it has a big impact on their impression of the website and the brand.
Here are a few recommendations.
Some visuals are very slick but could be used by a million different companies. They don’t relate to your company specifically. The ideal homepage hero is specific to you.
A basic product shot doesn’t tell a story. If possible, show the product in use. When an ecommerce homepage shows the product in context, it lets the visitor know the why, not just the what.
People tend to look where other people look. On a homepage, that means visitors may tend to look in the direction that the people in your images look. So use the trick that magazine photo editors have known for decades and use pictures of people whose eyes look toward the headline or call to action.
Movement is very powerful. A looping background video in the hero area can make a homepage more compelling. Just make sure it isn’t distracting from the message or pull attention away from other important elements. If the video hurts the legibility of text or CTAs, screen it back with an overlay.
Bad ideas for the hero area:
Theresearch is clear: sliders hide information. If it’s not on the first slide, it’s going to have ultra-low engagement. So rather than try to do four things in the hero area on four different slides, make the tough decision and pick one.
The exception is the image gallery. If the brand does something very visual (architects, for example) then the homepage featured area may make a nice gallery. In this case, the slides aren’t different topics, they’re just different examples.
Tempted to use the hero to make an announcement? To showcase that product launch? Your upcoming webinar? Don’t do it. This isn’t the place for that. It can reduce clarity for visitors and your rankings in search engines.
Imagine replacing the sign on the front of your building with a press release headline. Passerbys might not know what you do.
8. Visual evidence
Below the hero area but above the fold, you should have a little room. You can use this space to build trust by adding evidence. Add a few visuals to show that your brand is legitimate.
These are often called “trust seals” and they leverage thehalo effect, a cognitive bias built into your visitors’ brains. Any positive impression the visitor has of the brands in your trust seals magically transfers to your brand.
Beyond trust, these logos also differentiate your brand. You’re different because your competitors don’t have those same trust seals. Look at your site and ask this question:
Could a startup born yesterday make this same homepage?
No, not if you put a bit of visual evidence above the fold. Those logos set you apart. You’ve differentiated.
We’ll set ourselves apart even more in 11, 14 and 15 below.
A note about “The Fold” on the homepage
We put a lot of emphasis on above the fold homepage elements because elements high on the page are high stakes. Visitors here are less likely to scroll than visitors on other pages because homepage visitors often want to navigate deeper right away.
The majority of homepage visitors don’t scroll, at least according to our research on B2B marketing websites.
Confirm this for yourself in your own Analytics. In GA4, Unique user scrolls is a metric. You can add it, along with Users, to the Pages and Screens report. Divide one from the other and you’ll have the scroll rate for your own homepage. It’s likely lower than your other pages.
So work hard on your above-the-fold content on your homepage and it will work hard for you!
But don’t cram everything above the fold. And don’t neglect the rest of the page. Even if only 5% of your homepage visitors scroll, that’s thousands of people over time. Why give a dead end to thousands of your potential customers who are asking for more information?
So let’s move down past the fold…
9. Meaningful subheads
As the visitor starts to flow down the page, the subheads are there to help guide their eyes. But these guideposts aren’t helpful if they don’t say anything.
Websites everywhere waste space with bland and obvious words, in large text, all over the place. But it doesn’t take more time, money or effort to write something useful.
It helps guide the visitor through the page. It also helps indicate relevance to the search engine. Keep this in mind next time you browse around your own website:
Every vague subhead is a missed keyword opportunity.
The homepage is critical SEO real estate. More about search engine optimization below.
10. The copy: Questions answered and objections addressed
Although this is just one of our 20 homepage best practices, it’s really the most important thing on any marketing webpage.
Your visitor has questions. That’s why they’re here. They want to qualify (or disqualify) you as a possible option.
It’s the job of the page to anticipate their questions and provide the best answers. Those answers should be roughly ordered based on their priorities. The copy guides them through the messages, just as if they’re having a conversation with a sales rep.
The best homepages emulate a conversation with the top sales rep.
So it’s not just what you want to say, it’s what they need to hear, even if that means they disqualify you as a potential fit. You don’t want unqualified leads anyway, right?
This is the key to conversion copywriting. The visual hierarchy aligns with the messaging priority based on the visitor’s likely questions and your best, most direct answers.
So the key is empathy, which comes from research, which is usually a bunch of interviews. In the end, you know the true story in the life of this visitor.
It’s impossible to build a high-converting page without this information. But with this information, copywriting flows naturally. The website feels intuitive.
Yes, brand voice and storytelling are important, but they’re optional.
Clarity is critical.
There are 10 more best practices on the checklist! Plus, 5 things that shouldn't appear on homepages. Ready for the rest?
