สร้าง Findability Website ด้วย Web Standards

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

วันนี้ผมจะพูดถึงอะไร ผมจะพูดถึง Findability website ชื่อมันดูโก้เก๋ดีไหมครับ มันเป็นแนวคิดใหม่ของ Aaron Walter จริง ๆ แล้วก็ไม่ใช่อะไรใหม่ไปเลยทีเดียวเพียงแต่แนวคิดเหล่านี้ยังไม่มีใครบัญญัติชื่อให้มัน ลักษณะการทำงานของมันอย่างเป็นรูปธรรม ทีนี้เรามาดูกันว่า ไอ้ Findability Web มันคืออะไร ซึ่งโดยการทำงานของมันแล้วมันก็คือ Website ที่มีเป้าหมายมุ่งเน้นช่วยเหลือผู้ใช้ให้

• เจอ website ที่พวกเขาค้นหา
• เจอ content ที่ต้องการใน website นั้น ๆ
• หรือ รับรู้ถึงคุณค่า ของ content ใหม่ ๆ ที่พวกเขาค้นเจอ

ค้นอะไร แล้วอะไรล่ะ Findability? เหมือน SEO ไหม? ไม่ใช่ครับไม่ใช่การทำ SEO แต่อย่างใด แต่ SEO ต่างหากที่เป็น Subset ของมันจากแผนภาพมาดูกันว่า มันคืออะไรในส่วนย่อย

แล้วในภาพรวมของการพัฒนาล่ะ เป็นอย่างไร

การทำ Findability Website มันจะได้อะไรบ้างล่ะ

• • ได้ SEO มาเป็นผลพลอยได้โดยไม่รู้ตัว แต่ไม่ใช่ได้ page rank นะครับ
• • ได้ content ที่สะอาดเข้าใจง่าย

Findability และ Web Standards เป็นเหมือนเครือญาติกัน อาจจะพูดได้ว่า web standards + content ที่น่าสนใจ = Findability ถึงตรงนี้คงอยากจะทราบกันแล้วใช่ไหมครับว่าใช้ Web Standards ร่วมกับ content อย่างไรแล้วเพราะอะไรทำไมถึงใช้เรามาดูพร้อม ๆ กัน

Semantic Markup

เพื่อให้จักรกลทั้งหลาย เข้าใจได้ การเขียน code ที่มีความหมายเชื่อ หรือไม่ว่ามันช่วยให้จักรกล สมองกลต่าง ๆ เข้าใจได้ในระดับหนึ่ง เช่น crawler ของ Google ที่ถูกพัฒนาขึ้นตาม Web Standards

Accessibility

เมื่อเกิดความเข้าใจมันก็จะเกิดการเข้าถึงได้ง่าย เข้าใจง่ายทั้งเครื่องจักร และ มนุษย์

Progressive Enhancement

ลดการใช้สิ่งที่จะกั้นขวางทางเข้าถึงข้อมูลของ crawler หรือ user ที่จะเข้าถึงตัวข้อมูลเราเสีย อาทิ JavaScript, Ajax, Flash

Microformats

ตรงนี้จะช่วยให้ content สามารถสืบค้นหาได้อีกซ้ำแล้วซ้ำเล่า แถมยังหาตำแหน่งข้อมูลได้ง่ายขึ้นไปอีก เพราะอะไรให้ลองอ่านบทความที่ผมเคยเขียนไปแล้วเกี่ยวกับ Microformat

Less Code

ใช้ code อย่างประหยัดเพื่อการเก็บ index ข้อมูลของ Search Engine ได้ง่ายขึ้น

ทีนี้ผมจะอธิบายรายละเอียดพอสังเขป

Semantic Markup

Semantic Markup เป็นการใช้เทคนิคของ SEO เข้าร่วมกับการเขียน code ซึ่งก็คือการจัดการวาง keywords ให้ถูกที่ถูกทาง ดังตัวอย่างเหล่านี้

• • <title>
• • พวก heading ทั้งหลาย ใช้มันให้มันเป็นประโยชน์ที่สุดนะครับ
• • <strong> และ <em>
• • meta description ไม่ต้องไปห่วง meta keywords มากนัก
• • การตั้งชื่อให้ links
• • ใช้ attribute alt และ title
• • ใน table ทำอย่างไรให้มันสื่อความหมายของ content ที่อยู่ในตัวมันให้ได้มากที่สุด ก็ต้องใช้ <th>, <caption> และ summary

ที่อื่นที่เราจะวาง keywords ไว้ล่ะมีไหม มีครับเราสามารถวาง keywords อื่น ๆ ไว้ได้ใน

• • URL และ URI
• • ในชื่อไฟล์ ของ style sheet
• • ในชื่อรูปภาพของคุณ
• • และ ใน content ของคุณ 7% หรือ น้อยกว่า

เราจะหา keywords ของ website เราได้อย่างไร ก่อนอื่นเราก็ต้องทำการ research กับกลุ่มเป้าหมายที่เรามุ่งหวังในตลาดที่เราจะลงทุน หรือ กลุ่มเป้าหมายที่เราต้องการจะสื่อถึง ถ้าทำการ research ไม่ได้จะทำอย่างไรล่ะ ก็คงต้องแก้ไขด้วยการดำเนินตามเนื้อหาหลัก ๆ ที่เราตั้งไว้ และ ทำ content ให้มัน semantic ที่สุดเท่าที่จะทำได้ แล้วจะรู้ได้อย่างไรว่า content ของคุณนั้นมันเป็น semantic แค่ไหน ให้ลองแวะเวียนไปเยี่ยม และ ทดลองใช้เจ้าหนูนี่ครับ W3C’s Semantics Extractor

Accessibility

อย่าลืมว่าเราต้องเพิ่ม Accessibility ให้กับ keywords บางคำเพื่อให้ได้ความหมายครบถ้วนของข้อความ เช่น ตัวย่อต่าง ๆ ก็ใช้ <accronym> หรือ <abbr> กับมันเสียเพื่ออธิบายคำเต็มของมัน เพื่อเพิ่มประสิทธิภาพให้กับการ index หน้าเวปของเราให้มากขึ้น (Google ชอบกินของมีประโยชน์)

เรื่อง footnote ก็ควรต้องมีในกรณีที่เราใช้ภาพแทนการอธิบายบางอย่าง ควรจะทำ footnote ไว้อธิบายภาพเหล่านั้น เช่น ผมมีรูปโลโก้ของบริษัทลูกค้าที่ผมทำเวปให้ไว้ในเวป port. งานผม ซึ่งเหมือนเป็นนัยว่าผมน่ะทำเวปให้กับบริษัทนี้นะผมก็จะเขียนออกมาได้แบบนี้

<img src="logos.gif" alt="Client logos" longdesc="#footnote" />

<a href="#footnote" title="Image description">D</a>

<a name="footnote"></a>

<div id="footnote">

<h4>ลูกค้าของเราคือ … </h4>

<ul>

<li> Yahoo! </li>

<li> John Deere </li>

<li> CNN </li>

...

</ul>

</div>

Progressive Enhancement

คุณจะมั่นใจได้แค่ไหนว่า content ของคุณสามารถเข้าถึงได้แม้อยู่ใน web browsers ที่ไม่ support เทคโนโลยีที่คุณเอามาใช้ เช่น JavaScript, Ajax หรือ Flash เพราะฉะนั้นควรจะหลีกเลี่ยงการใช้สิ่งเหล่านี้กับ content สำคัญ​ ๆ ที่คุณต้องการจะให้ crawler มองเห็น หรือ user ทั้งหมด (หมายรวมถึงผู้พิการทางสายตา หู ฯลฯ) ถ้าไม่สำคัญ​ เพียงเพื่อความสวยงามก็ใช้ได้ครับ ปัจจุบันเหล่า Rollover Image Navigation ก็ถูกสร้างแทนด้วย CSS ได้หมดแล้ว ไม่จำเป็นต้องใช้ JavaScript และ อย่าลืมนะครับว่า Ajax เช่นกัน สิ่งต่าง ๆ นานา ที่ถูกโหลดด้วย Ajax นั้น crawler ของ Search Engine จะไม่สามารถเข้าถึงได้ และ สิ่งเหล่านั้นจะไม่มี URL เพื่อการ index ด้วย

อย่างไรก็ตาม เราก็มีวิธีแก้ปัญหาของ Ajax ได้เพื่อให้เป็น SEO friendly ดังภาพข้างล่างนี้

ทีนี้เรามาดูการแก้ปัญหาของ flash กันบ้างถ้าเราอยากจะใช้มันกับงาน website ของเรา อนึ่ง flash นั้นมีความสำคัญเป็น level สูงสุดของ interface layer เพราะฉะนั้นมันจะลอยอยู่เหนือชาวบ้านเสมอ เพราะฉะนั้นการวางให้ถูกที่ถูกทางก็ดูจะเป็นปนะโยชน์ในการใช้งานด้วย ทีนี้มาดูกันว่าเราจะทำอย่างให้ flash ของเรานั้นมัน Semantic คุณสามารถใช้ JavaScript ที่ผมจะแนะนำนี้เพื่อทำให้ flash ที่คุณใช้มัน readable ลอง click ไปเยี่ยมกันครับ Javascript Flash Player detection and embed script

จะเห็นได้ว่าก่อนที่เราคิดจะใช้ Rich Interface ทั้งหลายนี้เราต้องวางแผนให้รอบคอบก่อน ก่อนจะลงมือทำอะไรลงไปเพราะถ้าเราพลาดเมื่อไหร่ เราอาจจะพลาดกลุ่มเป้าหมายที่ควรจะได้ไปเช่นกัน

Microformats

สุดยอด semantic markup เป็นส่วนหนึ่งของความฝันของท่าน Sir. Tim Berners Lee เกี่ยวกับ Semantic Web ซึ่งมอง Internet ทั้งโลกนี้เป็นเหมือน Database เดียวกันแล้วเราสามารถหาข้อมูลทุก ๆ สิ่งทุกอย่างได้เท่าที่เราต้องการ เหมือนการจัดเก็บสิ่งของไว้ในที่ที่คุณสามารถมองเห็นหยิบจับมันได้ง่าย (นี่เป็นส่วนหนึ่งของ Semantic Web) Microformat นั้นเป็น code ที่เป็นมาตรฐานเราสามารถนำเข้ามาใช้ให้เป็นประโยชน์ได้ตามความเหมาะสมเลย ปัจจุบัน search engine ยังไม่ให้การสนับสนุนเท่าไรนัก แต่ก็เริ่มกันแล้วที่จะ support ตรงจุดนี้ เท่าที่ทราบก็มี Technorati, Yahoo! microSearch ลองเข้าไปเล่นดูนะครับ

Less Code

สุดท้ายเขียน code ให้น้อยที่สุด แต่ถูกต้องที่สุด เป็นประโยชน์ที่สุด หลายคนเคยถามผมว่าถ้าเรา validate ผ่านแล้ว เราจะได้ผลลัพท์ทาง SEO ดีดีด้วยใช่มั้ยครับ – คำตอบคือ – ได้ครับ แต่ไม่เกี่ยวกับ Page Rank นะครับ แต่อย่างที่พร และ ผม เคยบอกเอาไว้ การเขียน code ให้สะอาดเป็นมาตรฐานนั้นถือเป็นการ ตีตั๋วเข้าไปอยู่ใน list พิจารณาของ Google ในอันดับต้น ๆ แน่นอนครับ (ย้ำอีก Google ชอบกินของดีมีประโยชน์)

สรุปผลประโยชน์ โดยองค์รวม

Website ใดที่ Findable จะทำให้มีโอกาสในการเข้าถึงกลุ่มเป้าหมายได้มากขึ้น หรือ กลุ่มเป้าหมายกว้างขึ้น เพราะมี Web Standards เข้ามาช่วย เพื่อการเข้าถึงที่มากขึ้นเก็บเกี่ยวสิ่งที่คุณต้องการได้มากขึ้น

พบกันใหม่ครับ