Nyílt Web Alapítvány > WordPress Magyarország > Keresőoptimalizálás > Google AMP: Te felkészültél?
Keresőoptimalizálás

Google AMP: Te felkészültél?

Szerző: Patai László

A Google az elmúlt években igen nagy hangsúlyt fektet a mobilfelhasználókra. Ez nem véletlen, hiszen ma már nem ritka, ha egy weboldal látogatóinak 30-40%-t a mobilozók adják (mobil: okostelefonok, tabletek stb…). A Google legújabb irányvonala az AMP, ezt hivatott támogatni.

“A reszponzív weboldal (RWD) egy olyan megközelítéssel tervezett weboldal, amelynek a célja az, hogy optimális megjelenést biztosítson – könnyű olvashatóság, egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel – a legkülönfélébb eszközökön (az asztali számítógép monitorjától egészen a mobiltelefonokig).”

A hagyományos weboldalak, melyeket nem optimalizáltak mobileszközökre, lassúak és megterhelik a mobilokat, továbbá szinte senki nem fogja elolvasni a 1-2mm-es betűket (persze lehet nagyítani, de akkor sem túl felhasználóbarát).

A reszponzív oldalak ugyan megfelelően jelennek meg az eszközökön, viszont mivel javarészt CSS segítségével alakítjuk át az oldalt mobilra, ezért a letöltött adatmennyiség lényegében nem változik, csak átalakul.

Az AMP célja, hogy gyorsabbá tegye a tartalomelérést és az információátadást a felhasználóknak. A Google legújabb szabványát természetesen már a WordPress is támogatja a következő bővítmény segítségével: https://hu.wordpress.org/plugins/amp/ (fejlesztő: Mohammad Jangda, Joen Asmussen és természetesen az Automattic).

“A WordPress AMP bővítmény csak a bejegyzéseket jeleníti meg AMP módban. Nem vált át automatikusan és a bejegyzéseken kívül (jelenleg) mást nem támogat. Ne felejtsük el, hogy jelenleg még csak a 0.3-as verziónál járunk.”

Az AMP szabvány segítségével egy olyan HTML oldalt kapunk, amin csak a “lényeg” található meg.

Például: Nézzük Tamás cikkének a forrását AMP módban: http://wphu.org/wordpress-frissitesek/hibajavito-verzio-4-5-1-megerkezett/amp/

Nézzük a vonatkozó forráskódot:
A normál oldalon el kell helyezni egy hivatkozást a következő módon:

<link rel="amphtml" href="http://wphu.org/wordpress-frissitesek/hibajavito-verzio-4-5-1-megerkezett/amp/" />

Természetesen ezt a WordPress AMP bővítmény elvégzi helyettünk!

AMP HTML felépítése:
A Google szerencsére sok példát biztosít a számunkra: Create Your AMP HTML Page

Az előbb említett cikkünk forrása:

<!doctype html>
  <html amp>
    <head>
      <meta charset="utf-8">
      <title>Hibajavító verzió: 4.5.1, megérkezett!</title>
      <link rel="canonical" href="http://wphu.org/wordpress-frissitesek/hibajavito-verzio-4-5-1-megerkezett/">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    </head>
    <body>
...
    </body>
  </html>

Tehát kaptunk egy lebutított oldalt, amin csak a szöveg látszódik (mint 1995-ben), ami gyorsan betöltődik, jól olvasható és vélhetőleg sokkal kevesebb erőforrást eszik.

Az új szabvány előnye és hátránya is egyben, hogy bizonyos HTML, JS és CSS kódokat tilt, ezáltal tudja csökkenteni a betöltési sebességet.

Az előnyöket fent írtam. A hátrányai lehetnek (az oldal tulajdonosok szemszögéből) például a reklámfelületek csökkenése, hiszen a nagyobb reklámokat elfelejthetjük. Persze a Google Adsense működik AMP módban is (szépen is nézne ki, ha nem menne az egyik legfontosabb Google termék).

Adsense használhat:

<amp-ad width=300 height=200
    type="adsense"
    data-ad-client="ca-pub-XXXX"
    data-ad-slot="YYYY">
</amp-ad>

Ezt csak úgy érdekességképpen jegyeztem meg. Akit jobban érdekel az AMP Adsense, annak ajánlom ezt a jó kis cikket: How to Make AMP Adsense Ads Responsive (Accelerated Mobile Pages).

Azok a weboldalak, akik alkalmazzák az AMP-t, valószínűleg forgalomnövekedést könyvelhetnek el a Google-ből, hiszen jobb pozíciót fognak kapni a Google találati listáján. Az egyenlőre nem egészen világos, hogy a Google hogyan fogja ezeket az oldalakat megjeleníteni. Várjuk a fejleményeket! Viszont addig is nem árt, ha felkészítjük a WordPress oldalunkat.

Összességében az Accelerated Mobile Pages jó dolog. Én látok benne fantáziát, de szerintem csak akkor fog elterjedni, ha a Google érezhetően előnyben részesíti azokat a weboldalakat, amelyek használják.

Felhasznált források:

A szerzőről

Patai László

1999 óta foglalkozom nyílt forrású rendszerekkel, 2006 óta kimondottan WordPress-el. Az utóbbi időben WordPress alapú webshopokat építek. Az általam felügyelt WooCommerce-ek éves forgalma meghaladja a 1.5 milliárd forintot. @patai-laszlo

Hozzászólás a fórumban:

Kezdőlap Fórumok Google AMP: Te felkészültél?

Ennek a témakörnek tartalma 1 hozzászólás, 2 résztvevő. Utolsó frissítés:  Rottenbacher Tamás 1 év, 10 hónapja telt el.

10 bejegyzés megtekintése - 1-10 / 10
  • Szerző
    Bejegyzés
  • #258039

    Patai László
    Adminisztrátor
    • Témanyitás: 182
    • Hozzászólás: 2939
    • WordPress szakértő

    Kérdésed, vagy véleményed van a(z) Google AMP: Te felkészültél? című tartalommal kapcsolatban?
    [A teljes cikk itt olvasható: Google AMP: Te felkészültél?]

    #258043

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    Érdekes. Vajon a tartalomba ágyazott kódot is kicsit megszűri?

    #258046

    Patai László
    • Témanyitás:
    • Hozzászólás:
    • Tag

    Igen, egészen jól megszűri. Nézd:

    Google AMP: Te felkészültél?

    Sok témaspecifikus gyorskódot használtam.

    #258051

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    A max szélességgel a kódrészletnél még bírkózik, de reméljük eredményesen továbbfejlesztik az oldalakra is és a bővítményeknél ellenőrzik. 🙂

    #258052

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    Tényleg, erre a mobil böngészők vajon már felkészültek?

    #258053

    Patai László
    • Témanyitás:
    • Hozzászólás:
    • Tag

    Nekem chrome alatt egész jó. Nem rossz ötlet ez.

    #258054

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    Az várható volt, hogy sajátja egyből kezelni fogja. Noha én ha megnyitom a 4.5.1-es frissítős hírt Androidon, Chrome-ban, akkor még nem az AMP-s jön be. 🙂

    #258055

    Patai László
    • Témanyitás:
    • Hozzászólás:
    • Tag

    Írtam is, hogy nem vált automatikusan át 🙂 /amp/-t írd a végére. Gondolom ez majd a találati listáról fog előjönni.

    #258056

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    Úgy persze, hogy bejön. Azt hittem, a link rel=”amphtml”-ot észleli a böngésző és automatikusan oda átirányít. Legalább is szerintem így lenne ésszerű. 🙂

    #258057

    Rottenbacher Tamás
    Adminisztrátor
    • Témanyitás: 63
    • Hozzászólás: 2875
    • Fórum rajongó

    Vajon ha a WordPress wp_is_mobile lekérésével átirányítást teszek be, az mennyire lehet szerinted eredményes ezzel az AMP bővítménnyel karöltve? 🙂

10 bejegyzés megtekintése - 1-10 / 10

‘Google AMP: Te felkészültél?’ témakör lezárásra került, így a hozzászólás nem lehetséges.

Tovább az eszköztárra

A honlap további használatához a sütik használatát el kell fogadni. További információ

A süti beállítások ennél a honlapnál engedélyezett a legjobb felhasználói élmény érdekében. Amennyiben a beállítás változtatása nélkül kerül sor a honlap használatára, vagy az "Elfogadás" gombra történik kattintás, azzal a felhasználó elfogadja a sütik használatát.

Bezárás