Installera AMP i WordPress

Vad du ska skapa

Vad är AMP?

I oktober meddelade Google AMP som ett open-source-initiativ för att ge snabbare mobil webbläsning. Som beskrivs av TechCrunch ser många AMP som ett försök från Google att konkurrera bättre med Facebook: s Instant Articles och mobila applikationer som alltmer ger snabbare och mer strömlinjeformad webbläsning. Jag tenderar att hålla med.

Sidor som är optimerade med AMP kommer att visas i en mobila surfingkarusell överst i Googles sökresultat, som förvandlar traditionella HTML-artiklar till längre ner på sidan. Och de laddas nästan direkt.

Ärligt talat är jag skeptisk till AMP för bloggare och småförlag. Vi skriver ofta bra innehåll som kämpar för att göra det till toppen av Googles sökresultat. Nu måste vi genomföra ännu en teknik på våra begränsade resurser i hopp om att vårt innehåll visas högst upp. Intressant, medan stora medier utgivare visas, jag inte ser blogginlägg i AMP sökresultat och inte heller andra WordPress bloggare: 

Jag misstänker också att UX att begrava andra sökresultat under karusellen fungerar bra för Google.

När jag arbetade hos Microsoft hjälpte jag mig till att starta MSN News 1995 som en del av MSN Online Network som lanserades med Windows 95, Microsofts svar på AOL. MSN News krävde en anpassad applikationsvisare som körde på en version av Microsofts Media Viewer-plattform, det ramverk som hade aktiverat sina tidigare insatser för CD-innehåll. Men inom ett år var vi tvungna att förbereda oss för webben och vår fusion med NBC-it blev senare MSNBC.com. Vi var tvungna att anpassa vår publiceringsram för att skapa både Media View och HTML samtidigt. Detta skapade ett antal nya komplexiteter. 

AMP påminner mig om alla dessa ansträngningar. Det är en extremt annorlunda, starkt begränsad version av HTML som kräver stora förändringar av din webbplats och eventuell annonsering du kan använda.

Free WordPress AMP Plugin

Den goda nyheten är att WordPress har lanserat ett gratis AMP-plugin som hjälper dig att implementera AMP utan mycket extra utveckling. Det har dock många begränsningar. Utformningen av din webbplats är starkt begränsad, och det finns konflikter med andra WordPress-plugins, vanliga optimeringstekniker och mer. AMP kommer nu också att bli en extra börda för WordPress-utvecklare.

AMP är i sin spädbarn och jag är besviken över att Google valde att skapa en helt ny ram snarare än att arbeta med utgivare för att optimera HTML5 för att snabbt konfigurera hur sidor ska laddas, vad ska ladda först och hur man lägger ut text snabbt. Detta skulle ha varit en mer upplyst strategi. Men då är Googles team genier.

Trots mina bekymmer, i denna handledning går jag igenom installationen av AMP-plugin för WordPress och Yoast SEO Lim för AMP-plugin, vilket ger dig lite mer kontroll över webbplatsens slutliga utseende.

Vad ser AMP ut på WordPress?

Här är ett exempel på en AMP-sida jämfört med den ursprungliga HTML-sidan. Du kan bläddra dem dynamiskt, här för originalet och här för AMP-versionen. Visst är sidan laddningen mycket snabbare med AMP.

Bild av den ursprungliga HTML5-sidan på JeffReifman.com:

Följande länk tagg läggs till på varje sida i blockera, säger sökmotorer att en AMP-version av sidan är tillgänglig.

 

Men det finns också en kanonisk länk som definierar källans webbadress för länkning:

Bild på AMP Sida på JeffReifman.com:

Menyer och navigering är borta, och branding är till stor del borta (även om det finns några alternativ), men sidan laddas snabbt.

Låt mig gå dig genom att aktivera AMP med WordPress.

AMP WordPress Plugin

Du kan studera och ladda ner AMP WordPress Plugin från WordPress plugin katalogen. Eller du kan söka och installera den direkt från din WordPress Dashboard.

Bara gå till Plugins> Lägg till nytt och leta efter AMP. Klicka sedan Installera nu:

När du är installerad klickar du på Aktivera:

När du är aktiverad, besök bara ett inlägg på din WordPress-blogg med / Amp / förlängning. Exempelvis är Amazon Marketplace Fraud Made Easy-inlägg ett av mina mest populära Google-sökresultat. Så här ser det ut när du besöker AMP-versionen på http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:

Limmet för Yoast SEO & AMP-plugin

Den generiska AMP-plugin från WordPress erbjuder några anpassningar. Yoast SEO-personer har skapat ett tillägg för deras populära plugin vilket ytterligare förbättrar ditt AMP-stöd.

Du kan granska Lös för Yoast SEO & AMP Plugin, eller installera den via WordPress instrumentbrädan som vi gjorde tidigare för AMP-plugin. En gång aktiverad ska det se ut så här:

Notera: Var noga med att ha Yoast WordPress SEO plugin installeras först.

Du kan ändra dina AMP-inställningar via Yoast SEO sidobar menyklick AMP längst ner i menyn:

Du får se de olika sätten som Lim plugin gör att du kan förbättra din AMP-implementering.

För det första tillåter Yoast dig att förlänga AMP-funktionalitet till sidor och andra WordPress-sidtyper. AMP ändrar som standard bara tidskänsliga inlägg, det är främst utformat för nyhetsartiklar:

Notera: Om du ser tomma sidor under flikarna, se till att du uppdaterar det ursprungliga Yoast SEO-pluginet och det ska fixa det.

För det andra erbjuder Yoast några användbara sätt att anpassa märkes-, design- och färgschemat:

Och slutligen erbjuder de ett sätt att placera anpassad AMP-stil Analytics-kod. Det här är inte så enkelt som det verkar. Lägg märke till koden som jag var tvungen att klistra in för att få det att fungera:

Jag hittade AMP-versionen för att implementera Google Analytics här; Justera din kontokod för din webbplats:

   

Jag är säker på att Yoast fortsätter att uppdatera sin Limplugin över tiden då AMP-plugins funktionalitet utvecklas.

Totalt sett är det ganska enkelt att komma igång här. Men det är inte.

Felsökning av AMP-fel

Några dagar efter att jag installerade AMP fick jag ett vänligt email från Google Search Console som rapporterade 10 sidor med fel. Men faktiskt var varje AMP-post på min sida bruten.

Jag loggade in på Google Search Console för att bläddra igenom sidorna med fel och såg det här:

Jag klickade på en av sidorna:

Sedan klickade jag Öppna sidan och tittade på felen i mer detalj. I huvudsak kan du göra det manuellt genom att lägga till / Amp # utveckling = 1 till webbadressen, som: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential-theft/amp/#development=1. Öppna sedan JavaScript-konsolen i din webbläsare:

Det visar sig att alla mina AMP-aktiverade webbsidor på JeffReifman.com bröts på grund av felet: Taggen "script" är inte tillåten utom i specifika former. Men på PublishingwithWordPress.com fanns det inga fel:

I en kommande serie på Envato Tuts + beskriver jag hur jag lyckades anpassa JeffReifman.com för att nå en Google PageSpeed ​​på 100. Detta krävdes med hjälp av anpassade funktioner i W3 Total Cache för att placera vissa minimerade JavaScript-funktioner nära undersidan av sidan innan . AMP tillåter inte detta, och WordPress AMP-plugin kan inte filtrera ut det.

Jag behöver göra mer forskning för att avgöra om W3 Total Cache kommer att stänga av den för mig för vissa vägar som / Amp / (osannolikt) eller om jag behöver hitta en annan lösning. Placera dessa skript tillbaka i kommer att bryta min Google Page Speed. Intressant upptäckte jag också nyligen att användningen av Google DFP-annonsering på min sida bryter även Google Page Speed. Google är en utmanande sökmästare, och det gör det inte lätt att använda alla dess teknologier tillsammans.

Jag är kvar och undrar vad som är viktigare: Google Page Speed ​​rankings, AMP-support eller min utveckling och felsökningstid.

I stängning

Uppriktigt sagt är jag inte säker på att din blogg AMP-sidor någonsin kommer att se dagens ljus nära toppen av sökningen, och jag är inte säker på att du med framgång kommer att tjäna mycket intäkter från dem utan ytterligare anpassningar. Google verkar skräddarsy AMP för stora medieförlag med resurserna för att bäst optimera synpunkter på varumärke, estetik och intäkter. 

I huvudsak är AMP vägen till en tvivelaktigt värdefull, optimerad webb för öppen källkod, medan Facebook: s Instant Articles är för den valda eliten i den "stora" muromgärdade trädgården. Jag skulle helst ha sett Google bygga en prioriterad laddningsmodell i HTML5 med åtföljande skript.

För mig gör AMP det bara svårare för små förlag att förbli relevanta. Jag är glad att WordPress håller på att försöka hjälpa, och jag är säker på att temat designers kommer också, men många brister kvarstår. Jag tror att Google har missat märket genom att verkligen hjälpa alla utom de största webbutgivarna här.

relaterade länkar

  • AMP Projektdokumentation FAQ
  • AMP WordPress Plugin
  • Limet för Yoast SEO AMP Plugin
  • Introducerar projektet Accelerated Mobile Pages, för en snabbare, öppen mobilwebb (Google Blog)
  • Google tillkännager en accelererad mobil sidprojekt för att få dig att snabbt ladda artiklar (TechCrunch)
  • Facebook startar Hosting Publishers "Instant Articles" (TechCrunch)