היררכיית כותרות בוורדפרס: H1-H6, מבנה מסמך וחוויית קוראי מסך

כותרות HTML (H1-H6) הן עמוד השדרה של המסמך. הן יוצרות תוכן עניינים בלתי נראה שעיוורים ו-Google משתמשים בו לסקירה מהירה של תוכן הדף - בדיוק כמו שגולש סיינטד מציץ ב-headings כדי להחליט אם להמשיך לקרוא.

למה זה משנה

קוראי מסך מספקים קיצור מקש לקפיצה בין כותרות (NVDA: H, JAWS: H, VoiceOver: Rotor > Headings). זוהי דרך הניווט הראשונה של עיוור בעמוד חדש: הוא קופץ דרך הכותרות ובוחר לאן להגיע. כשהיררכיה שבורה - דילוג מ-H1 ל-H3 בלי H2, שני H1 על אותו דף, או H4 שמופיע לפני ה-H2 הראשון - העיוור מקבל מפת ניווט מבולבלת ועלול לחשוב שחלק מהתוכן חסר.

זוהי דרישה ב-תקני נגישות בינלאומיים רמה A, תקן 1.3.1 Info and Relationships. בנוסף, Google משתמש במבנה הכותרות להבנת הדף: H1 הוא הנושא הראשי, H2 הם הסעיפים, H3 הם תתי-סעיפים. Featured snippets בתוצאות החיפוש לעיתים נשלפים לפי מבנה כותרות מסודר. ולסיכום, גם ה-UX של קוראים סיינטד תלוי בזה - הם סוקרים כותרות כדי להחליט אם להעמיק.

איך לזהות

התקן WAVE Evaluation Tool ב-Chrome > הפעל על הדף - הוא מצייר "structure" עם כל הכותרות לפי הסדר. אזהרות נפוצות: "Skipped heading level" (דילוג), "Multiple H1" (שני H1 על אותו דף). חלופה: HeadingsMap תוסף Chrome/Firefox שמראה עץ כותרות בלחיצה אחת. אפשרות שלישית: בקונסול של Chrome:

[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].forEach(h => console.log(h.tagName, h.textContent.trim().slice(0,80)));

זה מדפיס את כל הכותרות בדף לפי הסדר. אם רואה דילוגים, יש בעיה.

איך לתקן

1. H1 אחד בלבד בכל דף - לרוב כותרת הפוסט. בוורדפרס, אם התבנית מציגה את כותרת הפוסט כ-H1 ואתה מוסיף עוד H1 בתוכן - זוהי כפילות. שנה ל-H2.
2. ירידה הדרגתית: H1 > H2 > H3 > H4. אסור H1 > H3. אם רוצים שהפונט של H3 יהיה גדול - תקן ב-CSS, אל תהפוך אותו ל-H2.
3. בעורך הבלוקים, בחר בלוק כותרת > בסרגל הכותרת בחר Heading level (H2/H3/H4).
4. בדוק את Header ו-Footer של התבנית - לעיתים יש שם H4 או H5 שגוי שיוצר רעש בעץ הכותרות.
5. אם תבנית מציגה את שם הסיידבר כ-H4 ב-Footer לפני ה-H2 הראשון בתוכן - זה יוצר נראות שגויה. ערוך את התבנית או השתמש בעורך תבניות (FSE) ב-WordPress 6.0+.
6. בדוק כל סוגי הדפים: דף הבית, דף בלוג, פוסט יחיד, ארכיון, דף מותאם אישית. כל אחד עלול להיראות שונה.
7. הרץ HeadingsMap אחרי תיקון - העץ צריך להיראות מסודר ומקצועי.

טעויות נפוצות

• שימוש ב-H לעיצוב: "רוצים שזה יהיה גדול" אז עושים H2 - אסור. תקן את הסטייל של ה-H הנכון.
• שני H1 על דף הבית: לוגו טקסטואלי שעוטף ב-H1 + כותרת ראשית של הדף = שני H1. הפוך את הלוגו ל-div או H2.
• תפריט ניווט עם H3 לכל קטגוריה: זה מבלבל את עץ הכותרות. השתמש ב-<nav> עם רשימה <ul> במקום.
• כותרת ריקה: <h2></h2> מ-CSS שלא נטען - מופיעה ב-WAVE כשגיאה.
• הסתמכות על תוסף page builder: בלוקים של Elementor/Divi לעיתים מגדירים HTML Tag = h3 כברירת מחדל. בדוק כל אחד.

בדיקה לאחר תיקון

הרץ HeadingsMap ובדוק את העץ - אמור להיות מסודר. ב-WAVE - 0 errors בקטגוריה Headings. ב-NVDA, פתח דף ולחץ H כמה פעמים - הקפיצה צריכה להיות הגיונית. RankPlus יחזור לירוק.