Cum să implementați AMP pe site-ul dvs. și să obțineți o viteză de încărcare supersonică

Poate doriți să implementați AMP pentru a crește viteza paginii. Iata de ce

Un site web cu încărcare rapidă este înfricoșător . Atenția umană este într-o spirală descendentă – nimeni nu vrea să aștepte, mai ales dacă se află pe un dispozitiv mobil.

Cât de repede trebuie să fim? Google recomandă un timp de încărcare a paginii de mai puțin de două secunde.

Există multe măsuri populare în domeniile SEO on-page și tehnice care vă ajută să îndepliniți obiectivul.

Cu toate acestea, una dintre aceste măsuri – Configurarea paginilor mobile accelerate (AMP) pentru versiunea mobilă a unui site web – este utilizată cu moderație.

De ce? Pe scurt, folosirea AMP necesită destul de mult timp, efort și fonduri, în funcție de cât de mare este un site web. Până la urmă, poate că nici nu merită.

Merită să investești în AMP? Dacă răspunsul este da, această postare vă va ajuta cu un proces pas cu pas de configurare eficientă a AMP pentru site-ul dvs. WordPress.

Implementați AMP Pasul 1: alegeți pluginul potrivit

Opțiuni de plugin

WordPress oferă multe plugin-uri pentru AMP. Am încercat câteva dintre ele cu succes în diferite grade. Unul dintre ei a dat rezultate minunate în Google Pagespeed Insights pentru o vreme. Dar mi-a spart toate paginile AMP de pe mobil!

Recomandarea mea

Aș recomanda pluginul AMP pentru WP – Accelerated Mobile Pages – WordPress. Acest plugin oferă o mulțime de opțiuni pentru personalizarea paginilor web mobile. Restul postării va fi despre configurarea AMP pentru site-ul dvs. folosind acest plugin.

După ce instalați și activați pluginul, tabloul de bord WordPress va afișa opțiunea de deschidere a versiunii AMP a site-ului dvs. Veți vedea, de asemenea, noul plugin (AMP), așa cum este evidențiat în imaginea de mai jos.

Ca în imaginea de mai sus, veți vedea un set de opțiuni, vom acoperi fiecare dintre ele una câte una.

Să trecem la setări.

Implementați AMP Pasul 2: Configurarea de bază a pluginului

Tipul site-ului web

Selectează opțiunea care reprezintă cel mai bine afacerea ta. Selectați „altul” dacă nimic altceva nu se potrivește, veți primi o opțiune de a introduce tipul site-ului dvs. după aceea.

Unde trebuie să implementați AMP?

Selectați unde doriți să implementați AMP. Când alegeți AMP, vă decideți să vă păstrați paginile web mobile aproape complet HTML. Trebuie să renunțați la codurile CSS/JS care reduc viteza de încărcare.

Dezavantajul este că experiența utilizatorului (UX) este afectată. De exemplu, nu mai puteți avea un buton de îndemn (CTA) care se rotește pentru a atrage atenția unui vizitator. AMP decupează acel cod, economisind astfel timpul de încărcare a paginii. Acest lucru poate duce în cele din urmă la o rată de implicare redusă.

În lista de mai sus, poate doriți să alegeți să aveți AMP în paginile dvs. sau în postări sau ambele.

Design si prezentare

Aici, vă puteți configura sigla , dimensiunea recomandată este de 120 x 90 pixeli. Aș recomanda să nu folosiți sigla, deoarece crește timpul de încărcare a paginii. Dacă nicio siglă nu este actualizată pe acest panou, pagina AMP va avea doar numele site-ului web în locul siglei.

Opțiunea Schemă globală de culori vă va ajuta să alegeți o culoare pentru paginile dvs. AMP care apare pe linkurile CTA de pe pagină și pe linkul de subsol.

De exemplu, am ales albastru deschis ca culoare globală , așa cum se vede în imaginea de mai jos.

Urmărire statistică

În acest panou de opțiuni, puteți activa instrumentele pe care le utilizați pentru urmărire. De exemplu, puteți activa Google Analytics adăugând ID-ul de urmărire. În acest fel, datele din paginile AMP vor fi actualizate direct în contul dvs. Google Analytics.

În mod similar, puteți adăuga mai multe alte instrumente de urmărire, așa cum sunt enumerate în imaginea de mai sus.

Setările de confidențialitate

Bara de notificare privind cookie-urile vă permite să solicitați consimțământul vizitatorilor pentru cookie-urile pe care le utilizați pe site. În imaginea de mai jos, caseta de dialog în negru este o bară de notificare privind cookie-urile.

Sursa imaginii – Monster Insights

Dacă dvs. sau baza dvs. de audiență sunteți dintr-o țară GDPR, trebuie să activați setările pentru GDPR – Regulamentul general privind protecția datelor.

Vă rugăm să rețineți, dacă trebuie să alegeți, puteți alege doar una dintre cele două opțiuni, nu ambele.

Publicitate

În acest segment, alegeți unde doriți să vă poziționați reclamele. Puteți personaliza în funcție de nevoi - puteți avea anunțuri publicate pe tot site-ul sau pe postări individuale, sau anteturi, printre alte opțiuni.

Puteți alege tipul de anunț, dimensiunea anunțului, clientul de date și spațiul publicitar de date din codul de anunț Adsense.

Compatibilitate cu terțe părți

Ultima entitate captează lista de pluginuri pentru care aveți nevoie de compatibilitate AMP.

Gravity Form și Elementor pentru AMP vă solicită să plătiți pentru extensii. Datele structurate, Reclamele pentru WP și PWA pentru WP sunt pluginuri gratuite. Ultimele trei vor fi tratate mai detaliat mai târziu în postare.

Implementați AMP Pasul 3: Mai multe setări AMP

setari generale

Fila General acoperă opțiunile pe care le-am acoperit în configurația de bază. În plus, puteți alege dacă doriți să aveți AMP pe paginile de arhive, categorii și etichete.

Activarea ultimei opțiuni – AMP Takeover (Beta) – va face ca versiunea pentru desktop și cea mobilă să fie aceeași. Aceasta înseamnă că versiunea pentru desktop va avea și pagini AMP.

Aș recomanda să păstrați această opțiune dezactivată. Încărcarea paginii este de obicei mai bună pe desktop decât pe mobil. A avea AMP pe desktop înseamnă a schimba UX pentru o mică creștere a vitezei paginii. Nu este o afacere bună.

Publicitate

Această secțiune are aceleași opțiuni ca și secțiunea Publicitate din configurația de bază.

SEO

Dacă alegeți să activați Meta Description , textul pe care îl completați în secțiunea Head va fi preluat de Google. Acesta va fi diferit de textul pe care l-ați completat pentru versiunea desktop. Aș recomanda să păstrați setarea dezactivată și să păstrați Meta Descrierea consecventă în cele două versiuni.

Etichetele de metadate OpenGraph sunt fragmente de cod care controlează modul în care sunt afișate adresele URL atunci când sunt partajate pe rețelele sociale. Această secțiune este vizibilă pentru versiunea desktop atunci când configurați titlul și metadatele în pluginul dvs. SEO. Mai jos este un exemplu de plugin-ul Yoast SEO.

Îl puteți găsi accesând secțiunea Editor a oricărei postări sau pagini, derulați până în jos. După ce vedeți secțiunea pentru Yoast, faceți clic pe fila „Social”, apoi puteți alege platforma de social media dorită.

Pluginul AMP vă permite să selectați pluginul SEO la alegere pe același panou de opțiuni. În exemplul de mai sus, Yoast este pluginul ales. Toate datele pe care le introduceți în versiunea Yoast pentru desktop sunt copiate în versiunea AMP.

Veți vedea opțiunea de a elimina compatibilitatea indexării paginilor paginate și a instrumentului de inspecție URL.

Paginile paginate trebuie indexate, dar numai ca canonice. Aș recomanda să păstrați această setare dezactivată.

Compatibilitatea instrumentului de inspecție URL încurajează o căutare mai transparentă pentru dvs. Acesta oferă rapoarte detaliate despre accesarea cu crawlere, indexarea și difuzarea informațiilor în contul dvs. Google Search Console. Aș recomanda să-l păstrați pornit.

Suport Elementor

Opțiunea AMPforWP PageBuilder vă va permite să creați pagini individuale pentru versiunea AMP, diferite de versiunea desktop. Este util atunci când doriți să aveți text sau CTA ușor diferit pentru paginile AMP.

De exemplu, dacă aveți un CTA „Contactați-ne” pentru desktop, dar preferați ca vizitatorii de pe mobil să vă sune, puteți activa această opțiune și crea o pagină separată.

PWA

Conform descrierii AMP pentru WP Plugin – Progressive Web Apps (PWA) transformă site-ul dvs. într-o aplicație web și oferă vizitatorilor o experiență nativă asemănătoare aplicației mobile.

Este o îmbunătățire a designului. Activarea modulului este o chestiune de alegere.

Performanţă

Panoul Performanță aprofundează în optimizarea vitezei paginii.

Vă permite să minimizați CSS/JS pentru a reduce utilizarea lățimii de bandă fără a afecta UX sau funcționalitatea. Leverage Browser Cache vă permite să accelerați timpul de încărcare pentru vizitatorii care revin. Aș recomanda să păstrați ambele opțiuni activate.

Activarea Optimize CSS va declanșa funcția de scuturare a arborelui de optimizare CSS. Îl puteți menține pornit în cazul în care nu aveți un alt plugin care face deja treaba respectivă.

Analytics, date structurate, bară de notificări și GDPR

Aceste secțiuni au aceleași opțiuni ca cele abordate în configurația de bază.

Notificări

În cazul în care doriți să configurați notificări push, puteți opta pentru una dintre OneSignal, iZooto și Truepush .

În exemplul de mai sus, am selectat OneSignal. Cu toate acestea, pentru orice selecție, veți vedea o secțiune pentru a introduce ID-ul APP, o opțiune pentru a activa notificările push pentru Pagini. În plus, trebuie să alegeți unde doriți să poziționați notificarea (partea de jos a paginii de exemplu) și ce text doriți să afișați.

Formulare de contact

Acest lucru vă permite să alegeți unul dintre cele 3 plugin-uri pentru a optimiza AMP pentru - Formularul de contact 7, Formularul Gravity și Formularul Ninja.

Toate trei vă cer să plătiți pentru o prelungire. În cazul în care CTA se concentrează în principal pe formulare, este prudent să investești în extensie.

Comentarii

Acest ecran vă permite să alegeți unde doriți să apară comentariile generate de utilizatori pe site-ul dvs. web. De asemenea, puteți alege sursele din care să afișați comentariile.

Alegeți setările care funcționează cel mai bine pentru dvs.

Articole instantanee

Articole instantanee este o funcție a aplicației Facebook pentru utilizatorii de telefonie mobilă, care vă permite să găzduiți articolele site-ului dvs.

Avantajul activării acestei funcții este un timp de încărcare și mai rapid în comparație cu faptul că aveți același articol pe site-ul dvs. Deoarece articolul se încarcă în aplicație, obțineți o viteză de încărcare de până la 10 ori mai mare.

Cu toate acestea, deoarece conținutul rămâne pe Facebook, s-ar putea să pierdeți din traficul site-ului. Este un compromis între viteza paginii și traficul pe site. Aș recomanda să nu-l ții.

Dacă alegeți să îl mențineți activat, veți vedea setările de mai jos.

După ce ați introdus ID-ul paginii dvs. de Facebook, puteți personaliza setările articolului. O setare care necesită mai multe explicații este – Ingestie crawler .

Când linkul articolului dvs. găzduit pe site-ul dvs. este distribuit pe Facebook, crawlerele Facebook caută eticheta ia:markup_url . Dacă este prezent, Facebook vă ingerează articolul și creează un articol instantaneu pe pagina dvs. de Facebook.

Instrumente

Opțiunea Pagină AMP individuală vă permite să alegeți dacă doriți să afișați paginile AMP în mod prestabilit sau nu. Când alegeți Afișare implicit , toate paginile dvs. vor afișa versiunea AMP. Cu toate acestea, puteți alege să ascundeți AMP pentru postări sau pagini individuale.

Pentru a face acest lucru, accesați orice pagină și faceți clic pe Editați pagina . În fila Setări din dreapta, puteți găsi opțiunea de a o dezactiva.

În mod similar, puteți alege să Ascundeți versiunile AMP pentru categoriile și postările selectate.

Query Monitor este panoul de instrumente pentru dezvoltatori pentru WordPress. Dacă sunteți un dezvoltator, care trebuie să vadă interogările de pe pagină, ar trebui să păstrați setarea activată.

Setări avansate

Panoul de opțiuni Advance Settings are o serie de setări, dintre care majoritatea se explică de la sine.

Aș recomanda să păstrați setările implicite activate, cu excepția cazului în care sunteți un dezvoltator WP sau ați angajat un expert pentru a vă proiecta site-ul.

eCommerce

Dacă dețineți un magazin online, vă puteți personaliza versiunea AMP pentru WooCommerce . Dacă vindeți în principal active digitale, puteți activa opțiunea Easy Digital Downloads Support . Ambele opțiuni necesită să activați o extensie plătită.

Panoul de traducere

Acest panou vă permite să selectați traducerile potrivite pentru un set de cuvinte utilizate în mod obișnuit în limba dorită.

De exemplu, trebuie să introduceți traducerea pentru Afișați versiunea non-AMP potrivită publicului dvs.

Pentru traduceri multilingve, puteți activa metoda Utilizați fișierul POT a traducerii . Fișierul POT (Portable Object Template) este un șablon pentru fișierele PO. Sunt fișiere text simplu care conțin traducerile. Fiecare limbă are propria extensie de fișier. De exemplu, franceza are po.fr.

Implementați AMP Pasul 4: Proiectare

Teme

La fel ca pentru versiunea desktop a site-ului dvs., puteți alege o temă pentru versiunea AMP.

Există patru opțiuni gratuite din care puteți alege.

• Rapid
• Design One
• Design Doi
• Și, Design Three

În plus, fiecare pagină și postare are o secțiune care vă permite să vă creați propriul design.

Iată cum îl puteți găsi. Accesați pagina sau postarea și faceți clic pe „Editați pagina” din bara de instrumente de sus. Derulați în jos pentru a vedea ecranul de mai jos.

Dacă bifați caseta de selectare Utilizați generatorul , șablonul pe care îl creați va fi afișat, dacă nu, șablonul gratuit pe care îl selectați va fi afișat.

În cazul în care vă construiți propriul șablon, aveți la dispoziție modulele de mai jos din care să alegeți.

Amintiți-vă, AMP este practic o pagină HTML. Nu puteți obține multă personalizare sau butoane fanteziste.

Vă rugăm să rețineți: trebuie să selectați o temă. Pluginul are nevoie de el pentru a alege pictogramele și structura - chiar și atunci când vă creați propriul design. Puteți intra în mai multe detalii în acest pas pe măsură ce implementați AMP.

Global

Acest panou de opțiuni vă permite să personalizați versiunea AMP.

Puteți selecta culorile la alegere ca mai sus. În plus, puteți selecta Fonturi Google . Cu toate acestea, aș recomanda să o păstrați dezactivată, deoarece fonturile Google măresc timpul de încărcare, înfrângând scopul AMP.

Mai departe, puteți alege să păstrați Sidebar și Infinite Scroll activate dacă așa doriți să arate pagina dvs. web. Cu toate acestea, din perspectiva vitezei paginii, ar trebui să o păstrați.

Biblioteca de pictograme font va fi aceeași cu tema pe care ați ales-o la începutul panoului Design.

Antet

Panoul de opțiuni antet vă permite să decideți aspectul antetului și cum ar trebui să arate meniul de navigare.

De asemenea, vă permite să adăugați un buton Apelați acum. Este un buton util pentru utilizatorii de telefonie mobilă.

Puteți alege să afișați linkul non-AMP în antet. Cu toate acestea, dacă audiența dvs. nu este orientată tehnic SEO, este posibil să nu facă clic pe link.

De asemenea, puteți activa bara de căutare . Este benefic dacă ai un site de blogging.

Opțiunea de antet avansată vă permite să deveniți mai precis cu setările secțiunii antet. Este o chestiune de alegere. Cu toate acestea, rețineți să nu adăugați cod, deoarece va afecta negativ viteza de încărcare a paginii.

Pagina de pornire, Single, Subsol, Pagina, Partajare socială, Data și Diverse

Aceste panouri opționale, la fel ca și antetul, sunt complet o chestiune de alegere a designului. Puteți alege orice setări care vi se potrivesc cel mai bine.

Rezumând

Pașii de mai sus vă vor ajuta să implementați eficient AMP pe site-ul dvs. web. După ce ați salvat modificările, verificați versiunea AMP pe telefon sau, adăugând „/amp” după adresa URL.

Imaginile de mai jos surprind caracteristicile paginii dvs. AMP.

AMG PAGE VISUAL

SUBSOL

Iată-l. Urmați acești pași pentru a implementa AMP și pentru a avea pagini fără erori, super-rapide, care se încarcă în mai puțin de 2 secunde pentru vizitatorii de pe telefonul mobil.