Image SEO: jak zamienić obrazki w ruch

Większość zespołów traktuje obrazki jak problem wydajnościowy do opanowania. To połowa historii. Obrazy to także kanał ruchu — Google Grafika, Discover, rich results i odpowiedzi AI wynoszą strony przez ich wizualizacje — oraz sygnał jakości: przewodnik na 2000 słów bez ani jednej oryginalnej grafiki czyta się jak niski wysiłek, i dla użytkowników, i dla systemów rankingowych.

Każda strona z treścią zasługuje na prawdziwe obrazy

• Unikalne zawsze bije stock. Oryginalny diagram, opisany zrzut ekranu, zdjęcie rzeczywistego rezultatu — to wszystko może rankować w wyszukiwarce grafiki i przynosić cytowania. Stockowe zdjęcie „ludzie biznesu podają sobie ręce" nie rankuje na nic i sygnalizuje szablonową treść.
• Google Discover mocno preferuje strony z dużymi, wysokiej jakości obrazami (od 1200px szerokości) — dla witryn contentowych to darmowy ruch.
• Diagramy i zrzuty ekranu czynią treść cytowalną dla silników AI: strona tłumacząca wizualnie plus tekstowo jest oceniana jako bogatsze źródło.
• Nie zamykaj istotnego tekstu w obrazkach — crawlery czytają HTML, tekst-w-obrazku jest dla nich niewidzialny (i dla czytników ekranu też).

Mechanika: nazwij, opisz, zwymiaruj

<Image
  src="/images/next-seo/isr-revalidation-flow.png" // opisowa nazwa w kebab-case
  alt="Przepływ ISR: publikacja w CMS uruchamia webhook, revalidatePath czyści cache"
  width={1400}
  height={800}
/>

• Nazwy plików są sygnałem rankingowym w wyszukiwarce grafiki: isr-revalidation-flow.png bije screenshot-final-2.png.
• Tekst alt opisuje obraz dla czytników ekranu i wyszukiwarki. Pisz, co naprawdę jest na obrazku; słowa kluczowe tylko tam, gdzie brzmią naturalnie. Pusty alt="" jest poprawny dla grafik czysto dekoracyjnych.
• Tekst wokół obrazka (podpis, poprzedzający akapit) daje mu kontekst — Google rankuje obrazy w dużej mierze po ich otoczeniu.

Dane strukturalne: zaznacz własność swoich obrazów

Oznaczaj obrazy schemą ImageObject — z license i creator dostajesz odznakę Licensable w Google Grafice, co ma znaczenie, jeśli tworzysz oryginalne wizualizacje:

const imageSchema: WithContext<ImageObject> = {
  "@context": "https://schema.org",
  "@type": "ImageObject",
  contentUrl: `${baseUrl}/images/next-seo/isr-revalidation-flow.png`,
  creator: { "@type": "Person", name: "Vlad Sedenko" },
  license: `${baseUrl}/image-license`,
  creditText: "sedenko.net",
};

Dodaj obrazy do sitemapy — sitemap.ts w App Routerze wspiera tablicę images dla każdego wpisu:

{
  url: `${baseUrl}/blog/${post.slug}`,
  images: [`${baseUrl}${post.heroImage}`],
}

Obrazy generowane przez AI: ostrożnie

Generowane ilustracje są w porządku jako dekoracja, ale oznaczaj je uczciwie (metadane IPTC DigitalSourceType to kształtujący się standard, który Google już czyta) i nie używaj ich tam, gdzie liczy się dowód z pierwszej ręki: wygenerowany „zrzut ekranu" wyników, których nigdy nie osiągnąłeś, to obciążenie dla zaufania, nie aktywo. Oryginalne zrzuty i prawdziwe diagramy niosą wagę E-E-A-T; zobacz Zaufanie i E-E-A-T.

Checklista:

• Każda istotna strona ma co najmniej jeden unikalny, treściowy obraz
• Opisowe nazwy plików i uczciwy alt; istotny tekst nie jest zamknięty w obrazkach
• Obrazy hero/OG od 1200px — kwalifikacja do Discover
• Schema ImageObject z licencją/autorem na oryginalnych wizualizacjach
• Obrazy w sitemapie; grafiki AI oznaczone i nigdy nie udające dowodów