יסודות Accelerated Mobile Pages

1. סקירה כללית

ב-codelab הזה נסביר איך ליצור דפי AMP‏ (Accelerated Mobile Pages). כדי לעשות את זה, תטמיעו דף אינטרנט פשוט של כתבה שתואם למפרט של AMP, ותשלבו בו כמה תכונות אינטרנט טיפוסיות שנפוצות באתרי חדשות לנייד.

מה תלמדו

  • איך AMP משפרת את חוויית המשתמש באינטרנט לנייד.
  • היסודות של אתר AMP.
  • המגבלות של AMP.
  • איך רכיבי האינטרנט של AMP פותרים בעיות נפוצות באתרים של חדשות.
  • איך מאמתים את ה-AMP.
  • איך מכינים את דפי ה-AMP לחיפוש Google.

הדרישות

  • קוד לדוגמה
  • ‫Python (רצוי בגרסה 2.7) או התוסף Chrome 200 OK Web Server
  • דפדפן Chrome (או דפדפן מקביל שיכול לבדוק את לוח Javascript)
  • עורך קוד (לדוגמה, Atom,‏ Sublime,‏ Notepad++)

2. קבלת קוד לדוגמה

אפשר להוריד את כל הקוד לדוגמה למחשב:

‫…או משכפלים את המאגר ב-GitHub משורת הפקודה:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

תורידו קובץ ZIP שמכיל כמה קובצי משאבים לדוגמה ואת דף ה-HTML של המאמר.

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

3. מריצים את הדף לדוגמה

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

  • האפליקציה 'Web Server for Chrome' של Google Chrome – זו הגישה המומלצת כי היא הפשוטה ביותר והפתרון הכי חוצה פלטפורמות שזמין. הערה: כדי להשתמש בשיטה הזו, צריך להתקין את Google Chrome.
  • אירוח ב-Firebase – אפשרות חלופית אם אתם רוצים גם לבדוק את פלטפורמת האירוח החדשה שלנו לנכסים סטטיים, 'אירוח ב-Firebase'. ההגדרה הזו מופעלת כברירת מחדל.
  • שרת HTTP מקומי של Python – נדרשת גישה לשורת הפקודה.

אפשרות 1: Web Server for Chrome

אפשר למצוא את האפליקציה Web Server for Chrome בקישור הזה בחנות האינטרנט של Chrome.

4c1bf1095afed87a.png

אחרי שמתקינים את אפליקציית Chrome, צריך להפנות את האפליקציה לתיקייה מסוימת באמצעות הלחצן 'בחירת תיקייה'. בשיעור ה-Lab הזה צריך לבחור את התיקייה שבה ביצעתם פתיחת קובץ ZIP של קבצי הדוגמה של שיעור ה-Lab.

בנוסף, צריך לסמן את האפשרות Automatically show index.html (הצגה אוטומטית של index.html) ולהגדיר את היציאה ל-8000. כדי שהשינויים האלה ייכנסו לתוקף, צריך להפעיל מחדש את שרת האינטרנט.

אפשר לגשת אל כתובת ה-URL הזו דרך:

http://localhost:8000/article.html

אם כתובת ה-URL שלמעלה נטענת בהצלחה, אפשר להמשיך לשלב הבא.

אפשרות 2: אירוח ב-Firebase

אם אתם מעוניינים לבחון את שירות האירוח החדש שלנו לאתרים סטטיים ב-Firebase, אתם יכולים לפעול לפי ההוראות שזמינות כאן כדי לפרוס את אתר ה-AMP שלכם לכתובת URL של אירוח ב-Firebase.

אירוח ב-Firebase הוא ספק אירוח סטטי שאפשר להשתמש בו כדי לפרוס ולארח במהירות אתר סטטי ואת הנכסים שלו, כולל קובצי HTML, ‏ CSS ו-JavaScript. המשתמשים נהנים מזמן אחזור מופחת כי תוכן סטטי נשמר במטמון ברשת להעברת תוכן (CDN) עם נקודות נוכחות (PoP) שממוקמות ברחבי העולם.

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

אפשרות 3: שרת HTTP Python

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

כדי להריץ את שרת ה-HTTP המובנה של Python משורת הפקודה, פשוט מריצים את הפקודה הבאה:

python -m SimpleHTTPServer

ולגשת אל כתובת ה-URL הזו:

http://localhost:8000/article.html

4. יצירת דף HTML רגיל

בקובץ ה-ZIP שהורדתם, יופיע קובץ בשם article.html. זהו המאמר שאנחנו יוצרים לו דף מקביל ב-AMP.

מעתיקים את הקוד מהדוגמה article.html ומדביקים אותו בקובץ חדש. שמירת הקובץ הזה בפורמט article.amp.html.

קובץ article.amp.html אמור להיראות עכשיו כך:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

זהו דף פשוט בכוונה עם רכיבים נפוצים של מאמר חדשות סטטי: CSS,‏ JavaScript ותג תמונה.

גרסת ה-AMP של הכתבה היא כרגע רק העתק של הכתבה המקורית. נמיר אותו ל-AMP. כדי להתחיל, נוסיף את קובץ ספריית ה-JavaScript של AMP ונראה אילו שגיאות מופיעות כשכלי האימות של AMP מופעל.

כדי לכלול את ספריית AMP, מוסיפים את השורה הזו לתחתית התג <head>:

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

עכשיו נטען את הדף החדש article.amp.html בדפדפן באמצעות הקישור הבא ונפתח את מסוף הפיתוח ב-Chrome באמצעות Menu > More Tools > Developer Tools:

efc352f418f35761.png

עכשיו בודקים את פלט ה-JavaScript ב-Developer Console. מוודאים שהכרטיסייה 'מסוף' נבחרה:

597d53fae21a0a60.png

היומן הבא אמור להופיע:

Powered by AMP ⚡ HTML

כדי להפעיל את כלי האימות של AMP, מוסיפים את מזהה המקטע הזה לכתובת ה-URL:

#development=1

לדוגמה:

http://localhost:8000/article.amp.html#development=1

יכול להיות שתצטרכו לרענן את הדף בדפדפן באופן ידני. כדי לרענן דף בדפדפן באופן ידני, לוחצים על הלחצן הזה:

3cc0680e695b804d.png

אמורות להופיע כמה שגיאות אימות:

Screen Shot 2016-05-03 at 10.09.51 AM.png

למרות ש-AMP הוא קיצור של Accelerated Mobile Pages (דפים מותאמים לנייד), אפשר להשתמש בו כדי ליצור דפים רספונסיביים שמוצגים בצורה טובה בכל גודלי המסכים. מידע נוסף זמין בקטע עיצוב אתר רספונסיבי באתר Google Developers.

כדי לדמות חוויית שימוש במכשיר נייד בכלים למפתחים ב-Chrome. לוחצים על סמל הטלפון הנייד כאן:

46d475a36472b495.png

עכשיו בוחרים מכשיר נייד (לדוגמה, Pixel 2) מהתפריט הזה:

f65e7b38557a5807.png

בדפדפן אמורה להופיע רזולוציה מדומה לנייד, כמו זו:

7da6c754afb2adca.png

עכשיו אפשר להתחיל לעבוד! בואו נבדוק את שגיאות האימות אחת אחת ונראה איך הן קשורות ל-AMP.

5. פתרון שגיאות אימות

חובה לציין ערכת תווים

נתחיל בתיקון השגיאה הבאה:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

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

מוסיפים את הקוד הבא כשורה הראשונה של תג head:

<meta charset="utf-8" />

שומרים את הקובץ, טוענים מחדש את הדף ובודקים שהשגיאה הזו לא מופיעה יותר.

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

מוסיפים את הקוד הבא מתחת לתג <meta charset="utf-8" />:

<link rel="canonical" href="/article.html">

עכשיו, מפעילים מחדש את שרת האינטרנט אם צריך וטוענים מחדש את הדף. למרות שעדיין יש הרבה שגיאות שצריך לתקן, השגיאה 'בקובצי AMP נדרש תג <link rel=canonical>' לא מופיעה יותר.

חסר מאפיין חובה של AMP

כדי להצהיר שדף הוא מסמך AMP, צריך להוסיף מאפיין לרכיב ה-HTML הבסיסי של הדף:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

כדי לפתור את הבעיה, פשוט מוסיפים את המאפיין ⚡ לתג <html> כך:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

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

חובה להגדיר אזור תצוגה

עכשיו נפתור את השגיאה הבאה:

The mandatory tag 'meta name=viewport' is missing or incorrect.

ב-AMP צריך להגדיר width ו-minimum-scale בשביל אזור התצוגה. הערכים האלה צריכים להיות מוגדרים כ-device-width ו-1, בהתאמה. תג אזור התצוגה הוא תג נפוץ שכלול ב-<head> של דף HTML.

הדרך הטובה ביותר לתקן את הבעיה היא להוסיף את קטע קוד ה-HTML הבא לתג <head>. מוסיפים את התג meta הבא:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

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

כמו קודם, טוענים מחדש את הדף ובודקים אם השגיאה נעלמה.

גיליונות סגנונות חיצוניים

השגיאה הבאה קשורה לשימוש שלנו בגיליונות סגנונות:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

השגיאה מתייחסת באופן ספציפי לתג הקישור הבא של גיליון הסגנונות בתג <head> שלנו:

<link href="base.css" rel="stylesheet" />

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

לכן, צריך להסיר את תג הקישור ב-<head> ולהחליף אותו בתג מוטבע כמו זה:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

צריך להעתיק את התוכן של תג הסגנון ישירות מהקובץ base.css בספריית הפרויקט. המאפיין amp-custom בתג הסגנון הוא חובה.

טוענים מחדש את הדף ובודקים אם שגיאת הגיליונות העיצוביים נעלמה.

‫JavaScript של צד שלישי

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

The tag 'script' is disallowed except in specific forms.

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

  • כל קוד ה-JavaScript צריך להיות אסינכרוני, כלומר לכלול את המאפיין async בתג הסקריפט.
  • אפשר לכלול רק את ספריית AMP ורכיבי AMP.

כך למעשה נמנע השימוש בכל JavaScript של צד שלישי. יש יוצא מן הכלל אחד – אפשר להשתמש ב-JavaScript של צד שלישי ברכיבי iframe.

מנסים לפתוח את הקובץ החיצוני base.js. מה רואים? הקובץ צריך להיות ריק מקוד JavaScript, ולכלול רק הערה עם מידע כמו:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

בהתחשב בכך שקובץ ה-JavaScript החיצוני הזה הוא לא רכיב פונקציונלי באתר שלנו, אפשר להסיר את ההפניה הזו בבטחה.

מסירים את ההפניה החיצונית הבאה ל-JavaScript מהמסמך:

<script type="text/javascript" src="base.js"></script>

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

תבנית ה-CSS של AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

השגיאות הבאות מתייחסות לשני תגים חסרים בתג <head>. כל מסמך AMP צריך לכלול את התגים האלה:

<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}}@-o-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>

מוסיפים את קטע הקוד שלמעלה לתחתית התג <head> במסמך.

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

התג amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

ל-AMP יש רכיב אינטרנט שנועד במיוחד להחליף את תג התמונה, שנקרא amp-img:

<amp-img src="mountains.jpg"></amp-img>

נסו לכלול את התג amp-img שצוין למעלה ולהפעיל שוב את כלי האימות. אמורות להופיע כמה שגיאות חדשות:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

למה השגיאה amp-img הפעילה שגיאה נוספת? כי amp-img לא מחליף ישירות את תג ה-HTML המסורתי img. יש דרישות נוספות כשמשתמשים ב-amp-img.

מערכת פריסה

השגיאה הזו מציינת שהרכיב amp-img לא תומך בסוג הפריסה container. אחד מהמושגים החשובים ביותר בעיצוב של AMP הוא ההתמקדות בצמצום כמות ה-DOM reflow שנדרשת כדי לבצע רינדור של דפי האינטרנט שלו.

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

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

a6149f5043618189.png

במקרה שלנו, מערכת הפריסה הסיקה שפריסת ה-amp-img היא מסוג container. עם זאת, סוג הקונטיינר מיועד לרכיבים שמכילים רכיבי צאצא, והוא לא תואם לתג amp-img, ולכן השגיאה הזו מתרחשת.

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

מגדירים את הרוחב והגובה באופן הבא:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

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

a7f2a768e9da1a25.png

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

כדי להשיג את המטרה הזו, מגדירים את מאפיין הפריסה לערך responsive:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

Voila! התמונה שלנו היא ביחס הגובה-רוחב הנכון, והיא ממלאת את רוחב המסך בצורה רספונסיבית.

de0cbbe31eacbbb1.png

הצלחת!

עכשיו מסמך ה-AMP אמור להיראות בערך כך:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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}}@-o-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>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

מרעננים את הדף ומסתכלים על הפלט של המסוף. אמורה להופיע ההודעה הבאה:

AMP validation successful.

שאלות נפוצות

6. כתובות URL קנוניות, מטא-נתונים וחיפוש

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

בשלב הזה מוצגת סקירה כללית של כל הדרישות.

קישור דפים קנוניים ומסמכי AMP

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

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

7152b1ef38f00f36.png

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

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

<link rel="canonical" href="/article.html">

השלב הבא הוא לקשר את המאמר הקנוני לדף ה-AMP. כדי לעשות את זה, צריך להוסיף תג <link rel="amphtml"> לקטע <head> של הכתבה הקנונית.

מוסיפים את הקוד הבא לקטע <head> בקובץ article.html:

<link rel="amphtml" href="/article.amp.html">

התרשים הבא מדגים את הכיוונים של תגי הקישור:

a880b625c10ffd84.png

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

מטא-נתונים של מנוע חיפוש ב-Schema.org

דרישה נוספת כדי שמסמכי AMP יופיעו בממשק הקרוסלה החדש היא עמידה במפרט המטא-נתונים של מנוע החיפוש של Schema.org. המטא-נתונים האלה נכללים בתג <head> של המסמכים באמצעות תג סקריפט מסוג application/ld+json.

מוסיפים את הקוד הבא לחלק התחתון של הקטע <head> במסמך AMP:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

טוענים מחדש את הדף בדפדפן ובודקים שוב שלא נוספו שגיאות אימות AMP.

עכשיו פותחים את הכלי לאימות נתונים מובְנים בחלון דפדפן חדש ולוחצים על 'בדיקת התיוג שלי'. לאחר מכן בוחרים בכרטיסייה Code Snippet (קטע קוד), מעתיקים את קוד המקור המלא מדף ה-AMP ומדביקים אותו בחלונית עורך הטקסט של כלי האימות, ולוחצים על Run Test (הפעלת הבדיקה):

901b629036e0cd62.png

בדף אמור להופיע משהו כזה:

ae8e16aff196e5a7.png

אלה הדרישות העיקריות להופעה בקרוסלה החדשה של חיפוש Google לכתבות חדשותיות שמבוססות על AMP:

  1. מוודאים שהמסמך ב-AMP מאומת.
  2. מפנים אל מסמך ה-AMP מדף HTML רגיל באמצעות התג <link> ולהפך.
  3. כוללים את תג המטא-נתונים של מנוע החיפוש שמופיע למעלה.

מידע נוסף על גילוי דפים

7. מעולה!

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

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

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