ปรับโครงสร้าง URL บน Java Web Server ให้กระชับด้วย UrlRewriteFilter

การทำเว็บไซต์แบบประมวลผลที่เซิร์ฟเวอร์ อาจมีการประมวลผลตามการร้องขอของผู้ใช้ (dynamic generated content) ซึ่งในสายจาวาใช้ JSP/Servlet ในการประมวลผล

โครงสร้างของ URL จะเป็นแบบ QueryString ซึ่งยาว ทำให้จำยาก ในสาย SEO แนะนำให้ URL มีโครงสร้างที่แน่นอน และคาดเดาได้ เพื่อเหมาะกับการที่เสิร์ชเอ็นจิน (Search Engine) อย่างกูเกิลในการเก็บข้อมูล (indexing)

มีผู้พัฒนาไลบรารี่เพื่ออำนวยความสะดวกในการนี้โดยเฉพาะคือ UrlRewriteFilter ซึ่งหลักการคล้ายๆกับ mod_rewrite ใน Apache web server คือจับรูปแบบของ URL ด้วยเรกกูลาร์เอ็กซ์เพรสชัน (regex: Regular Expression) แล้วเปลี่ยนให้อยู่ในรูปแบบที่เซิร์ฟเวอร์เข้าใจคือ QueryString เช่น จาก /category/mobile แปลงเป็น /index.jsp?category=mobile เป็นต้น

ในเว็บไซต์ของผู้พัฒนาได้สรุปขั้นตอนสั้นๆในลักษณะ Quick Start Guide ที่ทำตามได้อย่างง่ายดายอยู่แล้ว ในที่นี้จะใช้ Maven ซึ่งมีขั้นตอนดังนี้

Continue reading

Advertisements

การวางโครงหน้าเว็บ html5

HTML5_stickerการวางโครงสร้างหน้าเว็บเพื่อให้ตรงตามข้อกำหนดของ html5 น่าจะมีผลกับการแสดงผลในภาพรวม และอาจจะมีผลกับการค้นหาจากเสิร์ชเอ็นจิ้น (SEO: Search Engine Optimization) ต่างๆได้

ก่อนหน้ายุค html5 แต่ละหน้าเว็บควรจะมีเฮดดิ้งแท็ก (h1) เพียงแค่อันเดียวเท่านั้น เพื่อบ่งบอกเนื้อหาหลักของทั้งหน้า แต่ในกรณีที่ในหนึ่งหน้ามีหลายส่วน หรือหน้าเว็บแบบแสดงรายการ เช่น รายการสินค้า คอมเมนต์จากผู้ใช้ การเลือกใช้แท็กจะมีผลมากกว่าการให้ความสำคัญของข้อมูล

เพื่อตอบโจทย์ข้อนี้ html5 อนุญาตให้ใช้ h1 มากกว่า 1 ครั้งต่อหน้าได้ แต่ไม่ใช่จะเลือกวางตรงไหนก็ได้ ควรจะวางโครงสร้างให้เหมาะสม นอกจากตัวเฮดดิ้งแท็ก เพื่อใช้บอกหัวข้อหลัก/รองแล้ว แท็กที่เกี่ยวข้องมีดังนี้

  1. ตัวแบ่งแยกหน้า โดยทั่วไปก็คือ <body>
  2. ตัวแบ่งแยกกลุ่ม <article>, <section>, <nav>, <aside>
  3. เฮดดิ้งแท็ก <h1> – <h6>

แน่นอนว่าหน้าเว็บจะมี 1 body ถ้าหน้านั้นๆ มีมากกว่า 1 ข้อมูลย่อยในระดับเดียวกัน ดังที่กล่าวข้างต้น ต้องแยกด้วย article หรือ section ส่วน nav สงวนไว้ใช้กับเมนู หรือการเปลี่ยนหน้า และ aside ใช้ข้อมูลอื่นๆที่นอกเหนือจากที่กล่าวข้างต้น

ข้อแตกต่างระหว่าง article กับ section คือ article สามารถแยกไปแสดงผลที่หน้าเว็บอื่นได้ทันที โดยมีเนื้อหาครบถ้วน ส่วน section นั้น อาจจะต้องใช้ข้อมูลอื่นๆ ประกอบ แต่ที่เหมือนกันคือ ควรมีเฮดดิ้งแท็กเพื่อระบุสาระสำคัญของส่วนนั้นๆ

นอกจากนี้ในแต่ละส่วน อาจจะแยกกลุ่มหัวข้อความด้วย <header> และ ท้ายข้อความด้วย <footer>

ที่มา:

สแลช (Slash)