תיעוד HTML עם דוגמאות להרצה: הפניה (Redirect)

Q: איך מפנים עמוד HTML לעמוד אחר?

הוסיפו ל- של העמוד הישן, וקישור רגיל לעמוד החדש בגוף העמוד כגיבוי. אם השרת בשליטתכם, הפניית 301 עדיפה.

Q: איך מפנים אחרי 5 שניות ב-HTML?

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

Q: איך גורמים לעמוד להתרענן אוטומטית?

השתמשו ב-meta refresh עם השהיה ובלי URL: טוען מחדש את העמוד כל 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">, שאומר למנועי חיפוש איזה URL הוא האמיתי. אם תשנו כאן את ההשהיה ל-0, התצוגה המקדימה עצמה תעבור ל-example.com; לחצו על Reset כדי לקבל את הדוגמה בחזרה.

רענון אוטומטי של עמוד

השמיטו את ה-URL והעמוד טוען את עצמו מחדש אחרי ההשהיה. 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 (moved permanently) או 308: לעמוד יש בית חדש לתמיד. מנועי חיפוש מעבירים את הדירוג של ה-URL הישן לחדש.
302 (found) או 307: מעבר זמני; ה-URL הישן נשאר הראשי.

איך מגדירים הפניה תלוי בשירות האחסון שלכם. כמה צורות נפוצות:

# 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) מחשיבות הפניות מתוזמנות לכישלון; הפניה מיידית בסדר. אם חייבים לחכות, כתבו את זה בעמוד ("You will be redirected in 10 seconds"), ותמיד כללו את הקישור כדי שאנשים יוכלו לעבור בקצב שלהם.

טעויות נפוצות

לולאת הפניות. שני עמודים שמרעננים זה לזה מקפיצים את הקורא לנצח. בדקו לאן עמוד היעד שולח אנשים.
URL יחסי שמצביע למקום הלא נכון. url=new-page מפוענח ביחס ל-URL הנוכחי, כך שמ-/docs/old הוא מוביל ל-/docs/new-page. השתמשו בנתיב מלא כמו url=/new-page כשיש ספק.
אין קישור גיבוי. הוסיפו תמיד קישור רגיל לעמוד החדש בגוף העמוד.
שימוש ב-location.href להפניות. כפתור החזרה מוביל אז ללולאת הפניות. השתמשו ב-location.replace.
שימוש ב-meta refresh כשהשרת בשליטתכם. הגדירו 301 במקום; זה מהיר יותר וברור יותר לכל כלי.

שאלות נפוצות

איך מפנים עמוד HTML לעמוד אחר?

הוסיפו <meta http-equiv="refresh" content="0; url=https://example.com/new"> ל-<head> של העמוד הישן, וקישור רגיל לעמוד החדש בגוף העמוד כגיבוי. אם השרת בשליטתכם, הפניית 301 עדיפה.

איך מפנים אחרי 5 שניות ב-HTML?

קבעו את המספר שלפני הנקודה-פסיק להשהיה בשניות: <meta http-equiv="refresh" content="5; url=https://example.com/new">. כתבו בעמוד שהקורא יופנה, ותנו לו קישור.

איך גורמים לעמוד להתרענן אוטומטית?

השתמשו ב-meta refresh עם השהיה ובלי URL: <meta http-equiv="refresh" content="30"> טוען מחדש את העמוד כל 30 שניות. הוא טוען מחדש את כל העמוד ומפריע לקורא, אז לנתונים חיים עדכון של חלק מהעמוד עם JavaScript בדרך כלל עדיף.

האם הפניית meta refresh רעה ל-SEO?

Google עוקבת אחריה: meta refresh מיידי (השהיה 0) נחשב כמו הפניה קבועה, ומושהה נחשב כמו הפניה זמנית. הפניית 301 בצד השרת היא עדיין הדרך המומלצת, כי היא מהירה יותר וכל סורק ודפדפן מבינים אותה.

איך מפנים עם JavaScript?

השתמשו ב-location.replace('https://example.com/new'). הוא מחליף את העמוד הנוכחי בהיסטוריה, כך שכפתור החזרה לא חוזר לעמוד שהפנה. גם location.href = url עובד, אבל משאיר את העמוד הישן בהיסטוריה.

מושגים קשורים