The First Five

Homepage Copy Hierarchy

← Back to course

Design Your Homepage as a Conversation

And like any good conversation, the order you say things determines whether people keep listening.

Most homepages are built backwards. People start with what they think sounds impressive and work down from there. They put the logo, then the tagline they love, then a photo, then some copy they wrote at midnight and never revised. Then they wonder why the site doesn't convert.

Copy hierarchy is the fix. It is the sequence of information that moves a visitor from I just landed here to I need to reach out. Get the sequence right and your page does the work for you.

The Hero Section: Your First Impression Has to Do a Lot

The hero section is the very top of your homepage. Everything visible before someone scrolls. This is your prime real estate and most people waste it.

A strong hero section has four elements working together:

  • Your H1: the headline that earns the next five seconds
  • A supporting line: one or two sentences that expand on the H1 (this is often your first H2)
  • A visual : a photo, graphic or video that reinforces the feeling of the page. Real beats stock every time.
  • Your primary CTA: the one action you want them to take, placed before they scroll

All four of these elements need to work as a unit. The visual should not contradict the headline. The CTA should not feel disconnected from the copy above it. When the hero section is aligned, visitors feel it immediately, even if they cannot name what they are responding to.

If someone closes your tab after only seeing the hero, they should still know exactly who you are, who you serve and what to do next. That is the bar.

The H1: One Sentence That Earns the Next Five Seconds

Your H1 is the first line of text a visitor reads. It has one job: make them stay.

It should work with your H2 to answer Questions 1 and 2 from the first lesson. Not your business name. Not a tagline you love for sentimental reasons. The actual thing your ideal customer needs to hear the moment they land.

One H1 per page. Every time.

This is a rule, not a suggestion.

Every page on your website gets exactly one H1. One. Your homepage has one H1. Your About page has one H1. Your Services page has one H1.

The H1 is the most important heading on the page — for visitors and for search engines. Search engines use it to understand what a page is about. When you have two H1s, that signal gets muddied and you lose ranking power you worked for.

Below your H1, you can use as many H2s and H3s as the page needs. H2s are your major section headings — the big beats of the page. H3s are supporting points within those sections. Think of it like an outline:

  • H1 — the main idea of the entire page (one only)
  • H2 — major sections that support the main idea (as many as needed)
  • H3 — sub-points within each section (as many as needed)
  • Body copy — the actual conversation

Getting this right also matters for SEO (Search Engine Optimization), and we touch on it in Module 4. For now, the rule is simple: one H1, then build down from there.

The H1 formula:

[What you do] + [Who it's for] + [The shift it creates]

You do not need all three in every H1. But all three should be somewhere in the first sentence or two. Here is the difference in action:

Weak H1: Creative strategy for brands that want to grow.

Stronger H1: I help indie musicians look like the headliner before they are one.

The second version names a person, names their situation and names the transformation. Someone lands on that page and immediately thinks — that's me — or — that's not me. Both outcomes are good. You want the right people to stay and the wrong people to self-select out fast.

Write your H1 before you write anything else on this page. Everything below it flows from that line.

The H2: Expand the Hook, Confirm the Fit

Your H2 is the first supporting beat. It expands the H1 without repeating it.

If the H1 makes them feel seen, the H2 tells them specifically what is on offer and confirms they are in the right place.

What a strong H2 does:

  • Names the type of work or service
  • Reinforces who it serves
  • Bridges the gap between the H1 hook and the detail below

Weak H2: We offer a range of services for businesses at every stage.

Stronger H2: Brand strategy and website consulting for indie brands that are done being overlooked.

One sentence. Clear. No hedging. No trying to please everyone.

Body Copy: How It Works and Why They Should Care

This is where you go deeper. Not into your entire backstory, into the problem and the solution.

The body copy beneath your hero section should move through this sequence:

  1. Name the problem they have right now. Not the problem you solve in the abstract. The specific, lived experience. The thing keeping them up. The feeling they walked in with.
  2. Name what is possible on the other side. Not features. Outcomes. What does their life or business look like when this is resolved?
  3. Briefly explain how you get them there. Three steps is the sweet spot. More than that and people stop reading.

Keep paragraphs short. Two to four sentences max. If a paragraph runs longer than that, break it up. People are skimming. Short blocks survive the skim. Long blocks get skipped.

CTA Placement: Where and What

A homepage needs more than one CTA. But it needs one primary CTA that appears before the fold, before someone has to scroll, and at least once more near the bottom of the page.

Before the fold: Book a call. Join the list. Get the course. One action, stated plainly.

At the bottom: A second pass at the same CTA or a softer version for people who are close but not quite there yet.

What to avoid:

  • Two different primary CTAs competing for attention
  • CTAs that are vague (Learn More, Click Here)
  • Burying your CTA halfway down the page with no lead-up

Button copy should be active. It should sound like something a real person would say, not a corporate directive. Book a call beats Submit. Get started beats Click here. Let's build beats all of it in the right context.

Visual Hierarchy Without Being a Designer

You do not need to know design to understand hierarchy. You just need to know that size and weight communicate importance.

H1 is the biggest and there's only one H1 per page (if you add more, you'll confuse Google). H2 is next. H3 is supporting detail. Body copy is where the actual conversation happens.

Visitors scan in an F-pattern — left to right across the top, then down the left side. The things that sit at the top left of your page carry the most weight. That is where your most important message goes.

When in doubt: big idea up top, proof and detail below, action at the end.

Your Action Step

Take what you wrote in the Five Core Questions lesson and map it to this hierarchy.

  • Your H1 and H2 work as a unit to answer Question 1 and Question 2. The H1 leads with the big idea. The H2 expands with the transformation and confirms who it's for. You do not have to cram all three elements into the H1 alone — spread them across the hero section and let them build on each other.
  • Your body copy builds the case and moves toward trust
  • Your CTA is Question 3 made obvious

Do not write perfect copy yet. Write the bones. Get the sequence down. You will refine everything in the next lesson when we go into the full Homepage Copy Framework.

That is where it all comes together.

Next up: The Homepage Copy Framework.

Up Next The Homepage Copy Framework
Next Lesson