Image SEO 9 องค์ประกอบสำคัญ

Image SEO 9 องค์ประกอบสำคัญ
David Kaufmann
บทเรียน SEO
3 min read

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

ไม่ต้องสงสัย การลงทุนเวลาในการทำงานกับรูปภาพคุ้มค่าในการใช้ประโยชน์สูงสุด ดู9 องค์ประกอบที่ต้องคำนึงถึงเพื่อเริ่ม Image SEO

1. การพิจารณาทั่วไปสำหรับ image SEO

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

Screenshot showing the current results on Google Images after searching the keyword "posicionamiento web."
Screenshot showing the current results on Google Images after searching the keyword "posicionamiento web."

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

2. ขนาดและน้ำหนักของรูปภาพ

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

น้ำหนัก:

การใช้รูปภาพหนักบนเว็บไซต์สามารถเพิ่มเวลาโหลดสำหรับ URL ที่ดำเนินการ และจึงทั้งเว็บไซต์ เวลาโหลดเป็นหนึ่งในปัจจัยที่ส่งผลต่อการจัดอันดับ organic desktop และ mobile ทำให้การเพิ่มประสิทธิภาพรูปภาพจำเป็น

เครื่องมือลดน้ำหนักรูปภาพ:

มีเครื่องมือหลายตัวที่เราใช้ลดน้ำหนักรูปภาพได้ แม้เราไม่มีซอฟต์แวร์แก้ไขรูปภาพมืออาชีพเช่น Photoshop หรือ Illustrator เราสามารถใช้แพลตฟอร์มออนไลน์เช่น

  • ImageOptim หรือ TinyJPG ที่ลดน้ำหนักรูปภาพโดยไม่ส่งผลต่อคุณภาพ

  • Website Speed Test Image Analysis Tool อนุญาตให้ดาวน์โหลดรูปแบบรูปภาพใหม่ได้ง่าย

ขนาด:

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

เครื่องมือ:

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

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

Examples of image optimization recommendations for SEOcrawl on WebSpeedTest.
Examples of image optimization recommendations for SEOcrawl on WebSpeedTest.

3. รูปแบบรูปภาพที่เป็นมิตรกับ SEO

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

  • WebP: สามารถลดน้ำหนักเดิมของรูปภาพ 25-35% เป็นหนึ่งในรูปแบบที่แนะนำที่สุดในขณะนี้ แม้ว่าบางเวอร์ชันของเบราว์เซอร์ยังไม่สามารถอ่าน เป็นหนึ่งในรูปแบบที่อนุญาตการบีบอัดมากกว่าโดยไม่ส่งผลต่อคุณภาพรูปภาพ

  • PNG: เป็นตัวเลือกที่ดีที่สุดสำหรับรูปภาพที่มีไม่กี่สีและพื้นหลังโปร่งใส ใช้กันอย่างแพร่หลายในโลโก้

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

  • GIF: ใช้ใน animation และรูปภาพเคลื่อนไหว

Differences in image weight depending on the formats used.
Differences in image weight depending on the formats used.

คำแนะนำ:

  • ใช้รูปแบบรูปภาพที่เหมาะสมที่สุดในแง่ของน้ำหนักและความเข้ากันได้เสมอ

  • บีบอัดรูปภาพเสมอ ทั้งด้วยมือหรือผ่านเครื่องมือประมวลผลอัตโนมัติ

  • หากเว็บมีไอคอนหลายตัว จัดกลุ่มเป็นรูปภาพเดียวผ่าน CSS Sprites เพื่อลดจำนวนคำขอเซิร์ฟเวอร์และปรับปรุงประสิทธิภาพของเว็บ

4. ฟิลด์ Image SEO

ทุกรูปภาพมาพร้อมชุดฟิลด์ที่เกี่ยวข้องเพื่อให้ robot เครื่องมือค้นหา (และผู้ใช้แน่นอน) มีการเข้าถึงที่ปรับปรุง

ชื่อรูปภาพ

ชื่อรูปภาพหมายถึงชื่อไฟล์ เป็น title ของรูปภาพที่ใช้ขีดและขีดล่างระหว่างคำ แนะนำให้รวมคำสำคัญที่เราต้องการจัดอันดับรูปภาพสูงขึ้น หลีกเลี่ยงตัวอักษรไม่ปกติ (เช่น "ñ", "?" หรือตัวอักษรมีเสียงเน้น "á" ฯลฯ)

ยังแนะนำให้ละเว้น preposition หรือตัวอักษรที่ไม่จำเป็นอื่นในชื่อรูปภาพเพื่อย่อ URL และทำให้เป็นมิตร SEO มากที่สุด

Title

คือข้อความที่ปรากฏเมื่อวางเคอร์เซอร์บนรูปภาพ เราขอแนะนำให้กรอกเพื่อเพิ่ม title ที่มีความหมายให้กับรูปภาพ รวมคำสำคัญที่เราต้องการจัดอันดับสูงขึ้น

อาจเหมือนกับ alt text แม้การเขียนใหม่ attribute นี้พร้อมการแก้ไขเล็กน้อยใช้เวลาไม่นาน

attribute "Alt"

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

syntax คือต่อไป

<img src="IMAGE LINK" alt="IMAGE ALT DESCRIPTION" />

ตัวอย่างรูปภาพที่เพิ่มประสิทธิภาพ:

มาดูว่าแต่ละฟิลด์สามารถเพิ่มประสิทธิภาพสำหรับรูปภาพนี้อิงคำสำคัญเป้าหมาย "ciberseguridad pymes" ที่ค่าเฉลี่ยการค้นหารายเดือนคือ 90 (ในสเปน) ได้อย่างไร

ชื่อไฟล์:

  • ผิด: 04745892595295.jpg

  • ถูก: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes (คำแนะนำความปลอดภัยทางไซเบอร์สำหรับบริษัทและธุรกิจขนาดเล็ก)

Alt text: Ciberseguridad para pymes y empresarios: consejos (ความปลอดภัยทางไซเบอร์สำหรับธุรกิจขนาดเล็กและบริษัท: เคล็ดลับ)

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

5. บริบททางความหมาย

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

6. Sitemap เฉพาะรูปภาพ

เพื่อช่วย bot ของ Google ติดตามรูปภาพอย่างมีประสิทธิภาพ จำเป็นต้องสร้าง sitemap.xml พิเศษที่มีไฟล์ประเภทนี้ บน WordPress สามารถสร้างโดยอัตโนมัติด้วยเครื่องมือ (ปลั๊กอิน) เช่น Yoastหรือ RankMath หากคุณไม่ได้ทำงานบน WordPress คุณสามารถใช้เครื่องมือทางเลือกหรือเครื่องมือเขียนโปรแกรมด้วยมือ (การติดตาม URL)

ต่อไป คุณจะเห็นตัวอย่าง sitemapที่มีรูปภาพสองรูปในบทความ

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html&lt;/loc> <image:image> <image:loc>http://example.com/image.jpg&lt;/image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg&lt;/image:loc> </image:image> </url> </urlset>

แท็กที่ใช้บ่อยที่สุดเมื่อสร้าง sitemap รูปภาพคือ

→ Title รูปภาพ

→ URL หรือ path ที่ไฟล์บันทึก

→ คำอธิบายภาพ

→ ประเภทใบอนุญาต

→ ข้อมูล geolocation

  • เอกสาร: ข้อมูลจำนวนมากสามารถพบในblog Googleเกี่ยวกับ sitemap รูปภาพพร้อมตัวอย่าง บทเรียนการดำเนินการ และอื่นๆ

หลังเสร็จสิ้นการดำเนินการ เราจะสามารถตรวจสอบสถานะการครอบคลุมการ index บน Search Console

7. Lazy Loading รูปภาพ (โหลดตามต้องการ)

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

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

ปลั๊กอินในการดำเนินการ Lazy loading บน WordPress

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

  • BJ Lazy Load: ติดตั้งและตั้งค่าง่าย เป็นหนึ่งในเครื่องมือที่นิยมที่สุด ด้วยการติดตั้งกว่า 90,000 ตัว ขอบคุณส่วนเสริมนี้ คุณสามารถปรับขนาดรูปภาพให้เข้ากับขนาดหน้าจอที่ต่างกัน

  • Lazy Load by WP Rocket: ง่ายและตั้งค่าง่าย (โดยพื้นฐานเพราะไม่ให้ตัวเลือกที่ต่างกัน) ข้อได้เปรียบของปลั๊กอินนี้คือไม่ใช้ JavaScript library เช่น jQuery

8. การใช้ CDN สำหรับรูปภาพ

**CDN (Content Delivery Network)**คือชุดเซิร์ฟเวอร์ที่กระจายทั่วโลกที่อำนวยความสะดวกเนื้อหาเว็บไซต์ที่ cache ขึ้นอยู่กับที่ผู้ขออยู่ ขอบคุณเครือข่ายโฮสติ้งนี้ เซิร์ฟเวอร์ที่ใกล้กับผู้ขอจะให้สำเนาของเว็บไซต์ที่ขอ

ดังนั้น การใช้ CDN ช่วยให้ URL ดาวน์โหลดเร็วขึ้น ลดเวลาโหลดของเว็บไซต์ และส่งเสริมการจัดอันดับ organic

หากเราใช้ CDN (ตัวอย่าง Cloudflare) เพื่อแสดงรูปภาพ พวกเขาจะดาวน์โหลดและแสดงเร็วขึ้น การไหลที่ตรงไปตรงมานี้จะปรับปรุง SEO โดยตรง

9. ข้อพิจารณาอื่น

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

นอกจากนี้ มีรายละเอียดอื่นที่ต้องคำนึงถึงเมื่อเพิ่มประสิทธิภาพรูปภาพ

  • Exif: ในทุกรูปภาพ ชุด attribute ถูกบันทึก เช่น วันที่ภาพถูกถ่ายและข้อมูลอื่นที่เกี่ยวข้องกับมืออาชีพในด้านนี้ อย่างไรก็ตาม ข้อมูลนี้ไม่มีคุณค่า SEO และเพียงกินพื้นที่ การลบข้อมูลนี้สามารถช่วยเพิ่มประสิทธิภาพรูปภาพและทำให้น้อยน้ำหนักลง

  • "longdesc": attribute นี้มักถูกลืม แต่อาจน่าสนใจที่จะดำเนินการในรูปภาพ เป็นคำอธิบายยาวของรูปภาพ

  • การลิงก์: Link-building เล่นบทบาทพื้นฐานในการเติบโต organic ของหน้า แต่ยังในรูปภาพ พวกเขาสามารถลิงก์ได้และจึงบรรลุการรู้จักสูงขึ้นในเครื่องมือค้นหา

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

โดย: David Kaufmann

David Kaufmann

ในช่วง 10+ ปีที่ผ่านมา ผมหมกมุ่นกับ SEO อย่างสมบูรณ์ — และพูดตรง ๆ ก็ไม่อยากให้เป็นแบบอื่น

อาชีพของผมก้าวขึ้นไปอีกระดับเมื่อทำงานเป็นผู้เชี่ยวชาญ SEO อาวุโสที่ Chess.com — หนึ่งใน 100 เว็บไซต์ที่มีผู้เข้าชมมากที่สุดในอินเทอร์เน็ต การทำงานในระดับนี้สอนสิ่งที่ไม่มีหลักสูตรหรือประกาศนียบัตรใดสอนได้

จากประสบการณ์นี้ ผมก่อตั้ง SEO Alive — เอเจนซีสำหรับแบรนด์ที่จริงจังกับการเติบโตแบบออร์แกนิก และเพราะหาเครื่องมือที่จัดการทั้งโลกคลาสสิกและยุค AI ได้ดีไม่ได้ ผมจึงสร้าง SEOcrawl ขึ้น หากคุณกำลังมองหาพาร์ตเนอร์ SEO มากประสบการณ์ที่รักสาขานี้ — ยินดีพูดคุยครับ!

→ อ่านบทความทั้งหมดของ David
บทความเพิ่มเติม: David Kaufmann

ค้นพบเนื้อหาเพิ่มเติมของผู้เขียนคนนี้