Het mobiele web groeit in hoog tempo.
Smartphones blijven sterk verkopen, alleen Apple voorspelt dit breng $ 180 miljard binnen vanaf zijn smartphones tegen 2021. Er zijn meer dan 224 miljoen smartphonegebruikers in de Verenigde Staten, waardoor het mobiele internet een essentiële focus is voor elke website-eigenaar.
De voortdurende groei van mobiele internetgebruikers maakt het belangrijk voor ontwerpers en front-end ontwikkelaars om een goed ontwerp te maken voor versnelde mobiele pagina's.
De praktijk van versnelde mobiele pagina's legt de nadruk op ontwerpkeuzes die aansluiten bij wat zoekmachines zien als vriendelijk , inclusief een gedefinieerde doelgroep, inhoud van hoge kwaliteit, de juiste opmaak en naadloze mobiele compatibiliteit. U zult verschillende versnelde mobiele pagina's opmerken wanneer u Google op mobiel gebruikt door de afkorting AMP in zoekresultaten .
Versnelde mobiele pagina's gebruiken nog steeds HTML, hoewel ze speciale elementen bevatten die prioriteit geven aan snelheid op mobiele apparaten. De technische vereisten van AMP worden vastgesteld door het AMP-project , met de normen waaraan naast grote verkeersbeïnvloeders zoals Google wordt gewerkt. Het project is gemaakt als reactie op onhandige gebruikersinterfaces en trage laadtijden bij het bladeren op sites op een mobiel apparaat.
AMP benadrukt directe snelheid en een vertrouwd uiterlijk, waardoor videomakers hun pagina's kunnen stijlen in het AMP-framework. Het op boilerplaten gebaseerde ontwerp op de meeste AMP-pagina's geeft een soortgelijk gevoel van navigatie, ondanks verschillen in presentatie van de inhoud en kleurenschema's.
Het resultaat is een snellere, meer samenhangende browse-ervaring die de drop-tarieven verbetert, de betrokkenheid van lezers vergroot en de bodes voor mobiel internetten als steunpilaar.
Met de kracht en het potentieel van AMP zo duidelijk, is het praktisch voor ontwerpers om de onderstaande tips te gebruiken om de AMP-ervaring te optimaliseren, zodat hun klanten op verschillende manieren hiervan kunnen profiteren.
Maak een indruk op de pagina waar de meeste van uw bezoekers mee beginnen. Statische inhoud kan worden weergegeven op AMP om beschikbare producten te tonen, waarbij interesse wordt gewekt voor e-commercesites en voor sites die algemene inhoud weergeven.
De AMP-carrouselfunctie stelt ontwerpers in staat meerdere gelijksoortige stukken inhoud op een horizontale as weer te geven. Nadat u de carrouselcomponent in de koptekst hebt geïmporteerd, kunt u type = "carrousel" gebruiken om een lijst met afbeeldingen weer te geven die als een doorlopende strook worden weergegeven. Het is een opvallende functie die ideaal is voor de voorpagina wanneer u bezoekers probeert te laten zien dat ze iets buiten de startpagina te zien krijgen.
Stimuleer sitebezoekers om diep in uw inhoud te graven. U kunt dit doen door een lijst met gerelateerde producten of berichten weer te geven aan degene die ze momenteel bekijken. Je kunt statisch een lijst met relevante inhoud publiceren, zodat deze onmiddellijk wordt voltooid gebruik makend van
Als bezoekers een bestemmingspagina invoeren die niet overeenkomt met hun verzoeken, zullen ze de website verlaten of kijk verder voor wat ze zoeken . De suggestie van productalternatieven is een uitstekende methode om het zoekproces van de gebruiker te accommoderen, ze op zijn minst meer naar de site te trekken. Zelfs als ze niet vinden waar ze precies naar op zoek zijn, vinden ze misschien een alternatief dat net zo goed werkt.
Het is belangrijk dat een website-eigenaar weet hoe bezoekers omgaan met de inhoud. De
Het is belangrijk om in gedachten te houden bij het analyseren van analyses dat met AMP slimme caching van nature is ingebed. Het resultaat is dat u minder verkeer kunt zien dan normaal. Houd gewoon het caching-element in gedachten bij het analyseren van uw nummers in het begin.
Idealiter krijgen ontwerpers nooit iets fout, maar het kan gebeuren. Gebruik de ingebouwde validator van AMP om ervoor te zorgen dat alles naar behoren werkt op een pagina door # development = 1 toe te voegen aan het einde van de pagina-URL. Als u Chrome-dev-hulpprogramma's opent en het bericht 'AMP-validatie geslaagd' ziet, werkt alles. Zo niet, dan kunt u dieper graven totdat het probleem is opgelost. U kunt ook Chrome dev-tools gebruiken om te controleren of alle externe bronnen, variërend van afbeeldingen en video's tot aangepaste lettertypen en iframes, juist zijn geladen.
Bovendien kunt u metadata valideren met behulp van Google's tool voor het testen van gestructureerde gegevens , door een URL op te halen of een codefragment in te voegen. Deze hulpprogramma's kunnen ervoor zorgen dat alles wordt gevalideerd, zodat het crawlen van zoekmachines is ingeschakeld. Noteer, na het crawlen van een zoekmachine, ook uw robots.txt-bestand om te controleren of "Disallow: / amp /" niet in een regel voorkomt. Als het daar is, hebben crawlers geen toegang tot uw AMP-bestanden.
Een ander voordeel van AMP is een al bestaand framework voor het implementeren van advertenties. Het component amp-ad, of amp-embed, is een container om een advertentie weer te geven. De advertenties worden geladen naast alle andere bronnen, met de
JavaScript bestaat niet in het AMP-document. In plaats daarvan laadt AMP een iframe vanuit een iframe-sandbox. U kunt de waarden voor de breedte en hoogte instellen in
U kunt ook een tijdelijke aanduiding of optie voor geen beschikbare advertentie instellen via het kenmerk placeholder. Videoadvertenties zijn ook mogelijk met ingebouwde ondersteuning, met uitgebreide ondersteuning voor mediacomponenten .
Versnelde mobiele pagina's helpen de zichtbaarheid van zoekmachines bij mobiele gebruikers te vergroten, vooral nu Google AMP-pagina's gebruikt in zijn zoekresultaten.
Bovendien zorgen snellere laadtijden, flexibele personalisatie en visuele componenten die het bouncepercentage verbeteren voor een betere mobiele gebruikerservaring dan ooit.
Versnelde mobiele pagina's bieden een fantastisch kader voor de aanhoudende groei van mobiele internetgebruikers.