איך להשתמש נכון בכותרות ואיך להמנע מטעויות שיעשו ברדק בעמוד (אני כותרת 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 וכך הלאה.

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

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

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

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

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

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

‹ שתפו הלאה

pointer-90deg

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

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

וורדפרס זום דייט שאלות ותשובות
טיפים ומדריכים

להתחיל עם וורדפרס – סיכום זום דייט שאלות ותשובות

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

Google Photos – פתרון גיבוי התמונות שכל יוצר חייב להכיר

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

מה ההבדל בין מותג למיתוג? פוסט מסכם

מה הופך עסק למותג? האם התקציב שלו או האדם שעומד מאחוריו? מי שמגדיר אותנו כמותג הם הלקוחות שלנו – מה החוויה שלהם מולך הייתה? האם …

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

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

כתיבת תגובה

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

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

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

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