landing-page-optimizer（着陆页优化器）

Landing Page Optimizer

Instructions

When optimizing landing pages:

1. Audit current page (speed, UX, conversion elements)
2. Identify improvement areas
3. Implement optimizations
4. Set up tracking

Above the Fold Checklist

• Clear headline - Value proposition in <5 seconds
• Supporting subheadline - Expand on benefit
• Hero image/video - Relevant, high-quality
• Primary CTA - Contrasting color, action-oriented
• Social proof - Logos, ratings, testimonials
• No navigation distractions - Minimal or hidden nav

Page Structure Template

// Optimal landing page structure
<main>
  {/* 1. Hero Section */}
  <section className="min-h-[80vh] flex items-center">
    <div className="max-w-6xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
      <div>
        <Badge>New Feature</Badge>
        <h1 className="text-4xl lg:text-6xl font-bold mt-4">
          Main Value Proposition
        </h1>
        <p className="text-xl text-gray-600 mt-6">
          Supporting statement that expands on the benefit
        </p>
        <div className="flex gap-4 mt-8">
          <Button size="lg">Primary CTA</Button>
          <Button size="lg" variant="outline">Secondary CTA</Button>
        </div>
        <div className="flex items-center gap-6 mt-8">
          <div className="flex -space-x-2">
            {avatars.map(a => <Avatar key={a.id} src={a.src} />)}
          </div>
          <p className="text-sm text-gray-600">
            <strong>2,000+</strong> happy customers
          </p>
        </div>
      </div>
      <div>
        <img src="/hero-image.png" alt="Product preview" />
      </div>
    </div>
  </section>

  {/* 2. Social Proof - Logos */}
  <section className="py-12 bg-gray-50">
    <p className="text-center text-gray-500 mb-8">Trusted by leading companies</p>
    <div className="flex justify-center gap-12 opacity-60">
      {logos.map(logo => <img key={logo.name} src={logo.src} alt={logo.name} />)}
    </div>
  </section>

  {/* 3. Problem/Solution */}
  <section className="py-20">
    <div className="max-w-3xl mx-auto text-center">
      <h2 className="text-3xl font-bold">The Problem</h2>
      <p className="text-xl text-gray-600 mt-4">
        Describe the pain point your audience faces
      </p>
    </div>
  </section>

  {/* 4. Features/Benefits */}
  <section className="py-20 bg-gray-50">
    <h2 className="text-3xl font-bold text-center">How It Works</h2>
    <div className="grid md:grid-cols-3 gap-8 mt-12 max-w-6xl mx-auto">
      {features.map(feature => (
        <Card key={feature.title}>
          <feature.icon className="w-12 h-12 text-primary-500" />
          <h3 className="text-xl font-semibold mt-4">{feature.title}</h3>
          <p className="text-gray-600 mt-2">{feature.description}</p>
        </Card>
      ))}
    </div>
  </section>

  {/* 5. Testimonials */}
  <section className="py-20">
    <h2 className="text-3xl font-bold text-center">What Customers Say</h2>
    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
      {testimonials.map(t => (
        <TestimonialCard key={t.name} {...t} />
      ))}
    </div>
  </section>

  {/* 6. Pricing (if applicable) */}
  <section className="py-20 bg-gray-50">
    <PricingTable plans={plans} />
  </section>

  {/* 7. FAQ */}
  <section className="py-20">
    <h2 className="text-3xl font-bold text-center">FAQ</h2>
    <Accordion items={faqs} className="max-w-3xl mx-auto mt-12" />
  </section>

  {/* 8. Final CTA */}
  <section className="py-20 bg-primary-600 text-white text-center">
    <h2 className="text-3xl font-bold">Ready to Get Started?</h2>
    <p className="text-xl opacity-90 mt-4">Join 2,000+ companies already using our product</p>
    <Button size="lg" variant="secondary" className="mt-8">
      Start Free Trial
    </Button>
    <p className="text-sm opacity-75 mt-4">No credit card required</p>
  </section>
</main>

CTA Optimization

Button Best Practices

// Good CTAs
<Button>Start Free Trial</Button>
<Button>Get Started Free</Button>
<Button>Try It Free for 14 Days</Button>
<Button>Book a Demo</Button>

// Add urgency/value
<Button>
  Get 50% Off Today
  <span className="text-sm opacity-75 block">Offer ends midnight</span>
</Button>

// Reduce friction
<div className="text-center">
  <Button size="lg">Start Free Trial</Button>
  <p className="text-sm text-gray-500 mt-2">
    No credit card required • Cancel anytime
  </p>
</div>

CTA Placement

1. Hero section - Primary CTA above fold
2. After features - Reinforce value
3. After testimonials - Social proof boost
4. Sticky header/footer - Always accessible
5. Exit intent popup - Last chance

Performance Optimization

Image Optimization

// Next.js Image component
import Image from 'next/image';

<Image
  src="/hero.png"
  alt="Product screenshot"
  width={1200}
  height={800}
  priority // Above-fold images
  placeholder="blur"
  blurDataURL={blurData}
/>

// Lazy load below-fold images
<Image
  src="/feature.png"
  loading="lazy"
  ...
/>

Critical CSS

// Inline critical styles for above-fold
<head>
  <style dangerouslySetInnerHTML={{ __html: criticalCSS }} />
  <link rel="preload" href="/fonts/inter.woff2" as="font" crossOrigin="" />
</head>

Performance Targets

SEO Optimization

Meta Tags

// app/layout.tsx or pages/_app.tsx
export const metadata = {
  title: 'Product Name - Main Benefit | Brand',
  description: 'Clear description with keywords. 150-160 chars.',
  openGraph: {
    title: 'Product Name - Main Benefit',
    description: 'Description for social sharing',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
  },
};

Structured Data

<script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Product Name",
    "applicationCategory": "BusinessApplication",
    "offers": {
      "@type": "Offer",
      "price": "29",
      "priceCurrency": "USD"
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.8",
      "reviewCount": "1250"
    }
  })}
</script>

Conversion Tracking

// Google Analytics 4 events
const trackCTA = (ctaName: string) => {
  gtag('event', 'cta_click', {
    cta_name: ctaName,
    page_location: window.location.href,
  });
};

// Track scroll depth
useEffect(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          gtag('event', 'section_viewed', {
            section_name: entry.target.id,
          });
        }
      });
    },
    { threshold: 0.5 }
  );

  document.querySelectorAll('section[id]').forEach((section) => {
    observer.observe(section);
  });
}, []);

A/B Testing Elements

Priority elements to test:

1. Headline copy - Different value propositions
2. CTA text - "Start Free" vs "Get Started" vs "Try Now"
3. CTA color - High contrast options
4. Hero image - Product vs people vs abstract
5. Social proof placement - Above vs below fold
6. Pricing display - Monthly vs annual default
7. Form length - Email only vs full form

Mobile Optimization

// Thumb-friendly CTAs
<Button className="w-full md:w-auto h-14 text-lg">
  Get Started
</Button>

// Sticky mobile CTA
<div className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t md:hidden">
  <Button className="w-full">Start Free Trial</Button>
</div>

// Reduce content on mobile
<p className="hidden md:block">
  {fullDescription}
</p>
<p className="md:hidden">
  {shortDescription}
</p>

Quick Wins Checklist

• Headline communicates value in 5 seconds
• CTA button is high contrast and above fold
• Page loads in under 3 seconds
• Social proof visible above fold
• Mobile-optimized with thumb-friendly CTAs
• No broken images or links
• Forms have minimal required fields
• Trust badges near CTAs (security, guarantees)
• Clear pricing (no hidden fees messaging)
• Testimonials include photos and titles