Google AMP használata WordPress oldalakon: beállítás egyszerűen

Korábbi cikkeinkben mutattunk már olyan megoldásokat, amelyekkel egy-egy WordPress alapú honlap jelentősen gyorsítható. Ilyen volt például az erre hivatott cache plug-innel, illetve a képek optimalizálásával foglalkozó összeállításunk. Mivel a Google immár a honlapok betöltési sebességét is erősen figyeli amikor egy-egy oldalt megjelenít keresője találati listájában, így a weboldalak sebességének optimalizálását nem lehet félvállról venni. Ráadásul nem csak az asztali rendszereken internetezők számítanak: még fontosabb az okostelefonokon böngészők kedvében járni. Ehhez optimalizálhatjuk az oldal mobilos megjelenését mi magunk is, de segítségül hívhatjuk a Google megoldását is. A Google AMP (Accelerated Mobile Pages) szolgáltatás a WordPress oldalakon is viszonylag egyszerűen beüzemelhető és ha oldalunk alapból nincs megfelelően mobilra optimalizálva, akkor jó – bár korlátozott – megoldást jelenthet, bár kétségtelen, hogy lehetnek hátulütői is.

 

Google AMP használata WordPress oldalakon

Hasonlóan a Facebook Instant Articles (Azonnali cikkek) szolgáltatásához, a Google AMP (Accelerated Mobile Pages) lényege is az, hogy az eredeti online cikket egy teljesen letisztult, mobilra optimalizált kóddal átalakítva jeleníti meg az okostelefon böngészőjében. Ez egy minimalista és villámgyorsan betöltődő oldalt jelent, amelyet a kisebb méretű kijelzőkön is kényelmesen lehet olvasni. Ezzel a módszerrel a felhasználók spórolhatnak az adatforgalmon és gyorsabban jelenik meg készülékükön a kívánt tartalom, mi pedig leveszünk némi terhet a saját szerver válláról, hiszen a megjelenítést is a Google szerveri intézik. A Google AMP oldalak alapvetően a Google keresőjéből érhetők el a felhasználók számára: ha valaki okostelefonos böngészőben keres és a Google érzékeli, hogy az adott találatokból létezik AMP verzió is, akkor ezt a találati listában egy kis “villám” ikon jelzi. Ha ilyet látunk, akkor az eredeti honlap felépítés helyett az AMP változat töltődik be a linkre bökve – az ikonhoz hűen – villám tempóban.

Az AMP oldalak létrehozása alapvetően programozást igénylő feladat, különösen, ha teljesen testreszabott megoldásra vágyunk. Viszont ha gyorsan és egyszerűen szeretnénk ezt megoldani WordPress alapú blogunk, weboldalunk esetében, akkor van pár ingyenes plug-in, amelyekkel viszonylag egyszerűen megtehetjük.

 

Yoast + Google AMP

Az egyik legjobb WordPressre készült SEO plug-in a Yoast, amely a keresőoptimalizálási feladatokon túl alkalmas arra is, hogy például az AMP átállásban segítsen. A folyamathoz először is kell tehát egy Yoast SEO plug-int telepítenünk, majd ugyanígy be kell üzemelnünk az Automattic-féle AMP for WordPress modult, illetve ha ez a kettő már megvan, akkor az összekötésüket végző Glue for Yoast SEO & AMP kiegészítőt is telepíteni és aktiválni kell. Utóbbit – vagy legalábbis az adott funkciót – elvileg egyszer majd integrálják a Yoast SEO-ba, de egyelőre csak külön elérhető.

Ha mindhárom plug-in megvan és beüzemeltük őket, akkor a Yoast plug-in beállításai között megjelenik egy AMP opció is. Ezt kiválasztva határozhatjuk meg, hogy milyen esetekben (bejegyzések, projektek stb.) szeretnénk AMP változatot generáltatni az adott tartalomból.

Ugyanitt formálhatjuk át AMP-os oldalaink megjelenését, kezdve a fejléc színvilágától a logón át a szövegek és linkek színéig. Ha kell, megadhatunk saját CSS kódot is, sőt, az AMP oldal HEAD részébe is integrálhatunk itt saját kódot, bár ebben az esetben azért akadnak kötöttségek a Google szabályai miatt. Végül ugyancsak itt adhatjuk hozzá Google Analytics kódunkat is az átalakított bejegyzésekhez.

 

Az AMP működése a gyakorlatban

Blogbejegyzéseink AMP változatai ugyanazon a linken érhetők el, mint a konkrét bejegyzés, azzal a különbséggel, hogy itt egy /amp végződés kerül a link végére (például ahogy a Paleolcsó oldal ezen bejegyzésénél, ahol ez a “sima” verzió, míg ez az AMP változat ugyanabból a cikkből). Arról, hogy az AMP változat jelenjen meg mobilon, maga a Google gondoskodik: ha talál ilyen verziót az adott posztból, akkor jelöli a keresőben a találatoknál és azt is nyitja meg az eredeti változat helyett.

Asztali böngészőkben a Google a normál változatot fogja felajánlani, ahogy tableten is (egyelőre). Az AMP oldalak hivatalosan csak a mobilokon jelennek meg.

 

Analytics kód megadása és Webmaster Tools

Két dolgot szoktak felróni negatívumként az AMP esetében. Az egyik, hogy macerás belecsempészni hirdetéseket, ami persze sokak számára eleve nem jelent gondot, ezen kívül azért ha kell, megoldható. A másik, hogy faramuci módon megy a látogatottság mérése.

Ez utóbbi alapvetően igaz, a Google még külön Analytics tulajdon felvételét is javasolja az AMP oldalakhoz, de a helyzet az, hogy a fenti kiegészítőkkel örténő beüzemelés esetében megúszhatjuk egyszerűbben is. Nevezetesen a Yoast SEO plug-in AMP opciói közötti Analytics részben meg kell adni simán a már bevált Analytics mérőkódunkat, kicsit más köntösben. Ez azt jelenti, hogy nem az Analytics által generált kódot kell használni, hanem a következőt:

<amp-analytics type=”googleanalytics” id=”analytics1″>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXXXXX-X”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>

Az Account résznél az UA-XXXXXXXX-X értéket természetesen át kell írni a saját Analytics kódunkra. Ha ezt megtesszük, akkor az Analyticsben megjelenik majd az AMP oldalak látogatottsága is. Egyébként az Analytics felületén szűrőkkel akár külön is mérhetjük, hogy hányan vándorolnak át AMP oldalainkra, de ennek beállítása már egy másik történet. Ugyancsak fontos, hogy a Google Search Console-ban is ellenőrizzük, sikerül-e indexelnie a keresőnek az AMP oldalakat, ehhez ott már külön opciókat találunk.

 

Mikor vágjunk bele?

Nos, ez az a kérdés, amire kicsit nehéz válaszolni. Ha weboldalunk eleve reszponzív, esetleg külön optimalizáltuk okostelefonos megjelenésre és a Google különféle ellenőrző eszközei alapján kellően gyors és megjelenítési problémák sincsenek vele, akkor az AMP nem feltétlenül éri meg a plusz macerát. Ráadásul az AMP-os oldalak, bár valamennyire testreszabhatók, közel sem képesek annyi extra funkciót megjeleníteni, mint egy hagyományos HTML5 oldal. Éppen ez a lényegük, hiszen a lebutított, sallangoktól mentes oldal sokkal gyorsabban töltődik be. Viszont azt senki nem merné kijelenteni, hogy esetleg SEO szempontból a Google nem részesíti előnyben a mobil keresések találatai között az AMP verziót alkalmazó oldalakat. Hivatalosan – egyelőre – ezt nem hangoztatja a keresőóriás, de közel sem elképzelhetetlen, hogy jobb helyezést érünk el mobilon az AMP használatával. Az mindenesetre biztos, hogy a megfelelően optimalizált mobil megjelenés sokat nyom a latban. Ha viszont nem látjuk át az Analytics és a Search Console beállításait, esetleg gondot jelentene a hirdetések átültetése az AMP kódba, akkor érdemesebb hanyagolni a váltást, mert rosszul sikerült beállítások esetében szétzilálhatjuk a látogatottsági adatokat és a hirdetési bevételünket is.

Az AMP egyébként kicsit emlékeztet minket a Google webp képformátumára (ezt itt emlegettük), amely évek óta létezik, de mivel csak részlegesen támogatják a böngészők (egyelőre csak a Chrome és az Opera tudja megjeleníteni őket), így nem terjedt el igazán, pedig nagyszerű technikai megoldás. Az AMP ennél azért népszerűbb az online tartalomszolgáltatók körében, de mivel nem minden esetben egyszerű a bevezetése, így aztán nem mindenki alkalmazza. Az sem szentírás, hogy nekünk most azonnal bele kell vágnunk ebbe a kalandba. Mellesleg még egy dolog akadályozhatja a váltást: a Google AMP használatához az adott oldalnak SSL tanúsítvánnyal kell rendelkeznie, ennek hiányában nem fog működni a megoldás (WordPress oldalon történő SSL beállításról itt írtunk). Szóval akad mit átgondolni bőven. Viszont adott esetben sokat nyerhetünk vele, ha sikerül honlapunkat tökéletesen hozzáigazítani a mobilon böngésző közönség elvárásaihoz.

Ez is érdekelheti