Internettet udvikler sig konstant, og for mange virksomhedsejere betyder det, at det er nødvendigt at opretholde alle de ændringer, der er sket med Google. Hvis du ikke tilpasser det, betyder det, at du kunne blive efterladt. Google AMP, deres mobile initiativ til at fremskynde internettet, nærmer sig nu et års jubilæum. Da det er mere stabilt nu end det var 6 måneder siden, troede vi, det ville være en god tid at dele nogle trin med dig, om hvordan du kommer i gang med Google AMP i WordPress, samt nogle af fordele og ulemper ved denne ny platform.

Hvad er Google AMP?

Google AMP (Accelerated Mobile Pages Project) blev oprindeligt lanceret tilbage i oktober 2015. Projektet er baseret på AMP HTML, en ny åben ramme, der udelukkende er bygget ud af eksisterende webteknologier, hvilket gør det muligt for websteder at opbygge lette websider. For at sige det simpelthen tilbyder det en måde at tjene en fjernet version af din nuværende webside.

Fra dag 1 har et centralt fokus for AMP været hastighed. Det er uden tvivl en af de mest frustrerende ting ved mobilwebben – fremhævet af nyere Google-research, der viser, at 53% af mennesker vil forlade et websted, der ikke kan indlæse inden for tre sekunder eller mindre. Det er det værst tænkelifge for brugere, virksomheder, forlag, hjemmesider og mobilweb som helhed. – David Besbris, AMP-projektledelse hos Google

Ifølge den seneste tilstand af Akamai Online Retail Performance Report, har hver tiendedel af et sekund betydning. Selv en lille stigning i sideindlæsningstid til 2,8 sekunder, så en 2,4% fald i konverteringsfrekvens.

Korrelation til hastighed og omregningskurs på mobil
Korrelation til hastighed og omregningskurs på mobil

Mange store virksomheder har vedtaget Google AMP i løbet af det sidste år, dette omfatter WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo osv. Ifølge Google viste Slate en 44% stigning i månedlige unikke besøgende og en 73 % stigning i besøg pr. månedlig unik besøgende.

Når en side bliver serveret via AMP i Google, vil den have AMP-symbolet ved siden af det som vist nedenfor i New York Times demo. Bemærk, du skal være på en mobil enhed for at teste dette. Du kan også bruge enhedens emulator i Chrome devtools. Struktureret dataregistrering gør det muligt for Google at præsentere dit indhold mere fremtrædende i søgeresultater. For eksempel kan AMP-artikler, der indeholder de relevante markupegenskaber, få den eftertragtede karruselplade i SERP’er som vist nedenfor.

Google AMP karrusel
Google AMP karrusel

Og her er et eksempel på, hvordan en AMP-side ser ud på The New York Times-webstedet. Som du kan se er det meget grundlæggende og simplistisk, hvilket er målet for AMP. Dette sikrer, at det laster hurtigt og giver bedre brugervenlighed.

Google AMP-sideeksempel
Google AMP-sideeksempel

Som med enhver ny platform skal du afveje fordele og ulemper og afgøre, om det er det rette skridt for din virksomhed og eller dit websted.

Fordele af Google AMP

  • AMP er gratis og open source.
  • AMP kan helt sikkert forbedre belastningstiderne på dit WordPress-websted. Og husk at hastigheden er en placeringsfaktor.
  • Bedre placeringer i SERP’er med karrusel mulighed for bedre klikfrekvens. I en implementering med en populær udgiver resulterede Google AMP i 600% i CTR’er!
  • Google AMP styrker mange anbefalede webpræstationspraksis som forebyggelse af store CSS- og JS-rammer.
  • Kan påvirke dine konverteringer på en positiv måde.
  • Der er sket en hel del forbedringer i løbet af det sidste år, og annonceindstillinger er nu let tilgængelige i Google AMP. Det betyder, at magasiner og nye publikationer kan bevare eller endda øge deres AdSense-indtægter.
  • Automatisk billedoptimering (jævn konvertering til WebP-format!)
  • AMP Lite introducerer yderligere optimering til langsomme netværksforbindelser. Google så en kombineret 45% reduktion i bytes.

Ulemper ved Google AMP

  • AMP er i øjeblikket ikke en rankingfaktor, men det kan det blive i fremtiden. Dette kunne ses som både fordele og ulemper.
  • AMP kan være svært at gennemføre og teste, hvis du ikke er en udvikler. Men heldigvis er WordPress-platformen lidt lettere end andre.
  • Introducerer en helt ny separat platform og funktionalitet, du skal bekymre dig om. Hvad skete der simpelthen med at optimere vores mobilwebsites?
  • Kan skade eller påvirke dine konverteringer negativt.
  • Der har været rapporter om Google AMP, der giver dårlige resultater i Google Analytics.
  • Nogle har set værre engagement og højere afvisningsprocenter.
  • Stadig 3. parts scripts og programmer, der muligvis ikke understøttes.
  • Ingen støtte fra nogle ældre browsere som Internet Explorer 11. De har udtalt, at de generelt vil støtte de 2 seneste versioner af større browsere som Chrome, Firefox, Edge, Safari og Opera. Og de understøtter desktop, telefon, tablet og webvisningsversionerne af de respektive browsere.
  • Læs Jan Dawsons opfattelse, hvorfor Google AMP gør det sværere, ikke nemmere at udgive til internettet.
  • Læs Alex Kras ‘artikel om nogle af problemerne med Google AMP, sammen med et svar fra den tekniske leder på AMP-projektet hos Google.
  • Tim Kadlec deler sin mening om Google AMP og behovet for et bedre alternativ: politikker til indholdspræstationer.

Fra februar 2017 er Google AMP begyndt at vise udgivernes webadresser direkte. Tidligere viste det kun Googles version, der tjener fra cache. Dette fremførte bekymringer fra folk fra et brandingperspektiv. Heldigvis indså Google det også og lavede en ændring. Nu vil webadressens felt i en browser fortsat vise en Google-URL. Imidlertid vil AMP-headerområdet vise et link eller kædeikon, hvad det kalder “anker” -knappen. Hvis du klikker på dette, bliver udgiverens direkte URL vist, så det nemt kan kopieres og indsættes. Dette er stadig ikke en perfekt løsning, men det er bedre end ingenting.

Billedkilde
Billedkilde: Google Developer Blog

Her er et andet eksempel på at miste branding.

Det er også vigtigt at bemærke, at hvis den eneste mobilversionsside, der findes, er en AMP-version, bruger Google stadig desktopversionen til indeksering, selv når Google skifter deres indeks over til deres mobile first indeks.

Sådan opsættes Google AMP i WordPress

Heldigvis er det meget nemmere at implementere Google AMP i WordPress end det var 6 måneder siden. Der er sket mange fremskridt på WordPress-plugins og platformen som helhed. Husk dog, din kode skal validere med Google for at vise AMP-versionen af ​​dit websted i SERP’er. Et plugin vil vende dit indlæg til en AMP-version, men det er Google, der beslutter at vise AMP-versionen i stedet.

Hvordan det virker dybest set, er, at dit WordPress-indlæg får tildelt en anden URL. Dette håndteres automatisk af WordPress-plugin’et automatisk. Typisk / amp eller /? Amp er knyttet til dit nuværende indlæg. Her er et eksempel:

Oprindelig blog-post-URL: https://domæne.com/blog-post

AMP Blog Post-URL: https://domæne.com/blog-post/amp/

Sådan opsættes Google AMP i WordPress

Der er i øjeblikket 2 populære WordPress-plugins i depotet, der kan hjælpe dig med at få sat gang i Google AMP. Den første er den gratis officielle AMP plugin, som faktisk udvikles af holdet over hos Automattic.

Officiel Google AMP plugin af Automattic
Officiel Google AMP plugin af Automattic

Mens vi skriver dette, har den i øjeblikket over 200.000 aktive installationer med en 3,5 ud af 5 stjerneklassifikation. Du kan downloade det fra WordPress-depotet eller ved at søge efter det inden for dit WordPress dashboard under “Tilføj nyt” plugins. Du kan tilpasse udseendet lidt under editoren “Udseende AMP” (som vist nedenfor). Dine muligheder er dog ret begrænsede med pluginet, og det afhænger af, hvordan du implementerer ekstra filtre til funktioner som AdSense eller Analytics.

WordPress AMP stilarter
WordPress AMP stilarter

Det er også vigtigt at bemærke, at det kun understøtter indlæg, ikke sider. Selv om de har meddelt, at de arbejder på at tilføje denne funktion. Nedenfor er et eksempel på, hvad vores WordPress-indlæg ligner efter installationen af plugin’et.

wordpress amp preview
WordPress AMP preview

Hvis du vil have en nem måde at tilføje yderligere funktioner på, så er det her, hvor det gratis AMP til WP plugin kommer i spil. Dette er dybest set en mere avanceret version af det officielle AMP plugin og giver dig ekstra funktioner og support. Det er udviklet af Ahmed Kaludi og Mohammed Kaludi, som også driver en vellykket WordPress-temabutik.

amp til wp plugin
AMP til WP WordPress plugin

Som vi skrive dette har den for øjeblikket over 70.000 aktive installationer med en 4,6 ud af 5-stjernet vurdering. Du kan downloade det fra WordPress-depotet eller ved at søge efter det inden for dit WordPress dashboard under “Tilføj nyt” plugins. Dette plugin gør det muligt at tilpasse meget mere med din Google AMP-opsætning. Også det understøtter sider. Nedenfor vil vi dykke ind i de tilpasninger og funktioner, der er tilgængelige fra AMP-pluginindstillingerne i dit dashboard.

Vi bruger faktisk dette plugin her på Kinsta! Du kan se AMP kører på dette indlæg, hvis du går til https://kinsta.com/blog/google-amp/amp/. (Opdatering: I starten af september løber vi ikke længere AMP på vores websted. Se vores casestudie om hvorfor vi valgte at deaktivere Google AMP) Og du kan se et eksempel i SERPs af et Kinsta-blogindlæg nedenfor. Du kan se AMP-logoet.

Eksempel på Kinsta AMP i SERP'er
Eksempel på Kinsta AMP i SERP’er

Generelt

Under den generelle skærm kan du tilføje et logo, tilpasse størrelsen og også vælge om du vil have AMP aktiveret på sider eller ej. Afhængigt af dit websted og trafik kan du kun aktivere AMP på din blog (posttyper).

Hurtigere generelle sider for mobilsider
Hurtigere generelle sider for mobilsider

Hjemmeside

Under Hjemmeside kan du aktivere eller deaktivere hjemmesiden support, tilsidesætte miniaturestørrelsen for hjemmesiden og vælge, hvad du vil ske, når brugere klikker på logoet (gå til AMP-version af ikke-AMP-version).

 AMP hjemmeside

AMP hjemmeside

Side Builder

Under Page Builder kan du aktivere det for at tillade, at AMP-widgets bruges.

AMP-sidebygger
AMP-sidebygger

Design

Under Design kan du starte postbyggeren eller vælge fra en foruddesignet skabelon. Du kan tænde HTTPS til søgning og også tilføje en opkald nu-knap. Der er så en mulighed for brugerdefineret CSS. På vores hjemmeside for eksempel, tilføjer vi følgende kode for at tilpasse farven på overskriften:

.amp-wp-header {background-color:#5CC0C0;}
AMP designs
AMP designs

Single

Under Single kan du aktivere sociale ikoner, deaktivere links, vise forfatter-bio og endda ændre muligheder for relaterede indlæg.

AMP enkelt indlæg
AMP enkelt indlæg

Reklame

Under annonceringsskærmen kan du aktivere AdSense og vælge placeringerne. Dette plugin er en af de nemmeste måder at tilføje AdSense med Google AMP på. For de af jer, der er afhængige af reklame for at køre dine websteder, kan dette være en meget nyttig funktion (foreslået læsning: Sådan føjes Google AdSense til WordPress).

AMP reklame
AMP reklame

AMP Menu

Under Menu kan du vælge om du vil tilføje- eller ikke at tilføje / amp / i slutningen af menuens webadresser. Måske vil du have dine besøgende til at blive på dit AMP-aktiverede websted, i så fald vil du gerne aktivere dette.

AMP menu
AMP menu

Social

Under socialmenuen kan du tilføje hvilke sociale netværk, du vil oprette på mobilen til delingsformål. For Facebook skal du registrere et gratis app-id.

AMP social
AMP social

SEO

SEO-skærmen er nok en af de vigtigste, da dette vedrører, hvordan Google vil se og rangere dit AMP-indhold. Vi anbefaler, at du vælger “Meta Description”. Hvis du bruger Yoast SEO plugin, anbefaler vi også at aktivere valgmulighederne “Meta Tags from Yoast” og “Yoast Description in ld + jason”.

AMP SEO muligheder
AMP SEO muligheder

Analytics

Analytics-skærmen giver dig mulighed for at tilføje dine sporingsskripter til Google Analytics samt Google Tag Manager. Du bør gøre dette for at sikre, at du opdaterer dine rapporteringsdata.

AMP analytics
AMP analytics

Den understøtter også Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effektiv Measure, StatCounter, HitStats Analytics, Yandex Metrika og Chartbeat Analytics.

Strukturerede data

Den strukturerede dataskærm giver dig mulighed for at tilpasse standardstruktureret datalogo og postbillede.

AMP strukturerede data
AMP strukturerede data

Kontaktformular

Skærmbilledet til kontaktformular giver dig mulighed for at aktivere kontaktformular 7-support.

AMP kontakt form
AMP kontakt form

Underretninger

Under meddelelsesskærmen kan du aktivere den til at vise en cookie advarsel. Dette kan være nyttigt for dem i lande med mere restriktive privatlivslovgivning.

AMP notifikationer
AMP notifikationer

Kommentarer

Under meddelelsesskærmen kan du aktivere den til at vise en cookie advarsel. Dette kan være nyttigt for dem i lande med mere restriktive privatlivslovgivning.

AMP kommentarer
AMP kommentarer

Avancerede indstillinger

Under de avancerede indstillinger kan du aktivere mobil omdirigering. Husk at som standard kun AMP vil blive aktiveret til mobile brugere, der klikker på det fra SERP’er. Hvis en mobilbruger browses direkte til dit websted, får de ikke den AMP-aktiverede side, medmindre du aktiverer omdirigering. Du kan også indtaste brugerdefineret HTML på denne skærm og ændre footer link handling.

AMP avancerede indstillinger
AMP avancerede indstillinger

Udvidelser

Udviklerne har også premium-udvidelser, som du kan købe for at udvide AMP-pluginet endnu mere. Nogle populære, som du måske vil tænke over er Email-indstillinger, CTA-knapper og brugerdefineret posttype-support.

AMP udvidelser
AMP udvidelser

Og her er hvordan vores indlæg ser ud med AMP for WP plugin kører på Kinsta bloggen.

AMPforWP eksempel
AMPforWP eksempel

De samme udviklere af AMP til WP har også for nylig udgivet et nyt plugin, AMP WooCommerce, som giver dig mulighed for at aktivere AMP på din e-handelsbutik.

amp woocommerce
AMP WooCommerce plugin

Validering af din Google AMP-kode

Når du har fået Google AMP-opsætning på dit WordPress-websted, vil du gerne sikre dig, at din kode valideres. Hvis den ikke gør det, viser Google ikke AMP-versionen i SERP’er. Du kan køre dit WordPress-websted via Google AMP Validator værktøj. Det vil vise dig i bunden, hvis du bestiller eller fejler.

google amp validator
Google AMP validator

Du kan også downloade den gratis Chrome AMP-udvidelse, som vil validere hver side. Hvis det vises som rødt, kan du klikke på det og hurtigt se fejlene eller advarslerne på siden.

Google AMP fejl
Google AMP fejl

Hvis den ikke overgår validering, kan du muligvis se en fejl som denne: “Ikke en gyldig AMP-side.” I dette eksempel nedenfor skyldtes brugen af gamle og ikke længere understøttede HTML-tags, <deltime> og <instime >. Du kan se en komplet liste over AMP-understøttede HTML-tags. Ugyldige AMP-sider har ikke AMP-specifikke funktioner i Googles søgeresultater.

Ikke en gyldig AMP adresse
Ikke en gyldig AMP adresse

Du kan også tjekke dit websted for AMP-problemer i Google Search Console under afsnittet “Search Appearance”. Det er vigtigt at bemærke, at mange brugere har rapporteret store forsinkelser med AMP-rapportering i Google Search Console. Det er mest sandsynligt, fordi det stadig er en temmelig ny platform, og gennemsøgning er ikke så hyppig.

Accelereret mobilsider rapport i GSC
Accelereret mobilsider rapport i GSC

Hvis du har fejl, meddeler Google dig via e-mail, at du skal tilføje nødvendige strukturerede data til dine AMP-sider.

AMP fejl - GSC
AMP fejl – GSC

Google AMP SEO

Et andet aspekt du måske undrer dig over er SEO siden af sagen, fordi du nu har to kopier af samme side eller post. Du behøver ikke bekymre dig om duplikat indhold, fordi begge plugins ovenfor bruger kanoniske tags med AMP. Kaoniske tags fortæller Google, at det oprindelige indhold er din desktop version. Google opdager automatisk AMP-sider på dit websted, da din originale side vises med en header-tag, der retter Googlebot til din AMP-side.

Eksempel på din originale side:

<link rel="amphtml" href="https://domain.com/amp/">

Eksempel på din AMP-side:

<link rel="canonical" href="https://domain.com/">

AMP til WP plugin nævnt ovenfor fungerer også godt sammen med Yoast SEO plugin for at tilføje dine meta og OG tags til SEO og sociale formål. Se eksempel nedenfor.

Google AMP metatags
Google AMP metatags

Ny relikovervågning med Google AMP

Det er også vigtigt at bemærke for kunder, der bruger New Relic-overvågning (licens påkrævet), at Google AMP-validatoren kan mislykkes på grund af en fejl i en tredjeparts script:

Tagget "script" er udelukket undtagen i bestemte former.

Dette skyldes, at HTML-sider, der er formateret til Google AMP, ikke må indeholde nogen tredjeparts JavaScript. AMP for WP plugin nævnt ovenfor understøtter fuldt ud New Relic. Men hvis du skal deaktivere New Relic Browser på AMP-sider, skal du følge instruktionerne i Deaktiver Browser-overvågning for bestemte sider. Der er også et gratis WordPress plugin, Disabled NewRelic til AMP, som du kan installere.

Aktivering af AMP til eksterne links med Cloudflare

Cloudflare har en ny funktion, de lancerede for nylig, som giver dig mulighed for at aktivere accelererede mobilforbindelser til eksterne links, der har AMP kørende. En af fordelene ved det til dit websted er, at AMP indhold er indlæst i en seer direkte på det websted, der er knyttet til indholdet. Hvilket betyder, at efter læseren er færdig med at bruge indholdet, lukker de seeren, og det returnerer dem tilbage til dit websted. Så på en måde kan det øge tiden på dit websted generelt. Du kan aktivere dette inden for Cloudflare Performance Dashboard.

cloudflare accelerated mobile links
Cloudflare Accelerated Mobile Links

Resumé

Så som du kan se, er der nogle nemme måder at få Google AMP til at køre på dit WordPress-websted. Skal du hoppe på Google AMP med det samme? Det afhænger virkelig af typen af ​​WordPress-websted, du har kørende. Hvis du er et magasin eller nyhedssite, kan det være fornuftigt at implementere dette med det samme og begynde at teste AdSense-stillinger. Hvis du er SaaS-virksomhed, kan det ende med at skade dine konverteringer, hvis du ikke er forsigtig. Google AMP er helt sikkert en stor ændring, især hvis du allerede får meget mobil trafik. Vores råd er at starte test, da det er den eneste måde at vide, om din virksomhed vil se positive eller negative resultater.

Har du andre tip om at bruge Google AMP med WordPress? Hvis det er tilfældet, vil vi gerne høre om dem nedenfor i kommentarerne! Sørg også for at tjekke den officielle AMP roadmap.

Brian Jackson

Brian har en stor lidenskab for WordPress, har brugt det i over et årti og udvikler endda et par premium plugins. Brian kan lide blogging, film og vandreture. Opret forbindelse med Brian på Twitter.