SEO на снимки: имена, alt текст и размер на файловете

SEO на снимки означава четири неща: файлът да има кратко описателно име, в alt текста да пише какво има на снимката, снимката да е лека и в правилния формат и да стои до текста, за който се отнася. Google казва, че разбира една снимка от alt текста, от съдържанието на страницата около нея и със собствени алгоритми за компютърно зрение, а името на файла му дава „съвсем леки“ подсказки [1]. Звучи сложно, но на практика отнема по минута на снимка.

Защо снимките изобщо имат значение за SEO

Снимките работят за теб на три места. Първо, в Google Images и в снимките до обикновените резултати: човек, който търси „ремонт на баня“, често гледа снимки, преди да кликне. Второ, в скоростта: Google пише, че снимките често са най-голямата част от размера на една страница и могат да я направят бавна [1]. Трето, в достъпността: alt текстът е това, което чува човек с екранен четец, и това, което се вижда, ако снимката не се зареди.

Има и едно техническо условие, което много шаблони пропускат: Google индексира снимки, сложени като обикновен елемент <img>, но не и снимки, сложени като фон чрез CSS [1]. Ако най-хубавите ти снимки са „фонове“ на секции, Google просто не ги вижда като снимки.

1. Името на файла: кратко и описателно

Снимката от телефона идва като IMG_4823.jpg. Преди да я качиш, преименувай я. Google дава пример, че my-new-black-kitten.jpg е по-добро име от IMG00023.JPG, и съветва да избягваш общи имена като image1.jpg [1].

Пиши името на латиница, с малки букви и тирета между думите. Google позволява и кирилица, но тогава адресът се кодира и става дълъг и нечетим, затова латиницата е по-простият избор.

2. Alt текстът: опиши снимката като на приятел по телефона

Alt текстът е най-важният текст на една снимка за Google [1]. Добрият alt описва какво има на снимката с няколко думи, в контекста на страницата. Google дава точно такъв пример: „кученце“ е по-добре от нищо, но „далматинче, което гони топка“ е най-добре. Изрично предупреждава и срещу пълненето на alt с ключови думи, защото това може да направи сайта ти да изглежда като спам [1].

• Зле: липсващ alt.
• Зле: „ремонт баня софия евтин ремонт ремонти бани плочки софия“.
• Добре: „Баня след ремонт, бели плочки и душ кабина“.

Не всяка снимка има нужда от описание. W3C има просто дърво за решение за alt текста [2]:

3. Формат и размер: леко, но остро

Google иска едновременно хубави снимки и бърза страница: острите снимки привличат повече от размазаните, но тежките правят сайта бавен [1]. Google Search поддържа BMP, GIF, JPEG, PNG, WebP, SVG и AVIF [1]. Как да избереш, според ръководството на MDN (Mozilla) [3]:

Две правила важат за всеки формат:

1. Оразмери снимката до реалния размер, в който се показва. Снимка от 4000 пиксела в рамка от 800 само тежи.
2. Компресирай я. Повечето програми за снимки и безплатните онлайн инструменти го правят с един бутон.

Ако сайтът ти е бавен и не знаеш откъде да започнеш, виж защо сайтът ми е бавен и как да го ускоря.

4. Първата голяма снимка и „мързеливото“ зареждане

Голямата снимка най-горе на страницата обикновено е това, по което Google мери колко бързо се зарежда страницата. Показателят се казва Largest Contentful Paint (LCP), снимките са сред елементите, които той отчита, а добрият резултат е до 2,5 секунди [4].

Снимките по-надолу по страницата могат да се зареждат „мързеливо“, едва когато посетителят стигне до тях (loading="lazy"). Но web.dev изрично предупреждава да не правиш това със снимките, които се виждат веднага при отваряне, особено с най-голямата [5]. Тя трябва да тръгне веднага.

Първата снимка на страницата зарежда веднага, всички под нея изчакват посетителя. Обратното прави сайта бавен точно там, където се гледа най-много.

5. Мястото на снимката: до правилния текст

Google разбира снимката и от страницата около нея: заглавието, надписа под нея и текста до нея [1]. Затова снимката на сменени спирачки стои на страницата за ремонт на спирачки, а не в обща галерия без нито дума текст. Кратък надпис под снимката („Банята преди и след ремонта“) помага и на хората, и на Google, стига да е вярно.

Същото важи и за снимката, с която страницата се показва при споделяне (og:image): Google съветва тя да е свързана със страницата, с висока резолюция и да не е логото ти или картинка с текст [1]. Как да напишеш и самото заглавие и описание, виж в заглавия на страници и мета описания, които носят кликове.

Как го правим в нашия сайт

На studiov1.com всяка JPG и PNG снимка в блога и в проектите автоматично получава и по-лек WebP вариант. Браузърът зарежда WebP, а оригиналът остава като резервен вариант за по-старите браузъри, точно по схемата <picture>, която Google показва като пример [1]. Снимката за споделяне остава PNG. Никой не конвертира снимки на ръка: качваме снимката, сайтът прави останалото. Можеш да видиш екранните снимки на реални сайтове в нашите проекти.

Чеклист за копиране

1. Снимката е твоя, реална, а не стокова: какви снимки да сложиш в сайта си.
2. Файлът е преименуван: латиница, малки букви, тирета, 3–5 думи.
3. Alt текстът описва снимката с няколко думи, без списък с ключови думи.
4. Декоративните снимки са с празен alt.
5. Снимката е оразмерена до реалния си размер и компресирана.
6. Форматът е WebP (с JPEG или PNG като резервен) или SVG за логото.
7. Снимката е елемент <img>, а не CSS фон, ако искаш Google да я види.
8. Първата голяма снимка не е „мързелива“, тези под нея са.
9. Снимката стои до текста, за който се отнася, по желание с надпис.
10. Същите хубави снимки са и в профила ти в Google: как да го настроиш.

SEO на снимките е малка част от цялото. Ако искаш да видиш картината отгоре, започни от SEO оптимизация на фирмен сайт: откъде да започнеш. А ако предпочиташ някой друг да мисли за размерите и форматите, при Studio V1 това е част от изработката на всеки сайт: разработчик преглежда сайта, преди да излезе, а ти просто ни пращаш снимките.

Източници

1. Google Search Central. "Google image SEO best practices." developers.google.com/search
2. W3C Web Accessibility Initiative. "An alt Decision Tree." w3.org/WAI
3. MDN Web Docs (Mozilla). "Image file type and format guide." developer.mozilla.org
4. web.dev (Google). "Largest Contentful Paint (LCP)." web.dev/articles/lcp
5. web.dev (Google). "Browser-level image lazy loading for the web." web.dev/articles