Instalarea AMP în WordPress

Ce veți crea

Ce este AMP?

În octombrie anul trecut, Google a anunțat AMP ca o inițiativă cu surse deschise pentru a oferi o navigare mai rapidă a browserului mobil. După cum a descris TechCrunch, mulți consideră AMP drept o încercare a companiei Google de a concura mai bine cu Articolele Instant și aplicațiile mobile Facebook, care oferă din ce în ce mai rapidă și mai rapidă navigare. Tind să fiu de acord.

Paginile optimizate cu AMP vor apărea într-un carusel de navigare mobil în partea superioară a rezultatelor căutării Google, înlăturând articole tradiționale HTML pentru a avansa în jos. Și se vor încărca aproape instantaneu.

Sincer, sunt sceptic la AMP pentru bloggeri și editori mici. Adesea scriem un conținut extraordinar care se străduiește să ajungă la partea de sus a rezultatelor căutării Google. Acum, trebuie să implementăm încă o altă tehnologie pe resursele noastre limitate, sperând că conținutul nostru apare în partea de sus. Interesant este faptul că, în timp ce apar edituri mari de mass-media, nu văd postări de blog în rezultatele căutării AMP și nici nu sunt alți bloggeri WordPress: 

De asemenea, bănuiesc că UX-ul de a îngropa alte rezultate ale căutării sub carusel va funcționa bine pentru Google.

Când am lucrat la Microsoft, am ajutat la lansarea MSN News în 1995, ca parte a rețelei MSN Online, care a lansat cu Windows 95, răspunsul Microsoft la AOL. MSN News a solicitat un vizualizator de aplicații personalizat care a rulat pe o versiune a platformei Microsoft Media Viewer, cadrul care a permis activitățile anterioare de conținut CD. Dar, într-un an, trebuia să ne pregătim pentru web și fuziunea noastră cu NBC - mai târziu a devenit MSNBC.com. A trebuit să customizăm cadrul nostru de publicare pentru a genera simultan Media View și HTML. Acest lucru a creat o serie de complexități noi. 

AMP îmi amintește de toate aceste eforturi. Este o versiune extrem de diferită, extrem de constrângătoare a codului HTML, care necesită schimbări enorme în site-ul dvs. și în orice publicitate pe care ați putea-o utiliza.

Pluginul gratuit WordPress AMP

Vestea bună este că WordPress a lansat un plugin gratuit AMP care vă ajută să implementați AMP fără o mulțime de dezvoltare suplimentară. Cu toate acestea, are multe limitări. Designul site-ului dvs. este puternic constrâns, și există conflicte cu alte pluginuri WordPress, tehnici comune de optimizare și multe altele. AMP va deveni acum o povară suplimentară pentru dezvoltatorii de teme WordPress.

AMP este în fază incipientă și sunt dezamăgit de faptul că Google a ales să creeze un cadru cu totul nou, în loc să colaboreze cu editorii, pentru a optimiza HTML5 pentru a configura mai rapid modul în care să se încarce paginile, ce ar trebui să se încarce mai întâi și cum să elaboreze rapid textul. Aceasta ar fi fost o abordare mai luminată. Dar apoi, echipele Google sunt genii.

În ciuda preocupărilor mele, în acest tutorial vă voi trece prin instalarea pluginului AMP pentru WordPress și a Adezivului de Yoast SEO pentru pluginul AMP, ceea ce vă oferă un pic mai mult control asupra aspectului final al site-ului dvs..

Ce arata AMP pe WordPress?

Iată un exemplu de pagină AMP comparativ cu pagina HTML originală. Puteți să le răsfoiți dinamic, aici pentru versiunea originală și aici pentru versiunea AMP. Desigur, încărcarea paginii este mult mai rapidă cu AMP.

Imaginea paginii HTML5 originale la JeffReifman.com:

Următoarea etichetă de legătură este adăugată la fiecare pagină din blocând, spunând motoarelor de căutare că o versiune AMP a paginii este disponibilă.

 

Există, de asemenea, o legătură canonică care definește adresa URL a paginii sursă pentru legare:

Imaginea paginii AMP la JeffReifman.com:

Meniurile și navigația au dispărut, iar branding-ul a dispărut în mare parte (deși există unele opțiuni), dar pagina se încarcă rapid.

Permiteți-mi să vă trec prin activarea AMP cu WordPress.

Pluginul AMP WordPress

Puteți studia și descărca AMP WordPress Plugin din directorul plugin WordPress. Sau puteți să îl căutați și să îl instalați direct de pe tabloul de bord WordPress.

Mergeți la Plugin-uri> Adăugați noi și căutați AMP. Apoi apasa Instaleaza acum:

Odată instalat, faceți clic pe Activati:

Odată activat, vizitați oricare post pe blogul dvs. WordPress cu / Amp / extensie. De exemplu, postarea Amazon Marketplace Fraud Made Easy este unul dintre cele mai populare rezultate ale căutării Google. Iată cum arată atunci când vizitați versiunea AMP la http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:

Adezivul pentru plug-in SEO și AMP pentru Yoast

Plugin-ul generic AMP de la WordPress oferă câteva personalizări. Oamenii SEO de la Yoast au creat un add-on pentru plug-in-ul lor popular, care îmbunătățește și mai mult suportul AMP.

Aveți posibilitatea să revizuiți pluginul Adeziv pentru SEO și AMP Yoast sau să îl instalați prin tabloul de bord WordPress, așa cum am făcut mai devreme pentru pluginul AMP. Odată activat, ar trebui să arate astfel:

Notă: Asigurați-vă că aveți Yoast WordPress SEO plugin instalat primul.

Aveți posibilitatea să modificați setările AMP prin intermediul meniului de mouse-clic pe bara de navigare Yoast AMP în partea de jos a meniului:

Veți vedea diferitele moduri în care pluginul Lipire vă permite să îmbunătățiți implementarea AMP.

În primul rând, Yoast vă permite să extindeți funcționalitatea AMP la pagini și alte tipuri de pagini WordPress. În mod implicit, AMP modifică doar postările sensibile la timp - este în primul rând proiectat pentru articole de știri:

Notă: Dacă vedeți pagini goale sub file, asigurați-vă că actualizați pluginul original Yoast SEO și că acesta ar trebui să-l remediați.

În al doilea rând, Yoast oferă câteva modalități utile de personalizare a schemei de branding, design și color:

În sfârșit, oferă o modalitate de a plasa codul Analytics personalizat în stil AMP. Acest lucru nu este la fel de simplu cum pare. Observați codul pe care trebuia să-l lipesc mai jos pentru a-l face să funcționeze:

Am găsit versiunea AMP pentru implementarea Google Analytics aici; trebuie doar să personalizați codul contului pentru site-ul dvs. Web:

   

Sunt sigur ca Yoast va continua sa-si actualizeze plugin-ul de lipici de-a lungul timpului, pe masura ce functionalitatea plugin-ului AMP se dezvolta.

În general, este destul de simplu să începeți acest lucru. Dar nu este.

Debugarea erorilor AMP

La câteva zile după ce am instalat AMP, am primit un e-mail prietenos de la Google Search Console, raportând 10 pagini cu erori. Dar, de fapt, fiecare post AMP de pe site-ul meu a fost spart.

Am intrat în Consola de căutare Google pentru a răsfoi paginile cu erori și am văzut acest lucru:

Am făcut clic pe una dintre pagini:

Apoi, am dat click Deschideți Pagina și sa uitat la erori în detaliu. În esență, puteți face acest lucru manual adăugând / # Dezvoltare amperi = 1 la adresa URL, cum ar fi: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential-theft/amp/#development=1. Apoi, deschideți consola JavaScript în browserul dvs.:

Se pare că toate paginile web ale site-urilor cu funcții AMP de pe JeffReifman.com au fost rupte din cauza erorii: Eticheta "script" este interzisă, cu excepția formelor specifice. Cu toate acestea, pe PublishingwithWordPress.com, nu au existat erori:

Într-o serie viitoare de la Envato Tuts +, descriu modul în care am reușit să personalizez JeffReifman.com pentru a ajunge la un PageSpeed ​​Google de 100. Acest lucru a necesitat utilizarea caracteristicilor personalizate ale W3 Total Cache pentru a plasa niște caracteristici JavaScript minimizate în partea de jos a paginii . AMP nu permite acest lucru, iar pluginul WordPress AMP nu reușește să-l filtreze.

Trebuie să fac mai multe cercetări pentru a determina dacă W3 Total Cache o va dezactiva pentru anumite căi cum ar fi / Amp / (puțin probabil) sau dacă trebuie să găsesc o altă soluție. Plasarea acestor script-uri înapoi în va rupe viteza Google Page Speed. Interesant, de asemenea, am descoperit de curând că folosirea publicității Google DFP pe site-ul meu de asemenea încalcă Google Page Speed. Google este un maestru de căutare provocator și nu reușește să utilizeze împreună toate tehnologiile sale.

M-am lasat intrebandu-ma ce este mai important: clasamentele Google Page Speed, suport AMP sau timpul de dezvoltare si depanare.

În încheiere

Sincer, nu sunt sigur că paginile AMP ale blogului tău vor vedea vreodată lumina zilei lângă vârful căutării și nici nu sunt sigur că vei câștiga cu succes multe venituri din partea lor fără personalizări suplimentare. Google pare să adapteze AMP pentru editorii media majori cu resursele necesare optimizării optime a opiniilor pentru brand, estetică și venituri. 

În esență, AMP este calea unei pagini web optimizabile pentru comunitatea open-source, în timp ce Articolele Instant ale Facebook sunt pentru elita aleasă a grădinii "mari" pereți. Mai degrabă aș fi văzut Google construind un model de încărcare prioritar în HTML5 cu scripturi de însoțire.

Pentru mine, AMP doar îngreunează ca editorii mici să rămână relevanți. Mă bucur că WordPress menține efortul de a ajuta, și sunt sigur că designerii de teme vor fi, de asemenea, dar multe neajunsuri rămân. Cred că Google a ratat amprenta pentru a ajuta cu adevărat pe oricine, dar pe cei mai mari editori de pe web aici.

Link-uri conexe

  • Documentația AMP Documentație FAQ
  • Pluginul AMP WordPress
  • Adezivul pentru plug-in SEO amoroasă SEO
  • Introducerea proiectului Accelerated Mobile Pages, pentru o rețea mobilă mai rapidă (Google Blog)
  • Google anunță proiectul Accelerated Mobile Pages pentru a vă aduce articole de încărcare rapidă (TechCrunch)
  • Facebook începe să găzduiască articole editoriale "Instant Articles" (TechCrunch)
Cod