הדרכה מעמיקה על איך להטמיע AMP בצורה נכונה

AMP – המדריך המלא להטמעה נכונה ומהירה

AMP, או בשמו המלא Accelerated Mobile Pages, הוא פרויקט קוד פתוח שנועד להאיץ את טעינת דפי אינטרנט במובייל. אם אתם רוצים לשפר את חווית המשתמש באתר שלכם ולזכות בדחיפה קטנה בדירוג החיפוש של גוגל, הטמעת AMP היא צעד חכם. אבל איך עושים את זה נכון? בואו נצלול!

5 סיבות מפתיעות למה AMP הוא הדבר הבא שלכם

מהירות טעינה מטורפת – דפים נטענים כמעט מיידית
שיפור בדירוג החיפוש של גוגל
חיסכון בנפח הגלישה למשתמשים
שיפור משמעותי בחווית המשתמש במובייל
הגדלת זמן השהייה באתר והקטנת נטישות

איך מתחילים? המדריך המעשי ב-7 צעדים

1. הכנת התשתית

ראשית, עליכם להוסיף את ספריית ה-AMP לדף ה-HTML שלכם. הוסיפו את השורה הבאה לתג ה-:

<script async src="https://cdn.ampproject.org/v0.js"></script>

2. שינוי תגית ה-HTML

החליפו את תגית ה- הרגילה בתגית ייעודית ל-AMP:

<html ⚡> או <html amp>

3. הגדרת Viewport

הוסיפו את השורה הבאה לתג ה- כדי להבטיח תצוגה נכונה במובייל:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

4. החלפת תגיות HTML רגילות בתגיות AMP

למשל, במקום השתמשו ב-. זה נשמע מסובך? הנה דוגמה:

<amp-img src="image.jpg" width="400" height="300" layout="responsive" alt="תיאור התמונה"></amp-img>

5. הגבלת שימוש ב-JavaScript

AMP לא מאפשר שימוש ב-JavaScript רגיל. במקום זאת, השתמשו ברכיבי AMP מובנים כמו ו-.

6. סגנון וכללי CSS

הגבילו את ה-CSS שלכם ל-50KB והשתמשו בתגית