Hur man ställer in AMP i WordPress

  1. 1. Introduktion till Google AMP för WordPress
  2. 2. Läser för tillfället: Hur man ställer in AMP i WordPress

Välkommen till den andra delen av AMP-guiden för WordPress. I vår sista artikel lärde vi oss vikten av en mobil-första webbstrategi och hur AMP kan vara en potentiell spelväxlare. I dagens guide kommer vi att lära oss om:


  • Hur man integrerar AMP med WordPress
  • Bästa WordPress-plugins för anpassning av AMP
  • Behöver vi verkligen implementera AMP på vår WordPress-webbplats?

Låt oss börja.

AMP för WordPress Video Guide

När du plockar upp var det sista inlägget i vår serie slutade, kan du följa med WPCrafts video om hur du enkelt konfigurerar AMP med din WordPress-webbplats. Adams video leder dig igenom varje steg i vår guide – njut!

Hur man ställer in AMP för WordPress

amp-plugin-wordpress-hjälte

Ställer in AMP för WordPress är en mycket enkel process. Allt du behöver göra är att installera WordPress AMP-plugin utvecklat av Automattic och resten följer.

  • Gå till WordPress Dashboard> Plugins> Lägg till nytt
  • Söka efter ”AMP”

Välj plugin och klicka på Installera nu

how-to-install-amp-wordpress-plugin

När plugin aktiveras kommer alla inläggs-URL: er på din webbplats att ha en AMP-version. Du kan gå till länk till valfri post, bifoga / Amp / till slutet av URL: en så ser du AMP-versionen.

Låt oss titta på den normala versionen av webbsidan.

prov-site-no-amp_rz

Och detta är AMP-versionen av samma sida:

prov-site-amp_rz

Det är det – du har konfigurerat AMP i WordPress. Svårt att tro att det är så enkelt, är det inte?

Men om du inte har det ganska permalinks aktiverad kan du få förstärkarversionen genom att lägga till ?amp = 1 till inläggets länk. Till exempel skulle inläggets länk vara:

  • Normal version: http://example.com/2016/01/01/hello-mobile-web/
  • AMP-version: http://example.com/2016/01/01/hello-mobile-web/amp/
  • AMP-version (med Pretty Permalinks inaktiverade): http://example.com/2016/01/01/hello-mobile-web/?amp=1

AMP-pluginet lägger till en standard metatagg i huvudet på dina “normala” HTML-sidor som gör det möjligt för Google och andra sökmotorer att känna igen AMP-versionen av sidorna som finns. Den använder webbplatsens logotyp som du kan ställa in i WordPress Theme Customizer.

Det är viktigt att notera att plugin endast stöder konvertering av inlägg till AMP-versioner. Enligt plugin-beskrivningen som öppnades den 1st November 2016 är stöd för AMP-version av WordPress-sidor under utveckling och kommer snart.

Mätning av AMP-resultatpåverkan

Vi bestämde oss för att mäta prestandan påverkan av AMP-versionen av sidan i Pingdom. Resultaten var dramatiskt olika. Kom ihåg att vår WordPress-inställning var i en delad värdmiljö med standardtematet Twenty Fourteen utan några cache- eller optimeringsplugins installerade.

Följande skärmdump visar prestanda benchmark för basversionen av sidan:

prov-site-no-amp-Pingdom

Och detta är resultatet av AMP-versionen av sidan:

prov-site-amp-Pingdom

Resultaten är påfallande isär.

Var och en av komponenterna upplevde en enorm förbättring:

  • Sidstorlek minskade med 70%
  • Laddningstiden minskade med 35% till under 900 millisekunder
  • Inget av förfrågningarna minskades med nästan 60% från 17 till endast 7!

Allt detta uppnåddes av AMP, samtidigt som innehållet på sidan bibehölls. Följande tabell fångar upp detaljerna i testet för din referens:

Faktor VanligtAMPFörbättring
Sidstorlek (KB)563,816770%
Laddningstid (sek)1,420,92935%
Antal förfrågningar17759%

När man tittar på dessa siffror är det uppenbart att det inte är bra att få AMP. Det hjälper inte bara till att förbättra dina SEO-poäng, utan ger också en vacker, okänd användarupplevelse.

Du kan också inkludera spårningsmekanismer i AMP-versionen av sidan. Vi täcker det i följande avsnitt.

Utöka kapaciteten hos AMP

Även om det är bra att optimera ditt innehåll för läsarna, är det också viktigt att bibehålla varumärkeskonsistensen. Detta innebär att även AMP-versionerna av ditt befintliga innehåll ska följa ditt varumärkes färgschema, teckensnitt och det allmänna användargränssnittet.

AMP WordPress-plugin har inte alternativen för att göra sådana ändringar. Syftet var att tillhandahålla ett snabbt och enkelt sätt att göra hela ditt befintliga WordPress-innehåll kompatibelt med AMP – ett jobb som är ganska bra.

Gå in i AMP för WP – Accelerated Mobile Pages plugin.

amp-för-wp-plugin-2-hjälte

Detta gratis plugin utökar AMP: s funktioner i WordPress genom att erbjuda ytterligare funktioner såsom:

  • Google Analytics-integration
  • Support för AMP WooCommerce-sidor
  • Relaterade inlägg under inlägget
  • Lista över senaste kommentarer
  • Anpassad logotyp uppladdning
  • Social delningsfält
  • Stöd för inbäddning av rikt innehåll inklusive videor och innehåll från innehållsplattformar som YouTube, Instagram, Twitter, Vine, etc..

Som en förutsättning kräver plugin-programmet att du installerar och aktiverar AMP-pluginet för att fungera korrekt. Som vanligt kan du installera detta plugin på samma sätt som vi installerade AMP-plugin i början av detta inlägg.

amp-for-wp-plugin-2-install-aktivera

När den är aktiverad är du redo att konfigurera de olika alternativen som plugin-programmet har att erbjuda. Gå över till WordPress Dashboard> AMP för att komma åt inställningarna.

Av de många inställningar som plugin-programmet erbjuder, testade vi:

  • Slå på kommentarer
  • Lägga till relaterade inlägg
  • Lägga till en navigering till Nästa / Tidigare inlägg

Här är en skärmdump av hur AMP-versionen såg ut efter att ha sparat ändringarna:

amp-for-wp-plugin-2-hero-test page-500 px

Och här är föreställningen:

amp-för-wp-plugin-2-hastighet-testet

Här är skärmdumpen på vanilj AMP-sidan för jämförelse:

prov-site-amp-Pingdom

Lasttiden minskade ytterligare med ytterligare 7,4%. Det är intressant att notera att även om sidstorleken och antalet förfrågningar ökade något, var det en förbättring av den totala resultatgraden (3-punktsökning).

Sammantaget är detta plugin utmärkt om du ser allvar med att driva hårdare mot AMP och få ditt innehåll, annonser och analyser att fungera bra med plattformen.

Slutsats

Med tanke på den explosiva tillväxten av användning av mobiltelefoner under de senaste åren är det inte längre ett alternativ för online-företag att gå mobil-först. Det är en absolut nödvändighet. Projektet Accelerated Mobile Pages är en ambitiös insats mot det målet och fler och fler mediehus anpassar det snabbt.

Även om det är enklare för nyare bloggar att integrera AMP, kan bloggar med tusentals sidor med innehåll säkert vara särskilt utmanande. Anledningen är enkel – inte alla följer de korrekta standarderna när de publicerar online. Organisationer utvecklas. Till och med webbteknologierna som var ”heta” för fem år sedan är föråldrade idag. Medan AMP försöker sitt bästa för att bygga utifrån befintlig webbteknologi kan det finnas flera fall där det finns vissa inkompatibilitet / fel. Och dessa fel kan påverka dina SEO-poäng negativt.

Helst bör företagen mäta sina inkommande trafikkällor – vilken procentandel av detta kommer från en mobil enhet? Hur många av dem kommer från mobilsökning? Vad är avvisningsfrekvensen för mobila besökare? Det här är frågorna du bör ställa innan du överväger AMP.

Om du är övertygad om att webbplatsens innehåll är tekniskt strukturerat enligt de senaste standarderna, så för all del – gå vidare med AMP! Du kommer bara att öka din SEO.

Men om du vet att det finns många interna felkonfigurationer, trasiga länkar och fel, är det bäst att ta itu med (och eventuellt lösa) dessa problem innan du fortsätter med AMP.

Vad är dina tankar om AMP? Använder du det för att konsumera innehåll? Har du implementerat det på din webbplats? Vi skulle älska att höra från dig!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map