10 חשוב דפי אינטרנט מואצים (AMP) רכיבים אתה צריך לדעת

דפים ניידים מואצים או AMP היא יוזמה של גוגל להפוך את האינטרנט הנייד מהר יותר - -. כדי להשיג מטרה זו, תקני AMP מגבילים את האופן שבו ניתן להשתמש ב- HTML, CSS ו- JavaScript, וכן מנהל את הטעינה של משאבים חיצוניים, כגון תמונות, סרטונים ומודעות באמצעות זמן ריצה משלו.

זה כרוך בכך לא יכול להשתמש או כל JavaScript מותאם אישית (מחבר או צד שלישי) או כל רכיבי HTML הקשורים למשאבים כגון תמונות וסרטונים במסמכי AMP.

כדי לגשר על הפער בין הצרכים של המשתמשים לבין שיטות הביצועים הטובים ביותר, AMP יש רכיבים ספציפיים אתה יכול להשתמש במקום אלה אלמנטים שלא נכללו.

רכיבי AMP הם תגי HTML ספציפיים. הם מתנהגים בדומה לתגי HTML רגילים: יש להם תגים פתיחה וסגירה, תכונות, ורובם יכולים להיות מעוצבים ב- CSS. הם יכולים להיות מוכרים בקלות, כפי שהם תמיד להתחיל עם amp- קידומת.

ישנם שני סוגים של רכיבי AMP: מובנית ו מורחב רכיבים.

רכיבי AMP מובנים

מובנה הם מובנים כדי ריצה של JavaScript של AMP, אז אתה לא צריך בנפרד לכלול אותם.

1. amp-img

מחליף את תג ב AMP מסמכי HTML. אתה צריך להוסיף את src ו alt תכונות בדיוק כמו כאשר אתה עובד עם הרגיל אלמנט.

יש גם שתי תכונות נדרשות אחרות: אתה תמיד צריך ציין את רוחב ו גובה תכונות בערכים פיקסל שלם, כמו זה מאפשר את זמן ריצה של AMP ל לחשב את הפריסה מראש.

אם אתה רוצה להפוך את התמונה תגובה, תוסיף את ה layout = "responsive" תכונה. ה פריסה תכונה שולט על הפריסה במסמכי AMP, וניתן להוסיף אותו לכל רכיבי AMP (למידע נוסף על כך במערכת פריסת AMP).

אתה יכול גם להשתמש srcset תכונה על תג אל ציין תמונות שונות עבור ופורטלים שונים וצפיפויות פיקסל. זה עובד באותה צורה כמו עם תמונות שאינם AMP.

2. amp-video

יכול להיות משומש ל ישירות לשלב קטעי וידאו HTML ב AMP מסמכי HTML. זה מחליף את קבצי AMP. ה תג קטעי וידאו עצלן על מנת לייעל את הביצועים.

מקור הסרטון חייב להיות מוגש באמצעות פרוטוקול HTTPS. אתה נדרש להוסיף את רוחב ו גובה תכונות, בדיוק כמו עם רכיב.

ה התג כולל תכונות אופציונליות רבות, כגון הפעלה אוטומטית ו כרזה אשר ניתן לציין כדי לכוונן את האופן שבו הווידאו HTML5 שלך מוצג.

תומך mp4, webm, ogg, וכל הפורמטים האחרים הנתמכים על ידי HTML5

אם אתה רוצה, אתה יכול גם הוסף קטעי וידאו עבור משתמשים עם דפדפנים שאינם תומכים וידאו HTML5, באמצעות fallback תכונה ו תג HTML.

  
 
הדפדפן שלך אינו תומך בסרטוני HTML5.
 
    

3. amp-ad ו אמפ-אמבד

מספק לך ארגזי חול שבו אתה יכול להציג את המודעות שלך. עליך להציג את המודעות שלך באמצעות פרוטוקול HTTPS.

לא ניתן להפעיל סקריפטים שסופקו על ידי רשת המודעות שלך בעצמך. במקום זאת, זמן הריצה של AMP מבצע את ה- JavaScript של הרשת הנתונה בתוך ארגז חול. אתה רק צריך לציין איזו רשת אתה משתמש, והוסף את הנתונים שלך.

ה רכיב מחייב אותך הוסף את מידות המודעה משתמש ב רוחב ו גובה תכונות.

תוכל להגדיר את רשת המודעות שבה אתה משתמש הקלד תכונה. ראה רשימה של רשתות מודעות נתמכות.

לכל רשת מודעות יש משלה נתונים-* תכונות אתה גם צריך להוסיף. כדי לראות איזה מהם נחוץ לך, לחץ על רשת המודעות שלך ברשימה הנ"ל.

הוא הכינוי של , התיעוד לא אומר הרבה על זה חוץ מאשר ניתן להשתמש בו במקום כשזה סמנטית יותר מדויק. כמו גוגל מבטיח לפתח רכיבים AMP הקשורים למודעה לאורך זמן, זה עשוי להשתנות בעתיד.

4. amp-pixel

עם , אתה יכול הוסף פיקסל למעקב אל מסמכי ה- AMP שלך ל- HTML לספור צפיות בדף. יש לו רק תכונה אחת, הנדרשת src תכונה, שבה אתה צריך ציין את כתובת האתר השייכת לפיקסל המעקב.

ה התג מאפשר תחליפי כתובת אתר סטנדרטיים, מה שאומר שאתה יכול ליצור ערך כתובת אתר אקראית כדי לעקוב אחר כל הופעה.

עיין במדריך החלפת כתובות האתרים של AMP אם ברצונך להשתמש ברכיב זה. שים לב שאינך יכול לסדר את רכיב.

רכיבי AMP מורחבים

כמו רכיבי AMP המורחבת הם לא חלק של זמן ריצה של JavaScript, אתה תמיד צריך לייבא אותם בתוך ה של דף AMP שבו ברצונך להשתמש בהם.

הערה: גירסאות רכיבים עשויות להשתנות בעתיד, לכן אל תשכח לבדוק את הגירסה הנוכחית בתיעוד.

5. אודיו אמפר

מחליף את תג HTML5, ומאפשר את זה ישירות להטביע קבצי HTML5 אודיו בדפי AMP.

כדי להשתמש בו, עליך לציין את src, רוחב ו גובה תכונות, ואתה יכול גם להוסיף שלוש תכונות אופציונליות: הפעלה אוטומטית, לולאה ו מושתק.

זה גם יכול להיות רעיון טוב להוסיף קבצי אודיו עבור משתמשים עם דפדפנים שאינם תומכים ב- HTML5. אתה יכול לעשות זאת באמצעות fallback תכונה ו תג, בדיוק כמו עם האמור לעיל רכיב.

ה רכיב AMP תומך בפורמטים אודיו זהה תג HTML5.

  
 
הדפדפן שלך אינו תומך בשמע HTML5.
 
    

להשתמש , כולל את הסקריפט הבא ב של מסמך AMP שלך:

6. amp-iframe

מציג iframe במסמכי AMP. כבר נעשה בטוח יותר מאשר iframes HTML רגיל. לכן הם sandboxed כברירת מחדל.

יש כמה כללים הקשורים עליך לעקוב אחר אימות.

עליך לציין את רוחב, גובה, ו ארגז החול תכונות. ה ארגז החול תכונה ריקה כברירת מחדל, אבל אתה יכול לתת לו ערכים שונים כדי לשנות את התנהגות ה- iframe, לדוגמהsandbox = "לאפשר סקריפטים"מאפשר את iframe. אתה יכול להשתמש במאפיינים של iframes סטנדרטי גם כן.

בעוד ממדי מוגדרים מראש על ידי רוחב ו גובה תכונות, יש דרך לשנות את גודלה בזמן ריצה. כדי להשתמש , הוסף את הסקריפט הבא לדף ה- AMP שלך:

7. אמפר אקורדיון

אקורדיונים מהווים תבנית ממשק משתמש תכופה בעיצוב סלולרי, שכן הם חוסכים מקום, אך עדיין מציג את התוכן באופן נגיש. מאפשר להוסיף במהירות אקורדיונים אל דפי AMP.

קטעי האקורדיון חייבים להשתמש

  
 
מחלקה 1
 
תוכן סעיף 1
 
 
 
סעיף 2
 
תוכן סעיף 2
 
 
 
סעיף 3
 
    
 
  

  הרחב