Як писати назви файлів зображень, що допомагають SEO та доступності

Назви файлів зображень важливі, але не настільки, як часто стверджують

Назви файлів зображень — одна з тих дрібних вебдеталей, довкола яких забагато категоричності. Одні команди повністю їх ігнорують і публікують IMG_7421.jpg. Інші перетворюють кожне фото товару на мініатюрний текст із ключових слів.

Корисна середина проста: пишіть назви файлів, які чітко описують зображення, допомагають людям керувати ресурсами й дають пошуковим системам трохи додаткового контексту. Не очікуйте, що назви файлів урятують слабкий контент, відсутній alt-текст, повільні зображення або заплутану сторінку.

Google прямо рекомендує використовувати короткі, описові назви файлів для зображень. Це слушна порада. Але також обмежена. Назва файлу — лише одна контекстна підказка серед багатьох: навколишній текст, заголовок сторінки, структуровані дані, підписи, alt-текст, посилання, якість зображення й те, чи справді зображення корисне для сторінки.

Із доступністю схожа ситуація. Добра назва файлу не замінює alt-текст. Але вона може зменшити шкоду, коли щось іде не так, і полегшує життя редакторам, розробникам та користувачам, які завантажують, зберігають або поширюють файл.

Коротке правило

Використовуйте назву файлу, яка відповідає на це запитання:

Якби хтось бачив лише назву файлу, чи мав би він приблизне уявлення, що містить зображення?

Добре:

• red-running-shoes-side-view.jpg
• checkout-error-message-mobile.png
• oak-dining-table-120cm-walnut.jpg
• team-planning-workshop-whiteboard.webp

Погано:

• IMG_7421.jpg
• final-final-v3-new.jpg
• best-cheap-running-shoes-buy-online-discount-sale.jpg
• screenshot.png

Мета — не поезія. Мета — корисна конкретика.

Що добра назва файлу зображення дає для SEO

Добра назва файлу допомагає пошуковим системам зрозуміти зображення, особливо в контексті пошуку за зображеннями. Вона може підсилити тему сторінки й предмет візуального матеріалу.

Але це слабкий сигнал порівняно з базовими речами:

• Зображення розміщене на релевантній сторінці.
• Текст поруч пояснює або підтримує зображення.
• Зображення має доречний alt-текст, коли це потрібно.
• Зображення доступне для сканування та індексації.
• Файл не є без потреби великим.
• Сторінка завантажується надійно.

Якщо ви оптимізуєте зображення для органічного пошуку, почніть із релевантності та корисності сторінки. Потім наведіть лад у назвах файлів. Далі перегляньте стиснення, формати, розміри, lazy loading і структуровані дані там, де це доречно. Наш посібник про формати зображень у 2026 році буде корисним доповненням, якщо впорядкування назв переросте в ширший етап оптимізації продуктивності зображень.

Що добра назва файлу зображення дає для доступності

Строго кажучи, назви файлів не є головним механізмом доступності для зображень. Ним є alt-текст.

Якщо зображення передає інформацію, атрибут alt має надавати текстову альтернативу. Якщо зображення декоративне, атрибут alt зазвичай має бути порожнім: alt="". Якщо зображення є посиланням або кнопкою, альтернативний текст має описувати дію або місце призначення, а не просто пікселі.

Ми докладно розглянули це в прагматичному посібнику з alt-тексту для зображень у 2026 році, і варто сприймати alt-текст як окреме редакційне завдання.

То навіщо взагалі дбати про назви файлів із погляду доступності?

Тому що назви файлів часто з’являються на периферії користувацького досвіду:

• Деякі комбінації допоміжних технологій і браузерів можуть показувати назву файлу, коли alt-текст відсутній.
• Завантаженим зображенням потрібні зрозумілі назви поза вебсторінкою.
• Медіатеки CMS легше перевіряти, коли назви описові.
• Редактори рідше прикріплюють неправильне зображення, коли файли названі зрозуміло.
• Зламані зображення та режими налагодження легше інтерпретувати.

Назва файлу не зробить недоступне зображення доступним. Але погана назва файлу може зробити збої більш заплутаними.

Практична схема іменування

Використовуйте цей стандартний шаблон:

subject-detail-context.ext

Приклади:

• espresso-machine-steam-wand-closeup.jpg
• pricing-table-enterprise-plan-desktop.png
• garden-chair-green-metal-front-view.webp
• password-reset-email-example.png

Для товарів часто краще працює трохи структурованіший варіант:

brand-product-model-color-view.ext

Приклади:

• acme-trail-jacket-blue-front.jpg
• northline-desk-lamp-brass-side.webp
• terra-ceramic-mug-white-top-view.jpg

Для редакційних зображень:

topic-specific-scene.ext

Приклади:

• remote-team-video-call-laptop.jpg
• city-bike-lane-rain-evening.jpg
• developer-debugging-http-headers-terminal.png

Для скриншотів інтерфейсу:

feature-state-device.ext

Приклади:

• checkout-validation-error-mobile.png
• account-settings-two-factor-enabled-desktop.png
• analytics-dashboard-empty-state-tablet.png

Йдеться не про жорстку таксономію. Йдеться про усунення неоднозначності.

Використовуйте дефіси, нижній регістр і прості слова

Для публічних вебресурсів надавайте перевагу:

• Літерам у нижньому регістрі
• Дефісам між словами
• Відсутності пробілів
• Відсутності підкреслень
• Відсутності пунктуації, крім дефісів
• Відсутності спеціальних символів, якщо ваша система їх не вимагає

Добре:

blue-cotton-shirt-front.jpg

Уникайте:

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

Дефіси легше читати, легше копіювати, і вони широко сприймаються як розділювачі слів в URL. Нижній регістр також допомагає уникати дратівливих помилок чутливості до регістру між локальною розробкою, Linux-серверами, CDN та об’єктними сховищами.

Тримайте назви файлів короткими, але не розмитими

Назва файлу має бути достатньо довгою, щоб описати зображення, і достатньо короткою, щоб залишатися читабельною.

Корисний діапазон зазвичай становить від 3 до 8 слів перед розширенням.

Надто розмито:

shoes.jpg

Краще:

red-running-shoes-side-view.jpg

Забагато:

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

Краще:

red-marathon-running-shoes-side-view.jpg

Якщо фраза звучить як пошуковий запит, написаний відчайдушним маркетологом, вона, ймовірно, надто довга.

Не перенасичуйте назви файлів зображень ключовими словами

Перенасичення назв файлів ключовими словами зазвичай є ознакою того, що сторінка не виконує свою роботу.

Погано:

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

Це не допомагає користувачам. Це не допомагає редакторам. Це не є серйозною практикою доступності. І ще це робить ваш сайт менш якісним на вигляд.

Використовуйте природну назву того, що показано на зображенні. Якщо ключове слово підходить, бо точно описує зображення, використайте його. Якщо ні — пропустіть.

Наприклад, якщо зображення — це фото чорного шкіряного дивана, black-leather-sofa-three-seat.jpg цілком доречно. best-modern-luxury-living-room-furniture-online.jpg — це не назва файлу; це крик про допомогу.

Узгоджуйте назву файлу з фактичним зображенням

Це звучить очевидно, але бібліотеки зображень із часом роз’їжджаються. Файл із назвою homepage-hero-new.jpg згодом може показувати інший товар, іншу людину або зовсім іншу кампанію.

Це створює дві проблеми.

По-перше, пошукові системи й користувачі отримують суперечливі сигнали. По-друге, команди перестають довіряти медіатеці.

Якщо зображення змінює значення, перейменуйте його перед публікацією. Якщо ваша CMS або CDN ускладнює перейменування, розгляньте використання стабільних внутрішніх ідентифікаторів ресурсів, але водночас, де можливо, генеруйте описові публічні назви файлів.

Добрий внутрішній робочий процес може виглядати так:

1. Завантажити оригінальний ресурс.
2. Видалити непотрібні метадані, якщо важлива приватність.
3. Перейменувати похідний файл, який використовується на сайті.
4. Експортувати в потрібних розмірах і форматі.
5. Додати alt-текст і підписи в CMS.

Якщо фото надходять від користувачів, співробітників або польових команд, пам’ятайте, що назви файлів — лише одна з поверхонь приватності. Дані EXIF можуть містити часові мітки, відомості про камеру та інформацію про місцезнаходження. Перед публікацією чутливих зображень перегляньте наш посібник про те, як видалити метадані EXIF перед поширенням фото онлайн.

Відокремлюйте назви файлів від alt-тексту

Поширена помилка — використовувати ту саму фразу для назви файлу й alt-тексту.

Іноді це прийнятно. Часто це просто ліниво.

Назва файлу:

red-running-shoes-side-view.jpg

Добрий alt-текст на сторінці товару:

Red running shoe shown from the side, with a white foam sole and black laces.

Добрий alt-текст для мініатюри вибору кольору:

Red

Добрий alt-текст, якщо зображення декоративне:

alt=""

Назва файлу ідентифікує ресурс. Alt-текст служить користувачеві в контексті. Це пов’язані завдання, але не однакові.

Іменування зображень для різних типів сайтів

Ecommerce

Додавайте тип товару, важливий варіант і ракурс.

Приклади:

• linen-shirt-white-front.jpg
• linen-shirt-white-back.jpg
• linen-shirt-white-collar-detail.jpg

Уникайте додавання цін, акцій або тимчасової мови кампаній. Це змінюється надто часто.

Блоги та редакційні сайти

Описуйте сцену або концепцію, а не заголовок статті.

Добре:

designer-reviewing-mobile-layout.jpg

Менш корисно:

ultimate-guide-to-mobile-ux.jpg

Зображення можуть повторно використовувати, обрізати або синдикувати. Назва, прив’язана до сцени, старіє краще.

SaaS і документація

Називайте скриншоти за функцією, станом і платформою.

Приклади:

• billing-settings-payment-method-empty-state.png
• project-dashboard-filter-menu-open.png
• api-token-created-confirmation-modal.png

Це робить оновлення документації набагато менш болісним.

Локальні бізнеси

Використовуйте послугу, об’єкт або місце, коли це справді видно й релевантно.

Приклади:

• bakery-window-display-sourdough-loaves.jpg
• dental-clinic-reception-area-berlin.jpg
• plumber-repairing-kitchen-sink.jpg

Не додавайте назви міст до кожного файлу, якщо зображення цього не підтверджує. Фото гайкового ключа не стає змістовно wrench-london.jpg.

А як щодо розмірів зображень і версій?

Уникайте внесення розмірів у головну описову назву, якщо ваша система цього не потребує.

Краща родина ресурсів:

• red-running-shoes-side-view.jpg
• red-running-shoes-side-view-800w.jpg
• red-running-shoes-side-view-1600w.jpg

Якщо ваша система збірки автоматично генерує адаптивні варіанти, дозвольте їй додавати ширини або хеші. Не підтримуйте вручну десятки назв файлів, якщо вам не подобається майбутня археологія.

Хеші вмісту цілком доречні для кешування:

red-running-shoes-side-view.a8f31c.webp

Описова частина все ще присутня. Хеш обслуговує машину.

Короткий чекліст перед публікацією

Перед публікацією зображення запитайте:

• Чи описує назва файлу зображення простою мовою?
• Чи вона в нижньому регістрі та розділена дефісами?
• Чи немає в ній перенасичення ключовими словами?
• Чи уникає вона тимчасових слів на кшталт new, final або v2?
• Чи має alt-текст сенс у контексті сторінки?
• Чи доречні формат і розмір файлу?
• Чи видалено чутливі метадані там, де це потрібно?

Якщо ви можете відповісти «так» на ці запитання, назва файлу, ймовірно, достатньо добра. Не витрачайте 20 хвилин на назву декоративного розділювача. Але витратьте 20 секунд, щоб не дати DSC0038.jpg стати постійним публічним URL.

<!-- tool-cta:start -->

💡 Спробуйте це: Масово нормалізуйте імена файлів до lowercase-kebab-case за допомогою Case Converter, щоб назви ваших зображень залишалися узгодженими в усьому проєкті.

<!-- tool-cta:end -->

Тиха перевага: кращі команди

SEO-цінність назв файлів зображень помірна. Операційна цінність більша.

Добрі назви файлів роблять медіатеки придатними для пошуку. Вони зменшують кількість дубльованих завантажень. Вони допомагають дизайнерам, розробникам, маркетологам і командам підтримки говорити про той самий ресурс, не відкриваючи шість попередніх переглядів. Вони пришвидшують аудити.

Саме це — справжня причина стандартизувати іменування зображень. Пошукові системи виграють від ясності, але люди також. А саме на людях робота зазвичай ламається першою.