Hvad er AMP?
AMP eller Accelerated Mobile Page er en HTML side som er designet til at loade hurtigt. For at skabe hurtig load time* er der skabt en teknologi som kun indholder de basale elementer det kræver, at vise en artikel.
Denne side er en Accelerated Mobile Page!
* Load time er tiden det tager fra du klikker på et søgeresultat eller skriver webadressen i adressefeltet og siden er åben og klar til brug.
De vigtigste forskelle mellem AMP HTML og HTML
De væsenligste elemeter der er fjernet fra AMP HTML er:
- JavaScript
- ‹FORM› - kontaktformularer
- Analytics tracking - Kræver en speciel tracking kode
- CSS - Basic styling er fortsat muligt
Hvem har gavn af AMP?
AMP er designet til at vise artikler, derfor er AMP velegnet til nyhedsmedier, blogs og lignende sider.
Websites der kræver JavaScript for at virke og websider der generelt er beregnet til brugerinteraktion vil ikke få gavn af at implementere AMP.
Det gør også, at AMP ikke er velegnet til e-commerce - man kan dog med fordel implementere AMP HTML på kategoriser der ikke indeholder produkter.
Sådan kommer du i gang med AMP
Det er meget enkelt at komme i gang med Accelerated Mobile Pages. Du skal oprette en ny html side og tilføje nogle obligatoriske AMP HTML tags. Derudover skal nogle af de traditionelle HTML tags ændres til AMP HTML tags.
For at sikre at din AMP HTML er opbygget korrekt, skal du tage webadressen, tilføje #development=1 i enden og åbne siden i Google Chrome. Herefter skal du højre-klikke på siden og klikke på undersøg for at åbne consolen.
Er der fejl i opsætning vil det stå i consolen og når alt virker vil der stå: "AMP validation successful".
Obligatorisk indhold
AMP HTML sider SKAL indeholde følgende elementer:- ‹!doctype html›
- ‹html amp lang="da"›
- ‹head› og ‹body› tags
- ‹link rel="canonical" href="
[HTML versionen, hvis den findes, ellers HTML AMP]
" /›
- ‹meta charset="utf-8"›
- ‹meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"›
- ‹script async src="https://cdn.ampproject.org/v0.js"›‹/script›
- AMP boilerplate kode
AMP HTML kildekode
[Indsæt link til HTML versionen, hvis den findes, ellers til HTML AMP]
"› ‹title›[Indsæt din title]
‹/title› ‹meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"› ‹style amp-custom›[Indsæt din styling]
‹/style› ‹style amp-boilerplate›body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}‹/style›‹noscript›‹style amp-boilerplate›body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}‹/style›‹/noscript› ‹script async src="https://cdn.ampproject.org/v0.js"›‹/script› ‹/head› ‹body›[Indsæt dit indhold]
‹/body› ‹/html›