השלכות השימוש באלמנט noscript עם תגיות בעייתיות בתוך ה-head

עודכן לאחרונה ב-9.7.2024

בעיות בקוד ה-HTML משפיעות על ביצועי האתר ומקשות עליו להתקדם במנועי חיפוש (SEO). במאמר זה אני רוצה לדון בבעיות הנוצרות כתוצאה משימוש בתגיות <noscript> עם אלמנטים לא תקניים בתוך ה-<head> של האתר.

הבעייתיות של תגית noscript ב-head וההשלכות על ה-SEO

התג <noscript> משמש להצגת תוכן חלופי למשתמשים שיש להם דפדפנים שלא תומכים בסקריפט או דפדפנים בהם כיבו את הסקריפטים.

ניתן להשתמש בתג זה בתוך ה-<head> או ה-<body>, אך צריך להיות זהירים כאשר משתמשים בו בתוך ה-<head>. בגלל ששימוש לא נכון בתג זה עשוי לשבש את ה-<head> ולגרום לבעיות עבור מנועי החיפוש שיכולים לא למצוא תגים חשובים אחרים אשר מיועדים לחלק הזה בלבד.

על כן, כאשר משתמשים ב-<noscript> ב-<head>, יש לוודא שהוא מכיל רק את האלמנטים:

<link>
<style>
<meta>
<base>
<template>

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

תגיות שלא צריכות להיות ב head

<img>: תגית שמשמשת להצגת תמונות.
<p>: תגית שמשמשת לטקסט של פסקאות.
<div>: תגית שמשמשת להגדרת מחיצות בדף.
<span>: תגית שמשמשת להגדרת מחיצות קטנות יותר בתוך טקסט.
<h1>, <h2>, וכו’: תגיות שמשמשות לכותרות.
<ul> או <ol> ו-<li>: תגיות שמשמשות לרשימות.
<table>: תגית שמשמשת ליצירת טבלאות.

אלה רק כמה דוגמאות, אך הכלל הוא שתגיות שמייצגות את התוכן עבור המשתמש אינן אמורות להופיע בחלק של ה–<head> באתר. הן אמורות להופיע בחלק של ה-<body>.

דוגמה לבעיה נפוצה: שימוש ב-noscript עם img בתוך ה-head

בעיה זו מופיעה בהרבה מקרים בתור HIT בסייטבאלב, זה קורה כשיש ב-<head>, תגית <noscript> עם אלמנט <img> שמתייחס לתמונה, זה יכול לגרום לבעיות רציניות.

ברוב המקרים היא נובעת בקוד הפיקסל של פייסבוק שמכיל שני חלקים: <script> ו-<noscript>.
החלק השני מיועד למעקב אחר משתמשים שהסקריפטים כבויים אצלם, אך הוא כולל אלמנט של תמונה בתוכו וזה שובר את ה-<head>.

הבעיה בכך היא שכאשר מנועי החיפוש נתקלים באלמנט לא חוקי ב-<head>, הם עשויים להניח שה-head הסתיים ולהפסיק לקרוא את האלמנטים האחרים שיש בו. זה יכול לפגוע בהצגת האתר בתוצאות החיפוש ולהשפיע על התנועה האורגנית.

במקרה של קוד הפיקסל, יש שלוש אפשרויות לפתור את הבעיה:

העברת ה-<noscript> לתחתית ה-<head>,
העברתו ל-<body>
למחוק אותו לחלוטין

יש לשקול כל אפשרות בהתאם לצרכים ולהבנה המדויקת של הקוד.

דוגמה:

				
					<html lang="he">
 <head>
     ...
    <noscript>
        <img decoding="async" src="https://domain.co.il/pic/pic.jpg" />
    </noscript> 
     ...
 <style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle"></style>
</noscript>
<script type="application/javascript">const rocket_pairs = []; const rocket_excluded_pairs = [];</script></head>
 <body>
    ....
 </body>
</html>