Ce este, la ce mă ajută și cum folosesc Accelerated Mobile Pages (AMP)?

Urmărind trendul crescător de la an la an în folosirea device-urilor mobile pentru navigarea pe internet, trebuie să ne gândim cum să facem cât mai plăcută și ușoară navigarea pe site-urile noastre.
Pe lângă faptul că este important ca site-ul să fie responsive, Google a venit cu un concept nou și anume Google Accelerated Mobile Pages (AMP), destinat în special (doar pentru, zic eu) articolelor/postărilor. Fiind lansat de puțină vreme (în Februarie), poate te întrebi: ce înseamnă? la ce mă ajută? pot să implementez și eu? În acest articol încerc să-ți răspund pe scurt la aceste întrebări și nu numai.

Ce este AMP?

Google a anunțat în Octombrie anul trecut că va lansa “Accelerated Mobile Pages” (AMP), luna trecută fiind lansat oficial. AMP, cunoscut sub numele de “Accelerated Mobile Pages”, este o modalitate prin care conținutul de pe site-ul tău (în special articole/postări) se poate încărca mult mai repede pe device-urile mobile. Aceste pagini sunt deja implementate în motorul de căutare Google sub o formă nouă care te poate avantaja.
Fișierele open-source puse la dispoziție evidențiază un nou mod de a afișa conținutul tău vizitatorilor de pe device-uri mobile sub o formă mai rapidă, simplificată, user-friendly fără a “sacrifica” veniturile din ad-uri.

Cum funcționează?

1. AMP HTML

Este practic tot HTML, o subcategorie a acestuia care are câteva proprietăți și tag-uri proprii și destul de multe restricții. Poți vedea mai multe detalii aici: Basic Markup

2. AMP JS:

Este un JavaScript framework pentru pagini de mobil. În cea mai mare parte, încarcă resursele prin încărcare “asynchronous”.

3. AMP CDN

Este opțional, dar se poate implementa pentru a spori viteza și pentru un management mai bun al resurselor în funcție de ce/de unde se încarcă pagina, vizitatorului.

Cum va arăta această versiune?

În primul rând, articolul tău va avea 2 versiuni, cea normală și versiunea AMP. Având în vedere că versiunea normală va fi văzută în majoritatea cazurilor, NU neglija aspectul de “responsive”!

Ce nu îmi permite AMP?

AMP are o mulțime de restricții, printre care:

1. Nu îți permite să încarci JavaScript “third-party”, dar poți cumva “ocoli” aceste restricții dacă folosești un “hack” (vezi mai multe aici AMP Form Hack)
2. Nu îți permite să încarci CSS, tot CSS-ul trebuie încărcat inline (adică direct în cod-ul html) și să nu fie mai mare de 50KB. Font-uri custom pot fi încărcate doar prin extensii speciale amp.

Alte restricții, dar care se pot implementa într-un alt mod:

1. Pentru imagini trebuie utilizat elementul “amp-img-element” (vezi detalii aici AMP img).
2. Pentru video-uri de pe youtube, îți trebuie amp-youtube (vezi detalii aici AMP YouTube).
3. Codul de analytics trebuie implementat deasemenea într-un mod diferit (vezi detalii aici AMP Analytics).
4. Mai sunt și alte componente (încă puține) și pentru alte nevoi, de exemplu pentru social share.

Cum vor arăta paginile AMP pe Google?

Google a făcut public un demo cum arată (vezi poza de mai jos), dar deja poți vedea și live. Practic vezi un carusel deasupra căutărilor cu articolele AMP, iar citirea articolului se va face ușor, integrat direct în motorul de căutare.

Cum descoperă Google paginile mele AMP?

După ce ai implementat și validat paginile tale AMP, include în header-ul articolului/postării tag-ul amphtml.

Atenție:

Paginile AMP trebuie să aibă și meta-uri Schema.org prin care specifici tipul paginii (momentan: articol, rețetă, recenzie și video). Aceste tag-uri sunt obligatorii dacă vrei să apară articolul/postarea ta în caruselul Google.

Îmi afectează veniturile din Ad-uri?

Mulți se întreabă, dacă are atâtea restricții înseamnă că nu voi putea include nici un fel de reclamă pe acele pagini. Ei bine, poți. Multe rețele de ad-uri deja folosesc amp-ad. (vezi mai multe detalii aici AMP Ad)

Cum instalez în WordPress?

Cei care folosesc WordPress au deja la dispoziție, soluții simple, aproape “ready-to-use”.

1. Instalează plugin-ul. Există un plugin aproape “ready-to-use” (fără analytics, social share și altele). Îl poți descărca de aici: GitHub AMP sau AMP WordPress Plugin
2. După ce ai instalat plugin-ul, navighează pe un articol și adaugă /amp/ la sfârșit

Exemplu: http://www.raullazar.me/28-sfaturi-de-marketing-online-pentru-o-strategie-de-succes/amp/ sau dacă nu activat permalinks, adaugi ?amp=1 în loc de /amp/

3. Pentru validarea paginii, adaugă după link-ul de amp: #development=1

Exemplu: http://www.raullazar.me/28-sfaturi-de-marketing-online-pentru-o-strategie-de-succes/amp/#development=1

4. Deschide consola de la Chrome (DevTools), navighează pe tab-ul “Console” și ar trebui să vezi “AMP validation successful.” În caz contrar vezi care este eroarea.

5. Verifică markup-ul schema aici: Google Structured Data

Atenție!

Verifică dacă ai în header “rel=“canonical” pentru evitarea de conținut duplicat.

Exemplu:

Altele de reținut:

1. Dacă folosești CDN de la CloudFlare (ca în cazul meu), dezactivează pe paginile AMP opțiunea “Rocket Loader” fiindcă va produce erori.

2. Ca să incluzi mai ușor analytics-ul în paginile AMP din WordPress + logo custom + pe când se va lansa Facebook Instant Articles (1 Aprilie), poți instala plugin-ul “PageFrog” (vezi aici: PageFrog)

Concluzie?

Este un mod destul de simplu de a implementa o versiune rapidă și simplă pentru conținutul tău, îmbunătățind “user-experience”-ul, care dă semne că va fi implementat masiv în viitor, inclusiv Facebook-ul prin Facebook Instant Articles.
Poți avea o expunere a articolelor/postările tale mai ridicată, acestea fiind evidențiate deasupra căutărilor pe device-urile mobile (momentan articolele de tip știri mai mult).
Google are intenții “mărețe” în implementarea AMP-ului, deja fiind inclus și în webmasters tools un submeniu pentru aceste pagini, iar multe publicații mari au implementat deja “Accelerated Mobile Pages”.