Sobes.tech
Βοήθεια συνέντευξης
Πόροι
Προετοιμασία συνέντευξης
Πόροι
Αναζήτηση εργασίας
Πόροι
Νομικά
Επιστροφή στις ερωτήσεις
Middle

Τι είναι οι σελίδες AMP;

sobes.tech AI

Απάντηση από AI

AMP (Accelerated Mobile Pages) — είναι ένα ανοιχτού κώδικα πλαίσιο HTML που δημιουργήθηκε από την Google για τη δημιουργία γρήγορων και ανταποκρινόμενων ιστοσελίδων που εμφανίζονται καλά σε κινητές συσκευές.

Βασικές αρχές του AMP:

  • Περιορισμένο σύνολο ετικετών HTML: Χρησιμοποιείται ένα υποσύνολο HTML, που επιταχύνει την ανάλυση και την απόδοση της σελίδας.
  • Ασύγχρονη φόρτωση πόρων: Τα scripts, οι εικόνες και άλλοι πόροι φορτώνονται ασύγχρονα, χωρίς να μπλοκάρουν την απόδοση του κύριου περιεχομένου.
  • Προτεραιότητα περιεχομένου: Η βελτιστοποίηση εστιάζει στην ταχεία φόρτωση του ορατού περιεχομένου.
  • Σταθερά μεγέθη στοιχείων: Τα περισσότερα στοιχεία έχουν προκαθορισμένα μεγέθη, μειώνοντας τα "πηδήματα" περιεχομένου κατά τη φόρτωση.
  • Χρήση AMP Cache: Μια τρίτη οργάνωση (π.χ. Google) μπορεί να διαχειριστεί την cache των AMP σελίδων και να τις σερβίρει από αυτήν, εξασφαλίζοντας άμεση φόρτωση.

Βασικά στοιχεία του AMP:

  • AMP HTML: Περιορισμένο σύνολο ετικετών HTML με προσθήκη προσαρμοσμένων συστατικών AMP.
  • AMP JS: Βιβλιοθήκη JavaScript για διαχείριση φόρτωσης πόρων και διαδραστικότητας.
  • AMP Cache: Πληροφοριακό δίκτυο για την cache και την παράδοση των AMP σελίδων.

Παράδειγμα χρήσης AMP:

<!doctype html>
<html amp lang="el">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Παράδειγμα AMP σελίδας</title>
    <link rel="canonical" href="https://example.com/κανονική-σελίδα.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>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}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      /* Οι δικοί σας CSS κανόνες */
    </style>
  </head>
  <body>
    <h1>Γειά σου, AMP!</h1>
    <p>Αυτή είναι μια γρήγορη σελίδα.</p>
    <amp-img src="/images/kitten.jpg" alt="Γατάκι" width="100" height="100" layout="responsive"></amp-img>
  </body>
</html>

Πλεονεκτήματα του AMP:

  • Ταχύτητα φόρτωσης: Οι σελίδες φορτώνονται πολύ γρήγορα, ειδικά σε κινητές συσκευές.
  • Βελτιωμένο SEO: Η Google προτιμά τις AMP σελίδες στα αποτελέσματα κινητής.
  • Βελτιωμένη εμπειρία χρήστη: Γρήγορη φόρτωση και ομαλός κύλιση.

Μειονεκτήματα του AMP:

  • Περιορισμοί στο σχεδιασμό και τη λειτουργικότητα: Δεν διατίθενται όλες οι ετικέτες HTML και οι λειτουργίες JavaScript.
  • Πολυπλοκότητα στην υλοποίηση: Απαιτεί ξεχωριστή ανάπτυξη ή προσαρμογή του υπάρχοντος περιεχομένου.
  • Εξάρτηση από την Google (σε κάποιο βαθμό): Το AMP Cache ελέγχεται από την Google.

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

ΠροηγούμενοςΕπόμενο