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

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

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

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

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

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

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

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

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

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

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

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

• ผลิตภัณฑ์
• วิดีโอ
• สูตรอาหาร
• ข้อมูลเมตาของรูปภาพ

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

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

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

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

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

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

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

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

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

หากคุณแปลรูปภาพ อย่าลืมแปลชื่อไฟล์ด้วย โดยยึดตามหลักเกณฑ์การเข้ารหัส URL หากมีการใช้อักขระที่ไม่ใช่ละตินหรือสัญลักษณ์พิเศษ

ใช้ข้อความแสดงแทนที่สื่อความหมายในแอตทริบิวต์ alt

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

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>

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

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

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

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

ดี:

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

ไม่ดี:

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

ใช้ Sitemap สำหรับรูปภาพ

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

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

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

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

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

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

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

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

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

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

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

เช่น <img 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>

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

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

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

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

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

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

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

และสุดท้าย

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