The Landing Page Playbook: From Template to Indexed, Mobile-Ready Page That Converts

Style prompt example 1: DTC product (warm, premium)

Design direction:
- Clean, modern, minimal. Not salesy.
- Warm color palette: off-white background (#f7f5f0), dark text (#111), accent yellow (#f9ff45)
- Font: Space Grotesk or Inter. No serif fonts.
- No stock photos. Use product shots or subtle icons.
- Mobile-first. Single column on mobile, max 2 columns on desktop.
- Cards with soft borders (1px solid #e8e4dc), 16px border-radius.
- The vibe should feel like a friend recommending something, not a brand selling.

Style prompt example 2: SaaS / developer tool (dark, technical)

Design direction:
- Dark background (#0a0a0a), light text (#e5e5e5), accent blue (#3b82f6)
- Monospace font for code snippets, Inter or DM Sans for body
- Show the product in action: terminal screenshots, code blocks, dashboard mockups
- Minimal copy. Let the product speak. Every section has max 2 sentences of explanation.
- Pricing cards with toggles (monthly/annual). Feature comparison table below.
- GitHub star badge in the header if open source.

Style prompt example 3: Local service (approachable, trustworthy)

Design direction:
- Light and airy. White background, warm grey text, green accent for CTAs.
- Large hero photo of the team or workspace. Real photos only, no stock.
- Google review stars prominently displayed near the top.
- Simple service list with icons. No jargon.
- Click-to-call phone number in the header and footer. Sticky on mobile.
- Google Maps embed at the bottom.
- Trust signals: licenses, certifications, "Serving [City] since [Year]".

Content block checklist: copy and paste into your task manager

MUST HAVE
[ ] Hero: headline (max 10 words) + one-liner subheading + primary CTA button
[ ] Social proof bar: "Trusted by X businesses" / customer logos / star rating
[ ] Problem statement: 2-3 sentences on the pain point you solve
[ ] How it works: 3-step visual flow (icons + short descriptions)
[ ] Benefits: 3-4 benefit cards with icons. Not features, benefits.
[ ] CTA section: repeat the primary action. Email capture or "Get started" button.
[ ] FAQ section: 4-6 real questions your customers actually ask

STRONGLY RECOMMENDED
[ ] Demo or product screenshot: show the thing. A mockup, a video, or an interactive preview.
[ ] Testimonials: 2-3 short quotes. Title/role only, no fake names.
[ ] Stats/numbers: "10x more replies" / "2-3 years indexed" / concrete data points
[ ] Pricing (if applicable): simple table or 2-3 tier cards
[ ] Trust signals: "No credit card required" / "Cancel anytime" / security badges

NICE TO HAVE
[ ] Comparison table: "Us vs. them" or "Before/After" visual
[ ] Case study mini-section: one real example with numbers
[ ] "Who is this for" section: explicit ICP callout so visitors self-qualify
[ ] Exit intent popup or scroll-triggered CTA
[ ] Blog/resource links: internal links for SEO juice

Copy audit prompt: paste your draft and run it through this checklist

Read through your landing page copy and answer these questions:

1. Can someone understand what you do within 5 seconds of landing?
2. Is the headline under 10 words?
3. Does every section have a clear purpose (educate, prove, or convert)?
4. Are you saying "you" more than "we"?
5. Is there a CTA visible without scrolling?
6. Would a friend actually say any of these sentences out loud?
7. Can you cut 30% of the words without losing meaning?

If you answered "no" to any of these, rewrite that section before moving on.

On-page SEO checklist

TITLE TAG AND META
[ ] Page title contains primary keyword, under 60 characters
[ ] Meta description contains primary keyword, under 155 characters
[ ] Open Graph tags (og:title, og:description, og:image) are set
[ ] Twitter card tags are set
[ ] Canonical URL is set to avoid duplicate content

HEADING STRUCTURE
[ ] One H1 tag only (your hero headline)
[ ] H2 tags for each major section
[ ] Keywords appear naturally in at least 2-3 H2s
[ ] No skipped heading levels (H1 → H3 is wrong)

CONTENT
[ ] Primary keyword appears in the first 100 words
[ ] Related keywords / synonyms used throughout (not stuffed)
[ ] Alt text on all images includes descriptive keywords
[ ] Internal links to blog posts or other pages on your site
[ ] External links to authoritative sources (opens in new tab)

STRUCTURED DATA
[ ] JSON-LD schema: Organization or LocalBusiness on homepage
[ ] JSON-LD schema: FAQPage if you have a FAQ section
[ ] JSON-LD schema: Product if you show pricing
[ ] Validate at search.google.com/test/rich-results

URL
[ ] Clean, readable URL (landandconvert.com/alerts not landandconvert.com/page?id=37)
[ ] No trailing slashes or mixed slash patterns
[ ] HTTPS enforced

Rendering and server-side checklist

SERVER-SIDE RENDERING (SSR) / PRE-RENDERING
[ ] Right-click your live page → "View Page Source"
    → Can you see your headline, paragraphs, and FAQ in the raw HTML?
    → If you only see <div id="root"></div> and a script tag, your content is invisible to search engines
[ ] If using React/Vue SPA: set up pre-rendering (Puppeteer, react-snap, or prerender.io)
[ ] If using Next.js: use getStaticProps or getServerSideProps, not client-only rendering
[ ] If using Nuxt: enable SSR mode (not SPA mode)
[ ] Verify: curl your URL and check that the HTML contains real content, not just empty divs

PERFORMANCE
[ ] Google PageSpeed Insights score: aim for 90+ on mobile
[ ] Largest Contentful Paint (LCP) under 2.5 seconds
[ ] First Input Delay (FID) under 100ms
[ ] Cumulative Layout Shift (CLS) under 0.1
[ ] Images: use WebP or AVIF format, lazy-load below-fold images
[ ] Fonts: preload your primary font, use font-display: swap
[ ] Minify CSS and JS in production build

MOBILE RESPONSIVE
[ ] Test on a real phone, not just browser devtools
[ ] Tap targets (buttons, links) are at least 44x44px
[ ] No horizontal scrolling on any screen size
[ ] Text is readable without zooming (16px minimum body font)
[ ] Forms are usable on mobile: proper input types (email, tel, url), autocomplete attributes
[ ] Navigation collapses or simplifies on mobile
[ ] Test on both iOS Safari and Android Chrome (they render differently)

Analytics setup checklist

GOOGLE SEARCH CONSOLE
[ ] Verify your domain in Google Search Console (DNS or HTML file method)
[ ] Submit your sitemap.xml
[ ] Request indexing for your new landing page URL
[ ] Check "URL Inspection" tool: does Google see the full rendered page?
[ ] Set up email alerts for indexing issues and errors

GOOGLE ANALYTICS 4 (GA4) OR POSTHOG
[ ] Install tracking snippet (GA4 or PostHog, pick one)
[ ] Set up conversion events:
    - Form submission (email signup, demo request)
    - CTA button clicks
    - Scroll depth (25%, 50%, 75%, 100%)
[ ] Filter out your own IP address from tracking
[ ] Verify events are firing in real-time reports

POSTHOG (RECOMMENDED FOR PRODUCT PAGES)
[ ] Install PostHog snippet or npm package
[ ] Enable session recordings (shows exactly what visitors do)
[ ] Set up feature flags if you are A/B testing copy or layout
[ ] Create a funnel: page visit → scroll to CTA → click CTA → form submit
[ ] Set up a dashboard for weekly review

HEATMAPS
[ ] Enable heatmaps (PostHog has this built in, or use Microsoft Clarity for free)
[ ] Review click maps weekly for the first month: are people clicking where you expect?
[ ] Check scroll maps: are visitors reaching your CTA sections?

OPTIONAL BUT VALUABLE
[ ] UTM parameter tracking for campaign links (utm_source, utm_medium, utm_campaign)
[ ] Facebook/Meta Pixel if running paid social
[ ] LinkedIn Insight Tag if running LinkedIn ads
[ ] Set up Looker Studio or PostHog dashboard for at-a-glance metrics

Pre-launch QA checklist

CONTENT
[ ] No placeholder text ("Lorem ipsum", "Your headline here") remaining
[ ] All links work and go to the right destination
[ ] Email addresses and phone numbers are correct
[ ] CTA buttons work and trigger the right action
[ ] Form submissions go to the right database/inbox
[ ] Test the form submission yourself: did you get the confirmation? Did the data arrive?
[ ] Spelling and grammar check (paste into Grammarly or similar)

TECHNICAL
[ ] Page loads without console errors (open browser DevTools → Console tab)
[ ] No mixed content warnings (HTTP resources on an HTTPS page)
[ ] Favicon is set
[ ] 404 page works (visit yoursite.com/nonexistent-page)
[ ] Redirects: www → non-www (or vice versa) is consistent

SOCIAL SHARING
[ ] Share your URL on Slack/Discord/Twitter and verify the preview card looks correct
[ ] OG image is the right size (1200x630px) and not blurry
[ ] Page title and description show correctly in the preview

LEGAL (IF APPLICABLE)
[ ] Privacy policy linked (required if using analytics or collecting emails)
[ ] Cookie consent banner if serving EU visitors
[ ] Terms of service linked if accepting payments