תגיות מטא - אלמנט head

האלמנט head ב-HTML5

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

ובכן, באלמנט ה-head ניתן למצוא כל מידע שאיננו פונקציונאלי או ביצועי. בין היתר, נוכל למצוא באלמנט זה קישור לקבצי CSS המתארים את עיצוב הקוד, קישור לקבצי JS (קבצים בשפת ג'אווה סקריפט) המשמשים קוד ביצועי על הדפדפן, תאורי מטא על העמוד וכיו"ב.

תגית title

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

תגית link

תגית זו מגדירה קישור למידע נוסף חיצוני. השימוש המוכר ביותר הוא קישור לקובץ CSS המתאר עיצוב באופן הבא:

אפשרות נוספת לשימוש בתגית, זו הגדרה של אייקון של העמוד בדפדפן (אותו אייקון קטן שמופיע בראש העמוד ליד הכותרת):

תגית script

תגית זו מגדירה קריאה לקובץ JS חיצוניים. נהוג לבצע טעינה של קבצי JS המכילים פונקציות לביצוע באלמנט ה-head, ואילו את הקריאות לפונקציות אלו להכניס באלמנט ה-body.

מומלץ להכניס את השימוש בתגיות link לפני השימוש בתגיות script, כיוון שתגיות link וטעינה של קובץ CSS נעשית בצורה מקבילה להמשך ביצוע הקוד, בעוד שטעינה של קבצי JS נעשית בצורה טורית ולמעשה הדף בהמתנה עד אשר קבצים אלו נטענים במלואם.

תגית meta

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

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