Terug naar Ondersteuning Je site ontwerpen AMP

AMP

AMP (Accelerated Mobile Pages) is een open-source framework waarmee browsers en apps de inhoud van je site snel op mobiele apparaten kunnen laden.

AMP is toegankelijk voor nieuwe sites met plugins via de AMP-plugin. Voor plugin-enabled WordPress.com-sites die vóór 13 juni 2022 zijn gemaakt, is standaard de AMP-plugin geïnstalleerd.

Over AMP

AMP biedt je de mogelijkheid om websites en advertenties te maken die vrijwel onmiddellijk worden geladen. Hierdoor kunnen je bezoekers genieten van een verbeterde, gebruiksvriendelijkere ervaring via een mobiel apparaat en desktopcomputer.

Het grootste voordeel van AMP is een snel ladende mobiele ervaring. Alle blogberichten op je site (startpagina, archieven en pagina’s worden momenteel niet ondersteund) krijgen dynamisch gegenereerde AMP-compatibele versies. De resultaten van je site in Google worden ook gemarkeerd door de AMP-badge tijdens zoekopdrachten op mobiele apparaten:

Een zoekresultaat in Google met een AMP-badge

Ga naar de AMP-site voor meer informatie over hoe het werkt.

AMP in- of uitschakelen

Als je de niet-AMP versie wil weergeven van je site naar Google (en mogelijke bezoekers van je site), kan je de AMP-plugin deactiveren onder Plugins → Geïnstalleerde plugins.

📌

AMP is alleen beschikbaar op openbare websites die geen crawlers blokkeren. Als de AMP-box niet beschikbaar is, controleer dan je Site-privacy-instellingen en pas het aan naar Openbaar.

Aanpassing

Je gaat naar Weergave → Aanpassen → AMP → Design om de weergave van de AMP-versie van je berichten te wijzigen. Omdat de AMP-specificaties een minimaal pagina-ontwerp vereisen, zie je opties om de tekstkleur en achtergrond van de koptekst, de kleur van de link en het kleurenschema van de achtergrond te wijzigen.

Aangepaste CSS is niet van toepassing op de AMP-versie van berichten.

Werken met AMP

Om de AMP-plugin na het installeren en activeren te gebruiken, klik je op AMP in je dashboard.

Instellingen

In de AMP-instellingen staan drie sjabloonmodi:

Drie AMP-modi
De instellingen van de AMP-plugin (klik om te vergroten)

Standaard: In deze modus stelt de plugin sites in staat om AMP als enige contentversie te hebben voor desktop en mobiel. De volledige site wordt beheerd als geldige AMP-pagina’s (wat we AMP-first noemen).

In deze modus wordt er geen ?amp query aan URL’s toegevoegd.

Tijdelijk: Indien beschikbaar in je thema, vertrouwt AMP op het sjabloon en de stijlen van een thema als er AMP en niet-AMP content wordt weergegeven. Dit betekent dat je AMP en niet-AMP content hetzelfde uiterlijk en gebruiksgemak hebben.

In deze modus wordt de ?amp query toegevoegd aan URL’s voor AMP-content.

In dit geval worden AMP-pagina’s normaal gesproken alleen bekeken op mobiele apparaten via bepaalde bronnen zoals Google Zoeken en Twitter, of door de ?amp query handmatig toe te voegen.

Reader: AMP-content wordt beheerd in basissjablonen (met die blauwe balk bovenaan), die onafhankelijk zijn van de sjablonen in je actieve thema. Het is minder waarschijnlijk dat de Reader-modus de functionaliteit verstoort die geleverd wordt door een derde partij of plugin.

In deze modus eindigen de URL’s voor AMP-berichten meestal op /amp/, terwijl ze voor pagina’s eindigen op ?amp.

Analyses

Voor toegang tot AMP Analytics moet je eerst Google Analytics op je website installeren. Zie hier hoe je Google Analytics kunt installeren.

  1. Klik in je Google Analytics-account op Admin → Property-instellingen om de Property ID op te halen, die er zo uitziet: UA-XXXXX-Y.
  2. Pas het volgende script aan en vervang de UA-XXXXX-Y door je property ID.
{
	"vars": {
		"account": "UA-XXXXX-Y"
	},
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	}
}

3. Kopieer het script en ga op je site naar AMP → Analytische gegevens. Voer googleanalytics in het invoerveld in.

Plak de code in het veld JSON-configuratie.

Een voorbeeld van een uitgevoerde Google Analytics AMP-setup.

4. Klik op Opslaan.

AMP-fouten

Je kunt een melding van Google krijgen over AMP op je site.

Het woord ‘fout’ kan een beetje misleidend zijn, omdat het impliceert dat er iets opgelost moet worden, maar vaak is dit niet het geval. De ‘fouten’ zijn de zaken waarvan ontdekt is dat ze niet compatibel zijn met AMP en uit de weergave zijn verwijderd van de pagina (wat we verwachten dat de AMP-plugin doet in de modus Standaard en Tijdelijk). Je themabestanden worden niet bewerkt. Deze zaken zijn meestal (zo niet altijd) overtollige CSS (CSS die de limiet van 50 kb overschrijdt) of JavaScript. In de foutindex worden al deze items weergegeven voor de hele site.

Over het algemeen kun je ze negeren, tenzij iets er niet goed uitziet, of niet functioneert op je pagina.

Stijlfouten

Kunnen zich voordoen als de CSS die vereist is voor een gedeelte van je pagina wordt verwijderd als onderdeel van de CSS die 50 kb heeft overschreden.

Opties om dit op te lossen:

Functionele (JavaScript) fouten

​Bijvoorbeeld: Twitter-widget wordt niet weergegeven, Facebook-widget geeft geen berichten weer, diavoorstelling wordt niet weergegeven, vervolgkeuzemenu’s werken niet, menu voor mobiel werkt niet.

Deze fouten treden op omdat JavaScript, waarmee deze items worden geladen, is verwijderd.

Fouten oplossen

Aangezien het woord ‘fout’ misleidend kan zijn, betekent dit over het algemeen één of twee dingen:

De AMP-plugin verwijdert JavaScript en HTML die niet voldoet aan de specificaties van AMP-versies van pagina’s. (waar /?amp aan het einde van een pagina-URL wordt toegevoegd).

Het verwijdert tevens CSS die de limiet van 50 kb overschrijdt (nadat de plugin het geprobeerd heeft te minimaliseren).

Verwijdering van JS kan nog steeds resulteren in een acceptabele AMP-ervaring, zolang je thema/plugins maar kunnen functioneren zonder die CSS of JavaScript.

Jij moet de AMP-versie van je site bekijken en bepalen of de verwijdering van die opmaak acceptabel is. Als de verwijdering van de meeste scripts acceptabel is, kun je drie belangrijke dingen doen:

  1. Overschakelen naar met AMP compatibele thema’s/plugins.
  2. Een onderliggend thema en/of aangepaste plugins gebruiken die output van ongeldige opmaak voorkomen ten gunste van het toevoegen van AMP-componenten.
  3. Activeer de Reader-modus. Zoals hierboven vermeld, zien AMP-pagina’s er anders uit dan de rest van je site, maar dit wordt een volledig compatibele versie van je site.
  4. Je kan AMP ook deactiveren op specifieke pagina’s door op de knop ‘AMP inschakelen’ te klikken in de Documentstatus en zichtbaarheidsinstellingen. Dit resulteert in een niet-compatibele AMP-versie van een pagina.
Copied to clipboard!