פרוייקט ה- AMP צובר תאוצה עם הפיכתו של the Shadow Reader למהיר יותר, ידידותי יותר למשתמשים ולמנועי החיפוש. חשוב רגע להבין ש- the Shadow Reader נוצר על מנת להדגים איך עמודים מואצים למובייל (AMP) יכולים להיות מוטמעים ב- Progressive Web App, ובקיצור PWA. אגב, לחצו כאן על מנת לקרוא על ההכרזה הרשמית (לקריאה נוספת).
האתר, מהדוגמה בקישור הראשון לעיל, מציע-מחדש מאמרים שנשאבו מהמגזין הפופולארי The Guardian בתוך חוויית קריאה של תוכן חדשותי, והוא מכיל קוד הדרוש על מנת לשלב AMP ו- PWA בגרסה המוכנה לפרודקשין, קרי “אתר חי” ופעיל לכל דבר ועניין.

SEO עבור תוכן ג’אוה סקריפט

כמו בכל יישום המוגדר כ- Single Page Application המכבד את עצמו, עומס ה- HTML הראשוני של ה- Shadow Reader הוא קטן. זו שכבת אפליקצייה דקה הנטענת במהירות, אשר נותנת למשתמש “משהו להסתכל עליו” בעוד קוד ה- JavaScript טוען את התוכן העיקרי. גישה זו יוצרת חוויית משתמש מעולה ומבחינת SEO הדגש הטכנולוגי על טעינה מהירה, הוא החֵלֶק הָאֲרִי בדחיפה בדירוגים בגוגל.

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

“האם לא היה נחמד יותר אילו עמודי המאמרים של the Shadow Reader היו מוגשים למנוע החיפוש כבר עם טקסט כלול בתוך ה- HTML? והאם לא היה מדהים אם התהליך הזה לא היה מאט את הרינדור (rendering), ובמקום זאת היה מאפשר לנו איזושהי דרך להגיש את העמודים הללו למשתמשים חדשים בפחות משנייה?” , בן מורס, מפתח בכיר, גוגל.

מסתבר שכל זה אפשרי לגמריי.

 

AMP⇒PWA

כל זאת ועוד אפשרי על ידי הטמעת ה- AMP בתוך ה- PWA, וכך זה עובד…

עבוד משתמש חדש:

  • כאשר משתמש חדש מבקר בעמוד מאמר, מוגשת לו גרסת ה- AMP של המאמר
  • גרסת ה- AMP משתמשת ב- <amp-install-serviceworker> על מנת לטעון ולהתקין את מה שמכונה ה- service worker
  • אותו “עובד שירות” טוען ומכניס אל גרסת המטמון של האתר את ה- app shell
  • בניווט לעמוד הבא, “עובד השירות” נכנס לפעולה – וכך בעדינות הוא מביא את המשתמש אל ה- PWA בעמוד הבא

 

עבור משתמש קיים, מוגש עבורו ה- PWA.

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

אז איך זה מוטמע ב- Shadow Reader? למשל, כאשר גולש נכנס לראשונה לעמוד הזה:

https://amp.cards/theguardian/us/amazing_article

בעודו קורא את כתובת המאמר, השרת מחזיר את גרסת ה- AMP של המאמר, אבל כזו המתקינה את “עובד השירות” כאשר המאמר נטען. עובד השירות משתמש ב- Workbox library, המכילה את השורה הזו:

workboxSW.router.registerNavigationRoute('index.html')

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

כך שאם הגולש בשלב הבא ילחץ על קישור ל-

https://amp.cards/theguardian/us/another_article

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

לאחר-מכן, בכל שלב שבו הגולש יבקש קישור של Shadow Reader, עובד השירות כבר הותקן, והוא יציג את גרסת המטמון של PWA.

מאחר שזחלני הרשת (web crawler) לא יאפשרו התקנה של עובד שירות, הם תמיד יקבלו הגשה של גרסת AMP.
כך התהליך נראה בפועל:
AMP⇒PWA

עבור גולש/משתמש חדש:

  • הדפדפן מבקש כתובת מאמר מהשרת. השרת יחזיר גרסת AMP של המאמר הכוללת <amp-install-serviceworker>
  • קוד הג’אוה סקריפט של עובד השירות של AMP גורם לדפדפן לבקש עובד שירות. השרת שולח את עובד השירות הכתוב ב- JS חזרה אל הדפדפן. הדפדפן מתקין את עובד השירות ומתחיל את פעולתו.
  • עובד השירות שולח לשרת בקשה עבור PWA app shell. השרת שולח את המקורות הללו אל עובד השירות, אשר מבצע פעולת הטמנה (caches).

עבור גולש/משתמש קיים:

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

זכרו, שזחלני הרשת תמיד מוגדרים כמשתמש חדש!

מה השלב הבא?

במצב הנוכחי, ל- Shadow Reader יש שרת משלו, אבל יש דברים מעניינים על הפרק שהם ברשימת ה- TODO של פרוייקט ה- AMP:

  • בעתיד, מתוכננן לוותר על YQL לחלוטין, פשוט על-ידי ה- RSS פיד של ה- Guardian
  • בעתיד, מתוכנן להחליף את קישורי הניווט של ה- Guardian עם הקישורים של Shadow Reader
  • בעתיד מתוכנן לגרום לכך שגרסת המטמון של ה- AMP תוריד ותריץ את כל ה- Shadow Reader בתוך iframe:

<amp-install-serviceworker data-iframe-src=”https://amp.cards/index.html“>

זה עשוי להיות נחמד יותר לגולש הפשוט לקבל גרסה מוקטנת של העמוד.

  •  Backend.js פועל גם בשרת וגם ב- fron end, והדרך בה זה עובד היא דיי בקומבינה. התכנון העתידי הוא להשתמש ב- ECMAScript modules ככל הנראה.

 

אודות המחבר

SEO Expert at 888 Holdings

עופר לנגר, בוגר תואר שני באוניברסיטת ת"א בפקולטה לתקשורת, כיום משמש בתפקיד SEO Expert בחברת 888 אחזקות, כמי שאמון על אסטרטגיית ה- SEO של הארגון. בעבר היה VP of SEO Services ב- Angora Media Group. במסגרת תפקידו כמנהל תחום קידום אורגני, היה אחראי על קידום תאגידים כמו תנובה, דואר ישראל, תאגיד התקשורת בינת, מיטב דש, אמריקן לייזר, השף הלבן ועוד.