Webben utvecklas ständigt och för många företagare innebär detta ett konstant behov av att hålla koll på alla förändringar som Google gör. Om du inte anpassar kan dig kan du lätt hamna på efterkälken. Google AMP, det mobila initiativet för att snabba på webben, närmar sig nu sitt 1-års-jubileum. Eftersom det är mycket stabilare nu än det var för sex månader sedan, tänkte vi att det skulle vara på sin plats att dela med oss av några steg du kan ta för att komma igång med Google AMP i WordPress, liksom några av för- och nackdelarna med denna nya plattform.
- Vad är Google AMP?
- Fördelar med Google AMP
- Nackdelar med Google AMP
- Så konfigurerar du Google AMP för WordPress
- Validera din Google AMP-kod
Vad är Google AMP?
Google AMP (Accelerated Mobile Pages Project) lanserades ursprungligen i oktober år 2015. Projektet bygger på AMP HTML, ett nytt öppet ramverk som helt byggdes av befintlig webbteknik, vilket gör det möjligt för webbplatser att bygga lättviktiga webbsidor. För att uttrycka det enkelt erbjuder det ett sätt att visa en avskalad version av din nuvarande webbsida.
Från dag ett har ett viktigt fokus för AMP varit hastighet. Det är utan tvekan en av de mest frustrerande aspekterna av den mobila webben – bekräftat av den senaste Google-forskningen som visar att 53% av webbplatsbesökarna kommer att lämna en webbplats som inte laddar på tre sekunder eller mindre. Det är det värsta av alla världar för användare, företag, utgivare, webbplatser och den mobila webben som helhet. — David Besbris, AMP-projektledare på Google
Enligt den senaste State of Online Retail Performance-rapporten från Akamai, spelar varje tiondels sekund en stor roll. Även en liten ökning av sidladdningstiden till 2,8 sekunder såg en 2,4% minskning av konverteringsfrekvensen.
Många stora företag har börjat använda Google AMP under det senaste året, inklusive WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, etc. Enligt Google såg Slate en 44% ökning av månatliga unika besökare och en 73% ökning av besök per månatlig unik besökare.
När en sida laddas via AMP i Google kommer den att ha AMP-symbolen bredvid sig, som du kan se nedan i New York Times-demon. OBS! Du måste vara på en mobil enhet för att testa detta. Du kan också använda enhetssimulatorn i Chrome devtools. Strukturerad datamarkering gör det möjligt för Google att presentera ditt innehåll på ett mer framträdande sätt i sökresultaten. Till exempel kan AMP-artiklar som innehåller lämplig markering få den eftertraktade karusellplatsen i SERP som visas nedan.
Och här är ett exempel på hur en AMP-sida ser ut på New York Times hemsida. Som du kan se är den väldigt grundläggande och förenklad, vilket är själva poängen med AMP. Detta gör att den laddas snabbt och ger bättre användarupplevelse.
As with any new platform you should weigh the pros and cons and decide if it is the right move for your business and or website.
Fördelar med Google AMP
- AMP är gratis och gjort med öppen källkod.
- AMP kan definitivt förbättra laddningstiderna på din WordPress-webbplats. Och kom ihåg att hastighet är en rankningsfaktor.
- Bättre placeringar i SERP med karusellmöjlighet för bättre CTR. I en implementering hos en populär utgivare resulterade Google AMP i en ökning av CTR på 600%!
- Google AMP kommer framtvinga många rekommenderade praktiker för webbprestanda, såsom att förhindra stora CSS-och JS-ramverk.
- Detta kan påverka dina konverteringar på ett positivt sätt.
- En hel del förbättringar har gjorts under det senaste året och annonseringsalternativ är nu lätt tillgängliga i Google AMP. Det innebär att tidningar och nya publikationer kan hålla sina AdSense-intäkter på samma nivå, eller till och med öka dem.
- Automatisk bildoptimering (även konvertering till WebP-format!)
- AMP Lite introducerar ytterligare optimering för långsamma nätverksanslutningar. Google såg en kombinerad minskning av byte på 45%.
Nackdelar med Google AMP
- AMP är för närvarande inte en rankningsfaktor, men det kan bli det i framtiden. Detta skulle kunna vara både en för- och en nackdel.
- AMP kan vara svårt att implementera och testa om du inte är en utvecklare. Men tack och lov är WordPress-plattformen lite enklare än många andra.
- Det introducerar en helt ny separat plattform och funktionalitet som du behöver oroa dig över. Vad hände med att helt enkelt optimera våra mobila webbplatser?
- AMP kan skada eller påverka dina konverteringar på ett negativt sätt.
- Det har förekommit rapporter om att Google AMP rör till det i statistiken hos Google Analytics.
- Vissa har upplevt lägre engagemang och högre avvisningsfrekvenser.
- Det är fortfarande många tredjepartsskript och program som inte stöds.
- Inget stöd från vissa äldre webbläsare som Internet Explorer 11. De har sagt att de i allmänhet kommer att stödja de två senaste versionerna av alla stora webbläsare som Chrome, Firefox, Edge, Safari och Opera. Och de stöder dator-, telefon-, surfplatta-, och webbvisnings-versioner av respektive webbläsare.
- Läs Jan Dawsons åsikt om varför Google AMP gör det svårare, och inte lättare, att publicera på webben.
- Läs Alex Kras artikel om några av problemen med Google AMP, tillsammans med ett svar från AMP-projektets teknikchef på Google.
- Tim Kadlec delar sin åsikt om Google AMP och behovet av ett bättre alternativ: prestandapolicier för innehåll.
I februari 2017 började Google AMP visa utgivarens direkta webbadress. Tidigare visades enbart Googles version, som levereras från cache. Detta gjorde många människor oroliga över sina varumärken. Tack och lov insåg Google detta också och gjorde en förändring. Nu kommer adressfältet i en webbläsare fortsätta att visa en Google-adress. AMPs rubrikområde kommer dock att visa en länk- eller kedjeikon, som den kallar ”ankarknappen”. Genom att klicka på länken visas utgivarens direktadress, så att den enkelt kan kopieras och klistras in. Det här är fortfarande inte en perfekt lösning, men det är dock bättre än ingenting.
Här är ett till exempel på att förlora sin varumärkning.
Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ
— Syed Balkhi (@syedbalkhi) January 19, 2017
Det är också viktigt att notera att om den enda mobila versionen av en webbplats är en AMP-version, kommer Google fortfarande att använda datorversionen för indexering, även när Google gör bytet till sitt mobile first index
So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch
— Jennifer Slegg (@jenstar) November 14, 2016
Så konfigurerar du Google AMP för WordPress
Tack och lov är det mycket lättare att implementera Google AMP i WordPress nu än det var för sex månader sedan. Många framsteg har gjorts när det gäller WordPress-plugins och plattformen som helhet. Kom dock ihåg att din kod måste valideras hos Google för att visa AMP-versionen av din webbplats i SERP. Ett plugin kommer att förvandla ditt inlägg till en AMP-version, men det är Google som bestämmer om de ska visa AMP-versionen eller ej.
Det fungerar i princip så att ditt WordPress-inlägg tilldelas en annan webbadress. Allt detta kommer hanteras av WordPress-pluginet automatiskt. Oftast läggs /amp eller /?amp till i ditt inläggs nuvarande webbadress. Här är ett exempel:
Ursprunglig blogginläggsadress: https://domain.com/blog-post
AMP-blogginläggsadress: https://domain.com/blog-post/amp/
Google AMP och WordPress-plugin
There are currently 2 popular WordPress plugins in the repository that can help you get setup with Google AMP. The first one is the free official AMP plugin, which is actually developed by the team over at Automattic.
I skrivande stund har det för närvarande över 200 000 aktiva installationer med ett betyg på 3,5 av 5 stjärnor. Du kan ladda ner det från WordPress-arkivet eller genom att söka efter det i din WordPress-panel under ”Lägg till nytt plugin”. Du kan anpassa utseendet lite under ”Appearance AMP”-redigeraren (se nedan). Dina alternativ är dock ganska begränsade med detta plugin och det bygger på att du vet hur du implementerar ytterligare filter för funktioner som AdSense eller Analytics.
Det är också viktigt att notera att det bara har stöd för inlägg, inte sidor. Utvecklarna har dock meddelat att de arbetar med att lägga till den här funktionen. Nedan är ett exempel på hur vårt WordPress-inlägg ser ut efter att vi installerade pluginet.
Om du vill ha ett enkelt sätt att lägga till ytterligare funktioner så är det här det kostnadsfria pluginet AMP for WP kommer in i bilden. Detta är i princip en mer avancerad version av det officiella AMP-pluginet som ger dig ytterligare funktioner och stöd. Det är utvecklat av Ahmed Kaludi och Mohammed Kaludi som också driver en framgångsrik WordPresstemabutik.
I skrivande stund har det för närvarande över 70 000 aktiva installationer med 4,6 av 5 stjärnor i betyg. Du kan ladda ner det från WordPress-arkivet eller genom att söka efter det i din WordPress-panel under ”Lägg till nytt plugin”. Detta plugin låter dig anpassa din Google AMP-konfiguration mycket mer. Det har också stöd för sidor. Nedan kommer vi ta en titt på de anpassningar och funktioner som är tillgängliga genom pluginets inställningar från din instrumentpanel.
Vi använder faktiskt detta plugin här på Kinsta! Du kan att se AMP körs på det här inlägget om du går till . (Uppdatering: Sedan början av September använder vi inte längre AMP på vår webbplats. Kolla in vår fallstudie om varför vi valde att inaktivera Google AMP). Du kan också se ett exempel från SERP för ett Kinsta-blogginlägg nedan. Du kan se AMP-logotypen.
Allmänt
Under skärmen Allmänt, kan du lägga till en logotyp, anpassa storleken, och även välja om du vill ha AMP aktiverat på sidor eller inte. Beroende på din webbplats och din trafik kanske du bara behöver aktivera AMP på din blogg (inläggstyper).
Startsida
Under Startsida kan du aktivera eller inaktivera stöd för startsidan, åsidosätta startsidans miniatyrstorlek, och välja vad som ska hända när en användare klickar på logotypen (gå till AMP-versionen eller icke-AMP-versionen).
Sidbyggare
Under Sidbyggare kan du aktivera deras sidbyggare för att tillåta användning av AMP-widgets.
Design
Under Design kan du starta inläggsbyggaren eller välja från en fördesignad mall. Du kan sätta på HTTPS för sökning och även lägga till en Ring nu-knapp. Det finns också ett alternativ för anpassad CSS. På vår webbplats lägger vi till exempel till följande kod för att anpassa färgen på rubriken:
.amp-wp-header {background-color:#5CC0C0;}
Single
Under Single kan du aktivera sociala ikoner, inaktivera länkar, visa författarinformation, och även ändra alternativ för relaterade inlägg.
Annonser
Under Annonser kan du aktivera AdSense och välja var annonserna ska visas. Detta plugin är ett av de enklaste sätten att lägga till AdSense med Google AMP. För er som är beroende av reklam för att driva era webbplatser kan detta vara en mycket användbar funktion (föreslagen läsning: Så här lägger du till Google AdSense till WordPress).
AMP-menyn
Under Meny kan du välja om du vill lägga till /amp/ i slutet av webbadresserna i menyn eller inte. Du kanske vill att dina besökare ska stanna på din AMP-aktiverade webbplats, och i det fallet behöver du aktivera detta.
Social
Under menyn Social kan du lägga till vilka sociala nätverk du vill ska visas på mobilen för delningsändamål. För Facebook måste du registrera ett gratis App-ID.
SEO
SEO-skärmen är förmodligen en av de viktigaste, eftersom det handlar om hur Google kommer att se och ranka ditt AMP-innehåll. Vi rekommenderar att du aktiverar alternativet ”Metabeskrivning”. Om du använder pluginet Yoast SEO, rekommenderar vi också att du aktiverar alternativen ”metataggar från Yoast” och ”Yoast-beskrivning i ld+jason”.
Analytics
Med Analytics-skärmen kan du lägga till dina spårningsskript för Google Analytics samt Google Tag Manager. Det är viktigt att göra detta för att dina data ska vara konstant uppdaterade.
Det stöder också Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika, och Chartbeat Analytics.
Strukturerade Data
Med skärmen Strukturerade data kan du anpassa standardlogotypen för strukturerade data och standardbilden för inlägg.
Contact Form
Skärmen Contact Form låter dig helt enkelt aktivera stöd för Contact Form 7.
Aviseringar
Under skärmen Aviseringar kan du aktivera en cookie-varning. Detta kan vara användbart för dig om du bor i ett land med restriktiva sekretesslagar – som t.ex. Sverige.
Kommentarer
Under skärmen Kommentarer kan du aktivera stöd för tredjeparts kommentarsystem som Disqus och Facebook-kommentarer.
Avancerade Inställningar
Under Avancerade inställningar kan du aktivera mobil omdirigering. Kom ihåg att AMP som standard endast aktiveras för mobila användare som klickar på den från SERP. Om en mobil användare direkt bläddrar till din webbplats kommer de inte att visas den AMP-aktiverade sidan om du inte först aktiverar omdirigering. Du kan också ange anpassad HTML på den här skärmen och ändra länkarna i sidfoten.
Tillägg
Utvecklarna har också premiumtillägg som du kan köpa för att ytterligare utöka AMP-pluginets funktioner. Några populära tillägg som du kan överväga är epostalternativ, CTA-knappar och stöd för anpassade inläggstyper.
Och så här ser vårt inlägg ut med AMP for WP-pluginet aktiverat på Kinsta-bloggen.
Utvecklarna till AMP for WP har också nyligen släppt ett nytt plugin, AMP WooCommerce, som låter dig aktivera AMP på din e-handelsbutik.
Validera din Google AMP-kod
När du har konfigurerat Google AMP på din WordPress-webbplats behöver du se till att koden valideras. Om den inte gör det kommer inte Google visa AMP-versionen i SERP. Du kan köra din WordPress-webbplats genom verktyget Google AMP Validator. Verktyget kommer att visa dig längst ner om du får godkänt eller underkänt.
Du kan också ladda ner gratistillägget Chrome AMP som kommer att validera varje sida. Om resultatet är rött kan du klicka på det och snabbt se de fel eller varningar som finns på sidan.
Om koden inte valideras korrekt kan du se ett fel som detta: ”Inte en giltig AMP-sida.” I exemplet nedan berodde detta på användningen av de gamla och inte längre stödda HTML-taggarna, <deltime> och <instime>. Du kan se en fullständig lista över AMP-stödda HTML-taggar här. Ogiltiga AMP-sidor har inte AMP-specifika funktioner i Googles sökresultat.
Du kan också kontrollera om du har problem med AMP i Google Search Console under avsnittet ”Sökutseende”. Det är viktigt att notera att många användare har rapporterat stora fördröjningar med AMP-rapportering i Google Search Console. Detta beror troligen på att det fortfarande är en ganska ny plattform och genomsökningen sker inte lika frekvent.
Om fel har uppstått kommer Google att meddela dig via e-post att du måste lägga till nödvändiga strukturerade data på dina AMP-sidor.
Google AMP SEO
En annan aspekt du kanske funderar över är hur din SEO påverkas när du har två exemplar av samma sida eller inlägg. Du behöver inte oroa dig för dubbletter eftersom båda pluginsen ovan använder kanoniska taggar med AMP. Kanoniska taggar talar om för Google att det ursprungliga innehållet är din datorversion. Google upptäcker automatiskt AMP-sidor på din webbplats eftersom din ursprungliga sida levereras med en rubriktagg som leder Googlebot till din AMP-sida.
Exempel på din ursprungliga sida:
<link rel="amphtml" href="https://domain.com/amp/">
Exempel på AMP-sidan:
<link rel="canonical" href="https://domain.com/">
Pluginet AMP for WP som vi pratar om ovan fungerar också bra med pluginet Yoast SEO för att lägga till dina meta- och OG-taggar för sociala och SEO-syften. Se exempel nedan.
New Relic-övervakning med Google AMP
Det är också viktigt att notera för kunder som använder New Relic-övervakning (licens krävs), att Google AMP-valideringen kan misslyckas på grund av ett skriptfel från tredje part:
Taggen "script" är inte tillåten förutom i specifika former.
Detta beror på att HTML-sidor som är formaterade för Google AMP inte får innehålla JavaScript från tredje part. AMP for WP har fullständigt stöd för New Relic. Men om du behöver inaktivera New Relic Browser på AMP-sidor, följ instruktionerna i Inaktivera Browser-övervakning för specifika sidor. Det finns också ett gratis WordPress-plugin, Disabled NewRelic For AMP, som du kan installera.
Aktivera AMP för externa länkar med Cloudflare
Cloudflare lanserade nyligen en ny funktion som låter dig aktivera accelererade mobillänkar för externa länkar som använder AMP. En av fördelarna med det för din webbplats är att AMP-innehåll laddas i ett visningsfönster direkt på webbplatsen som länkade till innehållet. Det innebär att när läsaren är klar med att konsumera innehållet, stänger de visningsfönstret och de förs sedan tillbaka till din webbplats. På så sätt kan det öka den totala tiden en besökare spenderat på din webbplats. Du kan aktivera detta i Cloudflares prestandapanel.
Sammanfattning
Som du kan se finns det ett par enkla sätt att få igång Google AMP på din WordPress-webbplats. Ska du sätta igång med Google AMP direkt? Det beror egentligen på vilken typ av WordPress-webbplats du driver. Om du har en tidning eller nyhetssajt kan det vara smart att implementera detta direkt och börja testa AdSense-placeringar. Om du har ett SaaS-företag kan det skada dina konverteringar om du inte är försiktig. Google AMP har definitivt fört med sig en stor förändring, speciellt om du redan får mycket mobil trafik. Vårt råd är att börja testa eftersom det är det enda sättet att ta reda på om ditt företag kommer att se positiva eller negativa resultat.
Har du några andra tips om hur man kan använda Google AMP med WordPress? Om så är fallet vill vi gärna höra om dem nedan i kommentarerna! Se också till att kolla in den officiella AMP-planen.
Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.
Lämna ett svar