איך להשתמש נכון בכותרות ואיך להמנע מטעויות שיעשו ברדק בעמוד (אני כותרת H1)

תפקידן של כותרות (אני כותרת H2)

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

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

אני אסביר (ואל תדאגו, בסוף גם תבינו למה כל כותרת במאמר הזה מסתיימות באופן מוזר).

סוגי כותרות (אני כותרת H2)

כותרות מצוינות ב-6 תגיות שנקראות H1, H2, H3, H4, H5, H6 (יכול להיות שנתקלתם בסימון שכזה). H1 היא הכותרת הכי ראשית (ויזואלית תיראה כהכי גדולה ולהפך – H6 תיראה ככותרת הכי קטנה).

כותרות תוכן מסודרות לפי סדר החשיבות שלהן – מהכותרת הכי ראשית – H1 (למעשה לרוב אמורה להיות שם העמוד) לכותרות משנה, ולתת-כותרות משנה בתוכן וכך הלאה ופנימה (עד ל- H6). ההגיון פשוט ומובן, ולרוב מומחש ויזואלית כשאתם כותבים את התוכן. כותרת ראשית תהיה כנראה (תלוי בעיצוב/הגדרות) מוצגת בגדול יותר, וכותרת משנית תהיה מוצגת בקטן יותר, עד כאן סה"כ הגיוני.

מצג מטעה (אני כותרת H2)

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

מה הבעיה? (אני כותרת H3)

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

דוגמאות לבעיות בתוכן הפוסט/מאמר (אני כותרת H4)

דוגמה קיצונית (אני כותרת H5)

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

דוגמה נפוצה (אני כותרת H5)

דוגמה קיצונית פחות אבל נפוצה הרבה יותר היא שאם רוצים כותרת ממש קטנה אז בוחרים H5 או H6 כשהכותרת הקודמת (המכילה) היא בכלל H2 – הקפיצה הזו מH2 לH6 היא לא נכונה סמנטית. בתוך H2 הכותרת הפנימית צריכה להיות H3. ובתוך H3 הכותרת הפנימית (אם ישנה) צריכה להיות H4 וכך הלאה.

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

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

אז מה השיטה הנכונה? (אני כותרת H2)

להתייחס לכותרות בצורה סמנטית. הן מכילות זו את זו ומשמשות לחלוקות ותתי-חלוקות של התוכן.
H1 – הכי פשוט, רק מופע אחד בעמוד (משמש לרוב ככותרת העמוד)
H2 – הכותרת הכי שימושית ומשמשת לחלוקת רוב התוכן (רמה ראשונה של חלוקה)
H3 – אם בפיסקאות שאחרי כותרת H2 נרצה לבצע תתי-חלוקות (באותו הנושא של הכותרת המכילה H2) אז נשתמש ב-H3 – עד למעבר לנושא הבא (כלומר כותרת ה-H2 הבאה).
H4 – אם בפסקאות שאחרי כותרת H3 נרצה לבצע עוד חלוקה פנימית לתת נושאים (באותו נושא של הכותרת המכילה H3) אז נשתמש ב-H4 עד למעבר לנושא הבא (בין אם זה עוד תת-סעיף מסוג H3 או נושא-אב הבא H2)
H5 , H6 – כהמשך ישיר אך ורק אם נרצה לבצע תת-חלוקות בתוך H4 (עבור H5) או בH5 (עבור H6).
מהתאור אולי עולה לכם מסקנה – שבשביל להגיע לחלוקות H4,H5,H6 צריך להגיע לעומק די גדול של חלוקות (אם נפרוס זאת על גבי מאמר, כנראה שמדובר במאמר ארוך מאוד שדורש רמות עומק מרובות של חלוקה) – והיות ורוב המאמרים שלנו הם לא בעלי אלפים רבים של מלים – המסקנה היא שבפועל לרוב אין לנו סיבה "נכונה" וסמנטית להגיע בכלל לH5/H6 (גם אם הן נראות קטנות ומקושטות).

הלכה למעשה

עכשיו כשקראתם והבנתם – נסו לבחון שוב את הכותרות של המאמר הזה. מה נבחר כ-H1, מה כ-H2 וכך הלאה.

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

תוכן עניינים

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

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

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

מאת: שמעון שומרון

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

תוכן עניינים

‹ שתפו הלאה

pointer-90deg
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

כשהחיים שולחים לכם לימונים, תקחו. כי היי, לימונים בחינם וזה...

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

 אני רוצה להגיב!

2 מחשבות על “איך להשתמש נכון בכותרות ואיך להמנע מטעויות שיעשו ברדק בעמוד (אני כותרת H1)”

    1. תודה לך 🙂
      מה לגבי פסקאות? הן באות בין הכותרות, ואם מה שכתוב בהם טוב, אז אפשר מלא מהן 🙂 2-3 פסקאות בין כותרות זה בסדר גמור. אפשר לפזר גם תמונות מתאימות ברחבי המקטעים (כותרת+כמה פסקאות)

להגיב על תהילה ביטול התגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

עוד באותו נושא:

מה כדאי לדעת על בחירת תבנית לאתר הוורדפרס אם אתם משתמשים באלמנטור פרו ומה השתנה מהותית בבחירה זו כיום אל מול כמה שנים אחורה? כל הפרטים בפנים.
7 דקות קריאה
יש גם וידאו
במאי 2019 מיילצ'ימפ הכניסו שינויים דיי דרמטיים למערכת הדיוור שלהם, גם מבחינת מסלולי התשלום וגם מבחינת התפעול. אז כמה זה באמת שינה לנו? ולפי מה כדאי לנו לבחור מערכת דיוור?
5 דקות קריאה
אז הגעתם להבנה שהנה, הגיע הזמן שיהיה לכם אתר משלכם. אתם מתחילים לבדוק מחירים ומגלים את המערב הפרוע, שוק "פרוץ" ללא התחלה וסוף. נרצה לעשות לכם קצת סדר
11 דקות קריאה

מחפשים נושא אחר?
בואו למצוא את כל התכנים בבלוג

גלילה למעלה
א

אה, סליחה?
מה עושים כאן?

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

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

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

רוצים לדבר?

מצוין!
השאירו פניה בטופס הבא:

מ

מעולה!
נרשמתם בהצלחה!

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