“The Road to Google AMP” σε WordPress site
Έχουμε αναφερθεί αναλυτικά στο τι είναι το Google AMP Project, πώς λειτουργεί, ποια είναι τα θετικά και αρνητικά του, αλλά και πώς θα επηρεάσει στο μέλλον το Digital Marketing σε επίπεδο SEO και User Experience.
Πρόσφατα, ασχοληθήκαμε περισσότερο με το Google AMP, με στόχο να το εισάγουμε στα άρθρα μας και να προσφέρουμε καλύτερο user experience στους αναγνώστες που μας επισκέπτονται μέσω mobile συσκευών.
Σε αυτό το άρθρο, μοιραζόμαστε την εμπειρία μας μαζί σου, σχετικά με τα βήματα που ακολουθήσαμε για να εγκαταστήσουμε και να καταστήσουμε fully-functioning το Google AMP στο site μας.
Έτσι, δημιουργήσαμε έναν αναλυτικό οδηγό που βήμα-βήμα θα σε βοηθήσει στα πρώτα σου βήματα με το AMP, την εγκατάστασή του και την αντιμετώπιση σφαλμάτων.
Εάν διαθέτεις ένα blog ή news site, το Google AMP θα σε βοηθήσει να προσφέρεις το βέλτιστο user experience στους αναγνώστες σου.
Αν όμως διαθέτεις ένα απλό εταιρικό site ή ένα e-shop, θα πρέπει να το ξανασκεφτείς πριν προβείς σε μια τέτοια ενέργεια, καθώς το Google AMP δεν μπορεί να κάνει πολλά για εσένα.
Τι θα χρειαστείς πριν ξεκινήσεις
Πριν ξεκινήσεις τη διαδικασία εγκατάστασης, θα χρειαστεί να εξασφαλίσεις πρόσβαση σε κάποια απαραίτητα plugins και εργαλεία.
1. Πρόσβαση admin στο διαχειριστικό του WordPress
Είναι αυτονόητο ότι για να έχεις τη δυνατότητα να εγκαταστήσεις και να παραμετροποιήσεις plugins σε WordPress site, θα πρέπει να έχεις δικαιώματα administrator.
Σε περίπτωση που δεν έχεις δικαιώματα admin, επικοινώνησε με το developer του site σου και ζήτησε του να υλοποιήσει αυτός τις απαραίτητες ενέργειες.
Σε κάθε περίπτωση, καλό θα είναι να προηγηθεί ένα backup των αρχείων και της βάσης δεδομένων του site σου.
Better safe than sorry!
2. Πρόσβαση admin στο Search Console
Κατά τη διάρκεια εγκατάστασης και προσαρμογής του AMP, θα χρειαστείς πρόσβαση στο Search Console και συγκεκριμένα στην αναφορά Accelerated Mobile Pages του Google Search Console, όπου θα σε βοηθήσει στη διάγνωση τυχόν σφαλμάτων, στο debugging αλλά και στην επιβεβαίωση ότι η Google μπορεί και ευρετηριάζει τις AMP σελίδες σου.
Επίσης, φρόντισε να έχεις συνδέσει το site σου με το Google Search Console.
Αν χρησιμοποιείς SSL certificate στο site σου (https) φρόντισε να δημιουργήσεις 2 properties, ένα για http και ένα για https.
3. To AMP plugin by Automatic
Όταν ενεργοποιήσεις αυτό το plugin, όλα τα post URLs στο site σου θα αποκτήσουν μια /amp/ version. Έτσι, μπορείς να πληκτρολογήσεις το URL όποιου post θες, προσθέτοντας την κατάληξη /amp/ στο τέλος και να πατήσεις enter για να δεις την AMP έκδοση.
Το plugin προσθέτει και τα meta tags στο head των σελίδων σου, πράγμα που κάνει εφικτό για τη Google και άλλους να δουν ότι οι σελίδες αυτές υπάρχουν.
Πλέον, το plugin αυτό σου δίνει τη δυνατότητα να επιλέξεις template για τις AMP σελίδες σου αλλά και να τις διαχειριστείς μέσω ενός theme customizer.
Εάν θες περισσότερες πληροφορίες σχετικά με το theme customizer, μπορείς να τις βρεις σε αυτό το άρθρο.
Εάν πάλι δεν θέλεις να «βουτήξεις στα βαθιά», απλά εγκατέστησε και ενεργοποίησε αυτό το plugin.
4. Το Yoast SEO: AMP Glue plugin σε περίπτωση που χρησιμοποιείς το Yoast SEO
Το Yoast SEO: AMP Glue plugin είναι στην ουσία ένα αυτόνομο add on του δημοφιλέστερου SEO plugin για το WordPress.
To plugin αυτό κάνει integrate το Yoast SEO και τις ρυθμίσεις του στις AMP σελίδες. Έτσι, όλα τα metadata (focus keyword, keywords, meta title, meta keywords κλπ.) μεταφέρονται επιτυχώς και στις AMP σελίδες.
Πέρα από αυτή τη λειτουργία, το Yoast SEO: AMP Glue plugin σου δίνει τη δυνατότητα να επεξεργαστείς τις AMP σελίδες. Από χρώματα μέχρι και link styles, μπορείς να διατηρήσεις το look and feel των σελίδων σου και στην AMP version.
Τα Βήματα για την εγκατάσταση του Google AMP
- Κάνε εγκατάσταση και ενεργοποίησε το AMP plugin. Στη συνέχεια επίλεξε ένα τυχαίο post και πρόσθεσε στην κατάληξη του URL το /amp/ για να δεις ότι εγκαταστάθηκε σωστά.
- Εγκατέστησε και ενεργοποίησε το Yoast SEO: AMP Glue plugin.
- Πήγαινε στο SEO → AMP settings menu, design tab και άλλαξε το styling για να ταιριάζει με τη συνολική εικόνα του site σου. Μπορείς επίσης να ανεβάσεις μια default εικόνα για τα άρθρα σου που δεν έχουν μια featured image.
- Πήγαινε στο SEO → AMP settings menu, analytics tab και πρόσθεσε το UA των analytics σου.
- Το AMP είναι έτοιμο και μπορείς να ξεκινήσεις τη διαδικασία του debugging εφόσον παρατηρήσεις κάποια δυσλειτουργία.
Σφάλματα και επαλήθευση του Google AMP
Αναμφισβήτητα, το τελικό και πολυπόθητο αποτέλεσμα που περιμένεις να δεις μετά την εγκατάσταση του Google AMP είναι το παρακάτω:
Αυτή τη μορφή πρέπει να έχει το listing σου στα αποτελέσματα αναζήτησης της Google, για όσους αναζητούν μέσω mobile συσκευών.
Ωστόσο, η εμπειρία μας έδειξε ότι ο δρόμος έχει κάποια εμπόδια μέχρι να φτάσεις σε αυτό το αποτέλεσμα.
Μόλις τελειώσεις με την εγκατάσταση του Google AMP, θα πρέπει να οδηγηθείς στο Google Search Console και να ενημερώσεις τη μηχανή αναζήτησης της Google για τις τελευταίες σου αλλαγές.
Για να το κάνεις αυτό, θα πρέπει να πας στο Crawl → Fetch as Google και να πατήσεις το button FETCH AND RENDER.
Με αυτόν τον τρόπο, η Google θα προσπαθήσει να κάνει crawl στο site σου, εντοπίζοντας όλες τις τελευταίες αλλαγές στα URLs.
Στη συνέχεια, πήγαινε στο Search Appearance → Accelerated Mobile Pages όπου θα εκεί θα μπορείς να δεις την αναφορά της Google σχετικά με τις AMP-friendly σελίδες σου.
Συνηθισμένα σφάλματα που θα συναντήσεις
Τις πρώτες ημέρες τα αποτελέσματα ήταν λίγο απογοητευτικά, σχεδόν όλες οι σελίδες όπου είχε εγκατασταθεί το AMP είχαν επισημανθεί με σφάλματα.
Επίσης, αναζητώντας από mobile συσκευή στη Google, τα αποτελέσματά μας δεν είχαν τη σήμανση AMP (το σηματάκι με τον κεραυνό). Έτσι ξεκινήσαμε τη διαδικασία debugging.
Η Google παρέχει ένα validator tool όπου μπορεί να τεστάρεις τις AMP σελίδες σου και μπορείς να το βρεις εδώ.
Σε αυτό το εργαλείο μπορείς να «πετάξεις» ένα AMP URL και να δεις αν υπάρχουν errors και άλλα δομικά προβλήματα.
Ας δούμε όμως ποια είναι τα πιο συνηθισμένα και ποια είναι αυτά που συναντήσαμε εμείς.
1. Missing site logo
Το πρώτο error που έπρεπε να διορθώσουμε ήταν η ένδειξη «logo – A value for the logo field is required.».
Η διόρθωση του error είναι πολύ απλή, το μόνο που έχεις να κάνεις είναι να πας στο WordPress menu → Appearance → Customizer και να προσθέσεις μια εικόνα στο απαραίτητο πεδίο.
2. Missing featured image
Τα Schema.org article errors ήταν αυτά που μας προβλημάτισαν περισσότερο.
Σε αυτό το σημείο, είναι σημαντικό να έχεις ένα πλήρως ενημερωμένο και σύγχρονο WordPress theme το οποίο είναι σωστά δομημένο και υποστηρίζει το σύγχρονο Schema markup. Σε αυτό σταθήκαμε τυχεροί.
Κάποια άρθρα μας δεν περιείχαν featured image, κυρίως τα πιο παλιά σε publish date.
Έτσι, το AMP δεν έβρισκε μια εικόνα να προβάλλει στους χρήστες, με αποτέλεσμα να χτυπάει error.
Η διόρθωση του σφάλματος είναι απλή και γρήγορη.
Το Yoast SEO AMP: Glue plugin σου δίνει τη δυνατότητα να προσθέσεις μια default image, η οποία θα εμφανίζεται σε όποιο άρθρο δεν έχει featured image.
Την επιλογή αυτή θα τη βρεις στο design tab του Yoast SEO AMP: Glue settings.
End of story
Εξαλείφοντας ένα-ένα τα σφάλματα και αφού βεβαιωθήκαμε μέσω του Google Search Console ότι πλέον οι AMP σελίδες μας δεν αντιμετωπίζουν κάποιο πρόβλημα, δώσαμε λίγο χρόνο στη Google (2-3 ημέρες) για να ευρετηριάσει τα -πλέον AMP friendly- άρθρα μας.
Τελικά το αποτέλεσμα ήρθε και πλέον οι mobile χρήστες μπορούν να διαβάζουν τα άρθρα μας, απολαμβάνοντας εξωπραγματικούς χρόνους φόρτωσης και καταναλώνοντας λιγότερα megabyte -άρα και χρήματα.