Slik validerer du akselerert mobilsider (AMP)

I vår siste AMP-veiledning har vi vist deg hvordan du bruker AMP (Accelerated Mobile Pages) for å få en betydelig hastighetsforbedring, samt bedre eksponering i Googles mobile søkeresultat for nettstedet ditt i mobilmiljøet.

Etter å ha sett AMPpotensial, antar jeg at du kanskje har startet eller har planer om å begynne å gjøre endringer på nettstedene dine for å overholde AMP. Følg nøye retningslinjene på Dokumenter og komponer CSS til å utforme AMP-sidene for å passe til din visuelle appetitt.

Nå er det en siste ting å gjøre: validere disse sidene.

AMP Validators

Det er flere måter å validere dine AMP-sider på:

1. Legg til i # Utvikling = 1 sti på slutten av AMP-siden URL. Rapporten vil bli projisert i Console fanen under DevTools.
2. Alternativt kan du bruke den elektroniske AMP-validatoren.
3. Du kan også bruke Chrome AMP-utvidelsen.

Disse verktøyene vil produsere en rapport som viser feil eller advarsler på sidene. Basert på dette kan du velge hva du skal fikse.

AMP-validering styrer primært bruken av HTML-elementer, de s, og stildeklarasjoner. Pass på at disse tingene på siden er alle AMP-kompatible, og at ingenting som bryter med AMP-retningslinjene, er igjen der. Ellers vises ikke AMP-siden din hvor som helst.

Data struktur

AMP krever også skjemadatastrukturen. Disse dataene er lagt ut i hode tag på siden i JSON-format. Den inneholder kontekstuell informasjon av siden, inkludert tittelen, utgiverlogoen og navnet, datoen den ble publisert og endret, osv..

Avhengig av formålet med siden, kan dataene som følger med variere: Artikler, Anmeldelser, Oppskrifter, Videoer, etc. Du kan referere til Google Data Types Documentation for detaljer om datatype.

Det kreves noen data som vil gi feil hvis ikke levert; noen få andre typer data er valgfrie og vil bare gi advarsler. Disse feilene vil imidlertid ikke vises i de ovennevnte AMP-validatorene.

I stedet vil de vises i Google Structured Data Testing Tool, så vel som i Google Webmasters-kontoen din.

AMP-forbrukere eller en klient som støtter AMP, for eksempel Google Search og Twitter Moments, kan bruke dette settet med data for å presentere AMP-innhold på deres resultatside.

Så, bortsett fra å følge AMP-retningslinjene med deres proprietære egendefinerte HTML-elementer, må de nødvendige Schema-dataene også være på plass.

Oversett feil

De fleste feil oppdages eksplisitt i Docs og kan lett hentes i et glimt. Noen feil er imidlertid kontekstualisert med variabler som vi kanskje ikke klarer å legge merke til, for eksempel “Ugyldig attributtverdi”, som sier "Attributtet '% 1' i tag '% 2' er satt til ugyldig verdi '% 3'.".

Denne feilrapporten nevner ikke eller listes nøyaktig hvilken verdi er ugyldig . Men det jeg vet er at vi ikke kan sette bredde og høyde av element til 100% eller auto. Disse attributtverdiene må være den eksakte størrelsen på bildet for å bevare bildeforholdet.

Dette er bare ett eksempel. Det finnes en rekke tilpassede elementer - amp-img, amp-iframe, og amp-annonser - med sine egne sett med valideringsregler mot bruk av et attributt og dets verdi.

Dette kan gjøre validering av AMP Page en skremmende oppgave, spesielt hvis vi tar hundrevis eller (kanskje) tusenvis av eldre innhold publisert for mange år siden.

Endelig tanke

AMP er fortsatt i sin tidlige fase. Det er i svært aktiv utvikling med felles innsats fra Google og webutviklingssamfunnet. Men AMP vil sikkert utvikle seg. På samme måte som HTML5, kan det være elementer, attributter og noen praksis som vil avskrives i fremtiden. Så sørg for at AMP-sidene dine alltid blir validert fra tid til annen basert på de siste endringene i retningslinjene.