הסטנדרט של HTML5, של Google ושל WCAG הוא H1 אחד בלבד לדף. כמה תגי H1 יוצרים בלבול סמנטי - גוגל לא יודע איזה מהם מתאר את הנושא הראשי, ומפזר את ה-relevance signal בין כולם.
למה זה משנה
תג H1 משדר לאלגוריתם "זהו הנושא העיקרי של הדף". כשיש 5 H1 בדף, האלגוריתם נאלץ לבחור איזה לתת משקל - לרוב הוא בוחר את הראשון מבחינת סדר הופעה ב-HTML. אם הראשון הוא H1 של לוגו או H1 של slider, מילת המפתח שכתבת ב-H1 "אמיתי" שלך נחשבת H2 בעיני האלגוריתם.
בנוסף, סדר ה-DOM לא תמיד תואם לסדר הוויזואלי. ב-flexbox או grid עם order, ה-H1 שמופיע ראשון בקוד יכול להיות אחרון על המסך, מה שיוצר חוסר התאמה בין מה שהמשתמש רואה לבין מה שגוגל מבין.
בנגישות, משתמשי מסך-קורא משתמשים בקיצור הדרך "קפוץ ל-H1" כדי להגיע לתוכן הראשי. בדף עם 5 H1 הם נאלצים לדפדף בכולם כדי להבין את הסדר - חוויה מבלבלת ומתסכלת.
איך לזהות
פתח את דף הבית ב-DevTools (F12), עבור ל-Console, והדבק document.querySelectorAll('h1').length. אם התוצאה גדולה מ-1, יש בעיה. אחרי זה הדבק document.querySelectorAll('h1').forEach((h, i) => console.log(i, h.outerHTML)) כדי לראות איפה כל H1 נמצא ומה התוכן שלו.
בדיקה משלימה: התקן את התוסף Chrome "HeadingsMap" - הוא מציג את כל ההיררכיה של הכותרות עם רמות צבעוניות. כל H1 מסומן באדום אם יש יותר מאחד.
בדיקה שלישית: הרץ את https://wave.webaim.org/ על הדף - הוא מציג Errors & Alerts כולל "Multiple H1 headings". זוהי בדיקת WCAG אוטומטית.
איך לתקן
עבור על רשימת ה-H1 שמצאת ב-DevTools. השאר רק אחד - את ה-H1 שמתאר את הנושא העיקרי של הדף. שאר ה-H1 צריכים להיות H2 (אם הם כותרות סקציה משמעותיות) או רמות נמוכות יותר (H3, H4).
שינוי בעורך הבלוקים: פתח את הדף לעריכה, לחץ על הבלוק עם ה-H1 העודף, ובסיידבר הימני שנה את "Heading Level" מ-H1 ל-H2.
בלוקים נפוצים שיוצרים H1 בטעות:
- Hero Sliders - Slider Revolution, Smart Slider, MetaSlider לרוב מגדירים את ה-headline שלהם כ-H1. ערוך את ה-slide ושנה את ה-tag ל-H2.
- Page Builders - ב-Elementor, Divi, Beaver Builder, Bricks, ה-Heading widget מאפשר לבחור HTML tag. בדוק כל heading בדף.
- תבניות מסחריות - חלק מתבניות (Astra, Generatepress, Kadence) מסמנות את שם האתר בלוגו כ-H1 בכל הדפים. בהגדרות התבנית יש לרוב אופציה "Site Title HTML Tag" - שנה ל-
divאוp. - FAQ blocks או Pricing tables - חלק מהתוספים יוצרים H1 לכל פריט. בדוק את הגדרות התוסף.
אחרי כל תיקון, רענן את הדף והרץ את הבדיקה ב-DevTools שוב.
טעויות נפוצות
הטעות הראשונה: שינוי ה-H1 לפי הוויזואל בלבד. CSS יכול להציג H1 קטן וטקסט רגיל גדול, אבל גוגל קורא את ה-HTML, לא את ה-CSS. הסתכל על ה-DOM, לא על המראה.
הטעות השנייה: השארת H1 של hero section במצב "זה ה-H1 הראשי" - אחרי הוספת H1 חדש בתוכן הראשי. וודא שהוסרת את הקודם, לא רק הוספת חדש.
הטעות השלישית: שכחת H1 מוסתר. תבניות לעיתים יוצרות H1 עם display: none או visibility: hidden - ה-H1 קיים ב-DOM אבל לא מוצג. גוגל עדיין רואה אותו. בדוק את כל ה-H1 ב-DOM, לא רק את הנראים.
הטעות הרביעית: הוספת H1 בכל פעם שמשתמשים בכותרת בולטת. כותרות סקציה צריכות להיות H2, לא H1 גדולים יותר. השתמש ב-CSS לעיצוב גדול, לא ב-tag חזק יותר.
בדיקה לאחר תיקון
הרץ שוב document.querySelectorAll('h1').length - חייב להחזיר 1. הרץ Lighthouse Audit וודא ש-SEO +Accessibility עוברים בלי "page contains a heading, skip link, or landmark region" warning. הרץ wave.webaim.org וודא שאין "Multiple H1 headings" alert. הרץ מחדש את ה-audit של RankPlus.