CTA (cselekvésre ösztönzés)

Üzleti hatás

A CTA a bevétel és a forgalom közötti kapcsolat. Forgalmad lehet szép, de ha nincs hova kattintani, a látogatás elillan. Ez a leggyorsabban javítható konverziós hiba egy oldalon.

SEO-hatás

A gombok és linkek felirata belső horgonyszöveg. A konkrét felirat megmondja a keresőnek, miről szól a célzott oldal. Ez erősíti a belső linkelést, a „Tovább” feliratok viszont elvesztegetik a jelet.

AI-értelmezhetőség

A generatív keresők nem csak a leírásodat foglalják össze. Azt is megpróbálják megmondani, hogyan lehet veled kapcsolatba lépni. Ehhez a látható konverziós pontokból és a kapcsolati adatokból dolgoznak. Ha ezek hiányoznak, az AI-válasz megáll a cég bemutatásánál, és a következő lépést a versenytársad oldaláról hozza.

Vonatkozik rá

• Szolgáltató cégek, KKV-oldalak: ajánlatkérés vagy időpontfoglalás a fő cél, itt a legnagyobb a tét.
• Webshopok: a termékoldal „Kosárba” gombja alapeset, de a kezdőoldalon is kell irány.
• Landing oldalak, kampányoldalak: egyetlen CTA-ra épülnek.
• Tartalmi oldalak, blogcikkek: a cikk végén legyen továbblépés a szolgáltatás felé.

Nem vagy alig vonatkozik rá

• Jogi és tájékoztató aloldalak, például impresszum vagy adatvédelmi tájékoztató.
• Belső, bejelentkezés mögötti felületek, ahol a funkció maga a cselekvés.
• Staging és fejlesztői környezetek, ahol amúgy is noindex a helyes beállítás.
• Hírportálok cikkoldalai, ahol az olvasás a cél, nem a megkeresés.

Lépések

1. Nyisd meg a kezdőoldalt inkognitó ablakban, asztali nézetben.
2. Nézd meg az első képernyőt görgetés nélkül. Keresd a gombot, ami megmondja, mit tegyél.
3. Ismételd meg mobilnézetben is. A devtools eszköztárában válts 390 pixel széles nézetre.
4. Nyisd meg a devtools Elements panelét, és keress rá a <button> és <a> elemekre.
5. Olvasd el a feliratokat a HTML-ben, nem a képernyőn. Amit ott látsz, azt látja a gép is.
6. Kattints rá a CTA-ra. Ellenőrizd, hogy a célhely tényleg a megígért lépés.
7. Kapcsold ki a CSS-t vagy nézd meg a curl kimenetét. Ha a felirat eltűnik, kliensoldali kódból jön.

Jó jel

• Az első képernyőn van legalább egy igével kezdődő gombfelirat.
• A felirat konkrét: „Kérj ajánlatot”, „Foglalj időpontot”, „Hívj minket”.
• A CTA valódi <a href> vagy <button> elem, olvasható szöveggel.
• A telefonszám tel: linkként kattintható mobilon.
• Hosszabb oldalon 2-3 helyen visszatér ugyanaz a felajánlás.

Rossz jel

• Csak menüpont van, „Kapcsolat” felirattal.
• A gomb felirata „Tovább”, „Részletek” vagy „Kattints ide”.
• A CTA képre égetett szöveg, üres vagy hiányzó alt attribútummal.
• A kattintható elem <div>, JavaScript eseménykezelővel, href nélkül.
• Öt különböző CTA verseng egymással ugyanazon a képernyőn.

WordPress

1. Válaszd ki az egy fő cselekvést a kezdőoldalra.
2. A blokkszerkesztőben szúrj be Gomb blokkot a hero szakaszba.
3. Írj konkrét feliratot, például „Kérj ajánlatot”.
4. A célhely legyen az ajánlatkérő oldal vagy a kapcsolati űrlap.
5. Elementor vagy hasonló builder esetén Button widgetet használj, ne képet linkkel.

Shopify

1. Nyisd meg a Theme editort, és válaszd a kezdőoldal hero szekcióját.
2. Töltsd ki a Button label és Button link mezőket.
3. Kollekció- vagy termékoldalra mutass, ne a „Rólunk” oldalra.
4. A termékoldalon ellenőrizd, hogy az Add to cart gomb az első képernyőn látszik mobilon is.

Unas

1. Szerkeszd a kezdőoldal tartalmát a Tartalom menüpont alatt.
2. A HTML-szerkesztőben tegyél be linket gomb osztállyal, konkrét felirattal.
3. A sablonbeállításokban engedélyezd a kiemelt kategória- vagy akciódobozt.
4. Ellenőrizd a kosárba helyezés gomb láthatóságát a terméklistában.

Shoprenter

1. Nyisd meg a kezdőoldal szerkesztőjét a design beállításoknál.
2. Adj hozzá bannert vagy szövegdobozt, benne szöveges linkgombbal.
3. A feliratot kézzel írd át, ne maradjon a sablon alapértelmezett szövege.
4. Nézd meg a mobil nézetet is, ott gyakran a footerbe csúszik a gomb.

Egyedi fejlesztés

1. A CTA legyen szemantikus elem: navigációhoz <a href>, műveletethez <button>.
2. A felirat kerüljön a HTML-be, ne CSS content értékbe vagy háttérképbe.
3. Ha csak ikon van, adj hozzá aria-label attribútumot.
4. Kliensoldali renderelésnél ellenőrizd a szerver válaszát curl paranccsal.
5. Egy oldalon egy elsődleges CTA legyen, a többi maradjon másodlagos stílusú.

• „Tovább” és „Kattints ide” feliratok: sem a látogató, sem a modell nem tudja meg belőlük, hova visznek.
• A menü helyettesíti a CTA-t: a „Kapcsolat” menüpont navigáció, nem felajánlás, és senki nem érzi hívásnak.
• Képre égetett gombfelirat: a HTML-ben nem marad szöveg, így a keresőnek és az AI-nak láthatatlan.
• <div> kattintható elemként: href nélkül nem link, a robot nem követi, billentyűzettel nem elérhető.
• Öt egyenrangú CTA egy képernyőn: a választás terhe a látogatóé lesz, és inkább kilép.
• Hamis ígéret a feliratban: a „Kérj ajánlatot” gomb egy általános kapcsolati oldalra visz, űrlap nélkül.
• Csak grafikus telefonszám: a riportokban ezt látjuk a legtöbb szolgáltató oldalon, pedig tel: linkkel egy kattintás lenne. A nyílt szöveges e-mail cím ugyanezt a hibát mutatja.

Rossz megoldás, mert a kattintható elem nem link, a felirat pedig semmitmondó:

<div class="btn" onclick="location.href='/kapcsolat'">Tovább</div>
<img src="/img/ajanlatkeres-gomb.png" alt="">

Jó megoldás. Valódi link, konkrét felirat, kattintható telefonszám, ikonos gombnál aria-label:

<a class="btn btn-primary" href="/ajanlatkeres">Kérj ajánlatot</a>
<a class="btn btn-secondary" href="tel:+3612345678">Hívj minket: +36 1 234 5678</a>

<a class="btn-icon" href="/idopontfoglalas" aria-label="Foglalj időpontot">
  <svg aria-hidden="true" width="20" height="20"><use href="#calendar"></use></svg>
</a>

Ellenőrzés parancssorból. A curl a nyers szerverválaszt kéri le, így kiderül, hogy a felirat a HTML-ben van-e, vagy csak JavaScript rakja oda:

curl -s https://pelda.hu/ | grep -oiE '<(a|button)[^>]*>[^<]{3,60}</(a|button)>'

Ha a kimenetben nem látsz igével kezdődő feliratot, a gépnek sincs mit olvasnia.