ข้อห้ามและข้อควรระวังในการเขียน XHTML และ CSS

มีโอกาสได้อ่านกฏเหล็กและมาตรฐานการ penalize (ลงโทษ) และ banned (ไม่เข้ามาเก็บเว็บเราเข้าในผล search เลย) ของ google หลายๆข้อ มันเป็นสิ่งที่หลายคนไม่รู้ และใช้กันบ่อยมาก เลยอยากจะเผยแพร่ต่อ ดังนี้

1. หลีกเลี่ยงการใช้ Header Element แล้วซ่อน text ไว้ เช่น

<h1><span>header 1</span></h1>

แล้วใน CSS ใช้ property display:none, visiblity: hidden หรือ text-indent: -9999px; เพื่อซ่อน text ใต้ span ไม่ให้เห็น
ถ้าต้องการที่จะแสดง h1 เป็นรูป ให้ใช้รูปตรงๆไปเลย แล้วใส่ keyword ของรูปเหล่านั้นเป็น alt ของรูปแทน [ข้อนี้ อ้างอิงจาก Matt cutts เป็น software engineer ของ Google]

<h1><img src=”../images/xx.jpg” alt=”header1″></h1>

ที่เป็นเช่นนี้ก็เพราะว่า การที่เราสั่ง hidden text ใดๆ ไม่ว่าจะใน HTML หรือ CSS นั้น google จะมองเป็นการ “ปกปิด” หรือซ่อน keyword ที่ต้องการ ซึ่งเป็นวิธี black hat วิธีหนึ่ง สำหรับดัน SEO ให้สูงขึ้นนั่นเอง

2. อย่าใช้ company logo ตั้งเป็น <h1></h1> เช่น

<h1>
<p class=”logo”><img src=”../images/logo.jpg” alt=”your company name”></p>
</h1>

อันนี้เป็นข้อถกเถียงกันมาก เพราะว่าคนที่ใช้วิธีนี้มักจะมองว่า ก็ในเมื่อเว็บนี้มันเป็นเว็บของบริษัทดังนั้นสิ่งที่ควรเป็น topic ใหญ่ที่สุด มันก็น่าจะเป็น company ของบริษัทสิ การใช้ logo เป็น H1 ก็น่าจะถูกต้องแล้ว แต่ถ้ามองในเรื่องของความ Semantic หรือการสื่อความหมายของเนื้อหา เราจะมองกลับกันไปเลย
เพราะเราจะมองว่า <h1> <h2> <h3> ถึง <h6> จะคลุมเนื้อหาที่เป็นหัวข้อ ที่บ่งบอกว่าหน้าเว็บนั้น เป็นข้อมูลเกี่ยวกับอะไร ซึ่งเป็นส่วนที่สำคัญที่สุดในหน้านั้น ดังนั้น ถ้าคุณใช้ <h1> คลุม logo แน่นอนว่า ทุกๆหน้าของเว็บคุณมันมีโลโก้ทุกหน้าอยู่แล้ว ตามหลักการออกแบบเว็บไซต์ มันคงจะไม่ใช่เรื่องดี ที่ google เข้าไป index หน้าไหน ก็ไปมองที่ h1 แล้วเป็นหัวเรื่องเดียวกันทั้งหมด

ถ้ายังจินตนาการไม่ออกให้นึกถึงว่า สมมติหน้าเว็บเราหน้าแรกเป็นเว็บร้านอาหาร มันก็คงไม่แปลกที่เราจะใช้ h1 เป็นโลโก้ เพราะมันเป็น main page แต่สมมติเราคลิกไปที่เมนู “อาหารแนะนำ” มันคงจะดีกว่า ถ้าหัวข้อใหญ่ (h1) ของในหน้านั้น จะขึ้นว่า “อาหารแนะนำ” เพื่ออธิบายว่า เนื้อหาภายใต้เพจนั้นเกี่ยวกับเมนูอาหาร ซึ่งทางร้านแนะนำให้ลูกค้าว่าน่าสั่งมาทาน แทนที่จะใช้ logo เหมือนกับในหน้าแรก ดังนั้น

เพื่อความ semantic ตัดปัญหานี้ไปด้วยการใช้ h1 ให้เกิดผลประโยชน์สูงสุด โดยการ “อย่าเอาโลโก้เป็น h1″ ของเว็บ แต่ใช้เป็น tag <p> ครอบ หรือ element อื่นๆครอบ จะดีที่สุด จุดนี้ google เคยใช้ในการลงโทษเว็บไซต์หลายๆเว็บมาแล้ว (ลด pagerank) จึงควรระวังเป็นอย่างยิ่ง

3. ในส่วนที่เป็น link ต่างๆ แล้วต้องการใช้รูปแทน text

อย่าใช้เทคนิค Image replacement

(สั่ง background ให้ element ตัวที่ครอบ text อยู่แล้ว display:none / visibility: hidden / text-indent ออกไป)

เพราะจะทำให้ screen reader ไม่สามารถอ่านข้อความลิ้งค์นั้นๆได้ ว่าลิงค์นั้นเป็นลิ้งค์ไปไหน และ Google จะมองว่าเราตั้งใจปกปิด spam text ที่ถูกซ่อนไว้อีกด้วย วิธีที่ดีที่สุด เรียงตามลำดับ ดังนี้

3.1 ใช้ link ที่เป็น text เท่านั้น หรือถ้าไม่สามารถเลี่ยงได้ ให้ใช้เป็น

<img src=”xx.gif” alt=”ชื่อลิงค์- ชื่อปุ่ม”>

(ใช้เป็น image แทนที่จะเป็น background โดยใส่ข้อความที่เป็นชื่อลิงค์ใน alt=”” แทน เพราะ screen reader ยังอ่านได้)

3.2 กรณีที่ใช้ font พิเศษ ให้หลีกเลี่ยงการใช้รูปเป็น background แล้วซ่อน text เช่นเดียวกัน แต่ให้ใช้ “font replacement” เช่น cufon แทน
(หรือใช้ CSS3 property font-face ก็ได้ แต่ต้องตรวจสอบดูว่า เวลามัน render บน IE แล้ว ผิดเพี้ยนมากน้อยแค่ไหน และยอมรับได้หรือไม่)

แถมท้ายด้วย 12 Basic On Site SEO

  • The Meta Keywords, Description and Robots tag
  • The Title Tag
  • The Body Text : โฟกัสหาเนื้อหาตัวหนา
  • The first sentence in the body text and the first words used per sentence
  • The URL : ชื่อ url
  • The H1 and H2 Texts
  • Same Site Link Texts :ลิ้งภายในเว็บไซต์
  • Same-Site Link URLs :ลิ้งภายในเว็บไซต์
  • Outbound Link Text : ลิ้งภายนอก
  • IMG Alt Tags : alt=”___” title=”____”
  • Keyword Density
  • Your HTML comments should have your SEO terms in them

ที่มา : http://www.knowledge.fat-idea.net/

Comments

comments

9 thoughts on “OnSiteSEO

  1. i loved your website, it always help me when i want to understand more about some subject, thanks a lot for helping us to get this information.

Leave a Comment

Your email address will not be published.