แนวทางปฏิบัติแนะนําสําหรับ SEO ของ Google รูปภาพ

Google มีฟีเจอร์และผลิตภัณฑ์หลายอย่างของ Search ที่ช่วยให้ผู้ใช้ค้นพบข้อมูลบนเว็บ เช่น รูปภาพผลการค้นหาข้อความ, Google Discover และ Google รูปภาพ แม้ว่าฟีเจอร์และผลิตภัณฑ์แต่ละอย่างจะดูแตกต่างออกไป แต่คําแนะนําทั่วไปสําหรับการแสดงรูปภาพจะเหมือนกัน

คุณสามารถเพิ่มประสิทธิภาพรูปภาพเพื่อให้ปรากฏในผลการค้นหาของ Google ได้โดยทําตามแนวทางปฏิบัติแนะนําต่อไปนี้

1. ช่วยเราค้นพบและจัดทําดัชนีรูปภาพ
2. เพิ่มประสิทธิภาพหน้า Landing Page ของรูปภาพ

ช่วยเราค้นพบและจัดทําดัชนีรูปภาพ

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

ใช้องค์ประกอบรูปภาพ HTML เพื่อฝังรูปภาพ

การใช้องค์ประกอบรูปภาพ HTML มาตรฐานจะช่วยให้ Crawler ค้นหาและประมวลผลรูปภาพได้ Google สามารถค้นหารูปภาพในแอตทริบิวต์ src ขององค์ประกอบ (แม้ว่าจะเป็นองค์ประกอบย่อยขององค์ประกอบอื่นๆ เช่น องค์ประกอบ ) Google ไม่จัดทำดัชนีรูปภาพ CSS

ดี:

" />

ไม่ดี:

ลูกสุนัขโกลเด้นรีทรีฟเวอร์

ใช้แผนผังเว็บไซต์สำหรับรูปภาพ

คุณระบุ URL ของรูปภาพที่เราอาจหาไม่เจอได้โดยการส่ง Sitemap สำหรับรูปภาพ

คุณใส่ URL จากโดเมนอื่นในองค์ประกอบ ของ Sitemap รูปภาพได้ ซึ่งต่างจาก Sitemap ทั่วไป ซึ่งช่วยให้คุณใช้เครือข่ายนำส่งข้อมูล (CDN) เพื่อโฮสต์รูปภาพได้ หากคุณใช้ CDN เราสนับสนุนให้คุณยืนยันการเป็นเจ้าของชื่อโดเมนของ CDN ใน Search Console เพื่อให้เราแจ้งข้อผิดพลาดจากการ Crawl ที่อาจพบแก่คุณได้

รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

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

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

แอตทริบิวต์ srcset ช่วยให้คุณกำหนดเวอร์ชันต่างๆ ของรูปภาพเดียวกันสำหรับหน้าจอที่มีขนาดแตกต่างกันได้ เช่น

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

ตามส่วนที่ 4.8.1 ของมาตรฐาน HTML โปรดตรวจสอบว่าคุณได้ให้องค์ประกอบ img เป็นองค์ประกอบสํารองที่มีแอตทริบิวต์ src เมื่อใช้องค์ประกอบ picture ที่ใช้รูปแบบต่อไปนี้

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

ใช้รูปแบบรูปภาพที่รองรับ

Google Search รองรับรูปภาพที่อ้างอิงในแอตทริบิวต์ src ของ img ในรูปแบบไฟล์ต่อไปนี้ BMP, GIF, JPEG, PNG, WebP, SVG, and AVIFนอกจากนี้คุณควรใส่นามสกุลของชื่อไฟล์ให้ตรงกับประเภทไฟล์ด้วย

นอกจากนี้คุณยังแทรกรูปภาพในหน้าเป็น URI ข้อมูลได้อีกด้วย URI ข้อมูลมีวิธีในการรวมไฟล์ (เช่น ไฟล์รูปภาพ) ไว้ในหน้าโดยการตั้งค่าแอตทริบิวต์ src ขององค์ประกอบ img ให้เป็นสตริงที่เข้ารหัส Base64 โดยใช้รูปแบบต่อไปนี้

<img src="data:image/svg+xml;base64,[data]">

แม้ว่ารูปภาพในหน้าจะลดคำขอ HTTP ได้ แต่คุณควรพิจารณาอย่างรอบคอบว่าจะใช้รูปภาพแบบดังกล่าวเมื่อใด เนื่องจากรูปภาพในหน้าอาจเพิ่มขนาดของหน้าเว็บอย่างมาก ดูข้อมูลเพิ่มเติมได้ในส่วนข้อดีและข้อเสียของรูปภาพในหน้าที่หน้า web.dev ของเรา

เพิ่มประสิทธิภาพเพื่อความเร็วและคุณภาพ

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

วิเคราะห์ความเร็วเว็บไซต์ด้วย PageSpeed Insights และอ่านเหตุใดความเร็วจึงสําคัญ เพื่อดูแนวทางปฏิบัติแนะนําและเทคนิคในการปรับปรุงประสิทธิภาพเว็บไซต์

เพิ่มประสิทธิภาพหน้า Landing Page ของรูปภาพ

แม้ว่าจะไม่ได้แสดงให้เห็นทันทีทันใด แต่เนื้อหาและข้อมูลเมตาของหน้าที่มีรูปภาพฝังอยู่สามารถส่งผลอย่างมากต่อตำแหน่งและลักษณะที่รูปภาพอาจปรากฏในผลการค้นหาของ Google

ตรวจสอบชื่อและคำอธิบายของหน้าเว็บ

Google Search จะสร้างลิงก์ Title และตัวอย่างข้อมูลโดยอัตโนมัติเพื่ออธิบายแต่ละผลลัพธ์ให้ดีที่สุดและอธิบายว่าเกี่ยวข้องกับข้อความค้นหาของผู้ใช้อย่างไร ซึ่งจะช่วยให้ผู้ใช้ตัดสินใจว่าจะคลิกที่ผลการค้นหาหรือไม่ ต่อไปนี้คือตัวอย่าง 2 รายการของ ลิงก์ Title และตัวอย่างข้อมูลในหน้าผลการค้นหาของ Google

เราจะใช้แหล่งข้อมูลจำนวนหนึ่งที่ไม่ซ้ำกันสำหรับข้อมูลนี้ รวมทั้งข้อมูลรายละเอียดในแท็ก title และ meta สำหรับหน้าเว็บแต่ละหน้า

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

เพิ่ม Structured Data

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

ปฏิบัติตามหลักเกณฑ์ของ Structured Data ทั่วไป รวมไปถึงหลักเกณฑ์เฉพาะของประเภท Structured Data ของคุณ มิฉะนั้น Structured Data อาจไม่มีสิทธิ์สำหรับการแสดงเป็นผลการค้นหาที่เป็นริชมีเดียใน Google รูปภาพ ในแต่ละประเภท Structured Data เหล่านี้ แอตทริบิวต์รูปภาพเป็นช่องที่ต้องกรอกเพื่อให้มีสิทธิ์ได้รับป้ายและแสดงเป็นผลการค้นหาที่เป็นริชมีเดียใน Google รูปภาพ ต่อไปนี้คือตัวอย่าง 2 รายการแสดงลักษณะของผลการค้นหาที่เป็นริชมีเดียใน Google รูปภาพ

ใช้ชื่อไฟล์ ชื่อเรื่อง และข้อความแสดงแทนที่สื่อความหมาย

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

ในทำนองเดียวกัน ชื่อไฟล์จะช่วยให้ Google เดาได้นิดหนึ่งว่าเป็นรูปภาพอะไร หากเป็นไปได้ ให้ใช้ชื่อไฟล์ที่สั้นแต่สื่อความหมาย ตัวอย่างเช่น ชื่อ my-new-black-kitten.jpg จะดีกว่า IMG00023.JPG หลีกเลี่ยงการใช้ชื่อไฟล์ทั่วไป เช่น image1.jpg, pic.gif, 1.jpg หากสามารถทำได้ หากเว็บไซต์มีรูปภาพหลายพันรูป คุณอาจพิจารณาใช้การตั้งชื่อรูปภาพแบบอัตโนมัติ หากคุณแปลรูปภาพ อย่าลืมแปลชื่อไฟล์ด้วย โดยยึดตามหลักเกณฑ์การเข้ารหัส URL หากมีการใช้อักขระที่ไม่ใช่ละตินหรือสัญลักษณ์พิเศษ

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

Google ใช้ข้อความแสดงแทนพร้อมกับอัลกอริทึมคอมพิวเตอร์วิทัศน์และเนื้อหาของหน้าเว็บรวมทั้งเพื่อทำความเข้าใจเรื่องของรูปภาพ นอกจากนี้ ข้อความแสดงแทนในรูปภาพยังมีประโยชน์ในการเป็น anchor text หากคุณตัดสินใจที่จะใช้รูปภาพเป็นลิงก์

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

ไม่ดี (ไม่มีข้อความแสดงแทน):

ไม่ดี (การใช้คีย์เวิร์ดในทางที่ผิด):

"/>

ดีกว่า:

"/>

ดีที่สุด:

"/>

นอกจากนี้ ให้พิจารณาทําให้สามารถเข้าถึงข้อความแสดงแทนได้ง่ายด้วย โดยทำตามหลักเกณฑ์ W3 สําหรับองค์ประกอบ คุณสามารถเพิ่มแอตทริบิวต์ alt ขององค์ประกอบได้ ในขณะที่องค์ประกอบ ในบรรทัด คุณใช้องค์ประกอบ

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