ในการทำ SEO (Search Engine Optimization) นั้น สำคัญต่อการทำเว็บไซต์เป็นอย่างมาก

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

ก่อนอื่นขอออกตัวก่อนเลยครับว่า ไม่ค่อยมีความรู้ด้าน Search Engine Optimization เท่าไรนัก หากมีข้อผิดพลาดประการใดสามารถพูดคุยแลกเปลี่ยนกันได้ครับ

เพื่อความสะดวกรวดเร็วและความขี้เกียจพิมพ์ของผมเอง ผมได้จัดเตรียม Pattern พื้นฐานสำหรับการใส่ Meta ซึ่งเป็นรูปแบบหนึ่งในการปรับแก้ไขหน้าเว็บไซต์ เพื่อรองรับ Search Engine รวมถึง Facebook Open Graph และ Twitter ซึ่งในอนาคตหากมี Meta ของ Search Engine ตัวอื่นๆ ผมจะเข้ามาปรับปรุงเปลี่ยนแปลงให้ครับ

For Google

สำหรับ Google หรือ Search Engine อื่นๆนั้น จะมี Tag Title ซึ่งไม่ควรจะมีข้อความที่เหมือนกัน แต่ส่วนมาก Web Developer จะใช้ชื่อเว็บใส่ใน Template ให้มันมีผลทุกๆหน้าซึ่งผมก็ทำ แบบนี้ Search Bot ไม่ชอบอย่างแรงครับ Title ควรจะสื่อถึงหัวข้อหลักของหน้าเว็บอย่างแท้จริง และนอกจาก Title แล้วยังมี Meta อื่นๆอีก ดังนี้

  • description – เป็นคำอธิบายโดยย่อของข้อมูลในหน้าเว็บนั้นๆ ตรงส่วนนี้มีผลต่อ Search Bot พอสมควร
  • keywords – ตรงส่วนนี้เหมือน Google จะให้ความสำคัญน้อยลง และใส่ได้ก็ดีครับ วิธีการใส่ก็วาง Keyword แล้วใช้ Comma (,) คั่นแต่ละคำ
  • author – ตรงนี้ก็ผู้เขียนครับ บุคคลหรือหน่วยงาน แล้วแต่เลยครับ
  • copyright – เป็นคำอธิบายเกี่ยวกับลิขสิทธิที่ในหน้าเว็บครับ
  • application-name – เป็นชื่อของ Application ซึ่งที่ผมใช้ก็คือใส่ชื่อของเว็บไซต์ ตรงนี้ไม่แน่ใจนะครับ ว่าถูกผิดอย่างไร

For Facebook

เป็นการกำหนดค่าสำหรับ Facebook โดยสิ่งที่จะได้แบบเห็นชัดที่สุดคือตอนแชร์หน้าเว็บไปยัง Facebook จะได้ข้อมูลและรูปภาพที่ตรงกับเนื้อหาที่เราต้องการสื่อได้มากที่สุด จะประกอบไปด้วยหลายๆ Property ดังนี้

  •  fb:app_id – หากเว็บไซต์ไหนมี facebook app_id ให้ใส่ได้ทีนี่
  • og:title – เป็นหัวข้อของหน้าเว็บ ตรงนี้น่าจะเหมือนๆกับ Tag Title นะครับ ถ้าใครขี้เกียจๆหน่อยก็ใช้ข้อความเดียวกันได้เลย หรือจะปรับแต่งให้เหมาะกับ Facebook ก็แล้วแต่ครับ
  • og:type – เป็นประเภทของหน้าเว็บที่ถูกจำแนกโดย Facebook อันนี้ผมยังหาแหล่งอ้างอิงไม่ได้ เห็นว่าใช้ blog, article กันครับ ถ้าเจอแหล่งอ้างอิงจะมาอัพเดทอีกครั้งครับ
  • og:image – เป็น URL ของรูปภาพหลักครับ เลือกมาสัก 1 รูป
  • og:url – เป็น URL ของหน้าเว็บปัจจุบันครับ
  • og:description – เป็นคำอธิบายโดยย่อของหน้าเว็บครับ เช่นเคย จะใช้ให้เหมือนกับ Meta description ในส่วนของ For Google ก็ได้ หรือจะปรับแต่งให้เหมาะสมกับการแสดงผลบน Facebook ก็ได้ครับ

เมื่อใส่ครบเราแล้วลองแชร์ใน Facebook เพื่อตรวจสอบผลลัพธ์ครับ ถ้าถูกต้องก็น่าจะได้แบบในรูปด้านล่าง แต่ถ้าเราไม่ใส่ Meta Tag นี้ Facebook ก็จะมีวิธีการพิจารณาอยู่ระดับนึงครับ ว่าอะไรคือ Title อะไรคือรูปหลัก ซึ่งบางครั้ง มันไม่ตรงกับที่เราต้องการ

For Twitter

ส่วนของ Twitter นั้นจะคล้ายๆกับ For Facebook ซึ่งยังไม่ขออธิบายเพิ่มเติมนะครับ ขอหาข้อมูลก่อน

สรุป

ในการปรับแต่งส่วนของการ Programming Meta Tag นี้ค่อนข้างไม่มีอะไรที่ซับซ้อนครับ แต่ในบางครั้งสิ่งที่ยากที่สุดของผู้พัฒนาระบบสารสนเทศอย่างเราๆ อย่างผมนี่ก็คือ การคิดข้อความเพื่อสื่อสารให้บุคคลอื่นได้รับทราบและเข้าใจ คำถามหลายๆข้อบางทีเราก็คิดไม่ค่อยได้ เช่น

  • ในเรื่องที่จะนำเสนอยาว 4 หน้ากระดาษนี้ จะเขียน Description อย่างไรให้บุคคลอื่นสนใจ
  • คิด Keyword อย่างไรให้ตรงกับสิ่งที่เรานำเสนอและตรงกับสิ่งที่ผู้ใช้ค้นหา

ซึ่งผมก็ค่อนข้างมั่นใจว่า บทความที่ผมเขียนนี้ก็ยังสื่อสารให้บุคคลอื่นเข้าใจได้ไม่ค่อยดี รวมถึงจะทำอย่างไรให้เว็บไซต์มันใช้งานง่าย

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

About The Author

นายนภดล แข็งการนา

นักวิชาการคอมพิวเตอร์ - กลุ่มงานพัฒนาระบบสารสนเทศ
สำนักวิทยบริการและเทคโนโลยีสารสนเทศ
มหาวิทยาลัยราชภัฏนครสวรรค์

Leave Comment