בקטע של מבנה המסמך למדת על הרכיבים שאתה (כמעט) תמיד מוצאים ב-<head> של מסמך HTML. כל מה שבמאפיין <head>, כולל <title>, <link>, <script>, <style> ו<base> בשימוש הנמוך יותר, הוא למעשה 'מטא-נתונים', אבל יש תג <meta> למטא-נתונים שלא יכולים להיות מיוצגים על ידי הרכיבים האחרים האלה.
המפרט כולל כמה סוגי מטא, ויש מטא-סוגים רבים ורבים נוספים שנתמכים על ידי אפליקציות שלא נכללים במפרט רשמי כלשהו. בקטע הזה נדון במאפיינים ובערכים הכלולים במפרטים, כמה שמות מטא וערכי תוכן נפוצים, וכמה סוגי מטא שימושיים במיוחד לאופטימיזציה של מנועי חיפוש, לפרסום ברשתות חברתיות ולחוויית משתמש שאינם מוגדרים באופן רשמי על ידי whatWG או W3C.
תגי <meta> הנדרשים, הוחזרו
נחזור על שני תגי <meta> הנחוצים שכבר מכוסים – ההצהרה של קבוצת התווים והמטא תג של אזור התצוגה – כדי להבין טוב יותר את התג <meta> בתהליך.
המאפיין charset של הרכיב <meta> הופיע באופן ייחודי. במקור המטא-נתונים של מערכת התווים נכתבו בתור <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, אבל כל כך הרבה מפתחים טעו בהקלדה של המאפיין content בתור content="text/html" charset="<characterset>", עד שדפדפנים התחילו לתמוך בערכת תווים כמאפיין. היא מתוקנת עכשיו בתקן HTML הפעיל כ-<meta charset="<charset>" />, כאשר עבור HTML, <charset> היא המחרוזת לא תלוית-רישיות "utf-8" .
אולי שמת לב להצהרת המטא של קבוצת התווים המקורית ששימשה להכללת המאפיין http-equiv. קיצור זה מתייחס ל "שווה ערך ל-http", מכיוון שהמטא תג משכפל למעשה את מה שניתן להגדיר בכותרת HTTP. מלבד החריג charset, כל המטא תגים האחרים שמוגדרים במפרט whatWG HTML מכילים את המאפיין http-equiv או את המאפיין name.
מטא תגים שהוגדרו באופן רשמי
יש שני סוגים עיקריים של מטא תגים: הנחיות pragma, עם המאפיין http-equiv כמו המטא תג charset שבו נעשה שימוש, ומטא תג עם שם, כמו המטא תג של אזור התצוגה עם המאפיין name שהסברנו בו בקטע של מבנה המסמך. גם המטא-נתונים name וגם המטא-נתונים http-equiv חייבים לכלול את המאפיין content, המגדיר את התוכן לסוג המטא-נתונים שצוין.
הוראות פרגמה
הערך של המאפיין http-equiv הוא הוראת pragma. ההוראות האלה מתארות איך יש לנתח את הדף. ערכים נתמכים של http-equiv מפעילים הוראות הגדרה כאשר אין אפשרות להגדיר כותרות HTTP באופן ישיר.
במפרט מוגדרות שבע הנחיות pragma, ולרובן יש שיטות הגדרה אחרות. לדוגמה, למרות שניתן לכלול הוראת שפה באמצעות <meta http-equiv="content-language" content="en-us" />, כבר הסברנו על השימוש במאפיין lang ברכיב ה-HTML, וזה מה שצריך להשתמש בו במקום זאת.
הוראת pragma הנפוצה ביותר היא refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
אפשר להגדיר הוראה לרענון במרווחי זמן של מספר השניות שהוגדר במאפיין content, ואפילו לבצע הפניה אוטומטית לכתובת URL אחרת, אבל זה לא מומלץ. רענון והפניה מחדש של תוכן ללא בקשת משתמש מפורשת לעשות זאת פוגע בנוחות השימוש, ומשפיע לרעה על הנגישות. לא נעים לך זה כשאתה באמצע פסקה והדף מתאפס? נגיד שיש בעיות קוגניטיביות או בעיות בראייה, וזה מה שקורה. אם אתם מתכוונים להגדיר רענון באמצעות הפניה מחדש, ודאו שלמשתמש יש מספיק זמן לקרוא את הדף, קישור לזירוז התהליך, ואם יש צורך, לחצן ל "עצירת השעון" ולמנוע את ההפניה האוטומטית.
לא נכלול אותו באתר שלנו, מכיוון שאין סיבה להפסיק ביקור של משתמש רק כדי להטריד את המבקרים שלנו.
הוראת pragma השימושית ביותר היא content-security-policy, שמאפשרת להגדיר מדיניות תוכן למסמך הנוכחי. מדיניות התוכן מציינת בעיקר מקורות מותרים של שרתים ונקודות קצה של סקריפטים, שעוזרים להגן מפני התקפות של סקריפטים חוצי-אתרים.
<meta http-equiv="content-security-policy" content="default-src https:" />
אם אין לכם גישה לשינוי כותרות HTTP (או אם יש לכם הרשאה כזו), כאן מוצגת רשימה של ערכי תוכן מופרדים ברווחים עבור הוראות content-security-policy.
מטא תגים בעלי שם
ברוב המקרים, אפשר לכלול מטא-נתונים בעלי שם. כוללים את המאפיין name, כאשר ערך המאפיין הוא השם של המטא-נתונים. בדומה להנחיות pragma, המאפיין content הוא חובה.
המאפיין name הוא שם המטא-נתונים. בנוסף ל-viewport, סביר להניח שתרצו לכלול את description ואת theme-color, אבל לא את keywords.
מילות מפתח
אנשי מכירות משמן נחשים לאופטימיזציה למנועי חיפוש ניצלו ניצול לרעה של המטא תג של מילות מפתח על ידי דחיסת רשימות של מילות ספאם שמופרדות בפסיקים, במקום רשימות של מונחי מפתח רלוונטיים, ולכן מנועי חיפוש כבר לא מחשיבים את המטא-נתונים האלה כמועילים. אין צורך לבזבז זמן, מאמץ או בייטים על ההוספה שלו.
תיאור
עם זאת, הערך description שימושי לאופטימיזציה למנועי חיפוש: ערך התוכן של התיאור הוא לרוב מה שמנועי חיפוש מציגים מתחת לכותרת הדף בתוצאות החיפוש. דפדפנים מסוימים, כגון Firefox ו-Opera, משתמשים בו כתיאור ברירת המחדל של דפים עם סימניות. התיאור צריך להיות סיכום קצר ומדויק של תוכן הדף.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
אם המחצית השנייה של התיאור לא נראית לך הגיונית, כנראה שלא ראית את הסרט Zoolander.
רובוטים
אם אתם לא רוצים שמנועי חיפוש יוסיפו את האתר שלכם לאינדקס, תוכלו להודיע להם על כך. <meta name="robots" content="noindex, nofollow" /> מורה לבוטים לא להוסיף את האתר לאינדקס ולא לעקוב אחר קישורים כלשהם. הבוטים צריכים להקשיב לבקשה, אבל אין חוקים שמחייבים אותם להיענות לבקשה. אין צורך לכלול <meta name="robots" content="index, follow" /> כדי לשלוח בקשה להוספת האתר והקישורים הבאים לאינדקס, מכיוון שזו ברירת המחדל, אלא אם מצוין אחרת בכותרות ה-HTTP.
<meta name="robots" content="index, follow" />
צבע עיצוב
הערך theme-color מאפשר להגדיר צבע כדי להתאים אישית את ממשק הדפדפן. ערך הצבע במאפיין התוכן ישמש בדפדפנים ובמערכות הפעלה תומכים, ויאפשר לך לספק צבע מוצע לסוכני המשתמש שתומכים בצביעת שורת הכותרת, סרגל הכרטיסיות או רכיבי Chrome אחרים. המטא תג הזה שימושי במיוחד לאפליקציות אינטרנט מסוג Progressive Web App. אבל אם אתם כוללים קובץ מניפסט שנדרש ל-PWA, אפשר לכלול בו את צבע העיצוב. עם זאת, הגדרתו ב-HTML מבטיחה שהצבע יימצא מיד לפני העיבוד, דבר שעשוי להיות מהיר יותר בטעינה הראשונה מאשר המתנה למניפסט.
כדי להגדיר את צבע העיצוב לגוון הכחול של צבע הרקע של האתר שלנו, יש לכלול את:
<meta name="theme-color" content="#226DAA" />
המטא תג של צבע העיצוב יכול לכלול מאפיין media שמאפשר הגדרה של צבעי עיצוב שונים על סמך שאילתות מדיה. ניתן לכלול את המאפיין media במטא תג הזה בלבד, והמערכת תתעלם ממנו בכל המטא תגים האחרים.
קיימים מספר ערכי מטא נוספים של name, אך אלו הם הנפוצים ביותר. מלבד הצהרה על ערכי theme-color שונים עבור שאילתות מדיה שונות, יש לכלול רק אחד מכל מטא תג. אם אתם בכל זאת צריכים לכלול יותר מסוג אחד של מטא תג כדי לתמוך בדפדפנים מדור קודם, הערכים מהדור הקודם אמורים להופיע אחרי הערכים החדשים, מכיוון שסוכני המשתמש קוראים כללים רצופים עד שהם מוצאים התאמה.
פתיחת התרשים
אפשר להשתמש ב-Open Graph ובפרוטוקולים דומים של מטא תגים כדי לשלוט באופן שבו אתרי מדיה חברתית, כמו Twitter, LinkedIn ו-Facebook, מציגים קישורים לתוכן שלכם. אם הם לא ייכללו, אתרי מדיה חברתית יתפסו בצורה נכונה את כותרת הדף ואת התיאור מהמטא תג description. המידע שיוצג במנועי חיפוש יהיה זהה למידע שמנועי חיפוש מציגים, אך תוכלו להגדיר באופן מכוון מה אתם רוצים שהמשתמשים יראו כשהקישור באתר שלכם מתפרסם.
כשמפרסמים קישור אל MachineLearningWorkshop.com או web.dev ב-Facebook או ב-Twitter, מופיע כרטיס עם תמונה, כותרת אתר ותיאור אתר. הכרטיס כולו הוא היפר-קישור לכתובת ה-URL שסיפקתם.
למטא תגים של Open Graph יש שני מאפיינים לכל אחד: המאפיין property במקום המאפיין name, והתוכן או הערך של אותו נכס. המאפיין property לא מוגדר במפרטים רשמיים, אבל הוא נתמך באופן נרחב על ידי אפליקציות שתומכות בפרוטוקול Open Graph. יצירה של מאפיינים "חדשים" כמו property מבטיחה שערכי המאפיינים שנוצרו עבור מאפיין הפרוטוקול לא יתנגשו עם ערכים עתידיים של המאפיינים name או http-equiv.
יוצרים כרטיס מדיה של Facebook:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
כוללים כותרת של הפוסט להצגה. הכותרת מוצגת בדרך כלל מתחת לתמונה ומעל לתיאור. התיאור צריך לכלול עד שלושה משפטים שמסכמים את הפוסט. הכותרת תופיע אחרי הכותרת שהוגדרה ב-og:title. צריך לספק את כתובת ה-URL המוחלטת של תמונת הבאנר שרוצים להציג, כולל הפרוטוקול https://. כשכוללים תמונה ב-HTML, תמיד צריך לכלול תיאור טקסט חלופי לתמונה, גם אם התמונה תופיע במקום אחר. לכרטיסי מדיה חברתית של Open Graph, יש להגדיר את alt כערך התוכן של הנכס og:image:alt. אפשר לכלול גם כתובת URL קנונית באמצעות og:url.
כל המטא תגים האלה מוגדרים בפרוטוקול Open Graph. הערכים צריכים להיות התוכן שרוצים שאפליקציית האינטרנט של הצד השלישי תציג.
לרשתות חברתיות אחרות יש תחבירים דומים, למשל תגי עיצוב של כרטיס Twitter. כך ניתן לספק חוויה שונה בהתאם למיקום שבו הקישור מופיע, או להפעיל מעקב אחר קישורים על ידי הוספת פרמטר בסוף כתובת ה-URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
במקרה של Twitter, כדי לוודא שהערך של המאפיין name לא יתנגש עם מפרטים עתידיים, במקום להשתמש במאפיין חדש כמו המאפיין property ב-Open Graph, עבור נתוני כרטיסי Twitter, כל ערכי השמות מתחילים עם twitter:.
אפשר לראות איך ייראה כרטיס הרשת החברתית ב-Twitter וב-Facebook.
אפשר להשתמש בתמונות, כותרות ותיאורים שונים של כרטיסים באתרים שונים של רשתות חברתיות או עבור פרמטרים שונים של קישורים. לדוגמה, https://perfmattersconf.com מגדיר ערכים שונים עבור og:image, og:title ו-og:description על סמך הפרמטר של כתובת ה-URL.
אם תזינו https://perfmattersconf.com?name=erica וגם https://perfmattersconf.com?name=melanie בכלי לאימות כרטיסים של Twitter, תראו את שני הכרטיסים האלה. סיפקנו תוכן שונה על אף ששניהם מקשרים לאותו דף הבית של שיחת הוועידה.
מטא-נתונים שימושיים נוספים
אם מישהו מוסיף את האתר שלכם לסימניות, מוסיף אותו למסך הבית, או אם האתר שלכם הוא Progressive Web App או שהוא פועל במצב אופליין או שלא מוצגות בו תכונות Chrome של הדפדפן, אתם יכולים להוסיף סמלי אפליקציות למסך הבית של המכשיר הנייד.
אפשר להשתמש בתג <link> כדי לקשר לתמונות הפתיחה שבהן אתם רוצים להשתמש. הנה דוגמה להכללה של כמה תמונות באמצעות שאילתות מדיה:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
אם ניתן להשתמש באפליקציה או באתר באמצעות אפליקציית אינטרנט, כלומר האתר יכול לעמוד בפני עצמו עם ממשק משתמש מינימלי, למשל ללא לחצן 'הקודם', אפשר להשתמש במטא תגים כדי לציין גם את זה לדפדפן:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
יש לכלול את הפרטים האלה רק אם האפליקציה אכן יכולה לפעול בה. אם האתר אינו מוצג במקומם, אתם תקימו את התומכים הנלהבים ביותר שלכם – אלו שהוסיפו את האתר שלכם למסך הבית שלהם – במטרה לפגוע בחוויית המשתמש. כל האהבה שלהם תאבד!
אם מישהו מתכוון לשמור את הסמל שלכם במסך הבית של המכשיר הזעיר שלו, כדאי לספק למערכת ההפעלה שם קצר שלא תופס הרבה מקום במסך הבית של מכשיר קטן. כדי לעשות זאת, אפשר לכלול מטא תג או להשתמש בקובץ מניפסט אינטרנט. הדוגמה הבאה ממחישה את שיטת המטא תג:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
כיסית כמה מטא תגים, וכל אחד מהם יאריך את הכותרת. אם אתם אכן יוצרים אפליקציית אינטרנט מסוג Progressive Web App עם יכולת שימוש באפליקציית אינטרנט וידידותית אופליין, במקום לכלול את שני המטא תגים הנוספים האלה, תוכלו לכלול את short_name: MLW באופן פשוט ותמציתי יותר בקובץ מניפסט אינטרנט.
קובץ המניפסט יכול למנוע כותרת לא גדולה ומלאה בתגים <link> ו-<meta>. אנחנו יכולים ליצור קובץ מניפסט בשם manifest.webmanifest או manifest.json. לאחר מכן אנחנו משתמשים בתג <link> השימושי עם מאפיין rel שמוגדר ל-manifest, ובמאפיין href שמוגדר לכתובת ה-URL של קובץ המניפסט:
<link rel="manifest" href="/mlw.webmanifest" />
הסדרה הזו מתמקדת ב-HTML, אבל אפשר לעיין בקורס web.dev בנושא Progressive Web Applications או תיעוד המניפסט של אפליקציות אינטרנט של MDN.
עכשיו ה-HTML נראה כך:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
הוא די ארוך, אבל הוא מוכן.
עכשיו, אחרי שההשלמה של <head>, אפשר להתעמק בHTML סמנטי.
בחינת ההבנה
בוחנים את הידע על מטא-נתונים
הנחיית pragma לרענון.
מטא תגים של Open Graph.