การใส่ intro page หรือ landing page ลงในเว็บไซต์

การใส่ intro page หรือ landing page ลงในเว็บไซต์
Intro Page หรือ Landing Page มีชื่อเรียกเป็นภาษาไทยว่า หน้าต้อนรับ ใช้สำหรับแสดงข้อมูลอะไรบางอย่างก่อนที่จะเข้าสู่เว็บไซต์จริงๆ เช่น อาจแสดง logo หรือคำเตือน เพื่อให้กดยอมรับก่อน หรือใช้ในการแสดงโฆษณาก่อนที่จะเข้าสู่เนื้อหา

หน้า Intro Page ที่ดีต้องมีลักษณะดังนี้
  1. แสดงผลเมื่อมีการเรียกเว็บไซต์โดยที่ไม่มีการระบุหน้าที่ต้องการมาเท่านั้น เช่น การเรียกไปยัง URL เปล่าๆ http://www.kotchasan.com
  2. ถ้ามีการระบุหน้าเพจที่ต้องการมาจะต้องข้ามการแสดง Intro Page ไปเลย และไปแสดงผลหน้าที่เรียกเท่านั้น (มีผลอย่างมากต่อ SEO)
มีหลายเว็บไซต์ที่ออกแบบ Intro โดยการแสดงผลเป็น Popup เมื่อมีการเรียกเข้าไปยังเว็บไซต์ ซึ่งส่วนตัวผมมองว่าวิธีแบบนี้น่ารำคาญมาก (ส่วนใหญ่จะเป็นโฆษณา หรือไม่ก็ Like Facebook) เพราะจะต้องมาคอยปิดปุ่มเพื่อการเข้าถึงเนื้อหาของเว็บไซต์ และ มักจะทำเช่นเดียวกันนี้กับทุกหน้าของไซต์ซะด้วยสิ ซึ่งหาเป็นการเรียกหน้าเว็บจากภายนอกเข้าสู่เว็บไซต์ในครั้งแรกคงไม่เท่าไร แต่ถ้ามีการแสดงผล Intro บ่อยๆ จะเป็นที่น่ารำคาญเป็นอย่างยิ่ง

จากย่อหน้า ลักษณะของ Intro ที่ดี ถ้าดูจากทั้งสองข้อจะเห็นได้ว่า Intro ควรแสดงผลเพียงครั้งแรกที่เข้าสู่เว็บไซต์เพียงครั้งเดียวเท่านั้น (เรียก URL เปล่าๆ) และไม่ควรจะแสดงอีกเลยหลังจากนั้น

วิธีการง่ายๆในการสร้าง Intro Page
สร้างหน้าเว็บไซต์ index.html ที่ไดเร็คทอรี่หลักของ Server เช่น htdocs หรือ public_html ที่ติดตั้งเว็บไซต์ (ไดเร็คทอรี่เดียวกันกับหน้าหลักของเว็บไซต์ index.php) และใส่เนื้อหาของหน้า Intro ที่ต้องการลงไป และ ลิงค์สำหรับเรียกไปยังหน้าเว็บไซต์หลักปกติ เช่น http://www.kotchasan.com/index.php (เนื่องจากเว็บไซต์หลักเป็น PHP ถ้าเป็นภาษาอื่นก็ให้ใส่ชื่อไฟล์หลักของไซต์นั้นๆ)
โดยทั่วไป เพียงเท่านี้ก็จะสามารถใช้งาน Intro Page ได้แล้ว
  1. เมื่อมีการเรียกเว็บไซต์ เช่น http://www.kotchasan.com อันดับแรก Server จะเรียกไปยัง http://www.kotchasan.com/index.html ซึ่งเป็น Intro Page มาแสดงก่อน
  2. เมื่อมีการคลิกลิงค์ที่ระบุ URL เป็น http://www.kotchasan.com/index.php ในหน้า intro จะเป็นการเรียกไปยังหน้าหลักของเว็บไซต์ปกติ
ในทางปฏิบัติ บางเว็บไซต์ที่มีหน้าแรกเป็น index.html อยู่แล้ว ก็จะไม่สามารถสร้าง Intro Page ที่ชื่อ index.html ได้อีก ซึ่งถ้า Server ที่ใช้เป็น Apache และ รองรับการใช้งาน .htaccess เราสามารถกำหนดให้หน้า Intro Page เป็นชื่ออื่นได้ เช่น intro.html หรือ intro.php หรือชื่ออื่นได้ โดยเราต้องงไปตั้งค่าเพิ่มเติมที่ไฟล์ .htaccess โดยการเพิ่มโค้ด
DirectoryIndex index.html index.php

โดยที่ 
  • index.html คือชื่อของ Intro Page ที่ต้องการ
  • index.php คือชื่อของหน้าเว็บไซต์ปกติ
ให้เปลี่ยนทั้งสองรายการเป็นชื่อที่ต้องการ

สำหรับ GCMS ให้เพิ่มโค้ด DirectoryIndex index.html index.php ลงไปภายในบล๊อค IfModule mod_rewrite.c ดังตัวอย่าง
<IfModule mod_rewrite.c>
   RewriteEngine On

   DirectoryIndex index.html index.php

   .....

   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . index.php [L,QSA]
</IfModule>

สำหรับโค้ดหน้า Intro อย่างง่ายๆอาจมีเพียงรูปภาพสักรูปและลิงค์ไปยังเว็บไซต์หลักเท่านั้นก็ได้
<!DOCTYPE html>
<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Intro Page</title>
  <style>
    body{text-align:center}
    figure{display:table;margin:0 auto;}
    img{width:100%;height:auto;}
  </style>
</head>
<body>
  <figure><img src=intro.jpg alt="Intro"></figure>
  <a href="index.php">&lt;&lt; เข้าสู่เว็บไซต์ &gt;&gt;</a>
</body>
</html>

หรือสำหรับใครที่ต้องการ Intro Page ที่หวือหวาสักหน่อย ก็สามารถออกแบบได้ตามใจชอบเลยนะครับ ตัวอย่างเช่น https://goragod.github.io/intro/index.html

ดาวน์โหลดโค้ดได้จาก Github

หากต้องการสนับสนุนผู้เขียน สามารถบริจาคช่วยเหลือค่า Server ได้ที่
ธนาคาร กสิกรไทย สาขากาญจนบุรี
เลขที่บัญชี 221-2-78341-5
ชื่อบัญชี กรกฎ วิริยะ
0SHAREFacebookLINE it!

เรื่องที่เกี่ยวข้อง