คำตอบสั้นๆ คือ: ในการตรวจสอบภาพบนหน้าเว็บเพื่อเพิ่มประสิทธิภาพ SEO ให้วาง URL ของภาพลงใน เครื่องมือตรวจสอบภาพ SEO ฟรีของ PromoPilot เครื่องมือนี้จะวิเคราะห์แท็ก <img> ได้มากถึง 100 แท็ก: ว่ามีแท็ก alt หรือไม่, ตั้ง loading="lazy" หรือไม่, กำหนดความกว้างและความสูงหรือไม่, ใช้ไฟล์ WebP, AVIF หรือ SVG หรือไม่ และมี srcset หรือไม่ ผลลัพธ์ที่ได้คือคะแนนตั้งแต่ 0 ถึง 100 พร้อมคำอธิบายประกอบในแต่ละภาพ ด้านล่างนี้คุณจะพบวิธีการคำนวณคะแนน สิ่งที่ควรแก้ไขก่อน และสิ่งที่เครื่องมือนี้ตรวจไม่พบ
ผมสร้างเว็บไซต์และร้านค้าออนไลน์มา 12 ปีแล้ว และรูปภาพคืออุปสรรคสำคัญในเกือบทุกเว็บไซต์และร้านค้าที่ผมทำ ตัวอย่างหน้าสินค้าทั่วไป: รูปถ่าย 5 รูป ขนาด 3MB ถ่ายจากกล้องโดยตรง ข้อความอธิบายภาพว่างเปล่า และชื่อไฟล์คือ IMG_4512.jpg
การตรวจสอบ SEO รูปภาพตรวจสอบอะไรบ้าง?
เครื่องมือนี้จะวิเคราะห์ภาพแต่ละภาพในหน้าเว็บโดยใช้เกณฑ์ห้าข้อ และนำคะแนนเหล่านั้นมารวมกันเพื่อสร้างคะแนนโดยรวม
| มันตรวจสอบอะไร? | เขากำลังมองอะไรอยู่? | เหตุใดสิ่งนี้จึงสำคัญต่อ SEO และธุรกิจ? |
|---|---|---|
| อัลท์ | มีคำอธิบายประกอบรูปภาพแต่ละ <img> | การจัดอันดับรูปภาพ Google ตามค่า alt; การเข้าถึงสำหรับผู้พิการทางสายตา |
| การโหลดแบบขี้เกียจ | แอตทริบิวต์ loading="lazy" จะถูกนำไปใช้กับรูปภาพที่อยู่ด้านล่างของหน้าจอแรก | หน้าเว็บจะไม่โหลดเนื้อหาใดๆ ที่ผู้เข้าชมยังไม่ได้เลื่อนลงไปดู |
| ความกว้างและความสูง | มีการระบุขนาดไว้ในแอตทริบิวต์ของแท็กหรือไม่ | บล็อกจะไม่ "กระโดด" เมื่อโหลด - นี่เป็นคุณสมบัติของ CLS |
| รูปแบบ | WebP, AVIF หรือ SVG ตามนามสกุลไฟล์ | ไฟล์รูปแบบใหม่มีขนาดเล็กกว่า JPG และ PNG อย่างเห็นได้ชัด |
| ชุดซอร์สโค้ด | มีตัวเลือกภาพสำหรับหน้าจอขนาดต่างๆ หรือไม่? | โทรศัพท์จะได้รับไฟล์ขนาดเล็ก ไม่ใช่เวอร์ชันสำหรับมอนิเตอร์ |
แต่ละภาพจะได้รับรายการความคิดเห็น และหน้าเว็บจะได้รับคะแนนสุดท้าย ซึ่งสะดวกมาก เพราะคุณสามารถเห็นได้ไม่เพียงแต่ว่ามีอะไรผิดพลาด แต่ยังเห็นได้ว่าภาพใดเป็นต้นเหตุของปัญหา
วิธีตรวจสอบรูปภาพบนเว็บไซต์ออนไลน์?
- เปิด โปรแกรมตรวจสอบ SEO รูปภาพ
- ใส่ที่อยู่หน้าเว็บ โดยควรเลือกหน้าที่มีรูปภาพจำนวนมาก เช่น หน้าข้อมูลสินค้า หมวดหมู่ บทความในบล็อก หรือผลงานที่ผ่านมา
- คลิก "ตรวจสอบ" และรอจนกว่าภาพทั้งหมดจะถูกสแกนเสร็จ
- ดูคะแนนและรายการความคิดเห็น สำหรับแต่ละภาพ
- โปรดแก้ไขปัญหา และตรวจสอบหน้าเว็บอีกครั้ง
หน้าเครื่องมือจะมีหน้าตาดังนี้: ช่องสำหรับกรอกที่อยู่ รายการตรวจสอบ และคำถามที่พบบ่อย (FAQ)
การให้คะแนนคำนวณอย่างไร และควรแก้ไขอะไรก่อนเป็นอันดับแรก?
คะแนนการประเมินเริ่มต้นที่ 100 คะแนน และจะมีการหักคะแนนสำหรับแต่ละปัญหา โดยขึ้นอยู่กับเปอร์เซ็นต์ของรูปภาพในหน้าเว็บที่ไม่ผ่านเกณฑ์ เมื่อเข้าใจกฎแล้ว ก็สามารถคำนวณได้ง่ายว่าอะไรจะช่วยเพิ่มคะแนนได้มากที่สุด
| การตรวจสอบ | ดี | ความคิดเห็น |
|---|---|---|
| อัลท์ | น้อยกว่า 50% ของรูปภาพที่มี alt — -30; น้อยกว่า 80% — -15; น้อยกว่า 100% — -5 | ประเด็นสำคัญที่สุด |
| การโหลดแบบขี้เกียจ | น้อยกว่า 50% - −15; น้อยกว่า 80% - −8 | ภาพสามภาพแรกไม่ได้ถูกนำมาพิจารณา |
| ความกว้างและความสูง | น้อยกว่า 50% - −15; น้อยกว่า 80% - −8 | ขนาดที่ระบุเฉพาะใน CSS จะไม่ถูกนำมาพิจารณา |
| WebP, AVIF หรือ SVG | น้อยกว่า 30% - 10 | รูปแบบจะถูกกำหนดโดยนามสกุลไฟล์ |
| ชุดข้อมูลต้นฉบับสำหรับภาพแรสเตอร์ | น้อยกว่า 30% - -10 | SVG ไม่จำเป็นต้องใช้ srcset |
นี่คือใบสั่งงานของฉัน:
- Alt. รายการที่แพงที่สุดและซ่อมง่ายที่สุด เขียนสิ่งที่แสดง:
alt="Кожаный рюкзак Nord 20 л, коричневый, вид сбоку"ไม่ใช่alt="рюкзак купить дёшево рюкзак"สำหรับองค์ประกอบตกแต่ง ให้ใช้alt="" - ความกว้างและความสูง ระบุขนาดที่แท้จริงในแอตทริบิวต์ และเพิ่ม
img { max-width: 100%; height: auto; }ลงใน CSS—รูปภาพจะยังคงปรับขนาดได้ และเลย์เอาต์จะไม่กระโดดไปมา - การโหลดแบบ Lazy Loading ใช้ได้กับทุกอย่างที่อยู่ด้านล่างของหน้าเว็บ อย่างไรก็ตาม มันเป็นข้อเสียสำหรับภาพหลัก (Hero Image) เพราะภาพหลักจำเป็นต้องโหลดทันทีและมีความสำคัญเป็นอันดับแรก
- WebP หรือ AVIF WordPress รองรับการอัปโหลดไฟล์ WebP ตั้งแต่เวอร์ชัน 5.8 และ AVIF ตั้งแต่เวอร์ชัน 6.5
- ตั้งค่าแหล่งที่มา สำหรับรูปภาพขนาดใหญ่ เพื่อป้องกันไม่ให้โทรศัพท์ดาวน์โหลดเวอร์ชันสำหรับมอนิเตอร์
ตัวอย่างภาพหลักที่เหมาะสมและภาพประกอบที่ปรับเปลี่ยนได้ตามเนื้อหา:
<img src="/img/hero.webp" alt="Мастерская кожаных изделий Nord" width="1200" height="600" fetchpriority="high"> <img src="/img/bag-700.webp" srcset="/img/bag-700.webp 700w, /img/bag-1400.webp 1400w" sizes="(max-width: 700px) 100vw, 700px" alt="Рюкзак Nord 20 л, вид сбоку" width="700" height="700" loading="lazy">วิธีเขียนคำอธิบายภาพ (alt tag) ที่ดี?
แท็ก alt เป็นองค์ประกอบที่สำคัญที่สุดในการประเมิน และเป็นจุดที่มักเกิดข้อผิดพลาดมากที่สุด คือ การเว้นว่างไว้ หรือการใส่คำหลักมากเกินไป กฎง่ายๆ คือ อธิบายภาพให้คนที่มองไม่เห็นภาพเข้าใจได้ในประโยคเดียว
| รูปภาพ | บัญชีสำรองที่ไม่ดี | ทางเลือกที่ดี |
|---|---|---|
| รูปภาพสินค้า | рюкзак купить рюкзак недорого | Кожаный рюкзак Nord 20 л, коричневый, вид спереди |
| รูปถ่ายหมู่ | photo1 | Мастера мастерской Nord за работой над сумкой |
| แผนภาพหรือแผนภูมิ | график | Рост заказов с сайта по месяцам: с 40 до 120 в месяц |
| ไอคอนตกแต่ง | иконка | alt="" ว่างเปล่า — ไม่จำเป็นต้องอ่าน |
สำหรับการจัดทำแค็ตตาล็อก การสร้างแท็ก alt โดยใช้เทมเพลตจะสะดวกกว่า เช่น ชื่อสินค้า + สี หรือ ตัวเลือกสี + มุมมอง วิธีนี้จะทำให้รูปภาพห้าภาพบนการ์ดใบเดียวมีคำอธิบายที่แตกต่างกันและมีประโยชน์ห้าแบบ แทนที่จะเป็นคำอธิบายที่เหมือนกันห้าแบบ
ชื่อไฟล์ก็สำคัญเช่นกัน: kozhanyj-ryukzak-nord-korichnevyj.webp ดีกว่า IMG_4512.jpg ไม่มีประโยชน์ที่จะเปลี่ยนชื่อไฟล์เก่าเพียงเพื่อจุดประสงค์นี้ แต่ควรอัปโหลดไฟล์ใหม่ที่มีชื่อสื่อความหมายจะดีกว่า
การเปรียบเทียบ: โปรแกรมตรวจสอบ SEO รูปภาพและทางเลือกอื่นๆ
| เครื่องมือ | อะไรบ้างที่ฟรี? | ข้อจำกัด | เหมาะสำหรับใคร? |
|---|---|---|---|
| PromoPilot — เครื่องมือตรวจสอบ SEO รูปภาพ | Alt, การโหลดแบบ Lazy Loading, ความกว้าง/ความสูง, รูปแบบ, srcset; การให้คะแนน 0–100 และความคิดเห็นสำหรับแต่ละภาพ | สามารถบันทึกภาพได้สูงสุด 100 ภาพ ขนาดไฟล์ไม่สามารถประเมินได้ | วิเคราะห์ภาพจากหน้าเว็บใดก็ได้อย่างรวดเร็ว |
| Google PageSpeed Insights | การตรวจสอบรูปภาพเป็นส่วนหนึ่งของการทดสอบความเร็ว: รูปแบบ ขนาด และการโหลดแบบ Lazy Loading | เมื่อนำไปรวมกับการตรวจสอบอื่นๆ อีกหลายสิบรายการ alt แทบจะไม่เข้าใจเลย | การประเมินผลกระทบของภาพต่อความเร็ว |
| สควูช | บีบอัดและแปลงภาพเดียวในเบราว์เซอร์ | ไม่ตรวจสอบหน้าเว็บ แต่ทำงานกับไฟล์ | การเตรียมภาพแต่ละภาพ |
| สไปเดอร์ SEO กบกรีดร้อง | รายชื่อรูปภาพที่ไม่มีข้อความอธิบาย (alt text) ทั่วทั้งเว็บไซต์ | จำเป็นต้องติดตั้ง โปรแกรมเวอร์ชันฟรีมีข้อจำกัดเรื่องจำนวนที่อยู่ | การตรวจสอบ Alt ในหลายร้อยหน้า |
สรุป: โปรแกรมตรวจสอบภาพออนไลน์จะแสดงให้เห็นว่าภาพในหน้าเว็บนั้นๆ มีปัญหาอะไรบ้าง PageSpeed จะแสดงให้เห็นว่าความเร็วในการโหลดหน้าเว็บลดลงไปเท่าไหร่ และ Squoosh หรือโปรแกรมแปลงไฟล์จะช่วยแก้ไขไฟล์เหล่านั้นได้เอง
PromoPilot มี เครื่องมือ SEO ฟรี 87 รายการ รวมถึงเครื่องมือบีบอัดรูปภาพและตัวแปลง WebP ที่ทำงานได้โดยตรงในเบราว์เซอร์ โดยไม่ต้องอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ หากต้องการทำความเข้าใจขนาดหน้าเว็บโดยรวม โปรดดูบทความในชุดการวิเคราะห์ความเร็วหน้าเว็บของเรา
ระบบตรวจสอบภาพมองไม่เห็นอะไรบ้าง?
เราต้องยอมรับข้อจำกัดของเครื่องมือนี้อย่างตรงไปตรงมา เพราะการรู้ข้อจำกัดเหล่านี้สำคัญมากสำหรับการตีความคะแนนอย่างถูกต้อง:
- ขนาดไฟล์จะไม่ถูกนำมาพิจารณา — รูปภาพจะไม่ถูกดาวน์โหลด รูปแบบไฟล์จะถูกกำหนดโดยนามสกุลไฟล์
- แท็ก
<picture>ไม่ได้รับการประมวลผล: ไฟล์ JPG ใน<img>จะถูกติดแท็กแม้ว่าจะมี AVIF หรือ WebP อยู่ใน<source>ที่อยู่ข้างๆ ก็ตาม - ภาพพื้นหลังที่สร้างจาก CSS และภาพที่เพิ่มเข้ามาโดย JavaScript จะไม่รวมอยู่ในรายงานนี้
- ขนาดที่ระบุไว้เฉพาะใน CSS จะไม่ถูกนำมาพิจารณา
- หน้าเว็บที่ไม่มี
<img>แม้แต่รูปเดียว จะได้ 50 คะแนน - นี่ไม่ใช่ "ครึ่งหนึ่งของข้อผิดพลาด" แต่เป็น "ไม่มีอะไรให้ให้คะแนน"
เมื่อไหร่ที่เครื่องมือฟรีจะไม่เพียงพอ?
การแก้ไขข้อความแสดงแทน (alt text) บนหน้าเว็บเดียวใช้เวลาเพียงสิบนาที แต่ถ้าหากร้านค้ามีสินค้าห้าพันรายการ การทำด้วยมือทั้งหมดนั้นเป็นไปไม่ได้ คุณจำเป็นต้องใช้ผู้เชี่ยวชาญหาก:
- ควรสร้าง alt โดยอัตโนมัติจากชื่อ สี และมุมสำหรับแคตตาล็อกทั้งหมด
- ภาพจะถูกโหลดจากกล้องโดยไม่มีการบีบอัด และจำเป็นต้องมีกระบวนการอัตโนมัติ: การบีบอัด, WebP, ขนาดต่างๆ;
- ธีมเว็บไซต์แสดงรูปภาพโดยไม่มีการกำหนดความกว้าง ความสูง และ srcset และจำเป็นต้องแก้ไขเทมเพลต
- ต้องการเพิ่มจำนวนผู้เข้าชมเว็บไซต์จาก Google Images สำหรับการค้นหาสินค้าหรือไม่?
ฉันสามารถช่วยอะไรเว็บไซต์ของคุณได้บ้าง?
ผมคือวาเลรี ดานยุก นักพัฒนาและผู้เชี่ยวชาญด้าน SEO ที่มีประสบการณ์ 12 ปี และดูแลลูกค้ากว่า 200 ราย รวมถึงร้านค้าออนไลน์จำนวนมากที่มีรูปภาพนับพันภาพ
SEO และการตรวจสอบ
- บริการตรวจสอบ SEO เว็บไซต์แบบครบวงจร: ฉันตรวจสอบรูปภาพทั่วทั้งเว็บไซต์ ตั้งค่าการแปลงอัตโนมัติ และใส่ข้อความ alt ในเทมเพลต
- บล็อก SEO ที่ขับเคลื่อนด้วย AI ซึ่งดึงดูดลูกค้าจากผลการค้นหาแบบธรรมชาติ — แสดงคำอธิบายภาพ (alt image) และภาพ WebP สำหรับแต่ละบทความโดยอัตโนมัติ
ร้านค้าและแคตตาล็อก
- สร้างแคตตาล็อกสินค้า 300 รายการได้ภายในไม่กี่นาที ด้วย MCP และ Claude พร้อมคำอธิบายและรูปภาพสำหรับสินค้าแต่ละรายการ
- ร้านค้าออนไลน์บน WooCommerce ที่มีการประมวลผลภาพอย่างเหมาะสม
- กำลังย้ายร้านค้าจาก Instagram ไปยังเว็บไซต์ — รูปภาพสินค้าและคำอธิบายกำลังดำเนินการอยู่
- คุณสามารถโอนย้ายสินค้า รูปภาพ และข้อความไปยัง 1001site ได้โดยใช้ลิงก์จากเว็บไซต์เก่าหรือโซเชียลมีเดียของคุณ
การบัญชีและระบบอัตโนมัติ
- งานบัญชี + การทำบัญชี + คลังสินค้าสำหรับสินค้า 30,000 รายการ
- บอท Telegram ที่ใช้ AI สำหรับร้านขายซอสออนไลน์
ส่งลิงก์รายละเอียดสินค้ามาให้ฉัน ทาง Telegram ฉันจะบอกคุณว่าคุณจะได้รางวัลเท่าไหร่จากรูปภาพ
ผลลัพธ์
- เครื่องมือตรวจสอบภาพ SEO ออนไลน์จะวิเคราะห์ภาพได้มากถึง 100 ภาพในหน้าเว็บ และให้คะแนนตั้งแต่ 0 ถึง 100 พร้อมทั้งแสดงความคิดเห็นสำหรับแต่ละภาพ
- องค์ประกอบที่ได้คะแนนสูงสุดคือ alt และขนาดความกว้าง/ความสูง ตามด้วย lazy loading, WebP/AVIF และ srcset
- รูปภาพหลักไม่จำเป็นต้องใช้การโหลดแบบ Lazy Loading แต่ต้องตั้ง
fetchpriority="high" - สำหรับแคตตาล็อกขนาดใหญ่ การประมวลผลภาพถ่ายจะดำเนินการโดยอัตโนมัติ หรือเลือกใช้แพลตฟอร์มที่มีฟังก์ชันนี้อยู่แล้ว เช่น 1001site
ตรวจสอบหน้าเว็บที่ใช้ทรัพยากรมากที่สุดของเว็บไซต์ของคุณด้วย เครื่องมือตรวจสอบ SEO รูปภาพฟรี — เริ่มจากค่า alt ก่อน
แหล่งที่มา
- หน้าตรวจสอบ SEO รูปภาพของ PromoPilot - การตรวจสอบ กฎการประเมิน ข้อจำกัด และคำถามที่พบบ่อย
- Google Search Central - คำแนะนำรูปภาพสำหรับการค้นหา
- Google PageSpeed Insights และ Squoosh - คำอธิบายคุณสมบัติ
