การทำเว็บไซต์ PHP ให้มี URL ที่สวยงาม (URL Friendly) เพื่อประโยชน์ในการทำ SEO

เมื่อ : 23-Jan-12 19:10 อ่าน : 311 ครั้ง
Tag : php

การทำ SEO ให้เว็บไซต์ของเราให้ติดการจัดอันดับต้นๆ ใน Search Engine นั้น มีหลากหลายวิธี หนึ่งในนั้นก็คือการทำให้ URL ภายในเว็บไซต์มีความสั้น อ่านง่าย และสวยงาม ปราศจาก Query String ที่ยืดยาว ซึ่งสำหรับผู้ที่เขียนเว็บด้วยภาษา PHP โดยไม่ได้ใช้ PHP Framework อย่างเช่น CakePHP, CodeIgnator อาจไม่ทราบวิธีในการจัดการ URL ให้ Friendly ต่อการทำ SEO บทความนี้จะอธิบายวิธีการทำไปทีละขั้นตอน

ขั้นตอนที่ 1 การเปิด Module Rewrite ใน Server Apache

1. เปิดไฟล์คอนฟิก httpd.conf ซึ่งอยู่ที่ C:/AppServe/Apache2.2/conf หรือเข้าทาง Start > Programs > AppServe > Configuration Server > คลิกที่ Apache Edit the httpd.conf Configuration File

2. กด Ctrl+F แล้วค้นหาคำว่า “LoadModule rewrite” จากนั้นลบเครื่องหมาย # ที่หน้าบรรทัดออก

3. ค้นหาคำว่า “AllowOverride” ที่อยู่ใน <Directory “C:/AppServe/www”/>…..</Directory> (หรือ Drive อื่นที่ลง Apache ไว้) แล้วเปลี่ยนจาก “None” เป็น “All”

4. Save ไฟล์ httpd.conf แล้ว อย่าลืม Restart Apache Server โดยทำดังนี้

4.1 ไปที่ Start > Control Panel > Administrative Tool > Services

4.2 มองหา Apache แล้วกดปุ่ม Restart Service

ขั้นตอนที่ 2 การสร้างไฟล์ .htaccess

1. ดาวน์โหลดและติดตั้งโปรแกรม EditPlus เสียก่อน โดยดาวน์โหลดได้จากที่นี่ http://www.editplus.com/download.html

2. เปิดโปรแกรม EditPlus และสร้างหน้าเอกสารใหม่ โดยไปที่ File > New > Normal Text

3. ทดสอบโดยพิมพ์ code ลงไปดังนี้

RewriteEngine On
RewriteBase /myweb/
RewriteRule ^header\.html$ index.php

อธิบายได้ดังนี้

RewriteEngine On

คำอธิบาย ให้เปิดการ Rewrite URL

RewriteBase /myweb/

คำอธิบาย สมมติว่าไฟล์หน้าแรกของเว็บอยู่ที่ C:/AppServ/www/myweb/index.php ดังนั้นเราจึงเริ่มต้น Path ของไฟล์ที่ Folder myweb

RewriteRule ^header\.html$ index.php

คำอธิบาย ถ้าพิมพ์ http://localhost/myweb/header.html จะแสดงหน้า index.php แทน (หรืออธิบายอีกแง่หนึ่งให้อนุญาตให้ URL http://localhost/myweb/header.html เขียนแทน URL http://localhost/myweb/index.php ได้)

4. จากนั้นไปที่เมนู Document > File Format (CR/LF) > Change File Format

5. เลือก UNIX แล้วกดปุ่ม OK

6. จากนั้น Save As ไฟล์นี้ โดยตั้งชื่อว่า .htaccess (มีเครื่องหมายจุดที่ด้านหน้า htaccess ด้วยนะครับ) ที่ Save as type ให้เลือก “All File (*.*)” และที่ Encoding เลือก UTF-8 และให้วางไฟล์นี้ไว้ที่ Root Folder ของเว็บไซต์

7. เปิด Browser และทดสอบด้วยการพิมพ์ URL : http://localhost/myweb/header.html จะแสดงหน้า http://localhost/myweb/index.php โดยที่ URL ยังคงเป็น http://localhost/myweb/header.html อยู่

ขั้นตอนที่ 3 เรียนรู้การเขียน RewriteRule ในไฟล์ .htaccess

จากขั้นตอนที่ 2 ข้างต้นเราได้เห็นตัวอย่างการเขียน RewriteRule หรือกฎของการเขียน URL แบบง่ายๆ ให้เว็บเซิร์ฟเวอร์ทราบว่า เราต้องการที่จะแสดงหน้า index.php โดยที่เราสามารถพิมพ์ URL บนช่อง Address ของ Browser ว่า header.html ก็สามารถเปิดหน้า index.php ได้ ซึ่งโดยปรกติแล้วหากเราไม่ได้มีการเปิด Module Rewrite ตามขั้นตอนที่ 1 และ 2 ข้างต้น การที่เราพิมพ์ URL : header.html ย่อมแสดงเป็น 404 Not Found เพราะเว็บไซต์ของเราไม่มีไฟล์ header.html

ด้วยการเปิด Module Rewrite เราสามารถที่จะเขียนกฎของการ Rewrite (RewriteRule) ในไฟล์ .htaccess เพื่อบอกให้เว็บเซิร์ฟเวอร์ทราบว่า หากมีการพิมพ์ URL นี้ที่เว็บไซต์ของเราแล้ว จะให้เป็นการแสดงหน้าเว็บเพจใดขึ้นมา

ดังนั้น เราจึงสามารถเขียนกฎของการ Rewrite URL ที่มีความยืดยาวพะรุงพะรัง ให้สั้น กระชับ เข้าใจง่าย และดูสวยงาม เป็น URL Friendly ต่อ Search Engine ต่างๆ ได้ ยกตัวอย่างเช่น

URL เดิม :

www.myweb.com/product/viewdetail.php?category=car&color=black&id=53

URL ใหม่ :

www.myweb.com/product/car/black/53

หรือหากเป็น URL ที่ Link ไปสู่บทความ, URL ใน Webboard ที่ต้องการแสดงหัวข้อบทความ, หัวข้อกระทู้ บน Link เราก็สามารถทำได้

URL เดิม :

www.myweb.com/article/viewarticledetail.php?id=34

URL ใหม่ :

www.myweb.com/article/การทำFriendlyURL

3.1 เริ่มต้นเขียนกฎในไฟล์ .htaccess

หากเป็นการทดสอบเปิดเว็บไซต์ด้วย Server ภายในเครื่องคอมพิวเตอร์ของเราเองหรือ localhost สามารถที่จะเปิด Module Rewrite ได้ตามขั้นตอนที่ 1 ที่อธิบายไว้ข้างบน

แต่หากเราจะนำเว็บไซต์ขึ้นสู่ Server จริงและต้องการที่จะใช้ Module Rewrite ได้ด้วย ก่อนที่เราจะเช่า Hosting Server ใดสำหรับเป็นที่อยู่ของเว็บไซต์เรานั้น เราควรโทรไปสอบถามผู้ให้บริการเช่า Hosting Server ก่อนว่า Hosting Server มีการติดตั้ง Module Rewrite ไว้แล้วหรือไม่ มิฉะนั้น ถึงแม้เราจะเขียนกฎอะไรก็ตามในไฟล์ .htaccess ก็จะไม่ทำงาน

เมื่อสร้างไฟล์ .htaccess ตามขั้นตอนที่ 2 และวางไฟล์นี้ไว้ที่ Root Folder ของเว็บไซต์แล้ว ให้เปิดไฟล์ขึ้นมาด้วยโปรแกรม Editor ใดๆก็ได้ เช่น Notepad, EditPlus, NetBean, Adobe Dreamweaver ฯลฯ

เริ่มต้นบรรทัดแรกด้วยคำสั่งนี้

RewriteEngine on

เปิดการบอกให้เซิร์ฟเวอร์รู้ว่าเราต้องการจะเปิดการ Rewrite URL

บรรทัดต่อมา ผมจะแสดงการเขียนกฎของการ Rewrite URL โดยให้เราสามารถที่จะแทนที่ URL เก่า (oldurl.html) ด้วย URL ใหม่ (newurl.html) แสดงรูปแบบโดยทั่วไปง่ายๆ ได้ดังนี้

RewriteEngine on
RewriteRule ^newurl\.html$ oldurl.html

จะเห็นได้ว่ากฎของการ Rewrite ใน 1 บรรทัด จะมีอยู่ 3 ส่วน (อันที่จริงมี 4 ส่วนจะกล่าวในภายหลัง) อธิบายได้ดังนี้

1. RewriteRule ขึ้นต้นบรรทัด ประกาศว่าบรรทัดนี้เป็นกฎของการ Rewrite

2. Pattern ^newurl\.html$ เป็นการตรวจสอบ URL ที่ใส่เข้ามาช่อง Address ของ Browser ซึ่งจะใช้ Regular Expression ในการตรวจสอบ

3. หน้าเพจ oldurl.html เป็นหน้าเว็บเพจที่ให้ newurl.html แสดงแทนที่ขึ้นมา

ในส่วนที่ 2 ที่เป็น Regular Expression นั้นค่อนข้างเข้าใจยาก ขออธิบายดังนี้

- เครื่องหมาย ^ (Caret) เป็นการกำหนดจุดเริ่มต้น URL ที่อยู่ภายใต้ Direcory ปัจจุบันที่จะตรวจสอบ ซึ่งก็คือ Directory เดียวกับที่ไฟล์ .htaccess อยู่ ต้องขึ้นต้นด้วย ^ เสมอ

- เครื่องหมาย $ (Dollar Sign) ซึ่งบอกจุดสิ้นสุดของการตรวจสอบ Pattern ต้องลงท้ายด้วย $ เสมอ

- เครื่องหมาย \ (Back Slash) ที่อยู่หน้าเครื่องหมาย . (เครื่องหมายจุด) และตามด้วยนามสกุล html นั้นใส่ไว้เพื่อ Escape Charactor เนื่องจากเครื่องหมายจุดนั้น เป็นอักขระพิเศษใน Regular Expressions ซึ่งมีความหมายว่าแทนด้วยตัวอักษรใดๆ 1 ตัว แต่ในที่นี้เครื่องหมายจุดนั้น หมายถึง จุดที่นำหน้านามสกุลไฟล์ html ดังนั้นจึงต้องใส่ \ สำหรับ Escape Charactor ไว้ด้วย

จาก RewriteRule ข้างต้น เมื่อผู้เข้าเว็บไซต์คลิก Link หรือพิมพ์ URL ที่ช่อง Address มาเป็น newurl.html เซิร์ฟเวอร์จะทำการ Redirect ไปที่ oldurl.html โดยที่ผู้เข้าเว็บไซต์ไม่รู้ตัวว่าเป็นข้อมูลที่มาจากหน้า oldurl.html เพราะ URL บน Browser เป็น newurl.html อยู่เหมือนเดิม

แต่ถ้าต้องการให้ URL ที่ปรากฏบน Browser เปลี่ยนเป็น newurl.html ด้วย ก็เพียงแต่เติม [R] เข้าไปต่อท้ายบรรทัด ดังนี้

RewriteEngine on
RewriteRule ^newurl\.html$ oldurl.html [R]

ซึ่ง [R] ก็คือ ส่วนที่ 4 เรียกว่า Command Flag ซึ่งจะเป็นคำสั่งพิเศษกำหนดเงื่อนไขไว้ มีหลายคำสั่ง ซึ่งมีความหมายดังนี้

Command Flag

[R] - Redirect you can add an =301 or =302 to change the type.

[F] - Forces the url to be forbidden. 403 header

[G] - Forces the url to be gone 401 header

[L] - Last rule. (You should use this on all your rules that don?t link together)

[N] - Next round. Rerun the rules again from the start

[C] - Chains a rewrite rule together with the next rule.

[T] - use T=MIME-type to force the file to be a mime type

[NS] - Use if no sub request is requested

[NC] - Makes the rule case Insensitive

[QSA] - Query String Append use to add to an existing query string

[NE] - Turns of normal escapes that are default in the rewriterule

[PT] - Pass through to the handler (together with mod alias)

Skip the next rule S=3 skips the next 3 rules

[E] - E=var sets an enviromental variable that can be called by other rules

3.2 ทำความเข้าใจเกี่ยวกับ Pattern Regular Expression

ด้วยตัวอย่างต่อไปนี้

RewriteRule ^product/([A-Za-z]+)/([A-Za-z]+)/([0-9]+)/$ product/viewdetail.php?category=$1&color=$2&id=$3

จาก RewriteRule ข้างต้น เราสามารถที่จะเปลี่ยน URL จาก

www.myweb.com/product/viewdetail.php?category=car&color=black&id=53 หรือ www.myweb.com/product/viewdetail.php?category=bike&color=red&id=8

เป็นดังนี้

www.myweb.com/product/car/black/53/ หรือ www.myweb.com/product/bike/red/8/

ดูที่ Pattern จะมีส่วนของที่อยู่ในปีกกาเหลี่ยม [ ] เรียกว่า Ranges

ในตัวอย่างจะเป็น [0-9] ซึ่งจะใช้ตรวจสอบว่าเป็นตัวอักษรที่อยู่ในช่วง 0-9 ใดๆ

[A-Z] ตรวจสอบว่า เป็นตัวอักษรตัวพิมพ์ใหญ่ตั้งแต่ A-Z ใดๆ

[a-z] ก็เป็นการตรวจสอบว่า เป็นตัวอักษรตัวพิมพ์เล็กตั้งแต่ a-z ใดๆ

[A-Za-z] ก็เป็นการตรวจสอบว่า เป็นตัวอักษรภาษาอังกฤษทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก เป็นต้น

และใน Pattern ก็จะมีส่วนที่อยู่ในวงเล็บ ( ) เป็นการบรรจุ Regular Expression ที่จะตรวจสอบ เรียกส่วนที่เป็นวงเล็บทั้งหมดว่า Back-Reference ซึ่งหาก URL ที่พิมพ์ตรงตามเงื่อนไขที่ตรวจสอบด้วย Regular Expression ภายในวงเล็บนี้ ก็จะ Redirect ไปหา URL ที่ส่วนหลัง

โดยเราสามารถตรวจสอบและแยก Back-Reference ออกเป็นหลายๆวงเล็บใน URL เดียวกัน ซึ่ง Back-Reference ในวงเล็บแรก การอ้างถึงเราก็จะใช้ $1 ส่วนลำดับต่อๆไป ก็จะเป็น $2, $3 ไปเรื่อยๆ

ดังนั้น ผู้เข้าเว็บไซต์ (หรือแม้กระทั่ง Robot ของ Search Engine ต่างๆ) ก็จะเห็น Link URL เป็น www.myweb.com/product/car/black/53/ หรือ www.myweb.com/product/bike/red/8/ ซึ่งสั้นและกระชับ โดยหารู้ไม่ว่าเราได้ซ่อน URL ที่ไม่ค่อยสวยงามและอ่านยากไว้เบื้องหลัง

การใช้ Match Quantifiers

จากตัวอย่างข้างต้น เรามีเครื่องหมายบวก (+) ตามหลัง Range (ส่วนที่เป็นปีกกาเหลี่ยม [ ]) หมายความว่า เราจะตรวจสอบตัวอักษรใน Range ได้ไม่จำกัดจำนวนตัวอักษร เช่น

[0-9]+ หมายถึง ตรวจสอบว่าตัวเป็นเลขตั้งแต่ 0,1,2,...,999,...,999999,....

[a-z]+ หมายถึง ตรวจสอบว่าตัวเป็นคำภาษาอังกฤษตัวพิมพ์เล็ก อะไรก็ได้ เช่น car, bike, motorcycle

[A-Z]+ หมายถึง ตรวจสอบว่าตัวเป็นคำภาษาอังกฤษตัวพิมพ์ใหญ่ อะไรก็ได้ เช่น CAR, BIKE, MOTORCYCLE

[A-Za-z0-9]+ หมายถึง ตรวจสอบว่าตัวเป็นคำภาษาอังกฤษอะไรก็ได้ และสามารถประกอบด้วยตัวเลข เช่น Car007, Moto123Cycle

ซึ่งเครื่องหมายบวก (+) นี้เรียกว่า Quantifiers ซึ่ง Quantifiers นั้นมีหลายตัว เช่น

? - 0 or 1 of the preceding text

* - 0 or N of the preceding text (N > 0)

+ - 1 or N of the preceding text (N > 1)

ในกรณีที่เราต้องการตรวจสอบจำนวนตัวอักษรที่แน่นอน เช่น ตัวเลขอยู่ในช่วง 10-99 สามารถเขียนเป็น ([0-9][0-9])

ข้อมูลเกี่ยวกับของ Rewrite Rule

Text:

. - Any single character

[chars] - One of chars

[^chars] - None of chars

text1|text2 - text1 or text2

Grouping:

(text) - Grouping of text

Anchors:

^ - Start of line anchor

$ - End of line anchor

Escaping:

\ - char escape that particular char

สามารถศึกษาเพิ่มเติมได้ที่

http://httpd.apache.org/docs/2.0/mod/mod_rewrite.html

http://httpd.apache.org/docs/2.3/rewrite/flags.html

ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...

การทำเว็บไซต์ PHP ให้มี URL ที่สวยงาม (URL Friendly) เพื่อประโยชน์ในการทำ SEO

ความเห็น

Friends