How to Build a Landing Page That Converts (2026 Guide)

A landing page has one job. A visitor arrives from an ad, an email, a search result or a link, and the page exists to get them to do one thing: leave an email, buy, click through to a checkout, join a waitlist, subscribe. Everything on the page either helps that one action or gets in the way.

That definition is the whole discipline. Everything below follows from it: which type of page you need, what goes on it and in what order, what the words should say, how the form should behave, how fast it must load, how it earns search traffic, and how you find out whether it works.

TL;DR

• One page, one audience, one action, one button label repeated three times.
• The headline repeats the promise of the ad or link that brought the visitor.
• Order: promise, offer, how it works, proof, price and guarantee, objections, close.
• Ask the form for what you will use in the first conversation and nothing more.
• Load in under 2.5 seconds on a phone; keep the page still while it loads.
• Track one metric, change one thing at a time, and get enough conversions before you believe a difference.

Contents

1. What is a landing page?
2. Landing page vs home page
3. The six types of landing page
4. Anatomy of a high-converting landing page
5. Copy that converts
6. Images, video and visual hierarchy
7. Social proof
8. Price, guarantee and urgency
9. Forms
10. Speed and Core Web Vitals
11. SEO
12. Accessibility, privacy and consent
13. A/B testing and measurement
14. Common mistakes
15. Checklist

What is a landing page?

A landing page is a standalone web page built for a single conversion goal and a single source of traffic. It is where a campaign “lands” people. Unlike a regular page on a site, it usually has no full navigation, no sidebar and no second offer, because each of those is an exit or a distraction from the one thing the page is asking for.

The goal can be a purchase, a signup, a download, a booking, a demo request or a click to another page. What makes the page a landing page is not the goal but the focus: one intent in, one action out.

Landing page vs home page: what’s the difference?

A home page serves everyone: customers, candidates, the press, people who already know you. It has a menu, a footer and many possible next steps. A landing page serves one audience that arrived with one intent and offers one next step.

If you are sending paid traffic to your home page, moving it to a landing page is usually the single biggest improvement available.

The six types of landing page (with examples)

Landing pages differ by the action they ask for. Six types cover almost every case. Each one below links to a complete, working example that follows the advice in this guide.

Lead generation landing pages

The page trades something useful (a guide, a template, an audit, a webinar seat, a free trial) for an email address and sometimes a name or a company. The offer must be worth the address; the form must be as short as the offer allows; the proof and the FAQ carry the objections. The confirmation email is part of the page: what arrives, when, and what comes next. Example: lead generation.

Sales landing pages

The page sells directly, usually something considered or expensive: a course, a service, a product with a story. It is long because it answers every question before it is asked: the promise, what is included, who it is for, proof, the price, the guarantee. Length is not the goal; completeness is. Example: sales page.

Click-through landing pages

The page is a bridge. It confirms the promise of the ad, shows what is on the other side and pushes the visitor to one destination (a checkout, a signup, an app store listing) with one repeated button. No form, no price list, no full feature comparison: those belong on the destination. Example: click-through.

Product detail landing pages

The page presents one product at three depths: an overview for the curious, features for the interested, specifications for the decided. Real images from several angles, a video if the product moves, the price on the page. Example: product details.

Pre-launch and waitlist landing pages

The page collects interest before there is a product to sell. The form comes early; a visible date, a roadmap and one real teaser follow for the visitors who need more before they type. The emails between signup and launch are what keep the list alive. Example: pre-launch.

Subscription landing pages

The page sells the second month, not the first. Trust signals up front, plans compared side by side, the practices that reduce churn (a fast first win, a predictable rhythm, visible new value, an easy exit), and a cancellation policy stated plainly. Example: subscription.

Anatomy of a high-converting landing page

The order below is the one that works for most pages. Not every page needs every section; every page needs the first and the last.

1. Hero: the promise and the ask. A headline that repeats the promise of the ad or email that brought the visitor, one sentence of support, and the primary button. If there is an image, it shows the product or the outcome.
2. The offer, concretely. What the visitor gets, in their words: a list of features, a comparison, a short video, a set of screenshots. One idea per block.
3. How it works. Three or four steps that remove the fear of the unknown: what happens after the click, how long it takes, what is needed.
4. Proof. Real quotes with name, role and photo; logos of customers; numbers you can back; a case study with a result.
5. Price and guarantee (sales, product, subscription). The price on the page, the terms next to it, the guarantee or cancellation policy in one sentence right below.
6. Objections: the FAQ. The five or six questions that stop people, answered honestly.
7. The close. The same button as the hero, with the same label, and a line that says what happens next.

Two things are missing on purpose: a full navigation menu (it offers exits) and a second offer (it splits attention). If the brand needs to be present, a logo and a single link back to the main site are enough.

The visitor decides in a few seconds whether to keep reading. The first screen on a phone, which is what most visitors see, must therefore contain the headline, the support line and the button, and nothing that competes with them. Everything else is for the people who scroll, and they scroll because the first screen earned it.

Landing page copy that converts

Message match. The headline uses the words of the ad, email or link that sent the visitor. Different words feel like a wrong turn, and a wrong turn is a back button. If a campaign has three ads with three promises, it needs three headlines, which usually means three pages.

Outcomes before mechanics. “Invoices paid twice as fast” beats “Smart invoicing platform”. The feature list can be technical; the headline cannot. Write the headline last, once you know which benefit the rest of the page proves.

One reader. Write for the person the ad targeted, in the second person, in their vocabulary. A page that speaks to everyone convinces no one.

Specific beats superlative. “Set up in 12 minutes” is believable; “lightning-fast setup” is noise. Numbers, names and dates carry more trust than adjectives, as long as they are true.

Say what the button does. “Get the checklist”, “Start the free month”, “See the pricing”. “Submit” and “Learn more” tell the reader nothing. The button label is the most-read sentence on the page.

Say what happens next. After the click, after the submit: what arrives, when, how to undo it. This is the sentence most pages forget and the one that removes the most hesitation.

Clarity over cleverness. A pun in the headline costs a second of decoding that some visitors will not spend. Save wit for the second half of the page, if at all.

Images, video and visual hierarchy

Show the product, not a metaphor. A screenshot, the object in someone’s hands, the result on a screen. Stock photos of people shaking hands or pointing at laptops signal that there was nothing real to show.

If the product moves, a short video beats a paragraph, but it must not autoplay with sound and must not be the only way to understand the offer. A poster image with a play button loads fast; the player loads when someone asks for it.

Visual hierarchy is the order the eye follows: headline, then image, then button, then the rest. Size, contrast and white space set that order. If the button is the third thing seen, the page works; if it is the eighth, the page is a brochure.

Social proof that people believe

Proof is what a stranger says about you. In order of usefulness:

1. Quotes with a name, a role, a photo and a specific result. “Cut our onboarding from two weeks to three days” beats “great tool, highly recommend.”
2. Customer logos, when the names mean something to the audience.
3. Numbers you can back: customers, ratings on an independent site, years in business.
4. A case study with a before, an after and a number.

Three rules: never invent proof (readers can tell, and the ones who cannot will find out); ask for permission to use names and photos; keep proof recent. A quote from five years ago says the product was good five years ago. Match the proof to the page type: a click-through page needs one or two quotes, a sales page needs the full set.

Price, guarantee and urgency

The price is on the page. A page that hides the price sends the buyer to look for it elsewhere, and elsewhere has competitors. Show the price where the decision is made, with what it includes next to it.

Anchor honestly. Showing a higher plan beside the recommended one, or the yearly saving beside the monthly price, helps people judge value. Inventing a crossed-out price that never existed is a lie that regulators and customers both notice.

Reverse the risk. A refund window, a free trial without a card, a cancel-anytime policy: one sentence, placed right under the price, removes the last objection. State it, then honor it.

Urgency only when true. A real closing date, a real limited quantity, a real price change on a real day. A countdown that resets on every visit trains people to ignore countdowns and to distrust the page.

Landing page forms: how many fields?

Every field costs conversions; every field also qualifies the lead. The rule: ask for what you will use in the first conversation and nothing more. An email for a guide. An email and a company for a demo. Address and phone only when you will actually ship or call.

• Label every field visibly. Placeholder text disappears as soon as the visitor types, and it fails contrast rules anyway.
• Use the right input types. type="email", type="tel", and autocomplete attributes, so phones offer the right keyboard and browsers fill saved values.
• Validate as they type, not after they submit, and say what is wrong next to the field, not in a banner at the top.
• Split long forms into steps when you cannot shorten them. Ask the easy questions first; people who have answered three questions finish the fourth.
• Put the privacy sentence next to the button. “No spam, unsubscribe in one click” beside the submit button is read; the same sentence in the footer is not.
• Design the confirmation. The thank-you screen and the confirmation email are the last impression: say what was sent, when the next thing happens, and what to do meanwhile.

The form is the one element that must be tested end to end before launch, on a real phone, with a real email address: submit, receive, click the link, land where the visitor should land.

Landing page speed and Core Web Vitals

A landing page is the one page where the whole visit may last eight seconds, so its loading time is part of its copy. Google’s Core Web Vitals describe the experience in three numbers, measured on real visits:

What that means in practice:

• The hero image is almost always the LCP element. Serve it at the size it is displayed, in a modern format (WebP or AVIF), with high fetch priority, and never lazy-load it. Lazy-load everything below the first screen.
• Reserve space. Give every image its width and height, reserve room for embeds, and load fonts in a way that does not swap late. That keeps CLS near zero.
• Ship as little JavaScript as possible. Tag managers, chat widgets and A/B testing scripts are the usual INP killers. A static page with a few small scripts for the interactive parts is the easiest way to pass.
• Self-host fonts and keep them to one or two families. Each extra family is a request before the text appears.
• Measure on a mid-range phone on a mobile connection, not on a laptop on office Wi-Fi. That is where the visitors are.

Landing page SEO

Most landing page traffic is paid or referred, but a page that also ranks brings visitors for free for years, and it is the same page. The basics:

• One <h1>: the promise, with the phrase people search for. Section titles as <h2>, written as the questions they answer.
• A title tag and a meta description written for the search result, not for the ad. Google shows roughly 60 characters of a title and 155 of a description before cutting; see Google’s guidance on title links and snippets.
• Real text. A page that is one image and a button has nothing to rank. A few hundred words that explain the offer, the process and the objections are enough, and they help conversion too.
• Structured data where it earns a rich result: FAQPage on the FAQ section, Product with offers on product pages, Organization for the site.
• A canonical URL and a social share image sized around 1200 × 630, so links shared in chat and on social networks show a preview.
• noindex only for pure paid-traffic variants (the three headline versions of one campaign). The main page should be indexable.
• Internal links: from your articles to the page and from the page back to the resource that earns the click.

Accessibility, privacy and consent

The accessible page and the converting page are the same page. The WCAG 2.2 guidelines turn into a short list for a landing page:

• Text contrast of at least 4.5:1 against its background (3:1 for large text), in dark mode too if you offer one.
• Buttons and links large enough to hit with a thumb: 24 × 24 CSS pixels is the minimum, 44 is comfortable.
• A visible focus state, so keyboard users can see where they are.
• Form fields with real labels, errors announced next to the field, and no time limit on filling them in.
• Images with alt text that describes the product, and video with captions.
• Accordions, tabs and lightboxes that work with a keyboard and a screen reader, or that degrade to plain content.

Privacy is part of the offer. Say what you do with the email before the visitor gives it to you, collect consent where the law requires it (the cookie banner counts, and it must not hide the headline), and do not load third-party trackers before consent. A page that respects its visitors converts them more than once.

Landing page A/B testing and measurement

Decide the one metric before the page goes live: form submissions, checkouts started, clicks to the destination. Track it with an event, not a page view, and make sure the event fires once per conversion. Then change one thing at a time, in this order of expected effect:

1. The headline (biggest effect, cheapest test).
2. The offer, or how the price is presented.
3. The hero image or video.
4. The form length.
5. The proof shown first.

A test needs enough conversions to mean something. With fewer than a few hundred conversions per variant, most differences you will see are noise, and calling the winner early is the most common testing mistake. Below that traffic, qualitative feedback finds more than statistics do: five people who match the audience, watching the page while thinking aloud, will show you the confusing sentence in twenty minutes.

Keep a log: what was tested, when, the result, the decision. The second most common mistake is re-running last year’s test because nobody wrote it down.

Common landing page mistakes

• Sending campaign traffic to the home page. Many goals, many exits, no message match.
• A headline that names the product instead of the outcome. The visitor does not care what it is called yet.
• Three offers on one page. Each one halves the attention on the others.
• A form that asks for a phone number to download a PDF. Ask for what you will use.
• Proof that is vague, old or invented. It is read as absence of proof.
• Hiding the price. The visitor leaves to find it and does not come back.
• A hero image that takes four seconds on a phone. The visit is over before the headline renders.
• A cookie banner or a chat bubble covering the button. Especially on phones.
• Declaring a test winner after two days. See above.
• Never updating the page. Prices, dates, screenshots and quotes age; a landing page needs a review every quarter.

Landing page checklist

Before launch:

• The headline matches the ad, email or link that will send traffic.
• One primary action; the same button label in the hero, after the proof and at the end.
• Every button and link goes somewhere real.
• Proof is real and recent, with permission to use names and photos.
• The price, the guarantee and what happens after the click are stated.
• The form is tested end to end on a phone, including the confirmation email.
• Checked at phone width and on a desktop, in light and dark mode if offered; nothing covers the button.
• LCP under 2.5 s and CLS under 0.1 on a mobile test.
• Title, description, canonical, social image and structured data validated.
• The one metric is tracked, and the first test is planned.

After launch: review the numbers weekly, the page quarterly, and retire it when the campaign ends.

Six complete examples you can copy

The six pages linked above are full, working landing pages, one per type, built with the free AstroWind template for Astro and Tailwind CSS. Each one follows the structure in this guide and explains, section by section, why that section is there. Copy the one closest to your goal, keep the structure, and replace the words, the images and the proof with your own.