JavaScript Redirect: Cách chuyển hướng đến URL mới

JavaScript redirect sử dụng ngôn ngữ lập trình JavaScript (JS) để đưa người dùng từ URL này sang URL khác.

Bạn có thể dùng JS redirect để chuyển người dùng đến trang xác nhận sau khi họ gửi biểu mẫu hoặc cung cấp phương án chuyển hướng dự phòng nếu một trang bị xóa, chẳng hạn.

Tuy nhiên, nhìn chung, chúng không được khuyến nghị cho SEO vì search engine có thể gặp khó khăn khi Crawling và Indexing các website phụ thuộc vào chúng.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo redirect bằng JS và đề xuất các giải pháp thay thế.

Cách chuyển hướng bằng JavaScript

Có ba cách chính để chuyển hướng đến URL khác bằng JavaScript:

1. window.location.href
2. location.assign()
3. location.replace()

Thiết lập thuộc tính window.location.href mới

Bạn có thể dùng thuộc tính window.location.href trong JavaScript để lấy hoặc thiết lập URL của trang web hiện tại.

Việc dùng "window.location.href" để chuyển hướng mô phỏng thao tác nhấp vào một siêu liên kết. Cách này thêm một mục mới vào lịch sử phiên của trình duyệt, cho phép người dùng nhấn nút “back” để quay lại trang trước đó.

Để chuyển hướng người dùng đến URL khác, bạn có thể gán URL mới cho thuộc tính này.

Cú pháp như sau:

window.location.href = ‘https://exampleURL.com/’;

Khi được gắn với một thay đổi do tương tác của người dùng kích hoạt, chẳng hạn như nhấp vào nút, đoạn mã này sẽ chuyển hướng người dùng đến “https://exampleURL.com/”

Cách thực hiện?

Bạn cần thêm đoạn mã vào bên trong các thẻ <script> nằm bên trong phần <head> của trang web, sau đó thêm một bộ xử lý “event handler” vào một nút.

Bạn có thể thực hiện như sau:

<html>
<head>
<script>
function myFunction() {
window.location.href = "https://exampleURL.com/";
}
</script>
</head>
<body>
<h2>Chuyển hướng đến trang web</h2>
<p>Phương thức location.href chuyển hướng người dùng đến một trang web mới:</p>
<button onclick="myFunction()">Redirect</button>
</body>
</html>

Khi người dùng nhấp vào nút “Redirect”, thao tác này kích hoạt bộ xử lý sự kiện onclick và gọi hàm myFunction() . Khi hàm myFunction() thay đổi giá trị của "location.href" thành "https://exampleURL.com/", trình duyệt sẽ được chỉ dẫn truy cập URL đó.

Hãy cùng xem thêm hai trường hợp sử dụng JavaScript redirect.

Ví dụ dưới đây minh họa cách dùng setTimeout() để tạo redirect bằng JavaScript.

Đây là một hàm JavaScript tích hợp, cho phép bạn chạy một hàm khác sau một khoảng thời gian nhất định (10 giây trong ví dụ bên dưới).

<html>
<head>
<script type="text/JavaScript">
function Redirect() {
window.location = "https://exampleURL.com/";
}
document.write("You will be redirected to the main page in 10 seconds.");
setTimeout(function() {
Redirect();
}, 10000);
</script>
</head>
</html>

Một trường hợp sử dụng khác là chuyển hướng người dùng dựa trên trình duyệt họ đang dùng.

<html>
<head>
<title>Your Page Title</title>
<script type="text/javascript">
window.onload = function() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.includes('chrome')) {
window.location.href = "http://www.location.com/chrome";
} else if (userAgent.includes('safari')) {
window.location.href = "http://www.location.com/safari";
} else {
window.location.href = "http://www.location.com/other";
}
}
</script>
</head>
<body>
<!-- Your body content goes here -->
</body>
</html>

Mẹo hay: Tránh tạo redirect bằng JavaScript trong header mà không gắn với hành động của người dùng để ngăn nguy cơ xảy ra vòng lặp redirect (sẽ nói thêm về vấn đề này sau). Để ngăn người dùng sử dụng nút “back”, hãy dùng "window.location.replace."

Tạo redirect bằng phương thức location.assign()

Bạn có thể dùng "window.location.assign" as an alternative to "window.location.href" để tạo redirect.

Cú pháp như sau:

window.location.assign(‘https://www.exampleURL.com/’);

Đây là cách viết trong thẻ script:

<script type="text/JavaScript">
function Redirect() {
window.location.assign("https://exampleURL.com/");
}
</script>

Với người dùng, redirect bằng "window.location.assign()" trông giống hệt như dùng "window.location.href".

Nguyên nhân là:

• Cả hai đều tạo một mục mới trong lịch sử phiên duyệt web (tương tự như khi nhấp vào liên kết).
• Cả hai đều cho phép người dùng quay lại và xem trang trước đó.

Tương tự như "window.location.href," phương thức này yêu cầu trình duyệt tải URL được chỉ định và thêm trang mới vào lịch sử phiên, nhờ đó người dùng có thể dùng nút “back” của trình duyệt để quay lại trang trước.

Tuy nhiên, "window.location.assign()" gọi một hàm để hiển thị trang tại URL được chỉ định. Tùy thuộc vào trình duyệt, cách này có thể chậm hơn so với việc chỉ đặt thuộc tính href mới bằng "window.location.href".

Nhưng nhìn chung, cả "window.location.assign()" lẫn việc thay đổi thuộc tính location.href đều hoạt động bình thường. Việc chọn cách nào chủ yếu tùy thuộc vào sở thích cá nhân và phong cách viết code.

Chuyển hướng bằng phương thức location.replace()

Tương tự "window.location.assign()", "window.location.replace()" gọi một hàm để hiển thị tài liệu mới tại URL được chỉ định.

Cú pháp như sau:

window.location.replace('https://www.exampleURL.com/');

Đây là cách đoạn mã trông như thế nào bên trong thẻ script:

<script type="text/JavaScript">
function Redirect() {
window.location.replace("https://exampleURL.com/");
}
</script>

Không giống như việc thiết lập thuộc tính location mới hoặc dùng "window.location.assign()", phương thức replace không tạo mục mới trong lịch sử phiên duyệt web của bạn.

Thay vào đó, phương thức này thay thế mục hiện tại. Điều đó có nghĩa là người dùng không thể nhấp vào nút “back” để quay lại trang trước khi chuyển hướng.

Vì sao bạn lại muốn làm vậy?

Một số trường hợp có thể dùng phương thức "window.location.replace()" gồm:

• Chuyển hướng sau khi đăng nhập: Sau khi đăng nhập thành công, người dùng được đưa đến nội dung chính của trang web; trang đăng nhập sẽ được chủ ý loại khỏi lịch sử trình duyệt để tránh việc vô tình quay lại bằng nút “back”

• Xác thực người dùng: Chuyển hướng người dùng chưa xác thực đến trang đăng nhập, đồng thời chặn họ dùng nút “back” để truy cập trang trước đó

• Gửi biểu mẫu thành công: Sau khi gửi biểu mẫu, "window.location.replace()" có thể đưa người dùng đến trang xác nhận thành công, ngăn họ gửi lại biểu mẫu

• Định vị địa lý: Dựa trên vị trí địa lý của người dùng, bạn có thể chuyển hướng họ đến phiên bản trang web phù hợp hơn với khu vực của họ, chẳng hạn như trang web được dịch sang ngôn ngữ của họ

Tóm lại:

Dùng "window.location.replace()" khi bạn không muốn người dùng có thể quay lại trang ban đầu bằng nút “back”.

Dùng "window.location.assign()" hoặc "window.location.href" khi bạn muốn người dùng có thể quay lại trang ban đầu bằng nút “back”.

Tuy nhiên, dù bạn có thể chuyển hướng người dùng đến trang mới bằng các phương thức JavaScript như "window.location.assign()" hoặc "window.location.href", thông thường bạn nên dùng chuyển hướng phía máy chủ, chẳng hạn như HTTP redirects, thay thế.

Lưu ý: Nếu bạn mới bắt đầu hoặc muốn thực hành JavaScript, bạn có thể truy cập một trang web như W3Schools, nơi cung cấp một W3Schools Tryit Editor dành cho JavaScript, HTML, CSS và nhiều nội dung khác:

Google hiểu và xử lý JavaScript Redirects như thế nào

Google xử lý JavaScript redirects theo cách giống như khi thực thi và render JavaScript trong quá trình Crawling và Indexing website.

Đây là cách hoạt động, theo Google:

Trình thu thập dữ liệu web của Google, Googlebot, ban đầu Indexing nội dung HTML của một trang web. Googlebot đưa mọi JavaScript được phát hiện, bao gồm cả các lượt chuyển hướng, vào “Render Queue” để xử lý sau.

Quy trình gồm hai bước này giúp Google nhanh chóng thêm nội dung quan trọng vào chỉ mục tìm kiếmJavaScript được xử lý sau vì Google cần nhiều tài nguyên hơn để xử lý ngôn ngữ này.

Tìm hiểu thêm: JavaScript SEO: Cách tối ưu JS cho công cụ tìm kiếm

Tuy có khả năng xử lý các lệnh chuyển hướng JavaScript, Google khuyên bạn nên tránh sử dụng chúng nếu có thể, do chúng tiêu tốn nhiều tài nguyên và mất thời gian xử lý.

Điều này cũng được John Mueller nhắc đến trong video SEO Office Hours tháng 6 năm 2022 (11:25).

Vì vậy, các hành động do JavaScript kích hoạt, chẳng hạn như chuyển hướng sau khi nhấp vào nút hoặc liên kết, có thể không được ghi nhận. Do đó, Google ưu tiên các lệnh chuyển hướng phía máy chủ, chẳng hạn như lệnh chuyển hướng HTTP—vì chúng hiệu quả, đáng tin cậy hơn và mang lại nhiều lợi ích cho SEO .

Lệnh chuyển hướng HTTP có một số ưu điểm so với lệnh chuyển hướng JavaScript, bao gồm:

• Lịch sử điều hướng nhất quán: Lệnh chuyển hướng HTTP không ảnh hưởng đến lịch sử điều hướng của người dùng. Khác với phương thức “location.replace()”, người dùng vẫn có thể dùng nút quay lại để trở về các trang trước đó.

• Thân thiện với SEO: Lệnh chuyển hướng HTTP cung cấp chỉ dẫn rõ ràng cho công cụ tìm kiếm khi trang được chuyển đi, giúp duy trì thứ hạng SEO. Ví dụ, khác với lệnh chuyển hướng JS, 301 Redirect cho công cụ tìm kiếm biết nội dung đã được chuyển vĩnh viễn sang URL mới.

• Hiệu suất: Lệnh chuyển hướng HTTP diễn ra ở cấp máy chủ trước khi nội dung được gửi đến trình duyệt. Nhờ đó, chúng có thể nhanh hơn lệnh chuyển hướng JavaScript và cải thiện tốc độ tải trang

• Độ tin cậy: Người dùng có thể tắt JavaScript vì lý do bảo mật và quyền riêng tư. Lệnh chuyển hướng HTTP vẫn hoạt động ngay cả khi người dùng đã tắt JavaScript, nên đáng tin cậy hơn.

Tìm hiểu thêm: Hướng dẫn toàn diện về lệnh chuyển hướng: Giải thích về chuyển hướng URL

Cách xác định vấn đề với lệnh chuyển hướng JavaScript và HTTP

Khi làm việc với lệnh chuyển hướng JavaScript và HTTP, những vấn đề phổ biến nhất bạn có thể gặp phải gồm:

• Chuỗi chuyển hướng và vòng lặp chuyển hướng
• Liên kết đến các trang có lệnh chuyển hướng

Chuỗi chuyển hướng và vòng lặp chuyển hướng

Bạn có thể vô tình tạo chuỗi chuyển hướng hoặc vòng lặp chuyển hướng khi xử lý các lệnh chuyển hướng.

Chuỗi chuyển hướng là gì?

Chuỗi chuyển hướng xảy ra khi bạn phải “hop” qua nhiều URL trước khi đến URL cuối cùng.

Ví dụ, giả sử ban đầu bạn có một trang với URL A. Sau đó, bạn quyết định chuyển hướng URL A đến URL mới B. Một thời gian sau, bạn chọn chuyển hướng URL B đến URL C.

Trong trường hợp này, bạn đã tạo một chuỗi chuyển hướng từ URL A đến URL B rồi đến URL C.

Google có thể xử lý dễ dàng tối đa 10 redirect “hops.”

Tuy nhiên, quá nhiều chuỗi chuyển hướng có thể gây ra vấn đề với Crawling website, có thể làm tăng thời gian tải trang. Điều này cũng có thể ảnh hưởng tiêu cực đến thứ hạng SEO và gây khó chịu cho người dùng.

Để giải quyết vấn đề này, hãy chuyển hướng URL A đến URL C (bỏ qua URL B).

Dưới đây là hình thức chuỗi chuyển hướng nên có:

redirect loop?

Redirect loop xảy ra khi một URL chuyển hướng đến URL khác, rồi URL thứ hai lại chuyển hướng trở về URL đầu tiên, tạo thành chu kỳ chuyển hướng bất tận.

Ví dụ:

Kiểu chuyển hướng này bị lỗi và không thể đưa khách truy cập hoặc công cụ tìm kiếm đến đúng URL mong muốn.

Để khắc phục redirect loop, hãy xác định trang “correct” và đảm bảo trang còn lại chuyển hướng đến đó. Sau đó, xóa mọi chuyển hướng thừa gây ra vòng lặp.

của Semrush Site Auditcó thể giúp bạn phát hiện cả chuỗi chuyển hướng HTTP và JavaScript.

Bằng cách nào?

Trước tiên, tạo một project hoặc nhấp vào project hiện có mà bạn muốn xem.

Chọn tab “Issues” rồi tìm “redirect chain” bằng cách nhập cụm từ này vào thanh tìm kiếm.

Nhấp vào “# redirect chains and loops.”

Thao tác này sẽ tạo báo cáo liệt kê tất cả lỗi chuỗi chuyển hướng hoặc vòng lặp trên site của bạn.

Báo cáo bao gồm các thông tin như URL của trang có redirect, loại redirect và “length” của chuỗi hoặc vòng lặp.

Sau đó, bạn có thể đăng nhập vào hệ thống quản lý nội dung (CMS) và khắc phục từng vấn đề.

Liên kết đến các trang có chuyển hướng

Giả sử bạn chuyển hướng một trang cũ sang trang mới. Một số trang trên site của bạn có thể vẫn liên kết đến trang cũ.

Nếu vậy, người dùng sẽ được đưa đến liên kết cũ, rồi từ đó được chuyển hướng đến URL mới.

Người dùng có thể không nhận ra điều này. Tuy nhiên, nếu không xử lý ngay từ đầu, lượt chuyển hướng bổ sung này có thể tạo thành “redirect chain”.

Vấn đề này sẽ xuất hiện như sau:

Tốt nhất là cập nhật các internal link cũ để liên kết trực tiếp đến URL trang mới.

Đây là cách hiển thị phù hợp:

Nhưng làm cách nào để tìm các liên kết trỏ đến trang chuyển hướng?

Bạn có thể thực hiện việc này bằng cách vào tab “Crawled Pages” trong Site Audit:

Tiếp theo, nhập URL cũ (URL đang được chuyển hướng) vào trường “Filter by Page URL”.

Nhấn “Enter” để xem báo cáo về URL bạn vừa nhập.

Trong mục “Incoming Internal Links”, bạn sẽ thấy danh sách các internal link trỏ đến URL cũ.

Để tránh các redirect không cần thiết, bạn chỉ cần thay link cũ bằng link mới.

Bằng cách nào?

Bạn cần truy cập từng trang và thay đổi link theo cách thủ công.

Câu hỏi thường gặp về JavaScript Redirect

JavaScript Redirect là gì?

JavaScript redirect là phương pháp sử dụng JavaScript để chuyển trình duyệt từ trang web hiện tại sang một URL khác. Phương pháp này thường được dùng để điều hướng có điều kiện hoặc thực hiện thay đổi khi người dùng tương tác, nhưng yêu cầu trình duyệt của người dùng phải bật JavaScript.

Redirect bằng JavaScript tốt hay xấu cho SEO?

JavaScript redirect có thể được sử dụng mà không nhất thiết gây hại cho SEO, nhưng nhìn chung ít được ưu tiên hơn redirect phía máy chủ. Nguyên nhân là chúng phụ thuộc vào việc JavaScript được bật trong trình duyệt của người dùng và có thể bị công cụ tìm kiếm bỏ sót trong quá trình Crawling và Indexing.

Giải pháp thay thế tốt nhất cho JavaScript Redirect là gì?

Giải pháp thay thế tốt nhất là sử dụng các phương thức redirect phía máy chủ, chẳng hạn như 301 Redirect, không phụ thuộc vào JavaScript và cung cấp chỉ dẫn rõ ràng mà công cụ tìm kiếm dễ hiểu hơn.

Bạn muốn tìm hiểu thêm về JavaScript và redirect?

Hãy tham khảo các tài nguyên sau:

• Hướng dẫn toàn diện về redirect: Giải thích về chuyển hướng URL
• 301 Redirect: Là gì và ảnh hưởng đến SEO ra sao
• JavaScript SEO: Cách tối ưu JS cho công cụ tìm kiếm
• Semrush Site Audit hiện có thể render JavaScript