HTML Code สำหรับ URL Redirect
แนวทางและตัวอย่างการเขียน HTML Code สำหรับการเปลี่ยนเส้นทาง (URL Redirect) บน Web Server
บทคัดย่อ
การเปลี่ยนเส้นทาง (Redirect) บน Web Server เป็นเทคนิคพื้นฐานที่สำคัญในการพัฒนาเว็บไซต์ โดยเฉพาะเมื่อผู้พัฒนาเว็บไซต์ต้องการส่งผู้ใช้ไปยังตำแหน่งอื่นของเว็บไซต์หรือเซิร์ฟเวอร์ใหม่โดยอัตโนมัติ การเปลี่ยนเส้นทางสามารถทำได้หลายวิธี เช่น การใช้ HTML <meta> tag, JavaScript, HTML <frameset> หรือภาษาเซิร์ฟเวอร์ เช่น PHP บทความนี้จะนำเสนอแนวทางการเขียนโค้ด HTML สำหรับการ Redirect พร้อมตัวอย่างประกอบและข้อแนะนำในการเลือกใช้เทคนิคให้เหมาะสมกับบริบท
1. บทนำ
ใน Web Server โดยทั่วไปจะกำหนดให้มี “Document Root” ซึ่งเป็นโฟลเดอร์หลักที่บรรจุไฟล์หน้าแรก เช่น index.html, index.php หรือ default.html อย่างไรก็ตาม ในบางสถานการณ์ เว็บไซต์อาจยังไม่พร้อมให้บริการ หรืออาจต้องเปลี่ยนเส้นทางผู้ใช้ไปยัง URL อื่นชั่วคราว เช่น เพื่อการบำรุงรักษาเว็บไซต์ หรือเพื่อเปลี่ยนโครงสร้างโดเมน
2. เทคนิคการเปลี่ยนเส้นทาง (Redirect Techniques)
2.1 การ Redirect ด้วย HTML Meta Tag
หลักการ
ใช้ <meta> tag ร่วมกับ http-equiv="Refresh" เพื่อให้เว็บเบราว์เซอร์เปลี่ยนหน้าโดยอัตโนมัติหลังเวลาที่กำหนด
ตัวอย่างที่ 1: Redirect ทันที
htmlCopyEdit<html>
<head>
<meta http-equiv="Refresh" content="0;URL=http://www.yourdomainname.com">
</head>
</html>
ตัวอย่างที่ 2: Redirect หลังจาก 5 วินาที
htmlCopyEdit<html>
<head>
<meta http-equiv="Refresh" content="5;URL=http://www.yourdomainname.com">
</head>
<body>
<center>
คุณกำลังเข้าสู่เว็บเพจใหม่<br>
<a href="http://www.yourdomainname.com">www.yourdomainname.com</a>
</center>
</body>
</html>
ข้อดี:
- ใช้งานง่าย
- ไม่ต้องใช้ JavaScript หรือภาษาเซิร์ฟเวอร์
ข้อจำกัด:
- ผู้ใช้จะเห็นการเปลี่ยนแปลง URL ใน Address Bar
- การควบคุมพฤติกรรมในระดับซับซ้อนทำได้ยาก
2.2 การ Redirect โดยใช้ <frameset>
วัตถุประสงค์: ปิดบัง URL ที่แท้จริง
htmlCopyEdit<html>
<head><title>Redirect Page</title></head>
<frameset cols="*">
<frame src="http://www.yourdomain.com/yourname">
</frameset>
</html>
ข้อดี:
- URL บน Address Bar จะไม่เปลี่ยน
- เหมาะกับการทำ “Frame-based Redirect”
ข้อจำกัด:
<frameset>เป็นเทคโนโลยีที่ล้าสมัย และไม่รองรับใน HTML5- ส่งผลต่อการทำ SEO และ Accessibility
2.3 การ Redirect ด้วย JavaScript
ตัวอย่างโค้ด:
htmlCopyEdit<html>
<head>
<script language="javascript">
var url = document.location.href;
if (url === "http://www.firstdomainname.com/" || url === "http://www.firstdomainname.com") {
window.location = "http://www.yourdomainname.com/firstdomainname";
} else if (url === "http://www.seconddomainname.com/") {
window.location = "http://www.yourdomainname.com/seconddomainname";
} else {
window.location = "http://www.yourdomainname.com/underconstruction.html";
}
</script>
</head>
</html>
ข้อดี:
- ยืดหยุ่นสูง สามารถเขียนเงื่อนไขซับซ้อนได้
- สามารถใช้ร่วมกับ dynamic content ได้
ข้อจำกัด:
- ขึ้นอยู่กับว่าเบราว์เซอร์เปิด JavaScript หรือไม่
- ไม่แนะนำสำหรับการควบคุมฝั่งเซิร์ฟเวอร์
2.4 การ Redirect ด้วย JavaScript + Frameset
โค้ดตัวอย่าง:
htmlCopyEdit<html>
<script language="javascript">
var url = document.location.href;
if (url === "http://www.firstdomainname.com" || url === "http://www.firstdomainname.com/") {
document.write("<head><title>www.firstdomainname.com</title></head>");
document.write('<frameset cols="*">');
document.write('<frame src="http://www.yourdomainname.com/firstdomainname">');
document.write("</frameset>");
} else {
document.write('<frameset cols="*">');
document.write('<frame src="http://www.yourdomainname.com/underconstruction.html">');
document.write("</frameset>");
}
</script>
</html>
2.5 การ Redirect ด้วย PHP
ตัวอย่างโค้ด PHP ที่ใช้เงื่อนไขโดเมน
phpCopyEdit<?php
switch ($_SERVER['SERVER_NAME']) {
case "www.firstdomainname.com":
echo '<frameset cols="*">';
echo '<frame src="http://www.yourdomainname.com/firstdomainname">';
echo "</frameset>";
break;
case "www.seconddomainname.com":
echo '<frameset cols="*">';
echo '<frame src="http://www.yourdomainname.com/seconddomainname">';
echo "</frameset>";
break;
default:
echo '<frameset cols="*">';
echo '<frame src="http://www.yourdomainname.com/underconstruction.html">';
echo "</frameset>";
}
?>
ข้อดี:
- ควบคุมได้จากฝั่งเซิร์ฟเวอร์
- เหมาะสำหรับเว็บที่มีหลายโดเมนย่อย (multi-domain)
ข้อจำกัด:
- ต้องใช้ Web Server ที่รองรับ PHP
- ถ้าไม่ใช้
<frameset>URL จะเปลี่ยนไป
3. ข้อเสนอแนะในการเลือกใช้ Redirect
| วิธีการ Redirect | จุดแข็ง | ข้อควรระวัง |
|---|---|---|
| HTML Meta Tag | ใช้งานง่าย เหมาะกับ Redirect ชั่วคราว | ไม่เหมาะกับ SEO |
| JavaScript | เขียนเงื่อนไขได้หลากหลาย | ผู้ใช้ปิด JS จะไม่ทำงาน |
| Frameset | ปกปิด URL จริงได้ | ไม่รองรับใน HTML5 |
| PHP | ควบคุมฝั่งเซิร์ฟเวอร์ได้ดี | ต้องมี Web Server ที่รองรับ PHP |
4. สรุป
การ Redirect URL เป็นเครื่องมือที่จำเป็นสำหรับนักพัฒนาเว็บไซต์ในหลากหลายกรณี เช่น การบำรุงรักษาเว็บไซต์ การเปลี่ยนแปลงโครงสร้าง URL หรือการควบรวมโดเมน เทคนิคที่ใช้สามารถเลือกได้ตามความเหมาะสมของสถานการณ์ โดยพึงระวังผลกระทบต่อประสบการณ์ผู้ใช้ (UX), ความสามารถในการทำ SEO และมาตรฐานของ HTML5 ที่อัปเดตอยู่เสมอ