XHTML CSS เพื่อประโยชน์ทาง SEO อย่างแท้จริง

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ …. หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ เช่น การจัดการหน้าเวปของคุณ  ๆ เองนั้นให้มีขนาดย่อมลง หรือ อะไรก็ตามที่แสดงในหน้าเวปนั้น ไม่หนักจนเกินไป, จัดการกับ content ของคุณให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ หรือ concept ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

ผมจะไม่พูดถึงสิ่งทั้งหลายทั้งมวลข้างบนนั้น หรือ basic ของ XHTML และ CSS เอาเป็นว่า เหมาเลยละกันว่าทุกคนที่กำลังอ่านเป็นกันหมดแล้ว อย่างไรก็ตามคุณสามารถหาอะไรที่เกี่ยวกับเจ้าสองตัวนี้ได้จาก Category Link ของบทความหลัก ๆ จากหน้าแรก หรือ ด้านบนของหน้าบทความ

เราจะโฟกัสกันที่ ประโยชน์ที่เราจะได้รับจากการใช้ XHTML และ CSS เพื่อเพิ่ม readability ของ code ของเราต่อเจ้า Search Engine Spider โดยไม่ต้องไปคำนึงถึงความหนักหน่วงในการโหลดไฟล์ หรือ จำนวนของเนื้อหา ความสับสนของเนื้อหา และ ใช้ CSS จัดการกับเหล่า รูปภาพในเวปของเราอย่างไร

ความสัมพันธ์ ระหว่าง code และ เนื้อหา

สิ่งที่ดีที่สุดในการเริ่มต้นไปกับ บทความนี้ คือ ต้องมั่นใจให้ได้ว่า code ของคุณนั้นสามารถอ่านได้ Search Engine Spider นั้นทำงานค่อนข้างจะคล้าย ๆ กันทุกตัว ซึ่งก็คือ เหมือนกับตาของมนุษย์ และถ้ามันมี text ที่มันไม่มีประโยชน์มาก ๆ ใน code ของคุณ มันจะเป็นการยากที่จะทำให้มันหาเนื้อหา หรือ สรุปใจความบนหน้าเวปของคุณนั้นว่ากล่าวถึงอะไร ควรจะนำลงไปจัดในหมวดหมู่ใด เพราะฉะนั้นสรุปง่าย ๆ ว่า คุณต้องทำให้มันง่ายที่คุณ และ ผู้ใช้จะอ่าน และ ง่ายต่อเจ้า Search Engine Spider ที่จะเข้ามาอ่าน เนื้อหาของคุณเช่นกัน

ตัวอย่าง: สมมติใน browser เรามองเห็นเจ้าตัวหนังสือ Arial ตัวหนา สีเขียวขนาด 24px ถูกวางไว้ที่ตำแหน่งบนสุดของหน้าเวป เป็นหัวข้อหลักของเนื้อหาที่มีทั้งหมดในนั้น ถ้าเราไม่มีการจัดแจง code ให้ดี เจ้า Search Engine Spider ก็จะไม่เข้าใจความหมาย เหมือนกับที่เราเข้าใจ และ อาจจะเข้าใจเป็นอย่างอื่นไปเสียด้วย อาทิ

<strong><font color=”green” size=”24px”>ThaiCSS | CSS design เพื่อคนไทย</font></strong>

ถ้าเป็น XHTML:

<h1>ThaiCSS | CSS design เพื่อคนไทย</h1>

และใน CSS:

h1 {font-famaily: Arial; font-size: 24px; font-weight: bold; color: green;}

ใช้ tag XHTML เพื่อที่จะบอกให้รู้ว่าเจ้า text ที่ตัวมันครอบอยู่นั้นมีความหมายว่าอะไร ในที่นี้คือ H1 ซึ่งหมายถึงหัวข้อที่สำคัญที่สุด โดยเจ้า Search Engine Spider ก็จะเข้าใจตามความหมายของ tag XHTML นั้น แล้วไปกำหนดคุณลักษณะของการแสดงผลของเจ้า H1 ของเราด้วย CSS ในที่นี้ไม่ได้หมายความว่า คุณจะต้องใช้ H1 กับหัวข้อของคุณเสมอไปใน XHTML นั้นคุณสามารถเรียกมาใช้ได้ตั้งแต่ H1 ไปจนถึง H6 ลำดับความสำคัญก็จะลดน้อยลงไปตามตัวเลขที่มากขึ้น เพราะฉะนั้นคุณต้องเลือกใช้ให้เหมาะสม tag อื่น ๆ ก็เช่นกัน ศึกษาความหมายของ tag แต่ละตัวได้ที่นี่ http://www.xhtml.com

ใช้รูปภาพอย่างชาญฉลาด

ในความจริงเราคงไม่ใช้ ตัวหนังสือเปล่า ๆ มาใช้กับการ design เวปไซท์เสมอไป เช่น ชื่อของบริษัท หรือ ชื่อของเวปไซท์นั้นก็ต้องแทนด้วย โลโก้ ซึ่งเป็นรูปภาพสวย ๆ เราก็สามารถใช้รูปภาพนั้นให้เป็น background picture แทนได้ ด้วยการใช้ CSS ตกแต่ง อย่าลืมไปเสียว่า สิ่งที่ข้อมูลที่อยู่ใน code ของคุณจะต้องเหมือนกับ สิ่งที่ตาของ user เห็น และ Search Engine Spider เห็น ไม่เช่นนั้นจะเข้าข่าย Black Hat และได้รับโทษแบนเวปได้

ตัวอย่าง XHTML:

<h1><span>ThaiNUI | Natural User Interface in Thai</span></h1>

และ ใน CSS:

h1 {

width: 316px;

height: 158px;

background: url(../images/bg/h1_inner_logo.jpg) no-repeat;

}

h1 span {visibility: hidden;}

รูปภาพของคุณก็จะต้องมีคำว่า ThaiNUI | Natural User Interface in Thai ไม่ใช่รูปภาพอีกคำ ใน code เป็นอีกคำ ส่วนอื่น ๆ เช่นกัน ไม่ใ่ช่จงใจซ่อนเนื้อหาบางอย่างไว้ เพื่อผลลัพธ์ทาง SEO ถ้าโดนจับได้ Search Engine ก็จะแบนเวปไซท์ที่กระทำการแบบนี้โดยทันที

โยนทิ้ง Rollover JavaScript ที่น่ารำคาญกันเสียที

หลาย ๆ คนชอบ RollOver Effect และ หลาย ๆ คนยังคงใช้ RollOver Javascript สำเร็จรูปที่เจ้า DreamWeaver นั้น Generate ให้ ลองมาทำ เมนูรูปภาที่ readable กันดูมั้ยเพื่อประสิทธิภาพ และ ประสิทธิผลทาง SEO ที่ดีกว่า เราสามารถวาง ul li เพื่อทำเป็น Navigation Bar โดยเราสามารถที่จะวาง text ที่เป็น keywords ลงไปใน ul li ได้ และ ใช้ CSS จัดการการแสดงผลให้สวยงาม

ผมไม่ขอยกตัวอย่างแห้ง ๆ ให้ดูนะครับ ให้ไปลองฝึกฝนกันที่นี่ CSS rollover buttons

วิเคราะห์ และ กลั่นกรองในส่วนอื่น ๆ

ที่ผมกล่าวมาข้างต้นนั้น เป็นส่วนหลัก ๆ ที่สมควรที่จะทำให้เป็นนิจเลยเกี่ยวกับการเพิ่มคุณประโยชน์ให้กับเวปของคุณ ส่วนอื่น ๆ ก็เช่น กัน คุณจะต้องกลั่นกรอง เนื้อหา ข้อมูลที่มีอยู่ ใช้ tag ให้เหมาะสม และ ที่สำคัญ ศึกษาเรื่อง Accessibility เพิ่มเติมและฝึกฝนครับ เพราะตัวอย่างที่ยก ๆ มาทั้งนี้ทั้งนั้นเป็นส่วนย่อยของ Accessibilty Guideline ทั้งนั้น คุณสามารถ อ่านเพิ่มเติมได้เอง และ ปรับแก้ให้เหมาะสมกับเวปไซท์ของคุณในภายภาคหน้าต่อไปครับ