Hoe versnelde mobiele pagina's (AMP) te valideren
In onze laatste AMP-zelfstudie hebben we u laten zien hoe u AMP (Accelerated Mobile Pages) kunt gebruiken om een aanzienlijke snelheidsverhoging en een betere bekendheid te krijgen in het mobiele zoekresultaat van Google voor uw website in de mobiele omgeving.
Gezien het potentieel van AMP, neem ik aan dat u mogelijk bent begonnen of plannen hebt om wijzigingen aan te brengen in uw websites om te voldoen aan AMP . Volg de richtlijnen in Documenten zorgvuldig en stel uw CSS samen om de AMP-pagina's op uw visuele eetlust af te stemmen.
Nu is er nog een laatste ding om te doen: die pagina's valideren.
AMP-validators
Er zijn verschillende manieren om uw AMP-pagina's te valideren:
- Voeg het pad
#development=1
aan het einde van de URL van de AMP-pagina. Het rapport wordt geprojecteerd op het tabblad Console onder DevTools. - U kunt ook de online AMP-validator gebruiken.
- U kunt ook de Chrome AMP-extensie gebruiken.
Deze tools produceren een rapport met fouten of waarschuwingen op de pagina's. Op basis hiervan kunt u kiezen wat u wilt oplossen.

Data structuur
AMP vereist ook de Schema-gegevensstructuur. Deze gegevens zijn ingedeeld in de head
tag van de pagina in JSON-formaat. Het bevat contextuele informatie over de pagina, inclusief de titel, het uitgeverslogo en de naam, de datum waarop het werd gepubliceerd en gewijzigd, enz.
Afhankelijk van het doel van de pagina kunnen de gegevens die moeten worden opgenomen variëren: artikelen, recensies, recepten, video's, enzovoort. U kunt de documentatie voor Google-gegevenstypen raadplegen voor meer informatie over het gegevenstype.
Er zijn enkele gegevens vereist die fouten opleveren als ze niet worden geleverd; een paar andere soorten gegevens zijn optioneel en leveren alleen waarschuwingen op. Dit type fouten wordt echter niet weergegeven in de bovengenoemde AMP-validators.
In plaats daarvan worden ze weergegeven in de Google-tool voor het testen van gestructureerde gegevens en in uw Google Webmasters-account.


Overlooked Errors
De meeste fouten worden expliciet in Documenten genoteerd en kunnen eenvoudig worden opgepakt in een oogopslag. Een paar fouten echter zijn gecontextualiseerd met variabelen die we misschien niet zullen opmerken, zoals de "Ongeldige attribuutwaarde", die zegt dat "The attribute '%1' in tag '%2' is set to the invalid value '%3'."
.
Dit foutenrapport vermeldt of vermeldt niet precies welke waarde ongeldig is. Maar wat ik wel weet, is dat we de width
en de height
van niet kunnen instellen 100%
of auto
. Deze kenmerkwaarden moeten de exacte grootte van de afbeelding zijn om de beeldverhouding te behouden.

amp-img
, amp-iframe
en amp-ads
- met hun eigen sets validatieregels tegen het gebruik van een attribuut en de bijbehorende waarde.Dit kan een validerende AMP-pagina tot een ontmoedigende taak maken, vooral als we rekening houden met honderden of (misschien) duizenden oudere inhoud die al jaren geleden is gepubliceerd.
Laatste gedachte
AMP bevindt zich nog in de kinderschoenen. Het is in een zeer actieve ontwikkeling met gemeenschappelijke inspanningen van Google en de webontwikkelingsgemeenschap. Maar AMP zal zeker evolueren . Net als bij HTML5 kunnen er elementen, attributen en sommige praktijken zijn die in de toekomst zullen verdwijnen. Zorg er dus voor dat uw AMP-pagina's van tijd tot tijd voortdurend worden gevalideerd op basis van de laatste wijzigingen in de richtlijnen.

11 Mixin-bibliotheken voor Sass-ontwerpers moeten krijgen
Als u Sass gebruikt in uw ontwikkelworkflow, kent u het belang van mixins. Wanneer u sommige dingen ziet die herhaaldelijk en saai in CSS worden geschreven, kunnen mixins u helpen herhalend werk te voorkomen. Een mixin bevat CSS-verklaringen die u overal op uw site kunt gebruiken.Er zijn veel mixins gemaakt door ontwikkelaars om u te helpen bij het werken met Sass in uw ontwikkeling

Catalogus aanmaken met "Prijsaanvraag" met WooCommerce
WooCommerce biedt een geweldige manier om uw producten te vermelden en maakt het vrij gemakkelijk voor uw klanten om te kopen en om uw bestellingen te beheren . Soms wilt u uw spullen misschien niet echt verkopen, maar gewoon presenteren.In dit artikel laat ik je zien hoe je gemakkelijk een geweldige catalogus kunt maken en een prijsverzoekoptie kunt bieden door alleen de inherente WooCommerce-opties en een paar mooie standaardaanpassingsfragmenten te gebruiken