بستن

جلسه شصت و پنجم: آموزش کامل تگ script و تگ noscript در HTML

تگ script و تگ noscript

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! تگ‌ script و تگ noscript ابزارهای کلیدی برای ساخت صفحات وب پویا، قابل دسترس، و بهینه‌ان. تگ script بهت اجازه می‌ده کدهای JS رو اجرا کنی و سایتت رو تعاملی کنی، در حالی که noscript محتوای جایگزین رو برای کاربرایی که JS غیرفعاله نشون می‌ده. تو این مقاله، کامل‌ترین و منحصربه‌فردترین مرجع دنیا رو برات آماده کردیم که تمام نکات مقاله قبلی رو پوشش می‌ده، با تکنیک‌های سئوی تکنیکال، مثال‌های عملی، و ترفندهای پیشرفته برای فتح رتبه اول گوگل! 🚀

🏷️ تگ‌  script و تگ noscript چین و چرا باید یادشون بگیری؟

تگ <script> یه عنصر HTMLه که کدهای JS (یا سایر زبان‌های اسکریپت‌نویسی) رو تو صفحه اجرا می‌کنه. این تگ می‌تونه تو بخش <head> یا <body> قرار بگیره و برای قابلیت‌های پویا مثل انیمیشن، فرم‌های تعاملی، یا بارگذاری AJAX استفاده می‌شه. تگ <noscript> مکملشه و محتوایی رو نشون می‌ده وقتی JS تو مرورگر کاربر غیرفعاله.چرا این تگ‌ها برای سئو و UX مهمن؟

  • سئو تکنیکال: بهینه‌سازی بارگذاری JS با اتریبیوت‌هایی مثل defer و async، سرعت صفحه رو بالا می‌بره (CWV).
  • دسترسی‌پذیری: <noscript> محتوای جایگزین رو برای صفحه‌خوان‌ها و کاربرای بدون JS فراهم می‌کنه.
  • UX: صفحات تعاملی و پویا نرخ تعامل رو افزایش می‌دن.
  • عملکرد: مدیریت درست اسکریپت‌ها رندر رو سریع‌تر می‌کنه.
  • امنیت: اتریبیوت‌های nonce و integrity از XSS جلوگیری می‌کنن.

🧱 ساختار و اتریبیوت‌های تگ script و تگ noscript

🧩 ساختار و اتریبیوت‌ها تگ script

تگ <script> یه تگ جفتی‌یه که کد JS رو داخل خودش نگه می‌داره یا به فایل خارجی لینک می‌ده. ساختار کلی:

<script>
    console.log("سلام دنیا!");
</script>
<!-- یا -->
<script src="/js/app.js"></script>

🧩 اتریبیوت‌ها و مقادیر:

🧩 اتریبیوت src

✨ توضیح: آدرس فایل JS خارجی.

📌 مقادیر: URL معتبر

(مثل /js/app.js یا https://cdn.example.com/script.js).

✏️ مثال: 

<script src="app.js"></script>

🧩 اتریبیوت type

✨ توضیح: نوع MIME اسکریپت. تو HTML5 اختیاریه.

📌 مقادیر:

  • text/javascript: اسکریپت استاندارد JS (پیش‌فرض).
  • module: ماژول ES6 با پشتیبانی از import/export.
  • application/json: داده‌های JSON (کمتر رایج).

✏️ مثال:

<script type="module" src="module.js"></script>

 🧩 اتریبیوت async

✨ توضیح: بارگذاری غیرهمزمان اسکریپت (فقط برای src).

📌 مقادیر: بدون مقدار .

✏️ مثال: 

<script async src="script.js"></script>

🧩 اتریبیوت defer

✨ توضیح: اجرای اسکریپت تا بعد از بارگذاری DOM (فقط برای src).

📌 مقادیر: بدون مقدار (Boolean).

✏️ مثال: 

<script defer src="script.js"></script>

🧩 اتریبیوت nonce

✨ توضیح: برای CSP جهت اجرای اسکریپت‌های مجاز.

📌 مقادیر: رشته تصادفی یک‌بارمصرف (مثل xyz123).

✏️ مثال: 

<script nonce="xyz123">...</script>

🧩 اتریبیوت integrity

✨ توضیح: صحت فایل خارجی با هش رمزنگاری.

📌 مقادیر: رشته هش (مثل sha256-abc123).

✏️ مثال: 

<script src="script.js" integrity="sha256-abc123" crossorigin="anonymous"></script>

🧩 اتریبیوت crossorigin

✨ توضیح: سیاست CORS برای اسکریپت‌های خارجی.

📌 مقادیر:

  • anonymous: بدون ارسال اعتبار.
  • use-credentials: ارسال اعتبار.

✏️ مثال: 

<script src="cdn.js" crossorigin="anonymous"></script>

🧩 اتریبیوت referrerpolicy

✨ توضیح: سیاست ارجاع‌دهنده برای درخواست اسکریپت.

📌 مقادیر:

  • no-referrer: عدم ارسال ارجاع.
  • origin: فقط دامنه اصلی.
  • same-origin: فقط همان دامنه.
  • strict-origin: فقط در HTTPS.
  • unsafe-url: URL کامل.

✏️ مثال: 

<script src="script.js" referrerpolicy="no-referrer"></script>

🧩 ساختار و اتریبیوت‌ها تگ noscript

تگ <noscript> محتوای HTML رو برای وقتی JS غیرفعاله نشون می‌ده. ساختار:

<noscript>
    <p>جاوااسکریپت غیرفعاله!</p>
</noscript>

🧩 اتریبیوت‌ها: هیچ اتریبیوت خاصی نداره و فقط محتوای HTML می‌گیره.

💡 کاربردها، مزایا و معایب

💡 کاربردهای تگ script

  • اجرای کدهای پویا (مثل انیمیشن، اعتبارسنجی فرم).
  • بارگذاری کتابخونه‌ها (مثل React، jQuery).
  • ابزارهای تحلیلی (مثل GA).
  • مدیریت DOM و تعاملات کاربر.

✅ مزایا تگ script

  • ایجاد صفحات تعاملی.
  • انعطاف‌پذیری با اسکریپت‌های داخلی/خارجی.
  • بهینه‌سازی با defer و async.
  • امنیت با nonce و integrity.

❌ معایب تگ script

  • بلاک کردن رندر بدون defer/async.
  • پیچیدگی تو پروژه‌های بزرگ.
  • مشکلات دسترسی‌پذیری بدون <noscript>.

💡 کاربردهای تگ noscript

  • محتوای جایگزین برای کاربرای بدون JS.
  • بهبود دسترسی‌پذیری برای صفحه‌خوان‌ها.
  • لینک به نسخه‌های استاتیک سایت.

✅ مزایا تگ noscript

  • دسترسی‌پذیری بالا.
  • محتوای قابل کراول برای سئو.
  • تجربه کاربری جایگزین.

❌ معایب تگ noscript

  • محدود به HTML استاتیک.
  • اغلب نادیده گرفته می‌شه.

💡 تاثیرات سئو تکنیکال، دسترسی‌پذیری و عملکرد

چگونه این تگ‌ها روی سئو و UX اثر می‌ذارن؟

  • سئو تکنیکال:
    • defer و async از بلاک کردن رندر جلوگیری می‌کنن، بهبود LCP.
    • <noscript> محتوای قابل کراول رو برای SEO فراهم می‌کنه.
    • JS سنگین سرعت رو کاهش می‌ده.
  • دسترسی‌پذیری:
    • <noscript> برای کاربرای بدون JS یا صفحه‌خوان‌ها حیاتیه.
    • اسکریپت‌ها باید با ARIA هماهنگ باشن.
  • عملکرد:
    • بارگذاری غیرهمزمان سرعت رندر رو بالا می‌بره.
    • اسکریپت‌های بزرگ CPU رو مشغول می‌کنن.
  • UX:
    • JS تعاملات جذاب ایجاد می‌کنه.
    • <noscript> تجربه جایگزین رو تضمین می‌کنه.

📝 مثال‌های سئو محور

1. اسکریپت تحلیلی با async

<head>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-123"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-123');
    </script>
</head>

✨ چرا سئو محوره؟ async از تاخیر رندر جلوگیری می‌کنه، تحلیل بدون تاثیر روی سرعت.

2. ماژول ES6 با defer

<head>
    <script type="module" defer src="/js/module.js"></script>
</head>

✨ چرا سئو محوره؟ defer و module اجرای مدرن و بهینه رو تضمین می‌کنن.

3. noscript برای دسترسی‌پذیری

<body>
    <div id="dynamic">در حال بارگذاری...</div>
    <noscript>
        <p>جاوااسکریپت غیرفعاله! <a href="/static">نسخه استاتیک</a> رو ببینید.</p>
    </noscript>
</body>

✨ چرا سئو محوره؟ محتوای جایگزین برای کراول گوگل و دسترسی‌پذیری.

4. امنیت با nonce

<head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-xyz123'">
    <script nonce="xyz123" src="/js/secure.js"></script>
</head>

✨ چرا سئو محوره؟ امنیت بالا اعتماد گوگل رو جلب می‌کنه.

🚀 ترفندهای بهینه‌سازی و بهترین شیوه‌ها

  1. استفاده از defer یا async: برای اسکریپت‌های خارجی تا رندر سریع‌تر بشه.
  2. محتوای <noscript> واضح: پیام یا لینک جایگزین برای دسترسی‌پذیری.
  3. مینیمال کردن JS: کد فشرده با ابزارهایی مثل UglifyJS.
  4. امنیت با CSP: از nonce و integrity استفاده کن.
  5. قرار دادن در <head> یا پایان <body>: برای بهینه‌سازی رندر.

🆚 مقایسه تگ‌های <script> و <noscript

ویژگی / تگ<script><noscript>
کاربرد اصلیاجرای کدهای جاوااسکریپتنمایش محتوای جایگزین وقتی جاوااسکریپت غیرفعال یا پشتیبانی نشه
محل استفادهداخل <head> یا انتهای <body>داخل <body>
ویژگی‌های مهمsrc, type, async, deferویژگی خاصی نداره
محتواکد جاوااسکریپت یا لینک به فایل خارجیمتن، HTML ساده یا پیام راهنما
تاثیر بر کاربراضافه کردن رفتار پویا و تعامل‌پذیری به سایتاطلاع‌رسانی به کاربر درباره نیاز به فعال‌سازی جاوااسکریپت
تاثیر بر سئوغیرمستقیم (بهینه‌سازی تجربه کاربری، تاثیر روی نرخ پرش و سرعت سایت)می‌تونه مستقیم باشه چون محتوای داخلش برای موتور جستجو قابل خوندن و ایندکسه
زمان اجرابسته به async یا defer (یا همزمان با HTML یا بعد از بارگذاری کامل)فقط وقتی اجرا می‌شه که جاوااسکریپت غیرفعال باشه
نمونه کاربردیاعتبارسنجی فرم، تغییر محتوای صفحه، درخواست AJAXنمایش پیام “لطفا جاوااسکریپت مرورگر رو فعال کنید”

🚫 اشتباهات رایج و راه‌حل‌ها

  • بدون defer/async: باعث بلاک رندر می‌شه.راه‌حل: همیشه برای اسکریپت‌های خارجی اضافه کن.
  • نادیده گرفتن <noscript>: دسترسی‌پذیری رو خراب می‌کنه.راه‌حل: محتوای جایگزین واضح بذار.
  • اسکریپت سنگین: سرعت رو کم می‌کنه.راه‌حل: کد رو مینیمال و فشرده کن.
  • عدم امنیت: بدون nonce یا integrity.راه‌حل: CSP رو پیاده کن.

❓ سوالات متداول

  • فرق async و defer چیه؟
    • async: اسکریپت همزمان با بارگذاری HTML اجرا می‌شه.
    • defer: اسکریپت بعد از بارگذاری کامل HTML اجرا می‌شه.
  • جاوااسکریپت داخل head بذاریم یا body؟
    بهتره پایین <body> باشه یا با defer توی <head> استفاده بشه.
  • <noscript> روی سئو تاثیر داره؟
    بله، چون موتورهای جستجو محتوای داخلش رو هم می‌بینن و می‌تونه پیام جایگزین باشه.

🎯 پروژه عملی

یک صفحه بساز که:

  • با استفاده از <script> یه پیام خوشامدگویی توی کنسول چاپ کنه.
  • داخل <noscript> یه پیام نمایش بده که “برای استفاده از این سایت، جاوااسکریپت رو فعال کن”.

💡 نکته: فایل اسکریپت رو یا بذار توی <head> با ویژگی defer یا آخر <body> تا مطمئن بشی قبل از اجرا، HTML کامل بارگذاری شده.در ضمن، یادت نره اگه تازه‌کاری، کدات رو تو W3C Validator چک کنی تا مطمئن شی همه‌چیز رو درست نوشتی.

🏁 جمع‌بندی

تگ‌ <script> و تگ <noscript> ابزارهای قدرتمندی برای ساخت صفحات پویا، قابل دسترس، و سئو شده‌ان. با استفاده درست از اتریبیوت‌ها، ارائه محتوای جایگزین، و رعایت تکنیک‌های سئوی تکنیکال، می‌تونی سایتت رو به اوج برسونی. حالا وقتشه دست به کد بشی! ما تا آخر خط باهاتیم!

💬 ایده‌هات رو فریاد بزن! 

نظرت درباره تگ‌ <script> و تگ <noscript> چیه؟ دوست داری چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنته؟ تو نظرات برامون بنویس! تیم حرفه‌ای پشتیبانی با جون و دل منتظرته!

شهرام نجفی

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.

نظر شما در این مورد چیه؟