แนวทางปฏิบัติแนะนำของ Google รูปภาพ
Google รูปภาพคือวิธีค้นหาข้อมูลในเว็บที่แสดงรูปภาพ ผู้ใช้จะสำรวจข้อมูลได้อย่างรวดเร็วด้วยบริบทที่มากขึ้นเกี่ยวกับรูปภาพโดยใช้ฟีเจอร์ใหม่ๆ เช่น คำอธิบายภาพและป้ายที่โดดเด่น
การเพิ่มบริบทเกี่ยวกับรูปภาพจะให้ประโยชน์มากยิ่งขึ้น ซึ่งจะทำให้การเข้าชมเว็บไซต์ของคุณมีคุณภาพสูงขึ้น คุณช่วยในขั้นตอนการค้นหารูปภาพได้โดยตรวจสอบว่ารูปภาพและเว็บไซต์ของคุณได้รับการปรับให้เหมาะสมกับ Google รูปภาพ ปฏิบัติตามหลักเกณฑ์ของเราเพื่อเพิ่มโอกาสที่เนื้อหาของคุณจะปรากฏในผลการค้นหาของ Google รูปภาพ
สร้างประสบการณ์ที่น่าประทับใจให้แก่ผู้ใช้
ในการเพิ่มการเปิดเผยเนื้อหาของคุณใน Google รูปภาพ ให้มุ่งเน้นที่ผู้ใช้โดยมอบประสบการณ์การใช้งานที่น่าประทับใจให้แก่ผู้ใช้ นั่นคือสร้างหน้าเว็บสำหรับผู้ใช้ ไม่ใช่สำหรับเครื่องมือค้นหา มาดูเคล็ดลับบางส่วนกัน
- ให้บริบทที่ดี: ตรวจสอบว่าเนื้อหารูปภาพเกี่ยวข้องกับหัวข้อของหน้าเว็บ เราขอแนะนำให้คุณแสดงรูปภาพเฉพาะเมื่อภาพเพิ่มคุณค่าที่เป็นต้นฉบับให้กับหน้าเว็บ เราไม่แนะนำให้ใช้หน้าเว็บที่ไม่มีรูปภาพหรือข้อความที่เป็นเนื้อหาต้นฉบับ
- เพิ่มประสิทธิภาพตำแหน่ง: เมื่อใดก็ตามที่เป็นไปได้ ให้วางรูปภาพไว้ใกล้กับข้อความที่เกี่ยวข้อง พิจารณาวางรูปภาพที่สำคัญที่สุดใกล้ด้านบนสุดของหน้าหากเหมาะสม
- อย่าฝังข้อความที่สำคัญไว้ภายในภาพ: หลีกเลี่ยงการฝังข้อความในรูปภาพ โดยเฉพาะองค์ประกอบของข้อความที่สำคัญ เช่น ส่วนหัวของหน้าและรายการในเมนู เนื่องจากผู้ใช้บางรายเข้าถึงเอกสารเหล่านี้ไม่ได้ (และเครื่องมือแปลหน้าเว็บใช้กับรูปภาพไม่ได้) หากต้องการให้ผู้ใช้เข้าถึงเนื้อหาได้มากที่สุด ให้ใช้ข้อความในรูปแบบ HTML โดยระบุข้อความแสดงแทนสำหรับรูปภาพ
- สร้างเว็บไซต์ที่ให้ข้อมูลและมีคุณภาพสูง: เนื้อหาที่ดีในหน้าเว็บมีความสำคัญเท่ากับเนื้อหาแบบรูปภาพของ Google รูปภาพ ซึ่งจะให้บริบทและผลการค้นหาเป็นแบบนำไปใช้ได้จริงได้มากขึ้น ระบบอาจใช้เนื้อหาในหน้าเว็บเพื่อสร้างตัวอย่างข้อความสำหรับรูปภาพ และ Google จะพิจารณาคุณภาพเนื้อหาของหน้าเว็บเมื่อจัดอันดับรูปภาพ
- สร้างเว็บไซต์ที่เหมาะกับอุปกรณ์: ผู้ใช้ค้นหาใน Google รูปภาพจากอุปกรณ์เคลื่อนที่มากกว่าในเดสก์ท็อป ด้วยเหตุนี้ คุณจึงควรออกแบบเว็บไซต์สำหรับอุปกรณ์ทุกประเภทและทุกขนาด ใช้การทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่เพื่อทดสอบการทำงานของหน้าเว็บในอุปกรณ์เคลื่อนที่ และรับความคิดเห็นเกี่ยวกับสิ่งที่ต้องแก้ไข
- สร้างโครงสร้าง URL ที่ดีสำหรับรูปภาพ: Google ใช้เส้นทาง URL รวมถึงชื่อไฟล์เพื่อช่วยให้เข้าใจรูปภาพ โปรดพิจารณาจัดระเบียบเนื้อหารูปภาพเพื่อให้ระบบสร้าง URL อย่างสมเหตุสมผล
ตรวจสอบชื่อและคำอธิบายของหน้าเว็บ
 |
 |
Google รูปภาพจะสร้างลิงก์ Title และตัวอย่างข้อมูลโดยอัตโนมัติเพื่ออธิบายแต่ละผลลัพธ์ให้ดีที่สุดและอธิบายว่าเกี่ยวข้องกับข้อความค้นหาของผู้ใช้อย่างไร ซึ่งจะช่วยให้ผู้ใช้ตัดสินใจว่าจะคลิกที่ผลการค้นหาหรือไม่
เราจะใช้แหล่งข้อมูลจำนวนหนึ่งที่ไม่ซ้ำกันสำหรับข้อมูลนี้ รวมทั้งข้อมูลรายละเอียดในชื่อและเมตาแท็กสำหรับหน้าเว็บแต่ละหน้า
คุณช่วยปรับปรุงคุณภาพของลิงก์ Title และตัวอย่างข้อมูลที่แสดงในหน้าเว็บได้โดยทำตามหลักเกณฑ์สำหรับชื่อและตัวอย่างข้อมูลของ Google
เพิ่มข้อมูลที่มีโครงสร้าง
หากใส่ข้อมูลที่มีโครงสร้าง Google รูปภาพจะแสดงรูปภาพเป็นผลการค้นหาที่เป็นสื่อสมบูรณ์รวมถึงป้ายที่โดดเด่นได้ ซึ่งให้ข้อมูลที่เกี่ยวข้องแก่ผู้ใช้เกี่ยวกับหน้าเว็บและเพิ่มการเข้าชมที่ตรงเป้าหมายไปยังเว็บไซต์ได้มากขึ้น Google รูปภาพรองรับข้อมูลที่มีโครงสร้างในประเภทต่อไปนี้
ปฏิบัติตามหลักเกณฑ์ข้อมูลที่มีโครงสร้างทั่วไป รวมไปถึงหลักเกณฑ์เฉพาะของประเภทข้อมูลที่มีโครงสร้างของคุณ มิฉะนั้นข้อมูลที่มีโครงสร้างอาจไม่มีสิทธิ์สำหรับการแสดงผลการค้นหาที่เป็นสื่อสมบูรณ์ใน Google รูปภาพ ในแต่ละประเภทข้อมูลที่มีโครงสร้างเหล่านี้ แอตทริบิวต์รูปภาพเป็นช่องที่ต้องกรอกเพื่อให้มีสิทธิ์ได้รับป้ายและผลการค้นหาที่เป็นสื่อสมบูรณ์ใน Google รูปภาพ
 |
 |
เพิ่มประสิทธิภาพสำหรับความเร็ว
รูปภาพมักเป็นสิ่งที่มีส่วนสำคัญมากที่สุดสำหรับขนาดหน้าเว็บโดยรวม ซึ่งอาจทำให้โหลดหน้าเว็บได้ช้าและสิ้นเปลืองอินเทอร์เน็ต อย่าลืมใช้การเพิ่มประสิทธิภาพรูปภาพล่าสุดและเทคนิครูปภาพที่ปรับเปลี่ยนตามอุปกรณ์เพื่อแสดงรูปภาพที่มีคุณภาพสูงและให้ประสบการณ์ที่รวดเร็วสำหรับผู้ใช้
วิเคราะห์ความเร็วเว็บไซต์ด้วย PageSpeed Insights และไปที่หน้าหลักพื้นฐานในการทำเว็บไซต์เพื่อดูแนวทางปฏิบัติแนะนำและเทคนิคในการปรับปรุงประสิทธิภาพเว็บไซต์
เพิ่มรูปภาพที่มีคุณภาพดี
รูปภาพคุณภาพสูงดึงดูดผู้ใช้ได้มากกว่ารูปภาพที่เบลอและไม่ชัดเจน อีกทั้งรูปภาพที่คมชัดในแบบภาพขนาดย่อของผลลัพธ์ยังดึงดูดผู้ใช้ได้มากกว่าและเพิ่มโอกาสในการได้รับการเข้าชมจากผู้ใช้
ใส่ชื่อ คำอธิบาย ชื่อไฟล์ และข้อความที่สื่อความหมายสำหรับรูปภาพ
Google จะดึงข้อมูลเกี่ยวกับหัวเรื่องของรูปภาพออกจากเนื้อหาของหน้าเว็บ รวมทั้งคำอธิบายภาพและชื่อเรื่องของรูปภาพ เมื่อใดที่เหมาะสม ให้ตรวจสอบว่ารูปภาพวางไว้ใกล้กับข้อความที่เกี่ยวข้องและในหน้าเว็บที่เกี่ยวข้องกับหัวเรื่องของรูปภาพ
ในทำนองเดียวกัน ชื่อไฟล์จะช่วยให้ Google เดาได้ว่าเป็นรูปภาพอะไร เช่น my-new-black-kitten.jpg เป็นชื่อที่ดีกว่า IMG00023.JPG หากคุณแปลรูปภาพ ให้ตรวจสอบว่าคุณแปลชื่อไฟล์ด้วย
ใช้ข้อความแสดงแทนที่สื่อความหมาย
ข้อความแสดงแทน (ข้อความอธิบายรูปภาพ) ช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ไม่สามารถมองเห็นรูปภาพในหน้าเว็บรวมทั้งผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอหรือมีการเชื่อมต่อที่มีแบนด์วิดท์ต่ำ
Google ใช้ข้อความแสดงแทนพร้อมกับอัลกอริทึมคอมพิวเตอร์วิทัศน์และเนื้อหาของหน้าเว็บรวมทั้งเพื่อทำความเข้าใจเรื่องของรูปภาพ นอกจากนี้ ข้อความแสดงแทนในรูปภาพยังมีประโยชน์ในการเป็น anchor text หากคุณตัดสินใจที่จะใช้รูปภาพเป็นลิงก์
เมื่อเลือกข้อความแสดงแทน ให้เน้นการสร้างเนื้อหาที่มีประโยชน์และเนื้อหาที่มีข้อมูลจำนวนมาก ซึ่งใช้คีย์เวิร์ดอย่างเหมาะสมและอยู่ในบริบทเนื้อหาของหน้าเว็บ หลีกเลี่ยงการกรอกแอตทริบิวต์ Alt ด้วยคีย์เวิร์ด (การใช้คีย์เวิร์ดในทางที่ผิด) เนื่องจากส่งผลเสียต่อประสบการณ์ของผู้ใช้และอาจทำให้ผู้ใช้เห็นว่าเว็บไซต์เป็นสแปม นอกจากนี้ ให้พิจารณาทำให้ข้อความแสดงแทนเข้าถึงได้ง่าย และใส่แอตทริบิวต์ Alt ตามที่จำเป็นซึ่งระบุไว้ในหลักเกณฑ์ของ W3
- ไม่ดี (ไม่มีข้อความแสดงแทน):
<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>
ใช้ Sitemap สำหรับรูปภาพ
คุณระบุ URL ของรูปภาพที่เราอาจหาไม่เจอได้โดยการส่ง Sitemap สำหรับรูปภาพ
Sitemap สำหรับรูปภาพอาจมี URL จากโดเมนอื่นซึ่งแตกต่างจาก Sitemap ทั่วไปซึ่งบังคับใช้ข้อจำกัดของการข้ามโดเมน ซึ่งช่วยให้คุณใช้เครือข่ายนำส่งข้อมูล (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 ที่จะเป็นตัวกำหนดว่าจะแสดงหรือบล็อกรูปภาพ วิดีโอ และเว็บไซต์ที่อาจไม่เหมาะสมในผลการค้นหาของ Google Search โปรดตรวจสอบว่า Google เข้าใจลักษณะของเว็บไซต์เพื่อให้ Google ใช้ตัวกรองค้นหาปลอดภัยกับเว็บไซต์ได้ตามความเหมาะสม ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดป้ายกำกับหน้าค้นหาปลอดภัย
และสุดท้าย
โปรดอ่านคู่มือ SEO สำหรับมือใหม่ซึ่งมีข้อมูลที่เป็นประโยชน์จำนวนมากเพื่อการจัดอันดับที่ดีขึ้น และหากคุณมีคำถามเพิ่มเติม ให้โพสต์ในชุมชนความช่วยเหลือของ Google Search Central