Tài liệu HTML chạy trực tiếp: Redirect

Q: Làm sao chuyển hướng một trang HTML sang trang khác?

Thêm vào của trang cũ, và một liên kết bình thường tới trang mới trong body để dự phòng. Nếu bạn quản lý được máy chủ, redirect 301 là cách tốt hơn.

Q: Làm sao chuyển trang sau 5 giây trong HTML?

Đặt con số trước dấu chấm phẩy bằng độ trễ tính theo giây: . Hãy báo trên trang rằng người đọc sắp được chuyển hướng, và đưa cho họ một liên kết.

Q: Làm sao để trang tự động tải lại?

Dùng meta refresh có độ trễ và không có URL: tải lại trang sau mỗi 30 giây. Cách này tải lại toàn bộ trang và làm gián đoạn người đọc, nên với dữ liệu trực tiếp, cập nhật một phần trang bằng JavaScript thường tốt hơn.

Q: Làm sao chuyển hướng bằng JavaScript?

Dùng location.replace('https://example.com/new'). Lệnh này thay trang hiện tại trong lịch sử duyệt, nên nút quay lại không đưa người dùng về trang đã chuyển hướng. location.href = url cũng chạy được nhưng giữ trang cũ trong lịch sử.

Redirect trong HTML: meta refresh, JavaScript và 301

Chuyển hướng một trang sang trang khác bằng thẻ meta refresh trong HTML thuần, bằng JavaScript, hoặc trên máy chủ. Tìm hiểu cú pháp meta refresh, cách tự động tải lại trang, vì sao redirect 301 trên máy chủ là lựa chọn tốt hơn, và công cụ tìm kiếm xử lý từng cách ra sao.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Chuyển hướng bằng thẻ meta refresh

Trong HTML thuần, một redirect là thẻ <meta http-equiv="refresh"> nằm trong <head> của trang cũ:

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

Con số là độ trễ tính theo giây, tiếp theo là dấu chấm phẩy, rồi url= và địa chỉ cần chuyển tới. 0 chuyển hướng ngay khi trang tải xong. Đây là một tệp "trang đã chuyển" hoàn chỉnh. Độ trễ được đặt là một giờ để phần xem trước này đứng yên; trên trang thật, bạn sẽ dùng 0 hoặc vài giây:

<!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>

Hai phương án dự phòng giúp trang an toàn: liên kết hiển thị trên trang (cho những ai có trình duyệt không làm theo refresh, và cho người dùng trình đọc màn hình muốn tự chọn), và <link rel="canonical">, cho công cụ tìm kiếm biết URL nào là URL chính. Nếu bạn đổi độ trễ thành 0 ở đây, chính phần xem trước sẽ rời sang example.com; nhấn Đặt lại để lấy lại ví dụ.

Tự động tải lại trang

Bỏ URL đi, trang sẽ tự tải lại sau khoảng trễ. content="5" tải lại sau mỗi 5 giây. Khung đầu tiên bên dưới là một trang nhỏ có thẻ đó để bạn quan sát: thời điểm tải của nó nhảy sau mỗi 5 giây, và chữ bạn gõ vào ô nhập bị xóa sau mỗi lần tải lại. Khung thứ hai thì cập nhật đồng hồ bằng JavaScript, và giữ nguyên chữ bạn gõ:

<!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>

Refresh tải lại toàn bộ trang, nên mọi việc người đọc đang làm trên đó đều bị gián đoạn. Điều này chấp nhận được với một trang không ai tương tác, như màn hình trạng thái treo trên tường. Với dashboard, bảng tỉ số và bảng tin, chỉ cập nhật phần thay đổi, như khung thứ hai.

Chuyển hướng bằng JavaScript

Khi việc chuyển hướng phụ thuộc vào thứ mà chỉ trình duyệt biết (lựa chọn của người dùng, trạng thái đăng nhập, kích thước màn hình), hãy dùng 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';

Để chuyển hướng, location.replace gần như luôn là thứ bạn cần. Với location.href, nhấn Quay lại sẽ đưa về trang đã chuyển hướng, trang đó lại chuyển hướng tiếp, và người dùng bị kẹt.

Ưu tiên redirect phía máy chủ

Meta refresh hay script chỉ chạy sau khi trình duyệt đã tải trang cũ về. Redirect phía máy chủ trả lời request bằng một mã trạng thái và địa chỉ mới, trước khi bất kỳ HTML nào được gửi đi:

301 (moved permanently) hoặc 308: trang đã chuyển hẳn sang địa chỉ mới. Công cụ tìm kiếm chuyển thứ hạng của URL cũ sang URL mới.
302 (found) hoặc 307: chuyển tạm thời; URL cũ vẫn là URL chính.

Cách thiết lập tùy thuộc vào nơi bạn lưu trữ trang. Một vài dạng phổ biến:

# 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

Dùng meta refresh khi bạn hoàn toàn không thay đổi được máy chủ, chẳng hạn trên một host tĩnh không hỗ trợ quy tắc redirect. Google xem meta refresh tức thì là redirect vĩnh viễn và meta refresh có độ trễ là redirect tạm thời, nên độ trễ 0 gần với 301 hơn.

Redirect có hẹn giờ và khả năng tiếp cận

Một redirect có độ trễ có thể đưa người đọc đi ngay giữa câu. Hướng dẫn về khả năng tiếp cận (WCAG) coi redirect hẹn giờ là lỗi; redirect tức thì thì không sao. Nếu buộc phải chờ, hãy ghi rõ trên trang ("Bạn sẽ được chuyển hướng sau 10 giây"), và luôn kèm liên kết để mọi người tự đi theo nhịp của mình.

Lỗi thường gặp

Vòng lặp redirect. Hai trang refresh qua lại sang nhau khiến người đọc bị đẩy qua đẩy lại mãi. Hãy kiểm tra trang đích sẽ đưa người dùng đi đâu.
URL tương đối trỏ sai chỗ. url=new-page được tính theo URL hiện tại, nên từ /docs/old nó sẽ đi tới /docs/new-page. Dùng đường dẫn đầy đủ như url=/new-page khi không chắc chắn.
Không có liên kết dự phòng. Luôn thêm một liên kết bình thường tới trang mới trong body.
Dùng location.href để chuyển hướng. Khi đó nút quay lại dẫn vào vòng lặp redirect. Hãy dùng location.replace.
Dùng meta refresh khi bạn quản lý được máy chủ. Hãy cấu hình 301; cách này nhanh hơn và rõ ràng hơn với mọi công cụ.

Câu hỏi thường gặp

Làm sao chuyển hướng một trang HTML sang trang khác?

Thêm <meta http-equiv="refresh" content="0; url=https://example.com/new"> vào <head> của trang cũ, và một liên kết bình thường tới trang mới trong body để dự phòng. Nếu bạn quản lý được máy chủ, redirect 301 là cách tốt hơn.

Làm sao chuyển trang sau 5 giây trong HTML?

Đặt con số trước dấu chấm phẩy bằng độ trễ tính theo giây: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Hãy báo trên trang rằng người đọc sắp được chuyển hướng, và đưa cho họ một liên kết.

Làm sao để trang tự động tải lại?

Dùng meta refresh có độ trễ và không có URL: <meta http-equiv="refresh" content="30"> tải lại trang sau mỗi 30 giây. Cách này tải lại toàn bộ trang và làm gián đoạn người đọc, nên với dữ liệu trực tiếp, cập nhật một phần trang bằng JavaScript thường tốt hơn.

Redirect bằng meta refresh có hại cho SEO không?

Google có đi theo nó: meta refresh tức thì (độ trễ 0) được xem như redirect vĩnh viễn, còn meta refresh có độ trễ được xem như redirect tạm thời. Dù vậy, 301 phía máy chủ vẫn là cách được khuyên dùng, vì nhanh hơn và mọi trình thu thập dữ liệu lẫn trình duyệt đều hiểu.

Làm sao chuyển hướng bằng JavaScript?

Dùng location.replace('https://example.com/new'). Lệnh này thay trang hiện tại trong lịch sử duyệt, nên nút quay lại không đưa người dùng về trang đã chuyển hướng. location.href = url cũng chạy được nhưng giữ trang cũ trong lịch sử.

Khái niệm liên quan