Τι είναι το AMP? Πώς θα αλλάξει το webaiste μας; Είναι χρήσιμο; Πόσο δύσκολη είναι η υλοποίησή του; Πόσο σημαντικό είναι; Πρέπει να αντικαταστήσω το mobile website μου με AMP; Τι είναι τα Accelerated Mobile Pages τέλος πάντων;

Τα παραπάνω είναι μερικά από τα πολλά ερωτήματα που κάποιος μπορεί να έχει σχετικά με αυτή τη νέα εξέλιξη στο SEO για κινητές αναζητήσεις. Ελπίζουμε μετά που θα διαβάσετε αυτό το άρθρο, οι περισσότερες ερωτήσεις σας να έχουν απαντηθεί.

Επισκεφτείτε το επίσημο website για το AMP Project δείτε τη σχετική Ανακοίνωση της Google για το AMP από το επίσημο της blog.

Τι είναι AMP;

AMP είναι ακρώνυμο του «Accelerated Mobile Pages» (Προφορτωμένες Σελίδες για Κινητά).  Είναι ένα νέο πρότυπο για κινητές σελίδες το οποίο προέκυψε από μια συνεργασία ανάμεσα στη Google και το Twitter.

Τα κινητά τηλέφωνα υποφέρουν από αργές ταχύτητες.  Μερικές φορές δεν έχετε καν 3G σύνδεση και συνειδητοποιείτε ότι βρίσκεστε σε 2G.  Μερικές φορές όμως ακόμα και σε 3G έχετε μεγάλες καθυστερήσεις.

Τα σύγχρονα websites που απευθύνονται σε κινητά τηλέφωνα συνήθως προσφέρουν μια καλή εμπειρία χρήστη όσων αφορά την εμφάνιση του website σε κινητές συσκευές, αλλά αυτό δε σημαίνει ότι είναι βελτιστοποιημένα για χρήση σε κινητά.  Αυτό επειδή ακόμα και αν φαίνονται όμορφα σε λίγες ίντσες, δεν προσφέρουν την βέλτιστη εμπειρία χρήστη λόγω αργής φόρτωσης.

Η προσέγγιση της Google και του Twitter στην επίλυση του προβλήματος ήταν να ορίσει κάποιους κανόνες που θα επέβαλαν οι Προφορτωμένες Σελίδες για Κινητά.  Αν δεν ακολουθείτε τους κανόνες, τότε για κάθε «λάθος» στον κώδικά σας η AMP σελίδα δε θα πιστοποιείται, άρα και δε θα θεωρείται ως σωστή AMP σελίδα.d on existing open web technologies.  So there is nothing «NEW» here.

Λοιπόν, «Τι είναι AMP;» η καλύτερη απάντηση είναι…
Το AMP είναι ένα σετ από κανόνες που επιβάλουν τη χρήση μιας «ελαφράς HTML», «χωρίς javascript», με «ελαφρά εσωτερικά css», και ένα πολύ δυνατό CDN (Content Delivery Network) το οποίο θα κάνει cache τις σελίδες αυτόματα και θα εγγυάται ταχύτατη φόρτωση ακόμα και από αργά δίκτυα.

Το AMP εφαρμόστηκε από τη Google στις 26-Φεβρουαρίου-2016, και – κατά το χρόνο γραφής του άρθρου – είναι πολύ νέα τεχνολογία, και όσοι το εφαρμόσουν έγκαιρα θα επωφεληθούν πολύ όσων αφορά την κατάταξη των σελίδων τους για ερωτήματα από κινητές συσκευές, σε σχέση με αυτούς που δεν έχουν ακόμα υλοποιήσει AMP.

Εδώ μπορείτε να παρακολουθήσετε ένα αρκετά κατατοπιστικό video σχετικά με το τι είναι AMP  από το MOZ. Επίσης θα πρέπει να δείτε την επίσημη εισαγωγή στο AMP.

Κάποιο καλό AMP παράδειγμα;

  1. Γιατί να μη δείτε την AMP έκδοση αυτού του άρθρου πρώτα;
  2. Guardian έχει κάνει μια καταπληκτική AMP υλοποίηση, για την οποία έχει αναφερθεί με πολύ καλά λόγια επανειλημμένα η ίδια η Google.

Απλά ανοίξτε ένα οποιοδήποτε άρθρο στη Guardian και αντικαταστήσετε στην αρχή της διεύθυνσης το «www» με «amp» και θα δείτε το αντίστοιχο άρθρο στην AMP μορφή του.

Επιπλέον η Google διαθέτει ένα amp demo, το οποίο μπορείτε να δείτε από τον περιηγητή του κινητού σας.

Πρέπει να αντικαταστήσω το κινητό μου site με AMP;

Όχι! Μπορείτε να χτίσετε μια AMP έκδοση των ΑΡΘΡΩΝ σας και να τα έχετε παράλληλα με τα κανονικά άρθρα σας.  Αν εφαρμόσετε τις παρακάτω οδηγίες, η Google θα γνωρίζει ποια σελίδα αντιστοιχεί σε AMP και ποια στην κανονική έκδοση του website σας, ώστε να συνυπάρχουν χωρίς προβλήματα. Δε χρειάζεται να αφαιρέσετε τίποτα από το website σας.

Ακόμα και αν έχετε μια δευτερεύουσα έκδοση του website σας για κινητά σε κάποια άλλο domain (π.χ. mobile.example.com), δε χρειάζεται να την κατεβάσετε.  Ακόμα και έτσι μπορείτε να έχετε Accelerated Mobile Pages (AMP) έκδοση μαζί με τη mobile έκδοση και τη desktop έκδοση.

Κατά την υλοποίηση των Accelerated Mobile Pages, όλοι οι σύνδεσμοι των μενού προς την αρχική σελίδα σας και τις κατηγορίες των θεμάτων σας, θα δείχνουν στην κανονική έκδοση του website σας.  Έτσι λοιπόν δε χρειάζεται να εφαρμόσετε μια AMP έκδοση για ολόκληρο το website σας, αλλά μονάχα για τα άρθρα σας.

Αν το website σας δεν περιέχει άρθρα, δε χρειάζεται να διαβάσετε το παρακάτω κείμενο καθώς η AMP HTML που επιτρέπεται είναι τόσο περιορισμένη, που δε μπορείτε να κάνετε πολλά περισσότερα από το να προβάλετε κάποιο κείμενο με βασικά css.  Επιπλέον λειτουργίες της HTML, όπως φόρμες δεν επιτρέπονται, οπότε χωρίς άρθρα δε θα έχετε να προβάλετε κάποιο ιδιαίτερο περιεχόμενο σε AMP σελίδες.

Πόσο σημαντικό είναι το AMP;

Σε περίπτωση που δεν το καταλάβατε ακόμα, είναι ΠΟΛΥ σημαντικό όσων αφορά αναζήτηση περιεχομένου από κινητά τηλέφωνα.   Η Google έχει δηλώσει ανοιχτά μέσα από τα webmasters tools ότι θα επιβραβεύσει τα websites που θα υλοποιούν Προφορτωμένες Σελίδες για Κινητά έναντι εκείνων που δεν το υλοποιούν.

Ειδικά επειδή (κατά τη γραφή αυτού του άρθρου) το AMP είναι τόσο νέο, είναι κρίμα να χάσετε την ευκαιρία τώρα που υπάρχουν περιορισμένες υλοποιήσεις του να μην ωφεληθείτε να μπείτε μπροστά από τον ανταγωνισμό..

Πόσο δύσκολο είναι να δημιουργήσω AMP έκδοση των σελίδων μου;

Αν διατηρείτε website σε WordPress τότε είναι πολύ εύκολο να αποκτήσετε AMP έκδοση των blogs σας, απλά εγκαθιστώντας τρία plugins.

  1. Κατεβάστε το AMP Plugin από την Automatic.
  2. Προαιρετικά το PageFrog plugin παρέχει βασικό στυλάρισμα του AMP plugin που ήδη κατεβάσατε.  Είναι πολύ καλό plugin το οποίο επίσης θα σας βοηθήσει να υλοποιήσετε και τα Facebook Instant Articles πέρα από το AMP.
  3. Αν χρησιμοποιείτε το Yoast SEO, κατεβάστε το «AMP Glue» plugin που «δένει» το AMP plugin που κατεβάσατε με το Yoast SEO που ήδη έχετε.

Όταν ολοκληρωθούν αυτά, θα έχετε AMP έκδοση όλων των blogs σας

αν για παράδειγμα έχετε το άρθρο
http://www.example.com/my-article

τότε η AMP έκδοση αυτού του άρθρου θα βρίσκεται στο
http://www.example.com/my-article/amp/

Αν δεν έχετε WordPress, ή θέλετε να κάνετε δική σας ατομική υλοποίηση των Accelerated Mobile Pages, θα πρέπει να κάνετε χειροκίνητα όλες τις αλλαγές.  Μπορείτε να διαβάσετε απευθείας το Official AMP Tutorial και να ξεκινήσετε με την πρώτη AMP σελίδα σας!

Πώς μπορώ να ελέγξω την AMP σελίδα μου;

Τώρα που περιγράψαμε τι είναι AMP, πόσο σημαντικό είναι και πως μπορείτε να το αποκτήσετε, είναι σημαντικό να μάθουμε πως μπορούμε να ελέγξουμε ότι μια AMP σελίδα που φτιάξαμε είναι σωστή.

Λοιπόν… είναι πραγματικά από να ελέγξετε την εγκυρότητα μιας AMP σελίδας!  Το μόνο που έχετε να κάνετε είναι να πάτε στον Chrome->Εργαλεία->Εργαλεία για Προγραμματιστές και μετά να φορτώσετε τη σελίδα σας προσθέτοντας στο τέλος του URL #development=1 και θα δείτε αν η σελίδα σας είναι έγκυρη για AMP.

http://www.example-com/myarticle/amp/#development=1

Από τι αποτελείται το AMP;

Ρίξτε μια ματιά στο YouTube video με τον Paul Bakaus σχετικά με το τι είναι το AMP Project και τα τρία τμήματα από τα οπαία αποτελείται, τα οποία θα αναφέρουμε στις επόμενες γραμμές.

Λοιπόν, περιληπτικά τα Accelerated Mobile Pages αποτελούνται από τα παρακάτω:

1 – AMP HTML

Αυτή η «light html», αποτελείται από βασικά html tags.  Tags όπως span, strong, p, κλπ δουλεύουν, αλλά δε μπορείτε να χρησιμοποιήσετε πιο πολύπλοκες δομές όπως για παράδειγμα forms.

Επιπρόσθετα, ορισμένα html tags έχουν αντικατασταθεί από αντίστοιχα amp tags.  Για παράδειγμα το <img> tag έχει αντικατασταθεί από το <amp-img>.  Ο λόγος γι αυτή την αλλαγή είναι ότι το AMP-JS κάνει υπολογισμούς για ορισμένα αντικείμενα, όπως το ύψος μιας εικόνας, έτσι ώστε να ξέρει ακριβώς τις διαστάσεις του άρθρου πριν καν αρχίσουν να κατεβαίνουν οι εικόνες.  Αντίστοιχα υπάρχουν αρκετά Ampified tags.

Εισαγωγή εξωτερικών CSS δεν επιτρέπεται και είστε υποχρεωμένοι να κάνετε χρήση εσωτερικών (περιορισμένων) CSS στην AMP σελίδα σας.  Ο λόγος γι αυτό τον περιορισμό είναι να μειωθούν τα εξωτερικά αρχεία που χρειάζονται για τη φόρτωση μιας σελίδας.

2 – AMP JAVASCRIPT (AMP-JS)

Τα Accelerated Mobile Pages (Προφορτωμένες Σελίδες για Κινητά) χρησιμοποιούν τη δική τους Javascript, και αυτό συμβαίνει κυρίως για να θέσει τους περιοριστικούς κανόνες ενός AMP document, καθώς και το φόρτωμα τω Ampified tags.  Υπάρχουν κάποιες επιπλέον javascript libraries με επιπλέον λειτουργίες πέραν της βασικής (όπως libraries για διαφημίσεις και analytics).

Δεν επιτρέπεται όμως η χρήση άλλων javascript libraries πέραν αυτών, συγνώμη!

3 – AMP CDN

Αν η AMP σελίδα σας δεν παρουσιάσει προβλήματα και περάσει από το εργαλείο επικύρωσης, τότε όταν η Google την προσθέσει στο ευρετήριό της, θα τον βάλει στο CDN της (Content Delivery Network) για ταχύτερη φόρτωση.  Έτσι, ακόμα και αν έχετε ένα σχετικά αργό server, όταν γίνει cached το Accelerated Mobile Pages άρθρο σας, θα προβάλλεται από τους servers της Google, καθιστώντας το ακόμα πιο γρήγορο.  Έτσι θα καταλήξετε να έχετε μια πολύ ελαφριά σελίδα που θα εξυπηρετείται από ένα πολύ βελτιστοποιημένο CDN.

Είναι θεωρεία μόνο, αλλά αν σκεφτείτε ότι η Google σταμάτησε το PageSpeed CDN της τον Αύγουστο του 2015, τότε είναι πολύ πιθανό αυτό να έγινε προκειμένου η υποδομή που είχε για το PageSpeed CDN, να αξιοποιήθηκε για να φιλοξενήσει το AMP CDN.

Πώς ξεχωρίζει η Google ποια έκδοση είναι κανονική και ποια AMP;

Ένα από τα βασικότερα βήματα όταν χτίζετε την έκδοση του site σας για Προφορτωμένες Σελίδες για Κινητά, είναι να δηλώσετε στην AMP έκδοση που βρίσκεται η κανονική (canonical) έκδοση του άρθρου σας, ενώ στην κανονική έκδοση του άρθρου σας να δηλώσετε που είναι η AMP έκδοση (amphtml) του αντίστοιχα.

Αν λοιπόν το κυρίως (canonical) άρθρο σας βρίσκεται στο http://www.example.com/my-article και η AMP έκδοση βρίσκεται στο http://www.example.com/my-article/amp/ τότε πρέπει να βάλετε το παρακάτω κώδικα.

AMP explained from a sketch by MOZ
AMP explained from a sketch by MOZ.com

Στην κανονική (canonical) έκδοση (http://www.example.com/my-article) θα πρέπει να δηλώσετε που βρίσκεται η αντίστοιχη AMP έκδοση με τον παρακάτω κώδικα <link relamphtml» href=»http://www.example.com/my-article/amp/» />

Ενώ στην AMP έκδοση (http://www.example.com/my-article/amp/) θα πρέπει να δηλώσετε που βρίσκεται η κανονική (canonical) έκδοση του άρθρου σας <link rel=»canonical» href=»http://www.example.com/my-article/» />

Και έτσι η Google είναι σε θέση να γνωρίζει την παράλληλη ύπαρξη του ίδιου άρθρου στις δύο διαφορετικές μορφές χωρίς να μπερδεύεται.

Άρα, τι είναι AMP; Ελπίζουμε να έχετε μια καλύτερη ιδέα. Αν όχι, παρακαλώ αφήστε κάποιο σχόλιο και θα προσπαθήσω να δώσω τυχών απαντήσεις αν μπορώ.

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε επεξεργάζονται τα δεδομένα των σχολίων.