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

สมูทตี้บลูเบอร์รี

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

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

เลือกไม่ใช้การลิงก์แบบในหน้าของการค้นหารูป

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

วิธีเลือกไม่ใช้การลิงก์แบบในหน้า

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

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

นอกจากนี้คุณยังป้องกันไม่ให้รูปภาพปรากฏในผลการค้นหาทั้งหมดได้อีกด้วย

สร้างประสบการณ์ที่น่าประทับใจให้แก่ผู้ใช้

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

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

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

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

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

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

เพิ่มข้อมูลที่มีโครงสร้าง

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

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

เพิ่มประสิทธิภาพสำหรับความเร็ว

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

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

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

เพิ่มรูปภาพที่มีคุณภาพดี

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

ใส่ชื่อ คำบรรยาย ชื่อไฟล์ และข้อความที่สื่อความหมายสำหรับรูปภาพ

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

ในทำนองเดียวกัน ชื่อไฟล์จะช่วยให้ Google เดาได้ว่าเป็นรูปภาพอะไร เช่น my-new-black-kitten.jpg เป็นชื่อที่ดีกว่า IMG00023.JPG

ใช้ข้อความแสดงแทนที่สื่อความหมาย

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

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

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

ไม่ดี (ไม่มีข้อความแสดงแทน): <img src="puppy.jpg"/>
ไม่ดี (การใช้คีย์เวิร์ดในทางที่ผิด): <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
ดีกว่า: <img src="puppy.jpg" alt="puppy"/>
ดีที่สุด: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

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

ช่วยเราค้นพบรูปภาพทั้งหมดของคุณ

ใช้มาร์กอัปที่สื่อความหมายสำหรับรูปภาพ

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

ดี: <img src="puppy.jpg" alt="A golden retriever puppy" />
ไม่ดี: <div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>

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

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

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

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

รูปแบบรูปภาพที่ Google รูปภาพรองรับคือ BMP, GIF, JPEG, PNG, WebP และ SVG

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

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

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

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

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

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

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

เช่น <img srcset>

<img srcset="example-320w.jpg 320w,
       example-480w.jpg 480w,
       example-800w.jpg 800w"
   sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
   src="example-800w.jpg" alt="responsive web!">

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

เราขอแนะนำให้กำหนดเอลิเมนต์ img เป็นเอลิเมนต์สำรองที่มีแอตทริบิวต์ src เสมอเมื่อใช้แท็ก picture ที่ใช้รูปแบบต่อไปนี้

เช่น <picture>

<picture>
 <source type="image/svg+xml" srcset="pyramid.svg">
 <source type="image/webp" srcset="pyramid.webp">
 <img src="pyramid.png" alt="large PNG image...">
</picture>

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

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

จัดกลุ่มรูปภาพสำหรับผู้ใหญ่โดยเฉพาะไว้ในตำแหน่ง URL ทั่วไป

หากเว็บไซต์มีรูปภาพสำหรับผู้ใหญ่ เราขอแนะนำให้จัดกลุ่มรูปภาพเหล่านี้แยกจากรูปภาพอื่นๆ ในเว็บไซต์ ตัวอย่างเช่น http//www.example.com/adult/image.jpg

เพิ่มข้อมูลเมตาลงในหน้าเว็บสำหรับผู้ใหญ่

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

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

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

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

และสุดท้าย

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