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 ทั้งนั้น คุณสามารถ อ่านเพิ่มเติมได้เอง และ ปรับแก้ให้เหมาะสมกับเวปไซท์ของคุณในภายภาคหน้าต่อไปครับ

รักกันชอบกันอย่าลืมแชร์นะครัช:
0

Back to Top

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

  1. mook

    cool!

    Reply

  2. พร อันทะ

    ขอบคุณ เพื่อนรดิส มา ณ โอกาสนี้

     

     
    ประโยชน์ แด่ ทุกๆ คน ที่สนใจครับ

    Reply

  3. Artofid

    ที่แท็ก <title></title> ด้วยนะคร้าบ สำคัญมาก อย่าใส่ซ้ำกันทุกหน้า และไม่เกิดประโยชน์ เช่นใส่ชื่อบริษัท, ใส่คำว่า welcome, ใส่ชื่อเว็บอย่างเดียว แต่ควรใส่เป็นเนื้อหาหลักของหน้านั้นเลย เช่น \"How to make css rollover menu\" เป็นต้น

     

     
    จะเป็นประโยชน์ด้าน seo อย่างดี และหากมีคน bookmark จะได้ทำได้เลย จำง่ายด้วย

    Reply

  4. tiamkeaw

    ขอบคุณครับ

    Reply

  5. Pound

    เขียนได้ดีมากครับ อ่านเข้าใจง่าย ขอบคุณสำหรับความรู้ที่มาแบ่งปันครับ

    Reply

  6. psd2html

    เขียนได้สั้นแต่สิ่งต้องการนำเสนอเกินร้อยครับ แต่ก็ยังไม่เข้าใจว่าทำไมเมืองไทย ถึงไม่คิดถึงตรงนี้กันเลย ความสำคัญของตรงนี้จึงตกไป (คนไทยส่วนใหญ่คิดแค่เพียงแต่ว่า css ใช้สำหรับจัดการกับรูปแบบตัวอักษร หรือสีเท่านั้น) ทั้งๆ ที่จริงๆ นั้นมันทำได้มากกว่านี้มาก และมีประโยชน์มากสำหรับเวปไซด์เอง หรือเวปไซด์ของลูกค้า

    Reply

  7. Artofid

    เอาเป็นว่าคนไทยแล้วกัน อันที่จริง seo ทำได้หลายอย่าง ปัจจัยที่มีผลมากๆราว 85 เปอร์เซ็นต์คือ backlinks

     

     
    วิธีที่ง่ายกว่านั้นคือ การโกงในหลายๆรูปแบบ เช่น การคล๊อก, doorway, hidden text(อันนี้เจอบ่อย) การสร้างคีย์เวิดที่กำลังฮิตมาอย่างมั่วซั่ว โดยที่เว็บตัวเองมีหรืออาจไม่มีของเหล่านั้น เช่น คำฮิตตอนนี้ อาจจะเป็น \"คลิปดาราเวียดนาม\" เมื่อก่อนอาจจะเป็น \"เอมมี่ สาหร่าย\" เป็นต้น วิธีเหล่านี้จะง่ายมากในการทำอันดับอย่างรวดเร็วมากกว่าการนั่งทำ css หรือปรับโค้ดต่างๆ วิธีไหนง่าย คนก็ทำมาก ประหยัดแรง

     

     
    อันที่จริงวิธีการทำเว็บให้ประสบความสำเร็จที่ตัวเองหรือลูกค้าตั้งไว้ก็มีหลายแบบ การสร้างเว็บด้วย CSS ก็เป็นหนึ่งในนั้น แต่อย่าลืมว่า ก็ยังมีอีกหลายๆอย่างมากที่มีผลเหมือนกัน

    Reply

  8. mp3wizard

    ขอเสริม สาครราษฏร์ กันอีกวิธีนึง

     

     
    ตัวอย่าง XHTML:

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

     

     
    และ ใน CSS:

     
    h1 {

     
    width: 316px;

     
    height: 158px;

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

     
    text-indent: -999%; /** การใช้ % ช่วยให้ layout ที่แสดงผลใน dream ไม่เละเทะ แต่บางครั้งถ้าใช้ % แล้วมีตัณหาให้ลองใช้ px แทน เช่น -9999px; เป็นต้น (อย่าใส่เยอะมากสำหรับหน่วย px เพราะจะทำให้ layout ใน dream แตก เห็นใจคน design คนอื่นด้วย.. หากต้องทำงานเป็นทีม.. นะจ้ะ**/

     
    }

     

     

     

    Reply

  9. gooaood

    ขอบคุณครับ ติดตามอยู่ครับ

    Reply

  10. ayukacha

    ติดตามเรื่อง SEO อยู่นะครับ

    Reply

  11. grean

    7+5=12 Thank for SEO .

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social media & sharing icons powered by UltimatelySocial