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

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

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

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

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

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

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

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

ดี:

<img src="puppy.jpg" alt="ลูกสุนัขโกลเด้นรีทรีฟเวอร์" />

ไม่ดี:

<div style="background-image:url(puppy.jpg)">ลูกสุนัขโกลเด้นรีทรีฟเวอร์</div>

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

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

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

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

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

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

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

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

องค์ประกอบ <picture> คือคอนเทนเนอร์ที่ใช้ในการจัดกลุ่ม <source> เวอร์ชันต่างๆ ของรูปภาพเดียวกัน โดยมีวิธีการสำรองเพื่อให้เบราว์เซอร์เลือกรูปภาพที่เหมาะสมตามความสามารถของอุปกรณ์ เช่น ความหนาแน่นพิกเซลและขนาดหน้าจอ องค์ประกอบ 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 รองรับคือ BMP, GIF, JPEG, PNG, WebP และ SVG นอกจากนี้คุณควรใส่นามสกุลของชื่อไฟล์ให้ตรงกับประเภทไฟล์ด้วย

นอกจากนี้คุณยังแทรกรูปภาพในหน้าเป็น 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 ไว้ 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 ด้วยคีย์เวิร์ด (หรือที่เรียกว่าการใช้คีย์เวิร์ดในทางที่ผิด) เนื่องจากส่งผลเสียต่อประสบการณ์ของผู้ใช้และอาจทำให้ผู้ใช้เห็นว่าเว็บไซต์เป็นสแปม

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

<img src="puppy.jpg"/>

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

<img src="puppy.jpg" alt="ลูกหมา ลูกสุนัข น้องหมาน่ารัก น้องหมาคิ้วท์ๆ หมา สุนัข ลูกหมาโกลเด้น โกลเดนรีทรีฟเวอร์ ลาบราดอร์ วูฟฮาวนด์ ลูกหมา แจ็กรัสเซล เทอร์เรีย อาหารหมา อาหารสุนัขราคาถูก อาหารลูกสุนัข"/>

ดีกว่า:

<img src="puppy.jpg" alt="ลูกสุนัข"/>

ดีที่สุด:

<img src="puppy.jpg" alt="ลูกสุนัขพันธุ์ดัลเมเชียนกำลังเล่นวิ่งไปคาบของกลับมา"/>

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

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

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

เลือกไม่ใช้การลิงก์แบบในหน้ากับ Google รูปภาพ

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

1. เมื่อมีการขอรูปภาพ ให้ตรวจสอบส่วนหัวผู้อ้างอิง HTTP ในคำขอ
2. หากคําขอนั้นมาจากโดเมนของ Google ให้ตอบกลับด้วยรหัสสถานะ HTTP 200 หรือรหัสสถานะ HTTP 204 โดยไม่มีเนื้อหา

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

หรือจะป้องกันไม่ให้รูปภาพปรากฏในผลการค้นหาทั้งหมดก็ได้

เพิ่มประสิทธิภาพสำหรับค้นหาปลอดภัย

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