Optimizing for Accessibility + SEO: Images, Video and Non-Text Elements

ตัวเลือกสำหรับการออกแบบ SEO ในส่วนของ รูปภาพ วิดีโอ และข้อความ 

 

Images and non-text elements (รูปภาพ และ ส่วนประกอบที่ไม่ได้เป็นข้อความ)

         

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

ตัวอย่างของรูปภาพและ non-text elements คือ

– รูปภาพ, กราฟ, ชาร์ต, อักษรศิลป์ (word art), ส่วนตกแต่งและภาพพื้นหลัง, รูปภาพจากเว็บแคม, รูปถ่าย

– Infographics

– Image maps (ภาพแผนที่)

– Animations (แอนิเมชั่น)

– Graphic Buttons (ปุ่มกดกราฟฟิก)

– Captchas

ต่อไปนี้เป็นองค์ประกอบของ non-text ที่คุณจะสามารถปรับเพื่อให้มีประสิทธิภาพที่ดีขึ้นได้

 

Alt attributes       

          ภาพ alt attributes ใน SEO จะใช้เพื่อตั้งชื่อรูปภาพหรืออธิบายถึงรูปภาพและหารตั้งชื่อให้รูปภาพที่เราใส่ในเว็บไซต์จะช่วยให้บอทของ Google ค้นเจอรูปของเราได้ง่ายขึ้นแล้วเรายังสามารถเพิ่มตัวอักศรศิลป์ให้กับรูปภาพเพื่ให้ผู้ที่เข้าถึงเว็บเห็นชื่อรูปได้ชัดเจน เช่นในรูปต่อไปนี้:

Alt attribute.PNG

การเพิ่ม alt attributes เป็นสิ่งที่ดีสำหรับการเพิ่มประสิทธิภาพสำหรับ SEO แต่มันก็ยังมีบางอย่างที่คุณจะต้องนึกถึงและตรวจสอบขั้นตอนต่อไปนี้ก่อนที่จะตั้ง alt attributes สำหรับผู้ที่ใช้งาน

 

Alt attribute do’s and don’ts:

ไม่ใส่ alt attribute ให้กับรูปภาพที่ใช้ตกแต่ง: Decorative images (รูปภาพที่ใช้ตกแต่ง) เช่นเมฆที่ใช้ตกแต่งในเว็บไซต์ประกันภัยไม่จำเป็นต้องใส่ชื่อเพื่อเรียก traffic เข้าเว็บไซต์ การใส่รูปตกแต่งเว็บไซต์บางที่ไม่จำเป็นต้องใส่ alt attribute สำหรับทุกรูปให้ทำเป็น alt=”” (null)

ไม่ใช้ alt เมื่อมี link ที่เป็นข้อความ: ถ้ารูปภาพเป็น link และมันมี link ข้อความที่ติดอยูข้างรูปภาพให้ใช้ alt=”” (null) สำหรับรูปภาพ แล้วให้ link ที่เป็นข้อความส่งตรงไปยังเว็บไซต์ที่ได้ตั้งไว้หรือส่งไปที่หัวข้อ การทำแบบนี้จะช่วยให้ SEO ติดอันดับได้ง่ายขึ้นแต่ในกรณืแบบนี้เราแนะนำให้ใช้ alt attributes สำหรับรูปภาพที่จะส่ง link ไปยังเพจของเว็บไซต์ที่คุณต้องการให้ SERPs เจอคุณ

ให้ตั้งชื่อ alt สั้น หรือ เพิ่มคำอธิบายภาพ (captions): เราแนะนำให้คุณตั้ง alt attribute สั้นและมีความหมายตรงกับรูปให้พอเข้าใจก็พอแล้วเราะไม่แนะนำให้คุณตั้ง alt attribute เกิน 125 ตัวอักษร แต่ถ้าคุณมีรายละเอียดที่ยาวเกี่ยวกับรูปภาพที่ใส่ลงในเว็บไซต์ให้คุณเขียนเป็นข้อความและใส่ลงในเพจเลยไม่ตั้งไปตั้งเป็น alt

อย่าอัด keyword ใส่มากจนเกินไป-เขียนให้เป็นธรรมชาติ: ไม่ควรใส keyword ใน alt attribute มากจนเกินไป เพราะมันจะทำให้ SEO ของเว็บไซต์คุณดูมีความสับสนเพราะคุณยัด keyword ใส่กับรูปภาพตกแต่งมากเกินเพราะจะทำให้บอทของ Google สับสนว่าคุณต้องการเอารูปให้ติดอันดับหรือต้องการให้เว็บไซต์ติดอันดับมากกว่ากัน

 

Image captioning (การเพิ่มคำอธิบายของภาพ)

          Google สามารถจับกลุ่มข้อความที่อยู่ใกล้รูปภาพเพื่อให้ attribute ข้อความเหล่านั้นเป็นคำบรรยายของรูปภาพได้โดยการเพิ่มคำอธิบายภาพ (captions) ขึ้นให้เอง ดังนั้นการมีข้อความใกลฃ้กับรูปภาพอาจมีผลกระทบในอันดับได้

Image captioning do’s and don’ts:

ไม่ใส่ alt attribute ถ้ารูปภาพมีคำบรรยาย: ถ้ารูปภาพของคุณมีคำบรรยายให้หลีกเลี่ยงการใส่ alt attribute ให้กับรูปภาพนั้นแม้ว่าการทำแบบนี้จะช่วยในการทำ SEO ให้กับเว็บไซต์แต่มันจะมีผลกระทบต่อการติดอันดับของ SERPs ได้

ให้บรรยายเพิ่มเติมในคำอธิบาย (captions) 

ตัวเลือกเพิ่มเติม: ใช้ <figcaption> tag: <figure> และ <figcaption> tags สามารถใช้สำหรับรูปภาพหรือในส่วนต่างๆของเพจ <figure> ตามหลักการของภาษา HTML แล้ว หมายถึง การแสดงให้เห็นเป็นภาพ ส่วน <figcaption> นั้น คือ การอธิภายสิ่งที่เป็นภาพนั้นเพิ่มเติม ดังนั้นการใส่รายละเอียดเพิ่มเติมพวกนี้อาจจะช่วยในอันดับของเว็ฐไซต์ได้

 

Text-as-images

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

 

Text-as-images do’s and don’ts:

– ไม่ใส่ข้อความที่สำคัญในรูปภาพ: แต่ถ้าคุณต้องการอธิบายความสำคัญของรูปภาพให้ตั้ง alt attribute แทนการใส่ข้อความนรูปภาพ

พิจราณาข้อความที่แท้จริงให้เป็นทางเลือก: สำหรับข้อความที่คุณต้องการให้แสดงผลตามที่คุณได้วางไว้ให้ใช้ HTML + CSS หรือใช้ SVG (Scalable Vector Graphics)

 

Infographics

          การใช้ Infographic เป็นสิ่งที่มีความยอดนิยมในการทำ SEO เพื่อให้ link ของเว็บไซต์มีความสนใจมากขึ้น

สำหรับการเข้าถึงข้อมูลและแสดงผลเพื่อให้ผู้ใช้งานเข้าใจข้อมูล/เนื้อหาได้ง่ายขึ้น Infographic ย่อมาจาก Information Graphic คือ ภาพหรือกราฟิกซึ่งบ่งชี้ถึงข้อมูล ไม่ว่าจะเป็นสถิติ ความรู้ ตัวเลข ฯลฯ เรียกว่าเป็นการย่นย่อข้อมูลเพื่อให้ประมวลผลได้ง่ายเพียงแค่กวาดตามอง ซึ่งเหมาะสำหรับผู้คนในยุคไอทีที่ต้องการเข้าถึงข้อมูลซับซ้อนมหาศาลในเวลาอันจำกัด และให้คุณพิจราณาการใช้สีสำหรับผู้ที่ตาบอดสีด้วยจะได้ไม่มีปัญหาเมื่อมีผู้ใช้งานที่ตาบอดสีเข้ามาอ่านหรือใช้งานบนเว็บไซต์

การใส่และตั้งชื่อของ <Infographic> tag จะช่วยให้คุณเพิ่มคำอธิบายได้ยาวมากขึ้นจะได้มีคำอธิบายอย่างละเอียด (คุณสามารถพิจราณาการเพิ่ม Infographic ได้ตามข้อในด้านล่างนี้)

 

Infographic do’s and don’ts: ื

– ไม่อธิบายรายละเอียดทั้งหมดใน alt attribute: ใช้ alt attribute ตามหลักเกณที่ควรใช้ไม่งั้นก็ให้ตั้งรายละเอียดที่ยาวเป็น description เลย

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

พิจราณาการเพิ่มคำอธิบายด้วย ARIA: ARIA (Accessible Rich Internet Application) attribute เป็นการเพิ่มคำอธิบายสำหรับรูปภาพที่เป็น alt attribute ให้บันทึกส่วนนี้ไว้เพราะบางทีรูปภาพ alt ที่มีข้อความอาจจะเกิดการอธิบายซ้ำได้

การใช้ longdesc attribute: การตั้งชื่อภาพด้วย longdesc attribute นี้ จะช่วยส่ง link ให้กับบอทเพื่อที่จะอ่านคำอธิบาย (description) ที่ยาวสำหรับภาพต่างๆได้ (แม้ว่าจะอยู่ในเพจหรือในเพจอื่น) แต่ longdesc attribute ไม่ได้รับการสนับสนุนที่ดีและไม่ได้อยู่ในเทคนิคของการทำ SEO

–  พิจราณาการเลือกซ่อนข้อความ: สามารถดูตัวอย่างการซ่อนข้อความได้ที่ (https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html) ที่ซ่อนไว้เป็น CSS clip ใน  iFrame HTML

ใช้โปรแกรม CSS สร้าง infographic ของคุณ: ถ้าใช้โปรแกรมนี้สร้างจะเป็นทางออกที่ดี ด้านล่างนี้เป็นภาพ infographic 2  ภาพที่แสดงผลใน Google ภาพแรกเป็นไฟล์ภาพที่มีข้อความและมีลิงค์ในด้านล่างของภาพ ส่วนอีกภาพเป็น infographic ที่ข้อความมี index และมี links ที่สร้างผ่าน HTML+CSS

ภาพด้านซ้าย: Infographic เป็นภาพ (ในหน้าเพจยังให้ข้อมูลของข้อความใน infographic ในเพจด้วย)

ภาพด้านขวา: ภาพ infographic เป็น HTML ที่ออกแบบโดย CSS (http://throup.org.uk/infographic/)

Infographic by CSS

คุณจะเห็นได้ว่าภาพเหมือนกันมากจนแยกความแตกต่างไม่ได้เลย

เราจะมาดู code ของภาพ infographic ที่แสดงผลใน Google cache ว่าจะออกมาในรูแปบบไหนในภาพด้านล่างนี้

ภาพด้านบน: Google cache (บางส่วน) ข้อความของภาพ infographic จะปรากฏขึ้นที่เพจของภาพ infographic

ภาพด้านล่าง: Google cache (บางส่วน) ของข้อความ infographic ในภาพ infographic จะอยู่ที่ CSS infographic page

infographic

infographic css.jpg

ทั้งสองแบบนี้เป็นผลลัพธ์ของการแก้ปัญหาที่สามารถอ่านได้เลย รูปแบบที่ทำโดย CSS ไม่ได้ทำสำเนาของข้อความไปใส่เป็นเนื้อหาในเว็บไซต์ให้กับผู้ที่มาเข้าชมได้อ่าน

ส่วนในเวอร์ชั่น CSS รูปแบบ ขนาดของหัวข้อ และขนาดของตัวอักษร จะจัดวางได้ดีกว่า เพื่อให้ผู้ที่ใช้งานหรือผู้เยี่ยมชมอ่านได้ง่ายขึ้น สามารถดูตัวอย่างของ hidden text ได้ที่ https://moz.com/blog/seo-accessibility-formatting-and-links

 

Image & non-text element tools & resources (เนื้อหาและข้อมูลเพิ่มเติ่มสำหรับองค์ประกอบภาพและเครืองมือเพื่อใช้ในส่วนที่ไม่ใช่ข้อความ)

 

Video transcription, subtitling, and captioning

 

Video transcription (คำอธิบายของวิดีโอ)

          Video transcription คือข้อความที่เป็นคำอธิบายที่มาพร้อมกับวิดีโอ การใส่ Video transcription มีประโยชน์สำหรับวีดีโอคุณอย่างแน่นอน เพราะจะสามารถช่วยให้คนที่หูหนวกหรือใบ้เข้าใจถึงความหมายของวีดีโอได้เพราะคนที่ไม่ได้ยินเสียงหรือไม่ถนัดในการฟังสำเนียงการพูดของต่างถิ่นจะไม่มีทางเข้าใจถ้าดูแค่วิดีโอเฉยๆ เราจึงต้องเพิ่มคำอธิบายที่เป็นประเด็นสำคัญของวิดีโอแนบไปด้วย

Search engine มีความคล้ายคลึงกันกับ video transcription เพราะมันเป็นการเพิ่มคำอธิบายของวิดีโอให้เป็นข้อความ/content

 

Video subtitling and captioning (การใส่ซับไทเทิลและคำบรรยายภาพในวิดีโอ)

          การใส่ซับไทเทิลและคำอธิบายไม่ใช่เรื่องที่จะทำกันง่ายๆ เพราะมันเป็นขั้นตอนที่ต้องใช้เวลาพอสมควร ซับไทเทิลจะบรรยายในส่วนของบทสนทนา ส่วน captioning (คำบรรยายภาพ) จะบรรยายเสียงอื่นๆที่ไม่ใช่บทสนทนา เช่น เสียงเพลง เสียงเอฟเฟค และเสียงตรวจสอบระบบลำโพง

ตัวเลือกสำหรับเนื้อหาที่จะเพิ่มในวิดีโอของคุณ:

–  ให้เพิ่ม transcript ของวิดีโอเป็นเนื้อในเพจ: คุณสามารถเพิ่ม transcript ของวิดีโอใส่ในหน้าเว็บเพจเดียวกันได้เหมือนในตัวอย่างในลิงค์ต่อไปนี้ (http://www.manythings.org/b/e/5000/) ซึ่งคุณสามารถพิมพ์ transcript ด้วยตนเองหรือใช้เครื่องมือมาช่วยก็ได้

การใช้ HTML5 <video> and <track>: ใช้ HTML5 เพิ่มองค์ประกอบของ <track> tag on a <video> หรือ <audio> จะช่วยให้คุณเพิ่มวิดีโอในหน้าเว็บเพจได้พร้อมกำหนดคำอธิบาย (transcription) ของวิดีโอให้เป็นไฟล์ a .vtt และข้อดีของการมีไฟล์ a .vtt คือ google จะสามารถนำข้อความ/คำบรรยายของวิดีโอไป index ได้

–  เพิ่ม interactive transcription ให้กับวิดีโอ: ลองใช้บริการที่จะสร้าง interactive transcription ให้กับวิดีโอดู เพราะทันคือการถอดเอาคำพูดทุกคำมาบรรยายแล้วบอกเวลาคร่าวๆของประโยคเหล่านั้นและเมื่อเราคลิกที่ประโยคในสคริปวิดีโอจะเล่นตรงนาทีของประโยคนั้น สามารถดูตัวอย่าง timed transcript ได้ในลิงค์ต่อไปนี้ (http://www.ted.com/talks/amit_sood_every_piece_of_art_you_ve_ever_wanted_to_see_up_close_and_searchable/transcript?language=en)

YouTube transcripts, subtitles และ closed captions: YouTube จะจัดการในการตั้งหัวข้อหรือเพิ่มคำบรรยายต่างๆโดยอัตโนมัติและ transcript ที่ได้เขียนขึ้นมาโดยอัตโนมัติจะต้องผ่านการตรวจสอบเป็นประจำแล้วการที่คำอธิบายของคุณมีลิงค์หรือคลิปเสียงต่างๆมาแทรกจะทำให้เกิดข้อผิดพลาดแล้ว search engine จะเห็นเป็นแค่ตัวอักษรที่ไม่มีความหมาย

 

Video accessibility do’s and don’ts:

ให้เพิ่มวิดีโอ transcript: เวลาและความพยายามจะทำให้ได้ transcript (คำอธิบาย) ที่มีประสิทธิภาพดีกว่าและจะช่วยให้ search engine กับผู้ที่เข้าชมวิดีโอเข้าใจได้ง่ายขึ้น เพราะมีข้อความหรือคำอธิบายของวิดีโอนั้น

ให้อัพโหลดแล้วแก้ไข transcript และ captions ใน YouTube: การที่ YouTube ได้ตั้งคำบรรยายภาพให้โดยอัตโนมัติจะเป็นตัวอักษรที่ไม่เป็นภาษาเขีนน ดังนั้นคุณจึงต้องตามไปตรวจสอบแล้วแก้ไขให้ถูกต้องทุกครั้งเมื่อได้อัพโหลดวิดีโอ เพื่อให้ search engine ค้นพบวิดีโอของคุณได้

– ให้ขยายความในคำอธิบาย: อธิบายเพิ่มเติ่มในเนื้อหาหรือข้อความที่เราได้ตั้งไว้กับวิด๊โอ เช่น เพิ่มชื่อของผู้ที่บรรยาย ชื่อเพลง และเสียงประกอบในวิดีโอด้วย

ไม่สแปม: อย่าใส่ keyword ใน transcript ของวิดีโอมากเกินไป มันไม่ดีต่อประสบการณ์ใช้งานของผู้ใช้และถ้าอัดคีย์เวิร์ดแบบนั้นอาจจะทำให้ search engine มองข้าม transcript ของคุณได้เลย ดังนั้นให้เขียนคำอธิบายตามความเหมาะสมหรือเสมือนจริงที่สุด

 

Video accessibility tools & resources (เครื่องมือสำหรับวิดีโอ และ แหล่งข้อมูลเพิ่มเติม)

  • คำแนะนำสำหรับการสร้างไฟล์ Transcript (https://support.google.com/youtube/answer/2734799?hl=en)
  • วิธีเพิ่ม captions ในวิดีโอบนหน้าเว็บเพจ (http://www.washington.edu/accessibility/videos/web/)
  • การเพิ่ม transcript ในเว็บไซต์: ทำให้ผู้ใช้งานคนอื่นรู้จักวิดีโอและการถ่ายทอดของคุณ (http://www.uiaccess.com/transcripts/transcripts_on_the_web.html#justdoit)
  • Media Accessibility Checklist: รายการของการเข้าถึงมิเดียที่คุณต้องตรวจสอบ (https://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Checklist)
  • Deafness and the User Experience: ตัวเลือกสำหรับผู้ใช้งานและผู้ที่หูหนวก (http://alistapart.com/article/deafnessandtheuserexperience)
  • เครื่องมือสำหรับทำ transcript และ บริการอื่นๆอีกมากมาย:
    • Amara volunteer or paid transcription services
    • Wistia captioning
    • 3Play interactive captioning
    • ProTranscript basic or interactive transcription
    • CaptionBox interactive transcripts (has WordPress plugin)
    • SubPLY embeddable, customizable, interactive transcripts
    • Dotsub captioning & translation
    • YouTube: อัพโหลดวิดีโอของคุณ ดาวน์โหลด transcript วิดีโดโดยอัตโนมัติ และคุณสามารถมาแก้ไขหรือเปลี่ยนคำอธิบายของคุณได้ในภายหลัง
    • ซอฟต์แวร์การจดจำเสียง. ซึ่งมีตัวเลือกให้เลือกเป็นจำนวนมาก เราควรจะจำไว้ว่าการจดจำเสียงของคุณหรือฟังเสียงแล้วซอฟต์แวร์สามารถบรรยายเป็นอักษรออกมาได้เป็นสิ่งที่สำคัญอย่างหนึ่งในขั้นตอนนี้

 

Cr. (https://moz.com/blog/seo-accessibility-images-video)

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s