وثائق HTML قابلة للتشغيل: إعادة التوجيه

Q: كيف أعيد توجيه صفحة HTML إلى صفحة أخرى؟

أضف إلى الصفحة القديمة، ورابطًا عاديًا إلى الصفحة الجديدة في body كبديل احتياطي. وإن كنت تتحكم في الخادم، فإعادة التوجيه 301 أفضل.

Q: كيف أعيد التوجيه بعد 5 ثوانٍ في HTML؟

اجعل الرقم الذي قبل الفاصلة المنقوطة مدة التأخير بالثواني: . أخبر القارئ في الصفحة أنه سيُعاد توجيهه، وأعطه رابطًا.

Q: كيف أجعل الصفحة تحدّث نفسها تلقائيًا؟

استخدم meta refresh بتأخير ومن دون عنوان: تعيد تحميل الصفحة كل 30 ثانية. فهي تعيد تحميل الصفحة كلها وتقاطع القارئ، لذلك في البيانات الحية يكون تحديث جزء من الصفحة بـ JavaScript أفضل عادةً.

Q: كيف أعيد التوجيه بـ JavaScript؟

استخدم location.replace('https://example.com/new'). تستبدل الصفحة الحالية في السجل، فلا يعيد زر الرجوع إلى الصفحة التي أعادت التوجيه. وlocation.href = url تعمل أيضًا لكنها تُبقي الصفحة القديمة في السجل.

إعادة التوجيه بوسم meta refresh

في HTML العادي، إعادة التوجيه وسم <meta http-equiv="refresh"> في <head> الصفحة القديمة:

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

الرقم هو مدة التأخير بالثواني، ثم فاصلة منقوطة، ثم url= والعنوان المطلوب. القيمة 0 تعيد التوجيه بمجرد تحميل الصفحة. هذا ملف كامل لصفحة «انتقلت الصفحة». التأخير مضبوط على ساعة كي تبقى هذه المعاينة في مكانها، وفي صفحة حقيقية تستخدم 0 أو بضع ثوانٍ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

بديلان احتياطيان يجعلان الصفحة آمنة: الرابط الظاهر (لمن لا يتبع متصفحه التحديث، ولمستخدمي قارئات الشاشة الذين يريدون الاختيار بأنفسهم)، و<link rel="canonical"> الذي يخبر محركات البحث بالعنوان الحقيقي. إذا غيّرت التأخير إلى 0 هنا، فستغادر المعاينة نفسها إلى example.com، فاضغط Reset لاستعادة المثال.

تحديث الصفحة تلقائيًا

احذف العنوان وستعيد الصفحة تحميل نفسها بعد مدة التأخير. content="5" تعيد التحميل كل 5 ثوانٍ. الصندوق الأول أدناه صفحة صغيرة فيها هذا الوسم، فيمكنك مراقبتها: وقت تحميلها يقفز كل 5 ثوانٍ، والنص الذي تكتبه في حقلها يُمسح بإعادة التحميل. أما الصندوق الثاني فيُبقي ساعته محدّثة بـ JavaScript بدلًا من ذلك، ويحتفظ بنصك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

التحديث يحمّل الصفحة كلها من جديد، فيُقاطع ما كان القارئ يفعله فيها. هذا مقبول لصفحة لا يتفاعل معها أحد، مثل شاشة حالة معلقة على الحائط. أما لوحات المعلومات والنتائج والموجزات فحدّث الجزء الذي يتغير فقط، كما يفعل الصندوق الثاني.

إعادة التوجيه بـ JavaScript

حين تعتمد إعادة التوجيه على شيء لا يعرفه إلا المتصفح (اختيار المستخدم، حالة تسجيل الدخول، حجم الشاشة)، استخدم JavaScript:

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

لإعادة التوجيه، location.replace هي ما تريده في معظم الحالات. مع location.href يعيدك زر الرجوع إلى الصفحة التي أعادت التوجيه، فتعيد التوجيه مرة أخرى، ويعلق المستخدم.

فضّل إعادة التوجيه على الخادم

meta refresh أو السكربت لا يعملان إلا بعد أن ينزّل المتصفح الصفحة القديمة. أما إعادة التوجيه على الخادم فتجيب عن الطلب برمز حالة والعنوان الجديد، قبل إرسال أي HTML:

301 (نُقلت نهائيًا) أو 308: للصفحة موطن جديد دائم. تنقل محركات البحث ترتيب العنوان القديم إلى الجديد.
302 (وُجدت) أو 307: نقل مؤقت، ويبقى العنوان القديم هو الأساسي.

طريقة الإعداد تعتمد على استضافتك. بعض الأشكال الشائعة:

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

استخدم meta refresh حين لا تستطيع تغيير الخادم أبدًا، مثلًا على استضافة ثابتة بلا قواعد إعادة توجيه. يعامل Google meta refresh الفوري كإعادة توجيه دائمة والمؤجل كإعادة توجيه مؤقتة، لذلك فالتأخير 0 هو الأقرب إلى 301.

إعادة التوجيه المؤقتة وإمكانية الوصول

إعادة التوجيه بتأخير قد تنقل القارئ بعيدًا في منتصف جملة. إرشادات إمكانية الوصول (WCAG) تعدّ إعادة التوجيه الموقوتة إخفاقًا، أما إعادة التوجيه الفورية فلا بأس بها. إن كان لا بد من الانتظار، فقل ذلك في الصفحة («ستُحوَّل خلال 10 ثوانٍ»)، وضع الرابط دائمًا كي يتمكن الناس من الانتقال بالسرعة التي تناسبهم.

أخطاء شائعة

حلقة إعادة توجيه. صفحتان تحوّل كل منهما إلى الأخرى تتقاذفان القارئ إلى الأبد. تحقق إلى أين ترسل الصفحة الهدف الناس.
عنوان نسبي يشير إلى مكان خاطئ. يُحل url=new-page بالنسبة إلى العنوان الحالي، فمن /docs/old يذهب إلى /docs/new-page. استخدم مسارًا كاملًا مثل url=/new-page عند الشك.
غياب رابط احتياطي. أضف دائمًا رابطًا عاديًا إلى الصفحة الجديدة في body.
استخدام location.href لإعادة التوجيه. يقود زر الرجوع حينها إلى حلقة إعادة توجيه. استخدم location.replace.
استخدام meta refresh وأنت تتحكم في الخادم. اضبط 301 بدلًا منه، فهي أسرع وأوضح لكل أداة.

الأسئلة الشائعة

كيف أعيد توجيه صفحة HTML إلى صفحة أخرى؟

أضف <meta http-equiv="refresh" content="0; url=https://example.com/new"> إلى <head> الصفحة القديمة، ورابطًا عاديًا إلى الصفحة الجديدة في body كبديل احتياطي. وإن كنت تتحكم في الخادم، فإعادة التوجيه 301 أفضل.

كيف أعيد التوجيه بعد 5 ثوانٍ في HTML؟

اجعل الرقم الذي قبل الفاصلة المنقوطة مدة التأخير بالثواني: <meta http-equiv="refresh" content="5; url=https://example.com/new">. أخبر القارئ في الصفحة أنه سيُعاد توجيهه، وأعطه رابطًا.

كيف أجعل الصفحة تحدّث نفسها تلقائيًا؟

استخدم meta refresh بتأخير ومن دون عنوان: <meta http-equiv="refresh" content="30"> تعيد تحميل الصفحة كل 30 ثانية. فهي تعيد تحميل الصفحة كلها وتقاطع القارئ، لذلك في البيانات الحية يكون تحديث جزء من الصفحة بـ JavaScript أفضل عادةً.

هل إعادة التوجيه بـ meta refresh سيئة لتحسين محركات البحث؟

يتبعها Google: meta refresh الفوري (تأخير 0) يُعامل كإعادة توجيه دائمة، والمؤجل كإعادة توجيه مؤقتة. ومع ذلك تبقى 301 على الخادم الطريقة الموصى بها، لأنها أسرع ويفهمها كل زاحف وكل متصفح.

كيف أعيد التوجيه بـ JavaScript؟

استخدم location.replace('https://example.com/new'). تستبدل الصفحة الحالية في السجل، فلا يعيد زر الرجوع إلى الصفحة التي أعادت التوجيه. وlocation.href = url تعمل أيضًا لكنها تُبقي الصفحة القديمة في السجل.

مفاهيم ذات صلة

إعادة التوجيه في HTML: meta refresh وJavaScript و301