Landing page dla Google Ads w Next.js — jak budować strony, które konwertują

Zacznę od czegoś ważnego. Musisz wiedzieć, że Quality Score w Google Ads to przede wszystkim narzędzie diagnostyczne, a nie KPI sam w sobie. Google wprost mówi, że nie jest to bezpośredni czynnik w aukcji, ale jako ocena jakości reklamy w czasie rzeczywistym nadal bierze pod uwagę trzy obszary: oczekiwany CTR, trafność reklamy i landing page experience. Innymi słowy nie optymalizujesz „cyferki 1-10", ale jakość strony nadal realnie wpływa na wynik kampanii.

Jako developer masz bezpośredni wpływ na sporą część tego układu: szybkość ładowania, wygodę na urządzeniach mobilnych, message match, formularz, third-party scripts oraz to, czy po kliknięciu reklamy nie zgubisz gclid ani UTM-ów.

Co Google ocenia w Landing Page Experience?

Google nie publikuje dokładnego algorytmu, ale możemy dowiedzieć się sporo z ogólnych wskazówek, które znajdziemy w oficjalnej dokumentacji:

Użyteczność i trafność – treść strony musi faktycznie odpowiadać na to, czego użytkownik spodziewa się po reklamie i słowie kluczowym.

Łatwość nawigacji – użytkownik powinien móc łatwo znaleźć to, po co przyszedł, dlatego wszystko musi być poukładane i czytelne.

Zgodność z oczekiwaniami – reklama obiecuje jedno, a landing page powinien tę obietnicę spełnić, i dotyczy to nagłówka, oferty, ceny, CTA i całej narracji.

Przejrzystość i zaufanie – kontakt, polityka prywatności, podstawowe informacje o firmie, jasne warunki i brak podejrzanych wzorców.

Wygoda na mobile i szybkość – na urządzeniach mobilnych doświadczenie musi być szybkie, czytelne i stabilne, więc dochodzą tu jeszcze kwestie Core Web Vitals oraz praktyczny UXUX, czyli User Experience, opisuje całe doświadczenie użytkownika podczas korzystania z produktu..

Na sam koniec dochodzi techniczna higiena, więc działająca strona, ten sam kontekst domenowy co reklama, brak błędów 4xx/5xx, sensowna obsługa przekierowań i brak „martwych" wariantów LP.

Architektura landing page w Next.js

Static Generation – często najlepsza opcja

Jeśli landing page nie wymaga personalizacji w czasie rzeczywistym, SSG albo ISR będą zwykle najlepszym wyborem - oferują przewidywalny TTFBTTFB, czyli Time To First Byte, mierzy czas od żądania do otrzymania pierwszego bajtu odpowiedzi z serwera., łatwiejszy caching i mniej ruchomych części niż pełny SSRSSR, czyli Server-Side Rendering, to generowanie HTML na serwerze przy żądaniu — komponent client:only je pomija i renderuje się wyłącznie w przeglądarce..

// app/lp/[slug]/page.tsx
import type { Metadata } from "next";
import { getAllLandingPages, getLandingPage } from "@/lib/cms";
import { LandingPageContent } from "./LandingPageContent";
 
// Statyczna generacja
export async function generateStaticParams() {
  const pages = await getAllLandingPages();
  return pages.map((page) => ({ slug: page.slug }));
}
 
export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const page = await getLandingPage(params.slug);
 
  return {
    title: page.metaTitle,
    description: page.metaDescription,
    robots: {
      index: page.indexable ?? false,
      follow: page.indexable ?? false,
    },
  };
}
 
export default async function LandingPage({
  params,
}: {
  params: { slug: string };
}) {
  const page = await getLandingPage(params.slug);
 
  return <LandingPageContent page={page} />;
}

Dlaczego noindex?

noindex ma sens tylko wtedy, gdy landing page jest naprawdę dedykowana kampanii, czyli ma warianty A/B, a zwłaszcza gdy duplikuje treść z innych URL-i (co jest bardzo szkodliwe dla SEOSEO, czyli Search Engine Optimization, to optymalizacja strony pod widoczność w wynikach wyszukiwania.), jest krótką stroną stricte leadową albo nie chcesz, żeby konkurowała z główną ofertą w wynikach organicznych. Nie stosuj noindex jeśli LP jest wartościową, pełnoprawną stroną ofertową i ma dobrej jakości unikatową treść. Problemem nie jest sam fakt, że strona jest "reklamowa", ale czy wnosi coś wartościowego sama w sobie.

SSR nadal bywa uzasadniony, jeśli musisz pokazać dynamiczną cenę, stan magazynowy, lokalizację, język, zgodność prawną per kraj albo personalizację pod segment. Najistotniejsze nie jest to, żeby LP była „statyczna z zasady", tylko żeby była szybka, stabilna i przewidywalna.

Optymalizacja wydajności – checklist

LCP < 2.5s

// 1. Hero image z priority
import Image from "next/image";
 
<Image
  src="/lp/hero-product.webp"
  alt="Produkt XYZ"
  width={1200}
  height={600}
  priority
  sizes="100vw"
  quality={85}
/>;
 
// 2. next/font obsługuje preload fontów automatycznie
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin", "latin-ext"],
  display: "swap",
});

Traktuj priority jak rozkaz dla przeglądarki, by skupiła wszystkie siły na jednym, kluczowym zasobie. Jeśli dasz ten sam rozkaz pięciu różnym elementom, wprowadzasz chaos i przeglądarka nie wie, który front jest najważniejszy.

CLS < 0.1

// 1. Zawsze podawaj wymiary obrazków
<Image width={400} height={300} ... />
 
// 2. Zarezerwuj miejsce dla dynamicznych elementów
<div className="min-h-[60px]"> {/* cookie banner space */}
  <CookieBanner />
</div>
 
// 3. Font display swap + size-adjust
const font = Inter({
  subsets: ["latin"],
  display: "swap",
  adjustFontFallback: true, // Next.js automatycznie dopasuje fallback
});

INP < 200ms

// 1. Lazy load poniżej folda
import dynamic from "next/dynamic";
 
const Testimonials = dynamic(() => import("./Testimonials"), {
  loading: () => <div className="h-[400px]" />,
});
 
const FAQ = dynamic(() => import("./FAQ"), {
  loading: () => <div className="h-[300px]" />,
});
 
// 2. Nie wrzucaj ciężkiej pracy do handlera submit
// ❌ Źle
const handleSubmit = async () => {
  const validated = heavyValidation(formData); // blokuje main thread
  await sendForm(validated);
};
 
// ✅ Dobrze — handler jest lekki, cięższa walidacja trafia na serwer
const handleSubmit = async () => {
  setLoading(true);
  await fetch("/api/leads/validate-and-send", {
    method: "POST",
    body: formData,
  });
  setLoading(false);
};

Samo async/await nie sprawia magicznie, że kod przestaje blokować główny wątek. Jeśli ciężka walidacja nadal wykonuje się synchronicznie w JS po stronie klienta, INP i tak na tym ucierpi. Jeśli naprawdę musisz robić ciężką pracę w przeglądarce, rozważ Web Workera.

Third-party scripts – nie zabijaj wydajności

import Script from "next/script";
 
// Tag pomiarowy, który musi wystartować wcześnie
<Script src="https://www.googletagmanager.com/gtag/js?id=AW-XXX"
  strategy="afterInteractive" />
 
// Widget supportowy, który może poczekać
<Script src="https://widget.intercom.io/widget/xxx"
  strategy="lazyOnload" />

Nie wszystkie third-party możesz opóźniać tak samo stanowczo, ponieważ skrypt odpowiedzialny za pomiar i remarketing zwykle musi pojawić się wcześniej niż widget czatu, heatmapa czy recenzje. Tak więc, kolejność ładowania to część architektury konwersji.

Struktura konwertującej landing page

Above the fold – pierwszy ekran

// components/lp/HeroSection.tsx
export function HeroSection({ page }: { page: LandingPage }) {
  return (
    <section className="min-h-screen flex flex-col justify-center px-4 md:px-8">
      {/* 1. Headline odpowiadający na intencję reklamy */}
      <h1 className="text-4xl md:text-5xl font-bold">
        {page.headline}
      </h1>
 
      {/* 2. Subheadline z value proposition */}
      <p className="text-xl text-gray-600 mt-4 max-w-2xl">
        {page.subheadline}
      </p>
 
      {/* 3. CTA – widoczny od razu */}
      <div className="mt-8 flex gap-4">
        <a
          href="#formularz"
          className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold"
          data-testid="hero-cta"
        >
          {page.ctaText}
        </a>
      </div>
 
      {/* 4. Social proof */}
      <div className="mt-6 flex items-center gap-2 text-sm text-gray-500">
        <span>⭐⭐⭐⭐⭐</span>
        <span>4.8/5 na podstawie 2,340 opinii</span>
      </div>
    </section>
  );
}

Ten snippet jest dobry jako struktura, ale nie kopiuj ślepo samych "ładnych liczb", a social proof działa tylko wtedy, gdy jest prawdziwy i możliwy do obrony.

Message match – klucz do Quality Score

Message match to spójność między tekstem reklamy, a treścią landing page, dlatego jeśli reklama mówi "Tanie ubezpieczenie OC online", a LP ma headline "Kompleksowe rozwiązania ubezpieczeniowe" – message match jest generalnie do kitu.

Reklama: "Kurs React dla początkujących – start w 7 dni"
     ↓
LP headline: "Naucz się React od zera w 7 dni"  ← ✅ silny message match
LP headline: "Akademia programowania online"      ← ❌ kiepski message match

W praktyce twórz oddzielne landing pages albo przynajmniej oddzielne warianty hero/message match per ad group, jeśli grupy słów kluczowych reprezentują różne intencje.

Formularz – ogranicz opór przed wypełnieniem

// components/lp/LeadForm.tsx
"use client";
 
import { useState } from "react";
import { analytics } from "@/lib/analytics";
import { adsConversions } from "@/lib/ads-tracking";
 
export function LeadForm({ formId }: { formId: string }) {
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
 
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus("loading");
 
    const formData = new FormData(e.currentTarget);
 
    try {
      const response = await fetch("/api/leads", {
        method: "POST",
        body: formData,
      });
 
      if (!response.ok) {
        throw new Error("Request failed");
      }
 
      setStatus("success");
 
      // Track conversions
      adsConversions.lead(formId);
      analytics.formSubmit(formId, true);
    } catch {
      setStatus("error");
      analytics.formSubmit(formId, false);
    }
  };
 
  if (status === "success") {
    return (
      <div className="text-center p-8">
        <h3 className="text-2xl font-bold text-green-600">Dziękujemy!</h3>
        <p>Skontaktujemy się w ciągu 24 godzin.</p>
      </div>
    );
  }
 
  return (
    <form onSubmit={handleSubmit} id="formularz" className="space-y-4">
      {/* Minimum pól = maksymalna konwersja */}
      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          Email *
        </label>
        <input
          id="email"
          name="email"
          type="email"
          required
          autoComplete="email"
          className="w-full p-3 border rounded-lg"
        />
      </div>
 
      <div>
        <label htmlFor="phone" className="block text-sm font-medium">
          Telefon
        </label>
        <input
          id="phone"
          name="phone"
          type="tel"
          autoComplete="tel"
          className="w-full p-3 border rounded-lg"
        />
      </div>
 
      <button
        type="submit"
        disabled={status === "loading"}
        className="w-full bg-blue-600 text-white p-4 rounded-lg text-lg font-semibold"
      >
        {status === "loading" ? "Wysyłam..." : "Wyślij zapytanie"}
      </button>
 
      {status === "error" && (
        <p className="text-red-600 text-sm" role="alert">
          Wystąpił błąd. Spróbuj ponownie.
        </p>
      )}
    </form>
  );
}

Trzymaj się zasady by zbierać tylko te dane, których naprawdę potrzebujesz na tym etapie lejka, ponieważ każde dodatkowe pole zniechęca część osób do wypełnienia formularza. Z drugiej strony zbyt krótki formularz potrafi obniżyć jakość leadów, dlatego optymalny punkt trzeba sprawdzić na własnych danych.

Do tego dochodzą rzeczy, których często brakuje w pierwszej wersji:

• walidacja i sanityzacja po stronie serwera,
• ochrona antyspamowa (honeypot, rate limit, captcha jeśli trzeba),
• jasna informacja o polityce prywatności i zgodzie marketingowej, jeśli jest wymagana,
• jeden główny CTA.

Atrybucja – zachowaj gclid i UTM-y

Landing page musi być dobry analitycznie. Klik z reklamy wpada z parametrami gclid, utm_source i utm_campaign, które warto zatrzymać przez całą sesję, żeby konwersja trafiła z pełnym kontekstem do Google Ads i CRM-a.

Wystarczą trzy nawyki, które razem łączą się w poprawną atrybucję:

• zapisz gclid i kluczowe UTM-y w hidden fields formularza albo w storage pierwszej sesji, dzięki czemu przetrwają nawigację po stronie,
• konwersję rejestruj po realnym sukcesie formularza, czyli po potwierdzeniu wysyłki, a nie po samym kliknięciu przycisku,
• przy przekierowaniu na thank-you page przekaż parametry i dane sesji dalej, tak by atrybucja pozostała spójna na całej ścieżce.

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export function AttributionFields() {
  const searchParams = useSearchParams()
 
  return (
    <>
      <input
        type="hidden"
        name="gclid"
        value={searchParams.get('gclid') ?? ''}
      />
      <input
        type="hidden"
        name="utm_source"
        value={searchParams.get('utm_source') ?? ''}
      />
      <input
        type="hidden"
        name="utm_campaign"
        value={searchParams.get('utm_campaign') ?? ''}
      />
    </>
  )
}

Powyższy komponent AttributionFields działa skutecznie, jeśli formularz znajduje się na tej samej stronie, na którą trafia użytkownik. Jeśli jest wieloetapowy albo użytkownik może nawigować po stronie przed konwersją, poleganie wyłącznie na parametrach z bieżącego adresu URL jest prostą drogą do utraty atrybucji.

A/B Testing landing pages

Warianty URL

Najprostsze podejście to oddzielne strony dla każdego wariantu.

/lp/kurs-react          → wariant A (headline: "Naucz się React")
/lp/kurs-react-v2       → wariant B (headline: "Zostań React Developerem")

To działa, ale pamiętaj o dyscyplinie testowej i testuj jedną większą zmianę naraz. Nie mieszaj równocześnie headline'u, formularza, koloru CTA i układu sekcji, ponieważ potem nie wiesz, co naprawdę działa i ma znaczenie, a co nie.

Google Optimize replacement

Google Optimize został zamknięty w 2023, aktualne alternatywy: Optimizely, VWO lub buduj własny mechanizm z Next.js Middleware + cookies:

// middleware.ts – prosty A/B split
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/lp/produkt') {
    const variant = request.cookies.get('ab-variant')?.value
 
    if (!variant) {
      const newVariant = Math.random() < 0.5 ? 'a' : 'b'
      const response = NextResponse.rewrite(
        new URL(`/lp/produkt-${newVariant}`, request.url),
      )
      response.cookies.set('ab-variant', newVariant, {
        maxAge: 60 * 60 * 24 * 30,
      })
      return response
    }
 
    return NextResponse.rewrite(new URL(`/lp/produkt-${variant}`, request.url))
  }
 
  return NextResponse.next()
}

W praktyce warto jeszcze dopilnować:

• spójnego raportowania wariantu w analityce i CRM,
• utrzymania tego samego wariantu w całej sesji,
• zachowania query params po rewritach,
• wyłączenia testu po osiągnięciu istotności,

Monitoring – pętla feedbacku

Po wdrożeniu landing page, monitoruj:

Google Ads → Insights & reports → Landing pages – kliknięcia, wyświetlenia, mobile-friendly click rate i zachowanie konkretnych URL-i.

Google Ads → Keywords – kolumna Landing page exp. oraz pozostałe komponenty jakości na poziomie słów kluczowych.

GA4 / CRM – conversion rate, lead quality, koszt leada, segmentacja po kampanii, ad group i device.

Core Web Vitals / RUM – mierz rzeczywiste LCP, INP i CLS dla ruchu z kampanii, nie tylko syntetyczny Lighthouse.

Search terms report – sprawdzaj, czy ruch, który wpada na LP, faktycznie odpowiada intencji i obietnicy strony.