Image SEO menyambungkan empat tugas: image membantu page, kekal accessible apabila tidak dapat dilihat, boleh ditemui search system dan dimuat pada quality yang betul tanpa melambatkan experience. Alt text penting, tetapi tidak boleh membaiki image yang tidak relevan, blocked atau terlalu besar.
Google menggunakan image, alt text dan surrounding context bersama. W3C pula membezakan text alternative untuk image informative, functional, decorative, complex atau redundant. Tentukan tugas dahulu, kemudian tulis atau kosongkan alt dengan betul.
Jawapan ringkas: optimize mengikut urutan ini
| Layer | Soalan | Pass condition |
|---|---|---|
| Purpose | Adakah image membantu task sebenar? | Explain, prove, compare, identify atau enable action |
| Accessibility | Apa hilang jika image tidak dilihat? | Meaning atau function masih tersedia |
| Discovery | Boleh Google jumpa file dan landing page? | Crawlable HTML, page dan image URL |
| Context | Mengapa image penting di sini? | Relevant text, caption atau structured data |
| Delivery | Browser menerima versi sesuai? | Dimension, format dan responsive source |
| Priority | Adakah ia kritikal di first viewport? | LCP awal; later image defer |
| Measurement | Adakah outcome bertambah baik? | Cari, accessibility dan performance evidence |
Klasifikasikan image sebelum menulis alt
Setiap <img> perlukan atribut alt, tetapi bukan semua perlukan perkataan. alt="" memberitahu assistive technology supaya mengabaikan image decorative atau redundant.
| Tugas image | Text alternative | Contoh |
|---|---|---|
| Informative photo / screenshot | Sampaikan meaning berguna dalam context | Describe finding, bukan semua warna |
| Functional link / button | Describe destination atau action | “Download template audit SEO” |
| Decorative | alt="" | Abstract background tanpa maklumat |
| Redundant | alt="" jika nearby text sama | Icon beside visible “Cari” |
| Complex chart | Short alt + full nearby explanation/table | Name chart dan explain trend |
| Essential text image | Masukkan text penting jika tiada nearby | Poster dengan tarikh dalam image sahaja |
| Logo | Nama organisasi jika identiti relevan | “SEOWithJack” |
| Portrait | Nama atau role jika identiti relevan | “Jack Lee, SEO consultant” |
Tulis alt untuk page dan penggunaan ini
Alt text bergantung pada context. Photo sama boleh perlukan wording berbeza di team page, case study atau decorative banner. Describe apa yang user perlu faham atau lakukan—bukan filename atau keyword list.
Untuk image link, alt berfungsi seperti anchor text. Describe destination. Atribut title bukan pengganti alt.
| Situasi | Lemah | Berguna |
|---|---|---|
| Audit screenshot | “SEO screenshot ranking report SEO” | “Search Console report showing indexed and excluded pages” |
| Product comparison | “Two laptops” | “13-inch and 15-inch laptops compared side by side” |
| Linked PDF cover | “Report cover” | “Download checklist technical SEO 2026” |
| Chart | “Traffic chart” | “Organic clicks declined after March migration” |
| Decorative gradient | Describe semua warna | alt="" |
| Photo dengan caption sama | Ulang full caption | alt="" jika tiada meaning lain |
Pastikan image ditemui dalam HTML sebenar
Google boleh menemui image dalam src standard <img>, termasuk fallback dalam <picture>. Google tidak index CSS image. Gunakan CSS background untuk decoration dan HTML image untuk content atau evidence.
Jika JavaScript gallery menyimpan URL dalam data-src, verify rendered HTML dan crawler access. Image penting tidak patut memerlukan click, login atau blocked script untuk wujud.
- Landing page berjaya dan indexable.
- Image URL pulangkan content type yang betul.
- Robots tidak block page atau file.
- Image penting ada dalam
<img src>atau responsive pattern. <picture>/srcsetada<img src>fallback.- Image tidak memerlukan login/cookie/action.
- CDN URL stabil dan accessible.
- Broken, placeholder dan hotlink dibuang.
Gunakan filename stabil dan URL konsisten
Google menyifatkan filename sebagai light clue. Gunakan nama pendek dan descriptive bila praktikal serta extension yang sepadan dengan format. Untuk image sama pada banyak page, reference URL yang sama.
Jangan ubah indexed image URL hanya untuk filename lebih cantik. Migration risk mungkin lebih besar daripada naming benefit kecil.
| Asset | Filename baik | Elak |
|---|---|---|
| Case study screenshot | redirect-validation-report.webp | IMG_4821-final-final.webp |
| Service photo | technical-seo-audit-review.jpg | best-seo-seo-malaysia.jpg |
| Chart | organic-clicks-before-after-migration.svg | chart1.svg |
| Portrait | jack-lee-seo-consultant.jpg | DSC00038.jpg |
| Localized diagram | ms-crawl-index-flow.svg | English diagram yang tidak readable |
Pilih format mengikut visual job
Google menyokong BMP, GIF, JPEG, PNG, WebP, SVG dan AVIF dalam image src. Tiada format atau target KB universal. Browser support, visual quality, editing workflow dan fallback masih penting.
Screenshot dengan text mungkin perlukan near-lossless setting; photograph biasanya sesuai untuk perceptual compression. Bandingkan output sebenar.
| Content | Starting point | Watch for |
|---|---|---|
| Photo | AVIF/WebP; optimized JPEG jika perlu | Texture, gradient, over-compression |
| UI screenshot | High-quality WebP/AVIF atau PNG | Blurred text/colour fringe |
| Logo/icon | SVG jika safe | Untrusted script / accessible name |
| Transparent raster | WebP, AVIF atau PNG | Edge artefact |
| Simple animation | Animated modern format, CSS atau video | Large GIF/distraction |
| Complex illustration | Test SVG vs raster | SVG complexity / huge dimension |
Saizkan image untuk rendered slot
CSS boleh mengecilkan 4,000px image kepada 700px tetapi browser masih mungkin download file besar. Hasilkan beberapa candidate berdasarkan layout width dan device pixel density.
srcset menyenaraikan source; sizes menerangkan expected rendered width. Gunakan <picture> untuk format fallback atau crop berbeza yang benar-benar diperlukan.
| Slot | Candidate strategy | QA |
|---|---|---|
| Full-width hero | Beberapa width hingga design maximum | Subject kekal dalam mobile crop |
| Artikel image | Width sekitar content column + high density | Label readable |
| Four-card grid | Small candidate ikut card width | Mobile tidak download desktop asset |
| Thumbnail | Dedicated thumbnail size | Bukan hero file dalam slot kecil |
| Art-directed banner | <picture> mobile crop | Semua source bawa meaning sama |
Reserve space sebelum file tiba
Tetapkan intrinsic width dan height atau aspect ratio yang reliable. Responsive CSS masih boleh scale secara fluid. HTML dimension menerangkan source ratio, bukan memaksa visual size.
- Width/height sepadan intrinsic ratio.
- CSS kekalkan ratio pada breakpoint.
- Crop tidak sembunyi evidence penting.
- Gallery/carousel ada initial height stabil.
- Caption tidak menolak content tiba-tiba.
- Error/fallback state masih usable.
- Orientation change tidak jump.
- Check field CLS, bukan satu lab run sahaja.
Layan LCP image secara berbeza
Likely LCP image mesti discoverable dalam initial HTML, tidak lazy-loaded dan mula loading awal. Jika measurement mengesahkan ia LCP, fetchpriority="high" boleh membantu. Jangan beri high priority kepada semua image.
Preload hanya untuk resource kritikal yang sukar ditemui awal. Gunakan panduan Core Web Vitals untuk diagnose TTFB, resource delay, transfer dan render delay.
| Posisi | Loading | Priority |
|---|---|---|
| Likely hero / LCP | Eager/default | Consider fetchpriority="high" selepas measure |
| Above-fold lain | Default | Browser priority |
| Below-fold editorial | loading="lazy" | Default |
| Hidden carousel slide | Lazy/lower bila sesuai | Jangan lawan visible slide |
| CSS LCP background | Preload dengan teliti | Test exact responsive URL |
Lazy-load ikut posisi, bukan habit
Native loading="lazy" sesuai untuk offscreen image, bukan semua image. Image visible ketika load—terutama LCP—tidak patut menunggu layout.
Elak JavaScript pattern yang menggantikan src dengan nonstandard attribute tanpa crawlable fallback.
- Kenal pasti LCP pada representative template.
- Exclude above-fold/LCP daripada lazy loading.
- Native lazy untuk suitable offscreen image.
- Real source URL kekal dalam HTML.
- Jangan preload banyak image.
- Version long-cached file bila visual berubah.
- Verify CDN resize/format.
- Monitor image error dan transfer besar.
Letakkan image dengan context yang menjelaskannya
Google menggunakan caption, image title dan nearby text untuk memahami subject. Relevant image pada relevant page lebih berguna daripada generic stock photo berulang.
Jangan simpan satu-satunya jawapan dalam screenshot. Cari system dan assistive technology perlukan visible text; user juga perlu copy, translate dan resize.
| Elemen | Tugas | Decision |
|---|---|---|
| Nearby paragraph | Explain kenapa image penting | Interpret screenshot |
| Caption | Tambah source/date/takeaway | Gunakan jika benefit reader |
| Figure/figcaption | Associate media + caption | Chart/evidence/credit |
| Alt | Nonvisual equivalent/function | Jangan duplicate long caption |
| Transcript/table | Carry complex data | Diagram/chart/text-heavy visual |
Pilih representative image dengan sengaja
Google memilih preview secara automatik, tetapi anda boleh menunjukkan preference melalui primaryImageOfPage, Artikel image dan og:image. Image perlu relevant, high quality dan sesuai dengan visible page.
Elak generic logo, unrelated stock atau extreme ratio untuk setiap page. Selaraskan melalui structured data dan content refresh.
| Surface | Field | Check |
|---|---|---|
| Visible page | <img>/figure | Relevant evidence |
| WebPage schema | primaryImageOfPage | Absolute accessible URL |
| Artikel schema | image | Match article/guidelines |
| Social | og:image | Correct crop/context |
| Image result | Landing page + context | Useful selepas click |
Image Sitemap dan CDN untuk discovery gap
Image Sitemap membantu Google menemui URL yang sukar ditemui, tetapi tidak menjadikan image relevan dan tidak mengganti HTML. Sertakan public image berguna pada canonical page.
Image Sitemap boleh reference CDN domain. Verify ownership dalam Search Console dan betulkan URL berubah, expired signature atau bot block sebelum menambah entry.
- Canonical landing page indexable.
- Submitted image URL betul.
- Hanya public useful image.
- CDN/source verified bila praktikal.
- Robots/signed URL tidak halang.
- Satu asset tidak fragment banyak URL.
- Old image mapped/removed semasa migration.
- Test discovery selepas deploy.
Rekod ownership, permission dan license
Cari visibility tidak memberi kebenaran untuk reuse. Rekod original, client-provided, licensed stock, commissioned, public-domain atau generated asset bersama terms dan source evidence.
Google menyokong rights information melalui structured data atau IPTC. Creator, credit, copyright, license dan acquire-license page boleh digunakan. Jangan buang metadata hak tanpa pemeriksaan.
| Rekod | Kenapa |
|---|---|
| Source / creator | Asal asset |
| Owner / permission | Hak publish |
| License scope | Commercial/editorial/territory limits |
| Credit | Attribution betul |
| Expiry | Elak penggunaan selepas tamat |
| Original / derivative | Future crop/replacement |
| AI/composite provenance | Transparency/policy |
| Removal contact | Cepat betulkan rights issue |
Audit daripada template hingga asset
- List image URL, landing page, status, format, dimension dan transfer.
- Classify informative, functional, decorative, redundant atau complex.
- Semak missing alt, empty by design atau rewrite.
- Verify page/file crawlable dan public.
- Cari CSS-only key image dan nonstandard lazy source.
- Banding intrinsic dimension dengan rendered slot.
- Identify real LCP dan timing pada core templates.
- Semak width, height, ratio, crop dan fallback.
- Review filename, nearby text, caption dan metadata.
- Test broken URL, redirect, CDN, cache dan content type.
- Confirm ownership, credit dan license.
- Prioritize user impact, template scale, opportunity dan effort.
Ukur outcome image secara berasingan
Dalam Search Console, type Image mewakili result daripada tab Google Images. Segment page, query, country, device dan date; jangan anggap ia mengukur semua image dalam standard web result atau Discover.
Gabungkan search data dengan real-user performance dan business outcome. Image juga boleh berjaya kerana explain process atau bantu conversion tanpa Image Cari click.
| Objektif | Evidence | Interpret |
|---|---|---|
| Discovery | Image impression dan indexed landing page | Index bukan guarantee visibility |
| Relevant visit | Image click/query/page | Check action selepas arrival |
| Speed | Field LCP/resource timing | Lab diagnose; field = users |
| Stability | Field CLS + visual QA | Image bukan satu-satunya shift |
| Accessibility | Alt classification + assistive test | Tool tidak judge meaning |
| Conversion | Form/product/assisted action | Elak single-change attribution |
| Operations | Broken image, weight, CDN error | Template issue dahulu |
Kesilapan Image SEO
- Keyword dalam setiap alt.
- Tulis alt untuk decorative image.
- Informative image tanpa alt attribute.
- CSS background untuk editorial image.
- Lazy-load LCP hero.
- Camera original dalam small card.
- Satu desktop crop untuk semua mobile.
- Preload/high priority terlalu banyak.
- Generic logo untuk semua article.
- Harap Sitemap baiki blocked image.
- Buang rights metadata tanpa check.
- Ukur file size sahaja.
Soalan lazim
Semua image perlu written alt?
Semua <img> perlu alt attribute; decorative/redundant biasanya alt="", informative/functional perlukan equivalent.
Berapa panjang alt?
Tiada quota SEO. Tulis cukup ringkas untuk meaning atau action; pindahkan detail kompleks ke visible text.
Alt perlu keyword?
Gunakan wording natural yang diperlukan; jangan paksa atau ulang keyword.
WebP/AVIF sentiasa lebih baik?
Sering compress dengan baik, tetapi bergantung pada image, quality, browser dan workflow. Test output.
Target KB?
Tiada universal target. Tetapkan budget ikut slot, detail, jumlah image dan real-user condition.
Hero lazy-load?
Tidak jika visible atau likely LCP. Discover awal dan measure fetch priority.
Google index CSS image?
Google menyatakan CSS image tidak diindex. Gunakan HTML image untuk meaningful asset.
Perlu Image Sitemap?
Gunakan untuk important image yang sukar ditemui atau image-heavy site; ia bukan pengganti HTML.
Boleh guna stock/AI image?
Boleh dengan hak yang betul dan jika membantu. Simpan provenance; jangan jadikan generated image sebagai fake evidence.
Bagaimana measure?
Filter Search Console ke Image, kemudian gabungkan page/query, field performance, accessibility dan business outcome.
Rujukan rasmi
- Google Cari Central: Google Images best practices
- Google Cari Essentials
- Google Cari Central: Image license metadata
- web.dev: Responsive images
- web.dev: Image performance
- web.dev: Optimize Largest Contentful Paint
- web.dev: Browser-level image lazy loading
- W3C WAI: Alt decision tree
- MDN: The img element
- Ahrefs: Image SEO best practices
- Google Search Console API: Cari Analytics query
Kongsikan representative templates atau image crawl. Jack boleh asingkan masalah accessibility, discovery, responsive delivery, LCP, metadata dan licensing mengikut priority.
Evolusi Ranking Google: Daripada PageRank ke Modern Cari Systems2 September 2026
Kandungan AI dan SEO Google: Apa Dibenarkan, Apa Dianggap Spam dan Cara Publish2 September 2026
Google Florida Update 2003: Fakta, Teori dan Lesson SEO2 September 2026