Αρχική σελίδα » Κινητό » 10 Σημαντικά στοιχεία επιταχυνόμενων κινητών σελίδων (AMP) που πρέπει να γνωρίζετε
10 Σημαντικά στοιχεία επιταχυνόμενων κινητών σελίδων (AMP) που πρέπει να γνωρίζετε
Επιταχυνόμενες σελίδες για κινητά ή ΑΜΠΕΡΑΖ είναι η πρωτοβουλία της Google να κάνει τον κινητό ιστό πιο γρήγορο. Για να επιτευχθεί αυτός ο στόχος, τα πρότυπα AMP περιορίζουν τον τρόπο χρήσης HTML, CSS και JavaScript και διαχειρίζεται τη φόρτωση εξωτερικών πόρων, όπως εικόνες, βίντεο και διαφημίσεις μέσω του δικού του χρόνου εκτέλεσης.
Αυτό συνεπάγεται ότι εσείς δεν μπορεί να χρησιμοποιηθεί είτε οποιοδήποτε προσαρμοσμένο JavaScript (JavaScript συντάκτη ή τρίτου μέρους) ή άλλα στοιχεία HTML που σχετίζονται με πόρους, όπως εικόνες και βίντεο στα έγγραφα AMP.
Για να γεφυρωθεί το χάσμα μεταξύ των αναγκών των χρηστών και των πρακτικών βέλτιστης απόδοσης, η AMP έχει συγκεκριμένων στοιχείων μπορείς χρήση αυτών των αποκλεισμένων στοιχείων.
Τα στοιχεία AMP είναι συγκεκριμένες ετικέτες HTML. Συμπεριφέρονται παρόμοια με τις συνήθεις ετικέτες HTML: έχουν ετικέτες, χαρακτηριστικά, και τα περισσότερα από αυτά μπορούν να στυλιστούν με το CSS. Μπορούν εύκολα να αναγνωριστούν, όπως πάντα ξεκινήστε με το αμπέραζ- πρόθεμα.
Υπάρχουν δύο τύποι στοιχείων AMP: ενσωματωμένο και επεκτάθηκε Συστατικά.
Ενσωματωμένα στοιχεία AMP
Ενσωματωμένα είναι ενσωματωμένα στο runtime του AMP του JavaScript, οπότε δεν χρειάζεται να τα συμπεριλάβετε ξεχωριστά.
1. amp-img
αντικαθιστά το ετικέτα σε έγγραφα HTML AMP. Πρέπει να προσθέσετε το src και alt χαρακτηριστικά όπως ακριβώς και όταν εργάζεστε με τον κανονικό στοιχείο.
έχει επίσης δύο άλλα απαιτούμενα χαρακτηριστικά: πρέπει πάντα να το κάνετε καθορίστε το πλάτος και ύψος γνωρίσματα σε τιμές ακέραιων εικονοστοιχείων, καθώς αυτό επιτρέπει τον χρόνο εκτέλεσης AMP υπολογίστε τη διάταξη εκ των προτέρων.
Αν θέλεις Κάντε την εικόνα να ανταποκρίνεται, πρόσθεσε το διάταξη = "ανταποκρίνεται" Χαρακτηριστικό. ο σχέδιο Χαρακτηριστικό ελέγχει τη διάταξη στα έγγραφα AMP και μπορεί να προστεθεί σε οποιοδήποτε στοιχείο AMP (μάθετε περισσότερα σχετικά με αυτό στο σύστημα AMP Layout System).
Μπορείτε επίσης να χρησιμοποιήσετε το srcset χαρακτηριστικό στο ετικέτα σε καθορίστε διαφορετικές εικόνες για διαφορετικές προβολές προβολής και πυκνότητες εικονοστοιχείων. Λειτουργεί με τον ίδιο τρόπο όπως και με τις εικόνες μη AMP.
2. amp-βίντεο
μπορεί να χρησιμοποιηθεί για να ενσωματώστε άμεσα βίντεο HTML σε έγγραφα HTML AMP. Αντικαθιστά το σε αρχεία AMP. ο ετικέτα τεμπέλης φορτία βίντεο προκειμένου να βελτιστοποιηθεί η απόδοση.
Η πηγή του βίντεο πρέπει να εξυπηρετούνται μέσω του πρωτοκόλλου HTTPS. Πρέπει να προσθέσετε το πλάτος και ύψος χαρακτηριστικά, όπως και με το συστατικό.
ο η ετικέτα έχει πολλά προαιρετικά χαρακτηριστικά, όπως π.χ. αυτόματη αναπαραγωγή και αφίσα τις οποίες μπορείτε να καθορίσετε για να ρυθμίσετε τον τρόπο εμφάνισης του βίντεο HTML5 σας.
υποστηρίζει mp4, webm, ogg και όλες τις άλλες μορφές που υποστηρίζονται από το HTML5
Αν θέλετε, μπορείτε επίσης προσθέστε βίντεο εναλλαγής για χρήστες με προγράμματα περιήγησης που δεν υποστηρίζουν βίντεο HTML5, χρησιμοποιώντας το εφεδρικό χαρακτηριστικό και το Ετικέτα HTML.
Το πρόγραμμα περιήγησής σας δεν υποστηρίζει βίντεο HTML5.
3. amp-ad και amp-embed
σας παρέχει iframe sandboxes στην οποία μπορείτε εμφάνιση των διαφημίσεών σας. Πρέπει να προβάλλετε τις διαφημίσεις σας μέσω του πρωτοκόλλου HTTPS.
Δεν μπορείτε να εκτελείτε μόνοι σας δέσμες ενεργειών που παρέχονται από το δίκτυο διαφημίσεών σας. Αντ 'αυτού, ο χρόνος εκτέλεσης AMP εκτελεί τη JavaScript του συγκεκριμένου δικτύου μέσα στο sandbox. Εσύ πρέπει να καθορίσετε μόνο ποιο δίκτυο χρησιμοποιείτε, και προσθέστε τα δεδομένα σας.
ο εξαρτάται από εσάς προσθέστε τις διαστάσεις της διαφήμισης χρησιμοποιώντας το πλάτος και ύψος γνωρίσματα.
Μπορείτε να ορίσετε το δίκτυο διαφημίσεων που χρησιμοποιείτε με το τύπος Χαρακτηριστικό. Δείτε τη λίστα των υποστηριζόμενων δικτύων διαφημίσεων.
Κάθε δίκτυο διαφημίσεων έχει τη δική του δεδομένα-* χαρακτηριστικά που πρέπει επίσης να προσθέσετε. Για να δείτε ποιο από αυτά χρειάζεστε, κάντε κλικ στο δίκτυο διαφημίσεών σας στην παραπάνω λίστα.
είναι το ψευδώνυμο του , η τεκμηρίωση δεν λέει πολλά γι 'αυτό εκτός από ότι μπορεί να χρησιμοποιηθεί αντί για πότε είναι σημασιολογικά ακριβέστερη. Καθώς η Google υπόσχεται ότι θα εξελίσσει τα εξαρτήματα AMP που σχετίζονται με διαφημίσεις με την πάροδο του χρόνου, αυτό μπορεί να αλλάξει στο μέλλον.
4. amp-pixel
Με , μπορείς προσθέστε ένα εικονοστοιχείο παρακολούθησης στα έγγραφα HTML AMP σας σε μετρήστε τις προβολές σελίδας. Έχει μόνο ένα χαρακτηριστικό, το απαιτούμενο src χαρακτηριστικό, στο οποίο πρέπει να καθορίστε τη διεύθυνση URL που ανήκει στο εικονοστοιχείο παρακολούθησης.
ο ετικέτα επιτρέπει τυπικές αντικαταστάσεις διευθύνσεων URL, που σημαίνει ότι μπορείτε να δημιουργήσει μια τιμή τυχαίας διεύθυνσης URL για να παρακολουθείτε κάθε εμφάνιση.
Ανατρέξτε στον Οδηγό αντικατάστασης διεύθυνσης URL του AMP εάν θέλετε να χρησιμοποιήσετε αυτό το στοιχείο. Σημειώστε ότι δεν μπορείτε να στυλ το συστατικό.
Εκτεταμένα στοιχεία AMP
Ως εκτεταμένα στοιχεία AMP δεν είναι μέρος του χρόνου εκτέλεσης JavaScript, εσύ πρέπει πάντα να τα εισαγάγετε στο στη σελίδα AMP στην οποία θέλετε να τα χρησιμοποιήσετε.
Σημείωση: οι εκδόσεις εξαρτημάτων μπορεί να αλλάξουν στο μέλλον, οπότε μην ξεχάσετε να το κάνετε ελέγξτε την τρέχουσα έκδοση στην τεκμηρίωση.
5. amp-audio
αντικαθιστά το HTML5 ετικέτα, και καθιστά δυνατή την ενσωματώστε άμεσα αρχεία ήχου HTML5 στις σελίδες AMP.
Για να το χρησιμοποιήσετε, πρέπει να καθορίσετε το src, πλάτος και ύψος χαρακτηριστικά και μπορείτε επίσης να προσθέσετε τρία προαιρετικά χαρακτηριστικά: αυτόματη αναπαραγωγή, βρόχος και σίγαση.
Μπορεί επίσης να είναι καλή ιδέα προσθέστε εφεδρικά αρχεία ήχου για χρήστες με προγράμματα περιήγησης που δεν υποστηρίζουν HTML5. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας το εφεδρικό χαρακτηριστικό και το ετικέτα, όπως ακριβώς και με τα προαναφερθέντα συστατικό.
ο Το στοιχείο AMP υποστηρίζει τις ίδιες μορφές ήχου με το Ετικέτα HTML5.
Το πρόγραμμα περιήγησης που χρησιμοποιείτε δεν υποστηρίζει ήχο HTML5.
Χρησιμοποιώ , περιλαμβάνει το ακόλουθο σενάριο στο τμήμα του εγγράφου AMP:
6. amp-iframe
εμφανίζει ένα iframe στα έγγραφα AMP. έχει γίνει πιο ασφαλής από τα κανονικά iframes HTML. Επομένως είναι sandboxed από προεπιλογή.
Υπάρχουν ορισμένοι κανόνες που σχετίζονται με πρέπει να ακολουθήσετε για να περάσετε την επικύρωση.
Πρέπει να καθορίσετε το πλάτος, ύψος, και sandbox γνωρίσματα. ο sandbox το χαρακτηριστικό είναι κενό από προεπιλογή, αλλά μπορείτε να του δώσετε διαφορετικές τιμές για να το να τροποποιήσετε τη συμπεριφορά του iframe, για παράδειγμαsandbox = "Allow-scripts"επιτρέπει στο iframe να εκτελέσει JavaScript. Μπορείτε επίσης να χρησιμοποιήσετε τα χαρακτηριστικά των τυποποιημένων iframe.
Ενώ οι διαστάσεις του είναι προκαθορισμένες από το πλάτος και ύψος χαρακτηριστικά, υπάρχει ένας τρόπος για την αλλαγή μεγέθους κατά το χρόνο εκτέλεσης. Για να χρησιμοποιήσετε το , προσθέστε το ακόλουθο σενάριο στη σελίδα AMP:
7. amp-ακορντεόν
Ακορντεόν αποτελούν ένα συχνό μοτίβο UI σε κινητό σχεδιασμό, καθώς εξοικονομούν χώρο, αλλά εξακολουθούν να εμφανίζουν το περιεχόμενο με έναν προσπελάσιμο τρόπο. καθιστά δυνατή την προσθέστε γρήγορα ακορντεόν σε σελίδες AMP.
Τα τμήματα του ακορντεόν πρέπει να χρησιμοποιούν το HTML5 tag, και πρέπει να είναι η άμεση παιδιά απο ετικέτα.
Κάθε τμήμα πρέπει να έχει δύο παιδιά:
ένα για την επικεφαλίδα
ένα για το περιεχόμενο (το περιεχόμενο μπορεί επίσης να είναι μια εικόνα)
Χρησιμοποιήστε το αναπτυγμένος σε οποιαδήποτε ενότητα που θέλετε να αναπτυχθεί από προεπιλογή.
Τμήμα 1
Περιεχόμενο του τμήματος 1
Τομέας 2
Περιεχόμενο του τμήματος 2
Τμήμα 3
Εικόνα για την ενότητα 3
Για να χρησιμοποιήσετε το στο έγγραφο AMP, συμπεριλάβετε το ακόλουθο σενάριο:
8. amp-lightbox
προσθέτει ένα lightbox σε διαφορετικά στοιχεία (στις περισσότερες περιπτώσεις, εικόνες) στις επιταχυνόμενες σελίδες για κινητά.
Όταν ο χρήστης αλληλεπιδρά με το στοιχείο, για παράδειγμα, βάζει το κουτί στο φως επεκτείνει και γεμίζει ολόκληρο το παράθυρο προβολής. Πρέπει να το κάνετε προσθέστε ένα κουμπί ή άλλο στοιχείο ελέγχου την οποία μπορεί να πατήσει ο χρήστης.
Σημειώστε ότι amp-lightbox μπορεί να χρησιμοποιηθεί μόνο με το nodisplay σχέδιο.
Για να χρησιμοποιήσετε το , θα πρέπει να το εισαγάγετε με τον ακόλουθο κώδικα:
9. amp-καρουσέλ
Τα καρουσέλ χρησιμοποιούνται συχνά στον κινητό σχεδιασμό, όπως επιτρέπουν εμφανίζουν πολλά παρόμοια στοιχεία (πιο συχνά εικόνες) κατά μήκος του οριζόντιου άξονα. Τα αποτελέσματα του AMP παρουσιάζονται επίσης σε μορφή καρουσέλ στην Αναζήτηση Google.
ο το στοιχείο σας επιτρέπει να προσθέσετε καρουσέλ στον ιστότοπό σας. ο άμεση παιδιά απο θα θεωρηθεί ως αντικείμενα του καρουσέλ. Πρέπει να καθορίσετε τις διαστάσεις του καρουσέλ με το πλάτος και ύψος γνωρίσματα.
Μπορείτε να χρησιμοποιήσετε το προαιρετικό τύπος χαρακτηριστικό για τον προσδιορισμό πώς να εμφανίσετε τα στοιχεία καρουσέλ. Αν το τύπος attribute παίρνει το "στροβιλοδρόμιο" αξία, τα στοιχεία θα εμφανιστούν ως συνεχή λωρίδα (αυτό είναι το προεπιλεγμένο), ενώ το "διαφάνειες" τιμή θα εμφανίσει τα στοιχεία σε μορφή διαφανειών.
ο η ετικέτα έχει επίσης και άλλα προαιρετικά χαρακτηριστικά που μπορούν να σας βοηθήσουν να τελειοποιήσετε το αποτέλεσμα.
Στο παρακάτω παράδειγμα, παρατηρήστε ότι τόσο το καρουζέλ όσο και όλα τα στοιχεία του χρησιμοποιήστε το ίδιο πλάτος και ύψος αξίες.
ο απαιτεί την προσθήκη του παρακάτω σεναρίου:
10. amp-analytics
μπορεί να χρησιμοποιηθεί για να συλλογή δεδομένων αναλυτικών στοιχείων στις σελίδες AMP. Επί του παρόντος, υποστηρίζει τέσσερις τύπους συμβάντων παρακολούθησης, Ωστόσο, αυτό μπορεί να αλλάξει στο μέλλον:
Προβολή σελίδας
Άγκυρα κλικ
Κρατών την ώραν
Κύλιση
Χρησιμοποιώ , πρέπει να προσθέστε ένα αντικείμενο διαμόρφωσης JSON μέσα σε α
Προσθέστε την ακόλουθη δέσμη ενεργειών στο στην σελίδα HTML της AMP για να εισαγάγετε το συστατικό:
Τελικές λέξεις
Σε αυτό το post, είχαμε μια ματιά σε όλα τα ενσωματωμένα στοιχεία AMP, και μερικά από τα εκτεταμένα. Δεδομένου ότι οι Επιταχυνόμενες Κινητές Σελίδες είναι ακόμα καινούργιες, πολλά πράγματα μπορούν να αλλάξουν στο μέλλον, οπότε αξίζει να παρακολουθήσετε την τεκμηρίωση είτε στο Github είτε στον επίσημο ιστότοπο AMP.
Δεδομένου ότι αυτά τα στοιχεία AMP είναι ανοιχτού κώδικα, μπορείτε επίσης να συμβάλλετε στην ανάπτυξη, ακόμη και δημιουργώντας το δικό σας στοιχείο. Αν θέλετε να δείτε πώς μια πλήρης σελίδα AMP μοιάζει με διαφορετικά στοιχεία, μπορείτε να δείτε αυτά τα λίγα παραδείγματα στο Github.
