בלי תג <meta name="viewport"> ב-<head>, דפדפנים ניידים מציירים את הדף כאילו הוא מסך 980px ואז מקטינים לרוחב המסך. הטקסט יוצא קטן מאוד והמשתמש חייב לעשות zoom כדי לקרוא. שורת קוד אחת שמכריעה.
למה זה משנה
זוהי הסיבה הקלאסית לדף שנראה מצוין במחשב ולא קריא בנייד. גוגל מבצע מאז 2015 "mobile-first indexing" - הוא משתמש בגרסת הנייד של האתר כגרסה הראשית לאינדוקס ולדירוג. דף שלא נייד-ידידותי מסומן כ-"Not mobile-friendly" ב-Mobile Usability report של Search Console, ומקבל דירוג נמוך משמעותית.
השפעה ישירה: שיעור הנטישה במובייל. גולשי נייד שמגיעים לדף לא קריא נוטשים תוך שניות. במחקרים, שיעור הנטישה של דפים לא נייד-ידידותיים מטפס מעל 70% - לעומת 30-40% לדפים תקינים. זה מכפיל את אובדן ההזדמנויות.
מאז שגוגל החל אכיפה מחמירה של mobile-friendliness ב-2018 (Mobile-Friendly Update), אתרים בלי viewport נפלו בדירוגים בעשרות מקומות. גם Core Web Vitals מציין רק במובייל - בלי viewport תקין, אתה לא יכול לעבור את הבדיקות.
השפעה עקיפה: כל מי שמגיע לאתר דרך פרסום ממומן בנייד (Google Ads, Facebook Ads, Instagram) מקבל חוויה גרועה ולא ימיר. זה מכפיל את עלות ההמרה (CPA) של קמפיינים ממומנים.
איך לזהות
פתח את האתר בנייד אמיתי. אם הטקסט נראה קטן מאוד וצריך לעשות pinch-zoom כדי לקרוא, אין viewport. אם הדף מתאים את עצמו לרוחב המסך, יש.
בדיקה משלימה: View Source וחיפוש name="viewport". אם לא נמצא, אין תג. אם נמצא אך התוכן שלו מוזר (לדוגמה width=980), הוא לא תקין.
בדיקה שלישית: גש ל-Google Mobile-Friendly Test (https://search.google.com/test/mobile-friendly). הזן את ה-URL והוא יציג ניתוח מפורט. אם הוא מסמן "Page is not mobile-friendly", זוהי בעיית viewport (ברוב המקרים).
בדיקה רביעית: ב-Chrome DevTools (F12) > Toggle Device Toolbar (Ctrl+Shift+M) > בחר Galaxy / iPhone. אם הדף לא מתאים את עצמו לגודל המכשיר, אין viewport.
איך לתקן
הוסף את שורת ה-meta הבאה בתוך <head> של התבנית:
<meta name="viewport" content="width=device-width, initial-scale=1">פירוש: width=device-width אומר לדפדפן שרוחב הדף שווה לרוחב המכשיר. initial-scale=1 אומר שזום ההתחלתי הוא 100% (לא zoomed in/out).
שלבי התיקון לפי סוג תבנית:
תבנית קלאסית (PHP): פתח את הקובץ header.php בתבנית הפעילה דרך Appearance > Theme File Editor או דרך FTP בתיקיית wp-content/themes/THEME-NAME/. הוסף את שורת ה-meta בתוך ה-<head>, רצוי לפני wp_head().
תבנית block / FSE (וורדפרס 6.0+): ערוך דרך Appearance > Editor > Templates > Header. בלוקי block themes כוללים viewport meta אוטומטית - אם חסר, יכול להיות שתבנית מותאמת.
תבנית מסחרית (Astra, GeneratePress, Kadence): אמורה לכלול את התג כברירת מחדל. אם הבדיקה נכשלת, ייתכן שתוסף שמסיר. עשה View Source וחפש viewport - אם חסר, חקור איזה תוסף אחראי.
אחרי השינוי, נקה page cache (W3 Total Cache, WP Rocket, LiteSpeed Cache) כדי שהדפים המקושיים יישלחו עם התג. בדוק שוב במובייל ובמובייל-פרידנלי טסט.
טעויות נפוצות
הטעות הראשונה: שימוש ב-width=device-width, user-scalable=no. זה מונע מהמשתמש לעשות zoom - פוגע בנגישות (משתמשים עם בעיות ראייה צריכים zoom). WCAG אוסר על זה. השאר את user-scalable=yes או אל תציין כלום.
הטעות השנייה: שימוש בערכים מותאמים ספציפיים. width=320 או maximum-scale=1 מגבילים את הדף בצורה לא אופטימלית. השתמש ב-width=device-width, initial-scale=1 - הסטנדרט המומלץ.
הטעות השלישית: הוספת viewport אבל ה-CSS עדיין רוחב קבוע. אם ה-CSS משתמש ב-width: 980px בלי media queries, הדף עדיין לא יהיה רספונסיבי. ה-viewport אומר לדפדפן "השתמש ברוחב המכשיר", אבל ה-CSS צריך להגיב לזה.
הטעות הרביעית: כמה תגי viewport. אם יש בתבנית viewport ובתוסף עוד viewport, הדפדפן בוחר את הראשון. ודא שיש רק אחד.
הטעות החמישית: שכחה לרענן cache אחרי תיקון. WP Rocket ו-LiteSpeed שומרים HTML מטומן - אחרי שינוי בתבנית, נקה את הקאש כדי שהשינוי יופיע.
בדיקה לאחר תיקון
הרץ שוב את Google Mobile-Friendly Test (https://search.google.com/test/mobile-friendly). אמור להציג "Page is mobile-friendly". בדוק במובייל אמיתי שהדף נראה תקין. ב-Search Console > Mobile Usability, מספר ה-errors אמור לרדת תוך 4-6 שבועות. ב-Performance, ה-CTR וה-clicks מנייד אמורים לעלות.
<meta name="viewport" content="width=320"> במקום הסטנדרט, תוסף שינה. בטל אותו זמנית כדי לזהות.