แนวทางปฏิบัติแนะนําสําหรับ SEO ของ Google รูปภาพ
Google มีฟีเจอร์และผลิตภัณฑ์หลายอย่างของ Search ที่ช่วยให้ผู้ใช้ค้นพบข้อมูลบนเว็บ เช่น รูปภาพผลการค้นหาข้อความ, Google Discover และ Google รูปภาพ แม้ว่าฟีเจอร์และผลิตภัณฑ์แต่ละอย่างจะดูแตกต่างออกไป แต่คําแนะนําทั่วไปสําหรับการแสดงรูปภาพจะเหมือนกัน
![ภาพแสดงรูปภาพในผลการค้นหาของ Google, แท็บรูปภาพ และแท็บสำรวจ](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/images-on-google.png?authuser=5&hl=th)
คุณสามารถเพิ่มประสิทธิภาพรูปภาพเพื่อให้ปรากฏในผลการค้นหาของ Google ได้โดยทําตามแนวทางปฏิบัติแนะนําต่อไปนี้
ช่วยเราค้นพบและจัดทําดัชนีรูปภาพ
ข้อกำหนดทางเทคนิคในการทำให้เนื้อหาในผลการค้นหาของ Google มีผลกับรูปภาพด้วย เนื่องจากรูปภาพมีรูปแบบที่แตกต่างกันอย่างมากเมื่อเทียบกับ HTML ซึ่งหมายความว่ามีข้อกําหนดเพิ่มเติมสําหรับการจัดทําดัชนีรูปภาพ เช่น การค้นหารูปภาพในเว็บไซต์จะแตกต่างออกไป และการนําเสนอรูปภาพก็ส่งผลต่อการจัดทําดัชนีรูปภาพเช่นกัน รวมทั้งคีย์เวิร์ดที่เหมาะสมด้วย
ใช้องค์ประกอบรูปภาพ HTML เพื่อฝังรูปภาพ
การใช้องค์ประกอบรูปภาพ HTML มาตรฐานจะช่วยให้ Crawler ค้นหาและประมวลผลรูปภาพได้ Google สามารถค้นหารูปภาพในแอตทริบิวต์ src
ขององค์ประกอบ <img>
(แม้ว่าจะเป็นองค์ประกอบย่อยขององค์ประกอบอื่นๆ เช่น องค์ประกอบ <picture>
) Google ไม่จัดทำดัชนีรูปภาพ 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 รองรับรูปภาพที่อ้างอิงในแอตทริบิวต์ src
ของ img
ในรูปแบบไฟล์ต่อไปนี้
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
![ภาพแสดงชื่อและคำอธิบายในผลการค้นหารูปภาพ](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/titles-descriptions-in-image-results.png?authuser=5&hl=th)
เราจะใช้แหล่งข้อมูลจำนวนหนึ่งที่ไม่ซ้ำกันสำหรับข้อมูลนี้ รวมทั้งข้อมูลรายละเอียดในแท็ก title
และ meta
สำหรับหน้าเว็บแต่ละหน้า
คุณช่วยปรับปรุงคุณภาพของลิงก์ Title และตัวอย่างข้อมูลที่แสดงในหน้าเว็บได้โดยทำตามหลักเกณฑ์สำหรับชื่อและตัวอย่างข้อมูลของ Google
เพิ่ม Structured Data
หากใส่ Structured Data ไว้ Google จะแสดงรูปภาพในผลการค้นหาที่เป็นริชมีเดียบางรายการได้ ซึ่งรวมถึงป้ายที่โดดเด่นใน Google รูปภาพ ซึ่งช่วยให้ผู้ใช้ทราบข้อมูลที่เกี่ยวข้องกับหน้าเว็บของคุณ และเพิ่มการเข้าชมที่ตรงเป้าหมายไปยังเว็บไซต์ได้มากขึ้น
ปฏิบัติตามหลักเกณฑ์ของ Structured Data ทั่วไป รวมไปถึงหลักเกณฑ์เฉพาะของประเภท Structured Data ของคุณ มิฉะนั้น Structured Data อาจไม่มีสิทธิ์สำหรับการแสดงเป็นผลการค้นหาที่เป็นริชมีเดียใน Google รูปภาพ ในแต่ละประเภท Structured Data เหล่านี้ แอตทริบิวต์รูปภาพเป็นช่องที่ต้องกรอกเพื่อให้มีสิทธิ์ได้รับป้ายและแสดงเป็นผลการค้นหาที่เป็นริชมีเดียใน Google รูปภาพ ต่อไปนี้คือตัวอย่าง 2 รายการแสดงลักษณะของผลการค้นหาที่เป็นริชมีเดียใน Google รูปภาพ
![ภาพแสดงลักษณะที่ผลการค้นหาที่เป็นริชมีเดียปรากฏใน Google รูปภาพ](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/structured-data-in-image-results.png?authuser=5&hl=th)
ใช้ชื่อไฟล์ ชื่อเรื่อง และข้อความแสดงแทนที่สื่อความหมาย
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 รูปภาพ วิธีเลือกไม่ใช้การลิงก์แบบในหน้า
- เมื่อมีการขอรูปภาพ ให้ตรวจสอบส่วนหัวผู้อ้างอิง HTTP ในคำขอ
-
หากคําขอนั้นมาจากโดเมนของ Google ให้ตอบกลับด้วยรหัสสถานะ HTTP
200
หรือรหัสสถานะ HTTP204
โดยไม่มีเนื้อหา
Google จะรวบรวมข้อมูลหน้าเว็บและเห็นรูปภาพนั้นอยู่ต่อไป แต่จะแสดงภาพขนาดย่อที่สร้างขึ้น ณ เวลาที่รวบรวมข้อมูลในผลการค้นหา การเลือกไม่ใช้นี้ทำได้ทุกเมื่อและไม่ต้องมีการดำเนินการกับรูปภาพของเว็บไซต์อีกครั้ง ลักษณะการทํางานนี้ไม่ถือว่าเป็นการปิดบังหน้าเว็บจริงด้วยรูปภาพ และจะไม่ส่งผลให้มีการดําเนินการโดยเจ้าหน้าที่
หรือจะป้องกันไม่ให้รูปภาพปรากฏในผลการค้นหาทั้งหมดก็ได้
เพิ่มประสิทธิภาพสำหรับค้นหาปลอดภัย
ค้นหาปลอดภัยคือการตั้งค่าในบัญชีผู้ใช้ Google ซึ่งจะเป็นตัวกำหนดว่าจะแสดง เบลอ หรือบล็อกรูปภาพ วิดีโอ และเว็บไซต์ที่อาจไม่เหมาะสมในผลการค้นหาของ Google Search โปรดตรวจสอบว่า Google เข้าใจลักษณะของเว็บไซต์เพื่อให้ Google ใช้ตัวกรองค้นหาปลอดภัยกับเว็บไซต์ได้ตามความเหมาะสม ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดป้ายกํากับหน้าสําหรับค้นหาปลอดภัย