In this article, we will focus on the website Hero Section
What is a Hero Section?
A hero section is the first section of a website that makes the “first impression”.
First impressions are really important, and if we get the Hero Section right, it goes a long way in our marketing.
The Hero section is where we will try to get the website to pass what we call “the grunt test”.
The grunt test means someone can quickly look at your hero section, and then look away, and actually tell you what you do and what main benefit they’d receive.
When someone looks at your hero section for 5 seconds, and then looks away, they should be able to say:
Who is this business?
What does this business do?
Where are they or who do they help?
What’s the main benefit a customer receives.
It’s really hard to craft messaging that’s concise enough to immediately leave the user with a clear understanding, while also sharing they’re in the right spot and that their life is about to get better.
The hero also contains the first and largest heading, sub heading, text and image for the website, so it has additional importance for search engine optimization.
The hero section makes the first impression, and Google knows that.
Hero sections and their headings play a vital role in a website’s ability to rank in search engines for important keywords.
Here at Feedbackwrench, we believe that the HERO section of every website, and every page, should create absolute clarity in a concise manner while making a great first impression.
Clarity & a Great First Impression.
It’s really difficult to craft compelling messaging that concisely conveys who the business is, what they do and what the main benefit a customer receives.
To be clear means you cannot be complete.
We need to relentlessly pursue clarity and brevity so that the hero can quickly convey precisely who, what and why - and possibly where.
Not only that, but the image, branding, typography and mobile responsiveness is also vitally important to the success of this first impression.
Pieces of the Hero Section::
1 - Top Title 2 - Hero Title 3 - Hero Description 4 - CTA Buttons 5 - Hero Image 6 - Google/Customer Reviews
We think a great hero has a top title that uses smaller typography, immediately followed by the hero title which uses the largest heading typography, which is immediately followed by a hero description using a mid-sized typography.
We’re also firm believers that a phone call & a take action button should be prominently displayed in the Hero section, which will help nudge people to clearly understand what they need to do in order to get started.
Buttons help convey the action they must take, which is why we call them the “CTA” or “call to action.
We also really like to show the Google reviews or customer reviews as a badge in the hero, because it conveys credibility and helps build trust.
After the hero section, we will have what we call the “one liner” section, where we can use a paragraph to frame up exactly what we do.
The hero section and the one-liner section are the most essential parts of the website.
Let’s talk about the various pieces of the Hero Section, starting with the Top Title.
I’m going to talk about the top title in the hero, but also teach you about core commercial search keywords, search intent and search engine optimization.
The top title uses a smaller font, is usually a bright accent color, and lies atop the hero title.
It is a subtle title, and because of the smaller font size, it’s a place where we can put some longer text without crowding the overall hero section.
We use the top title for the core commercial keyword or search query.
It’s worth noting that when it comes to communicating to Google, the first H1 title has high importance.
We want our most important keyword to be used in the:
A - Meta Title. B - Meta Description. C - First H1 Title on the page D - Early and Often in the first 200 words of the website. E - In the Image Descriptions
While the Top Title is small, it’s actually marked up as an H1 on most of our websites, so that it can be the first H1 on the page, and convey to Google what’s most important.
Our top title allows us to place our core commercial keywords first, so that the Google Web Crawler can know that it’s of top importance, and hopefully help us rank higher in the search engines for that keyword.
The problem with core commercial keyword titles is that they are usually not the best sales copywriting, and these keyword titles shouldn’t be used in the larger headings.
Most SEO companies will take the primary hero title and hero description, and cram it full of SEO keywords.
Cramming SEO keywords into primary titles & messaging is sloppy and doesn’t help customers.
Keyword stuffing or unnaturally cramming keywords into the language creates messaging that is robotic, unnatural and it looks tacky.
Therefore, here at Feedbackwrench, we tend to put our core, most important keyword title, in the smaller “top title” of the hero, and throughout the website.
Quick Overview on Core Commercial Keywords:
I also want to explain what a core commercial keyword is.
Each service, industry and location has what we call “Core commercial keywords”.
What is a “core commercial keyword” or search query?
The core commercial keyword is the “bottom of the funnel”, “take action” keyword or search query that people use when they ready to buy or find a solution,
The core commercial keywords are the “purchasing” keywords.
They’re the words you would only use when it’s time to find a solution.
Core Commercial Keyword = Search with intent to buy.
We want to use our SEO tools, ingenuity, common sense, and group exercises to identify the most important core commercial keywords, as well as others that might be of importance to other service pages, location pages or blogs.
Here are 5 Facts about the Core Commercial Keyword:
It’s the clearest query you’d use to make a purchase
It Has the highest search volume according to our tools
It triggers search engine result pages that matter to us
It’s usually broad based, not niche specific
It’s usually is the name of the service, or the keywords you’d search to find a solution.
Here are some examples of various core commercial keywords:
Top Accounting & Tax SEO Core Commercial Keywords:
CPA Near me Bookkeeping services Business Accountants Tax Accountants near me Accounting services Small business accounting services Bookkeepers near me CPA firms near me Business CPA near me Business accountants Accountants near XYZ location
Landscaping Contractor SEO Core Commercial Keywords:
Landscaping near me Landscaping companies Landscapers near me Exterior patio companies Deck companies Deck contractors Paver patio company near me
Remodeling Contractors Remodelers near me Kitchen Remodeling Companies Kitchen Remodelers near me General Contractors near me Builders near me Renovation companies near me Basement contractors Home Addition contractors
The core commercial keyword usually has variants and it has potential modifiers
The most important thing to understand about the core commercial keyword is that It’s all about intent.
The core commercial keywords are loaded with intentions.
You only make these searches if you’re looking to actually buy, or find a provider or a solution.
These queries show intention, but they don’t make fantastic sales copywriting.
We need to write primarily for people, and then sprinkle in these core commercial keywords and queries.
If you don’t optimize your page for the core commercial keyword, it’s get your website or page to rank in Google, Bing or other search engines.
We want to consider and develop an understanding of what people would search when they intend to find a solution or buy, so that we can sprinkle these messages throughout the website.
We also want to ensure that our website is optimized to not only rank, but to serve as a concierge & guide for users with those intentions.
When you start to write, you should develop the core customer messaging, and then we’ll find ways to optimize it for the core commercial keywords
Before you write the Hero Section:
Know the core benefits.
Understand the intent of a searcher.
Know the core commercial keywords.
While we need to sprinkle in the core commercial keywords, these keywords are usually NOT very good copywriting and appear spammy.
Our website messaging and copywriting needs to connect with people, convey value, and move people to actually take a step, but it also needs a little bit of “keyword Seasoning” on it.
If we place a ton of keywords all over the website, people will be repelled.
We want compelling, customer-focused messaging throughout the website.
The messaging in the top fold of the website, or the upper 25%, needs to be crystal clear, very concise and focused.
Top fold messaging = Clear, Concise & Focused.
As we head down the page, we can have “off-ramps” for people to get more complete information, and then we can use interactive sections to answer more questions, hit on more topics and use our keywords more often.
But in the top fold, it’s all about clarity.
Balancing SEO With Clarity of Messaging
The problem is that the first H1 titles in a website are also VITAL to Google, Bing & Search Engines.
We really “Need” to put the core commercial keyword up on the top of the page, right where it could appear spammy.
We want our most important core commercial keyword to be the first thing Google sees.
Here at Feedbackwrench, we utilize our “Top Titles” for our core commercial keywords or queries.
We add top titles into many sections of the website so that we can elegantly sprinkle in the various core commercial keywords.
So, while the top title is small, it services a very important role in our hero section, and throughout our entire website.
Let’s move on to the other parts of the website hero section:
2 - The Hero Title: The largest & Most Important Heading
What is a hero title? It is the primary heading for the hero section of the website.
This is the clearest, most important text on the entire page.
The challenge here is to utilize it to either bring utter clarity as to what the company is about, or to bring up the one, primary benefit a customer will experience.
Hero title = the core benefit or clear label.
Hero Titles should either be a hyper concise statement of a benefit, or a label of what the company is all about.
Let me show you some examples:
“Never Overpay in Tax & Get Pristine Bookkeeping” is a benefit version of the hero title. “Small Business Tax & Accounting” is a title version of the header.
The Hero Title and the following Hero Description, will work together to clearly convey who the business is, what you do, and what benefit they’ll receive.
What you do, what benefit someone will experience when they choose you.
Psychologically speaking, it should probably be a benefit statement, but it’s equally important for people to instantly understand what they’re looking at.
People won’t listen more, read more, or give you another thought if you don’t instantly confirm they’re in the right place. This is why I will often use the hero title as more of a label.
In fact, the more complex the value proposition or benefit is, the more tempted I am to use the hero description, with it’s smaller typography, to unbox the benefit, and leave the heading to be more of a concise label.
I can go either way on this, but what I do know is that the hero title and description ought to work together to convey it all:
Hero Title & Description Must Convey:
Who is the business
What do they do?
What benefit are they delivering?
Who do do they serve/where are they.
Some marketers say that every word should be moving a person and building tension or value, but I’m a believer that sometimes what the user might need is a simple label of what they’re looking at.
Clarity trumps everything, and I’ve seen fantastic results from HERO sections where the hero title is more of a label of what the business does, rather than some compelling statement.
You’ll need to balance “labeling” with “the benefit” messaging between the hero title and hero description - and you’ll want to consider what happens as it goes down to the mobile version of the site as well.
Examples of BENEFIT FOCUSED HERO TITLES:
“Get Lowered Taxes & Pristine Financials”
“Audit Proof Yourself While Lowering Taxes”
“Get Peace of Mind Your Taxes are Done to Perfection”
“Outsource to Us & Avoid Hiring Unnecessary Staff”
“Dramatically Reduce Your Business Taxes”
“Never Waste Resources or Time Doing Your Own Bookkeeping”
“Fall in Love With Your Home Again”
“Get the Most out of Family Time in Your Backyard”
“Feel Great About Your Home Every Day”
“Love the Last Season of Life as Much as the First” -
Developing the Main Benefit Messaging:
Let’s quickly talk about where you’d get this information about the core customer benefit or “value proposition” or core focus.
In order for you to write a core benefit statement, you need to have done the hard work of figuring out more about the customer.
We need to actually know the main benefit in order to write these types of statements.
Crafting core benefit messaging should happen only after working through the brandscripting process.
Benefit language requires you to identify one core benefit, and make sure that it’s based upon what the customer values, how they feel about the purchase and their own fears, desires, perception and requirements.
Our customers, the businesses we’re writing for, need to do the hard work to identify what’s really important to their customers.
Not all companies truly understand what their customer values, even if they’re delivering what the customer wants.
Many companies are great at delivering value, but they’re not equipped to give words to what they’re actually doing and what the customer values.
We would want to work with our customer during our kickoff meetings to ask the following questions:
Questions to Uncover Core Value Proposition Messaging:
What’s valuable to the customer? (What makes them pay for premium, or the solution in general?)
Why does their customer want the solution? (Why do they even want the service or solution)
What does the customer want, or what might they want, in the provider they choose? (What do customers say, or cast vision for what customers want)
How does the solution make the customer’s life better? (what lifestyle benefits does the customer get?)
What does it look like when THEIR company does the solution? (Core brand differentiators)
Teach the Customer - What are the hallmarks of a job done right? (What does excellence look like? What outcomes or indicators would a customer see?)
What are some of the hallmarks that you’ve used a bad provider? (What are the stakes, or what might happen if you choose a bad provider or solution?)
How does the solution transform the life of the customer? (Where are they stuck? What does the “There” look like?)
What might a customer dislike about a bad provider when delivering the solution? (what should they be wary of?)
How does the provider work to deliver the solution in a manner that the customer likes? (the process of providing the solution)
In other words, in order to write good benefits statements, you should have a deep understanding of the dynamic at play between the customer, the competitors and the provider.
The next part of the Hero is the Hero Description, and this is obviously tied to what I just said.
3 - The Hero Description
The hero description is right underneath the hero title, right above the Google review badge.
Together a hero title and hero description should clearly and concisely convey:
Who is the business?
What does this business do?
What’s the main benefit they deliver?
Where do they do it / who do they specialize in serving?
Under the Hero Title is the Hero Description. It’s usually regular text, about 50% the size of the hero title.
What should your hero description say?
Well, if your hero title was a label, then it should be the core benefit.
If your hero title was a benefit, it should be more of a label of who you are, what you do and where you do it. .
You really want the two together to provide a bottom line, ultra clear and concise understanding:
Who You Are: What you do: Where You Are / Who You Serve: What’s the Main Benefit:
The main thing you have to do is fight the tendency to be complete, and force yourself to be concise.
It’s really hard to be concise, especially for businesses that might have 3-5 various services or keywords, such as CPA that could hit on bookkeeping, tax planning, CFO services, advisory and payroll.
It’s true that the customer might have come to the page from a search about any of those various services, but just stick with most top-level, highest volume, highest value category as possible.
In the following example, the parent category is tax accountant or CPA.
While the other services are children, such as bookkeeping, payroll, advisory and CFO.
We will use service pages, landing pages, blogs and other pieces of content to nail every possible core commercial keyword possible, but we will need to keep with the most valuable, core focus one in the HERO.
3.1 - The Hero Image:
The hero image is meant to connect, create clarity, and help us in our goal to pass the grunt test all while making a great first impression.
Images of smiling customers, photos of the city/location or even images of the team are all good options here.
Each business has a different tone with it’s imagery, and there needs to be a balance of showing happy customers, excellent projects, authentic images of your team and photos that convey your locality.
Images are really important and will have their own section in our guide.
Some would argue, such as Donald Miller, that it’s really hard to beat a smiling photo of a happy customer in the hero.
While I agree with that, the formality, tone and overall branding needs to be taken into consideration.
Examples of Good Hero Images:
Photo of Projects you’ve completed
A happy customer
A stock photo of a happy customer
Photos of your team.
Photos of YOU
Photos of your city, location etc.
Consider Responsive Design
I’ll end with this - the mobile responsiveness of our websites is critically important.
Our hero section needs to make a fantastic first impression on mobile, desktop and even Ipad / tablet.
Make sure that you test the mobile versions of your headers, sub headers, images and color schemes, to make sure that they are clear, concise and compelling at each breakpoint.
NEXT - The One Liner.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
Free Guides & Blog Categories
We invest heavily in helpful content that helps small businesses owners.