AMP: πώς να επιταχύνετε τη φόρτωση του ιστού σας σε κινητές συσκευές


Στις αρχές του έτους, στις ειδήσεις SEO για αυτό το 2017, μιλάμε για το AMP και το βάρος του στο SEO λόγω της βελτιστοποίησης της ταχύτητας φόρτωσης των ιστότοπων για κινητές συσκευές. αγοράστε τις προβολές του YouTube

AMP ναι ή όχι;

Ένα ηχηρό Ναι, λαμβάνοντας υπόψη ότι οι εκδόσεις των σελίδων AMP μειώνουν τα περιεχόμενα μιας ιστοσελίδας στο ελάχιστο απαραίτητο ώστε να φορτώνονται γρηγορότερα από ποτέ.

Επομένως, εάν η Google συνιστά τη χρήση AMP, θα πρέπει σίγουρα να την προσέξουμε. Ειδικά επειδή θα μας βοηθήσει να βελτιώσουμε τα αποτελέσματά μας στα SERPs.

Πώς να εφαρμόσετε το AMP σε ένα blog του WordPress

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

Πώς να εφαρμόσετε το AMP σε μια ιστοσελίδα

Σε μια ιστοσελίδα δεν θα είναι τόσο απλή όσο στο WordPress, αφού θα είναι μια χειρωνακτική διαδικασία και επομένως πιο περίπλοκη και λεπτή.

Πρέπει να δημιουργήσουμε εκδόσεις AMP καθεμιάς από τις τελικές σελίδες (προϊόν, ειδήσεις, προσγειώσεις…) που σχετίζονται με τους χρήστες της Google και των κινητών. Που θα προβάλλεται με άλλη διεύθυνση URL και η οποία θα περιέχει μια συγκεκριμένη ετικέτα HTML στον κώδικά σας.

An AMP έκδοση μιας σελίδας είναι αυτή που:

  • Απορρίπτει ή εξαλείφει τη χρήση βαρέων στοιχείων, όπως εικόνες, iframe, φόρμες… περιττές για γρήγορη μετάδοση πληροφοριών σε τελικούς χρήστες. Καταργώντας πλήρως τη δυνατότητα χρήσης Javascript .
  • Χρησιμοποιεί συγκεκριμένες ετικέτες στον κώδικα HTML για να την αναγνωρίσει ως έκδοση AMP. Για παράδειγμα: αντί για εσύ θα χρησιμοποιούσα  .

Επιπλέον, τα φύλλα στυλ έχουν τους δικούς τους περιορισμούς σε έκδοση AMP:

  • Δεν μπορείτε να χρησιμοποιήσετε εξωτερικά φύλλα στυλ (CSS).
  • Το CSS πρέπει να είναι εντός μιας και μόνο ετικέτας συγκεκριμένης AMP: 
  • CSS κανόνες όπως @εισαγωγή και  ! Σπουδαίος έχουν τη χρήση εντελώς απαγορευμένος .

Προσαρμογή σελίδας στο AMP

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

Βήμα βήμα:

  • ο Η ετικέτα πρέπει να υπάρχει και να είναι αρχικά.
  • Τότε αλλάζουμε το ετικέτα σε ένα σαν αυτό: , όπως μπορείτε να δείτε, εκτός από την επισήμανση ότι είναι μια σελίδα ενισχυτή, υποδεικνύουμε επίσης τη γλώσσα.
  • Μέσα ξεκινάμε με την ετικέτα 
  • Αμέσως μετά εισάγουμε την ακόλουθη βιβλιοθήκη:   .
  • Για να αποφύγετε προβλήματα SEO με διπλό περιεχόμενο, είναι σημαντικό να εισαγάγετε ένα  ετικέτα που δείχνει τη διεύθυνση URL της αρχικής σελίδας που μετατρέπουμε. Αυτό είναι σημαντικό ή η Google αντί να μας ανταμείβει με καλύτερες θέσεις θα μας τιμωρήσει.
  • Βελτιστοποιούμε την εμφάνιση περιεχομένου στην ανάλυση της συσκευής: 
  • Εισάγουμε στυλ CSS μέσα στο   ετικέτα
  • Πριν κλείσετε το Είναι απαραίτητο να αντιγράψετε και να επικολλήσετε τον ακόλουθο κώδικα που περιλαμβάνει συγκεκριμένα στυλ που σχετίζονται με την οπτικοποίηση του περιεχομένου της σελίδας.

Here the CSS styles (font types and sizes, colors …

body {-webkit-animation: -amp-start 8s steps (1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps (1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps (1, end) 0s 1 normal both; animation: -amp-start 8s steps (1, end) 0s 1 normal both} @ – webkit-keyframes -amp-start {from {visibility: hidden} to {visibility: visible}} @ – moz-keyframes -amp-start {from {visibility: hidden} to {visibility: visible}} @ – ms-keyframes -amp-start {from {visibility: hidden } to {visibility: visible}} @ – o-keyframes -amp-start {from {visibility: hidden} to {visibility: visible}} @ keyframes -amp-start {from {visibility: hidden} to {visibility: visible} } body {-webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none}

Αυτά είναι τα βασικά βήματα για τη δημιουργία μιας συγκεκριμένης σελίδας στο AMP, τηρώντας πάντα τις απαιτήσεις που αναφέρονται στην αρχή για μια σελίδα AMP. Αλλά μπορούμε επίσης να προσθέσουμε μεταδεδομένα schema.org που προσδιορίζουν το περιεχόμενο της σελίδας: άρθρο, ειδήσεις, ανάρτηση ιστολογίου…

Σας ενθαρρύνουμε να επισκεφθείτε τη σελίδα του προγράμματος AMP και να ανακαλύψετε πολλά άλλα: 

Χρησιμοποιείτε ήδη AMP; Έχετε παρατηρήσει αλλαγές στην ευρετηρίασή σας στο SERP;