Το AMP (Accelerated Mobile Pages ή Προφορτωμένες Σελίδες για Κινητά) είναι ένα ανοικτού κώδικα project της Google σε συνεργασία με το Twitter που αφορά τις σελίδες που προβάλλονται σε mobile συσκευές. Οι ιστοσελίδες που έχουν ενεργοποιημένο το AMP έχουν μεγαλύτερη ταχύτητα, αυξημένο SEO και ένα σηματάκι στα αποτελέσματα της Google που αναφέρει πως η τάδε ιστοσελίδα χρησιμοποιεί AMP.
Το framework του AMP επιτρέπει στους προγραμματιστές και τους bloggers να δημιουργήσουν ένα γρήγορο και εύχρηστο mobile περιβάλλον για τους χρήστες τους, του οποία η δομή βασίζεται στην HTML και την CSS. Για την ακρίβεια, βασίζεται σε συγκεκριμένα rules της HTML και της CSS. Αλλά για να μην σε μπερδεύω με ονομασίες και όρους που αφορούν γλώσσες πραγματισμού, θα προσπαθήσω όχι απλά να σου εξηγήσω τι είναι, αλλά και πως να το περάσεις στο blog σου με μεγάλη ευκολία.
Διάβασε επίσης: Google Accelerated Mobile Pages – Η τεχνολογία που κάθε blogger χρειάζεται (επειγόντως)
Αξίζει να σημειώσω πως το AMP σχεδιάστηκε αρχικά για τον ανταγωνισμό της Google ενάντια του Facebook, το οποίο τότε είχε κυκλοφορήσει για πρώτη φορά τα Instant Articles. Παρόλα αυτά, με τα χρόνια, το AMP κατάφερε να κερδίσει και να γίνει μια εξαιρετική λύση για όσους αντιμετωπίζουν προβλήματα με την ταχύτητα των ιστοσελίδων τους. Η Google ανακοίνωσε επίσης πως θα “σπρώξει” τις Accelerated Mobile Pages σελίδες και στα web standards της, έτσι ώστε περισσότεροι να εστιάσουν προς αυτήν.
Τι πρέπει να προσέξεις προτού περάσεις το AMP
Αρχικά, το πρώτο πράγμα που πρέπει να κάνεις είναι να σιγουρευτείς πως το theme το οποίο χρησιμοποιείς έχει σχεδιαστεί και για AMP. Αυτό μπορείς να το καταλάβεις εύκολα διαβάζοντας την περιγραφή του theme ή κάνοντας μια ερώτηση στους προγραμματιστές που το έφτιαξαν.
Τα περισσότερα δωρεάν themes δεν παρέχουν υποστήριξη για AMP, εκτός αν τα έχει φτιάξει το ίδιο το WordPress, ενώ τα themes που αγοράζεις από ιστοσελίδες όπως το ThemeForest, τις περισσότερες φορές παρέχουν και υποστήριξη αλλά και δικά τους plugins.
Παρόλα αυτά, ακόμα και αν το theme σου δεν είναι συμβατό με το AMP, μπορείς πάλι να δοκιμάσεις να το περάσεις με τη χρήση των παρακάτω plugins. Κάποια themes ακόμα και όταν δεν έχουν σχεδιαστεί για AMP, λειτουργεί η τεχνολογία άψογα όταν την προσθέτεις με κάποιο plugin.
Πως να περάσεις το AMP στο WordPress
Ένας από τους κύριους λόγους για τους οποίους λατρεύω το WordPress είναι τα εκατοντάδες χιλιάδες διαθέσιμα plugins που υπάρχουν γι ‘αυτό. Όπως μπορείς να καταλάβεις, υπάρχουν και plugins για να περάσεις το AMP στο WordPress, καθώς επίσης και για να κάνεις βασικές αλλαγές στον σχεδιασμό των AMP σελίδων.
Ο επίσημος τρόπος
Η Google και η Automattic σε συνεργασία με άλλες εταιρείες και προγραμματιστές δημιούργησαν το “επίσημο” plugin για το WordPress. Μάλιστα, το plugin είναι ανοικτού-κώδικα και μπορείς να το βρεις διαθέσιμο και μέσω του Github. Τα περισσότερα themes συχνά λειτουργούν με το συγκεκριμένο plugin, ενώ κάποια που παρέχουν τα δικά τους, βασίζονται στον κώδικα αυτού του plugin.
Το συγκεκριμένο όμως plugin δεν περιλαμβάνει αρκετές επιλογές για να μορφοποιήσεις τον σχεδιασμό των AMP σελίδων σου. Αυτό συμβαίνει για δύο λόγους: Ο πρώτος είναι επειδή οι AMP σελίδες πρέπει να είναι απλές και γρήγορες, και είναι αρκετά δύσκολο να μορφοποιήσεις αρκετά πράγματα στο AMP, καθώς σε περιορίζει αρκετά, ενώ ο δεύτερος λόγος είναι επειδή οι περισσότεροι προγραμματιστές θεμάτων παίρνουν αυτό το απλό plugin και βάζουν τον ίδιο σχεδιασμό που έχει ένα theme στις mobile συσκευές, να έχει σχεδόν το ίδιο και στις AMP σελίδες.
1. Αναζήτησε το plugin από την σελίδα των Πρόσθετων στο WordPress, ή κατέβασε το και ανέβασε το χειροκίνητα.
2. Από το αριστερό πλαϊνό μενού, κάνε κλικ στην επιλογή AMP και στη συνέχεια ρύθμισε το έτσι όπως θέλεις να εμφανίζεται. Η δεύτερη επιλογή συνήθως είναι και η καλύτερη καθώς παίρνει τον βασικό σχεδιασμό του theme, εφόσον όμως αυτό είναι συμβατό με το AMP. Σου προτείνω να τους δοκιμάσεις όλους για να δεις ποιος “εφαρμόζει” καλύτερα.
Για να ελέγξεις πως φαίνονται οι AMP σελίδες του blog σου, πάνε σε ένα οποιοδήποτε άρθρο και βάλε στο τέλος του συνδέσμου το /?amp και πάτα Enter. Για παράδειγμα, ένα άρθρο μου έχει ως σύνδεσμο https://inkstory.gr/dimiourgia-wordpress-blog-odigos/ οπότε για να το δω σε AMP (είτε από υπολογιστή, είτε από κινητό) θα πρέπει να βάλω στο τέλος του συνδέσμου https://inkstory.gr/dimiourgia-wordpress-blog-odigos/?amp
Φυσικά, θα πρέπει να ελέγξεις τις AMP σελίδες από το κινητό, καθώς μόνο από εκεί θα τις βλέπουν οι αναγνώστες σου όταν επισκέπτονται το blog σου από τις μηχανές αναζήτησης.
Ο ανεπίσημος τρόπος
Έχε κατά νου πως όταν λέω “επίσημος” και “ανεπίσημος” τρόπος, δεν αναφέρομαι σε καμιά περίπτωση πως ο ένας είναι καλύτερος από τον άλλον. Για την ακρίβεια, όταν λέω επίσημος τρόπος, αναφέρομαι στο plugin που το έφτιαξε η ίδια η Google και η Automattic, χωρίς αυτό να σημαίνει απαραίτητα πως είναι το καλύτερο στο είδος του.
Το δεύτερο plugin λοιπόν, ονομάζεται AMP for WP – Accelerated Mobile Pages και έχει δημιουργηθεί από τον Ahmed Kaludi και τον Mohammed Kaludi. Είναι το δεύτερο πιο γνωστό plugin για AMP σελίδες στο WordPress και παρέχει πάρα πολλά χαρακτηριστικά, εργαλεία και τρόπους μορφοποίησης. Αν δεν είσαι εξοικειωμένος με τις πολλές επιλογές, τότε ίσως σου φανεί λιγάκι δύσκολο στην αρχή, αλλά όλα είναι σωστά οργανωμένα ώστε να τα καταλαβαίνουν οι περισσότεροι χρήστες.
Ακόμα και αν το theme που έχεις δεν υποστηρίζει από μόνο του τις AMP σελίδες, με το συγκεκριμένο plugin κατά πάσα πιθανότητα δεν θα έχεις πρόβλημα καθώς βάζει το δικό του σύστημα μέσα.
Σημείωση: Το συγκεκριμένο plugin δεν είναι ανοικτού-κώδικα και ως εκ τούτου, για να κάνεις ορισμένα πράγματα θα χρειαστεί να πληρώσεις. Η πληρωμή, ωστόσο, είναι προαιρετική.
1. Από την πλαϊνή αριστερή στήλη (ή μενού) του WordPress, κάνε κλικ στα Πρόσθετα > Νέο πρόσθετο και αναζήτησε το AMP for WP – Accelerated Mobile Pages ή σκέτο AMP.
2. Με το που εγκαταστήσεις το plugin, θα σε μεταφέρει αυτόματα σε μια νέα σελίδα απ’ όπου θα έχεις την δυνατότητα να επιλέξεις αν θέλεις να δεις όλες τις επιλογές που παρέχει, ή μόνο τις βασικές για τους αρχάριους χρήστες. Προσωπικά, σου προτείνω να επιλέξεις την επιλογή “Full” για να βλέπεις όλες τις επιλογές.
3. Μόλις επιλέξεις την επιλογή, θα σε πάει στην καρτέλα απ’ όπου θα έχεις την δυνατότητα να κάνεις ορισμένες γρήγορες ρυθμίσεις. Από εκεί, επέλεξε αρχικά να ενεργοποιηθεί το AMP στις σελίδες και στα άρθρα, πρόσθεσε το λογότυπο του blog σου, το αναγνωριστικό για τα Google Analytics και τέλος το GDPR ως επιλογή στα Privacy Settings.
4. Μόλις ολοκληρώσεις αυτές τις βασικές ρυθμίσεις, μπορείς στη συνέχεια από το αριστερό μενού του plugin να μεταβείς στα Settings ή στο Design για να το ρυθμίσεις ακόμα περισσότερο και να μορφοποιήσεις τον σχεδιασμό των AMP σελίδων.
Σημαντικά πράγματα που πρέπει να κάνεις αφότου περάσεις το AMP
Μόλις ολοκληρώσεις όλη την διαδικασία και περάσεις το AMP στο blog σου, στη συνέχεια θα χρειαστεί να κάνεις ορισμένες απαραίτητες ρυθμίσεις.
- Αφαίρεσε τον κώδικα από το Google Analytics και από την Google AdSense από το blog σου. Οι Accelerated Mobile Pages (σελίδες) απαιτούν διαφορετικό κώδικα και όχι τον συνηθισμένο που χρησιμοποιούμε συνήθως. Μόλις το κάνεις, εγκατέστησε το Google Site Kit plugin και μέσω αυτού πρόσθεσε τα Google Analytics και την Google AdSense.
- Σιγουρέψου πως έχεις συνδέσει το blog σου στο Google Search Console (μπορείς να το κάνεις και μέσω του Google Site Kit plugin) για να παρακολουθείς από εκεί τυχόν σφάλματα που υπάρχουν στις AMP σελίδες σου.
- Χρησιμοποίησε το εργαλείο της Google για να σιγουρευτείς πως το AMP λειτουργεί και το βλέπει σωστά η εταιρεία. Στο πεδίο, μην βάλεις την αρχική σου σελίδα, αλλά έναν σύνδεσμο από κάποιο άρθρο σου.
- Αν χρησιμοποιείς το Yoast SEO plugin, τότε θα χρειαστεί να εγκαταστήσεις και το Glue for Yoast SEO & AMP plugin.
Υπέροχα! Σε λίγες ημέρες τα bots της Google θα ξεκινήσουν να βλέπουν τις AMP σελίδες των άρθρων σου και θα προστεθεί επίσης το εικονίδιο των Accelerated Mobile Pages στα αποτελέσματα αναζήτησης, ενημερώνοντας κάθε χρήστη πως το blog σου χρησιμοποιεί την τεχνολογία της Google.
Εσύ κατάφερες να περάσεις το AMP στο blog σου; Θα χαρώ να ακούσω τις απόψεις σου, καθώς επίσης και να σε βοηθήσω σε οποιοδήποτε πρόβλημα αντιμετωπίζεις, αφήνοντας το σχόλιο σου στο τέλος του άρθρου.
