Оптимізація зображень для поліпшення швидкості веб-сайту та просування веб-сайтів - Semalt Expert



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

Крім того, існує досить багато областей, де використання зображень є обов’язковим і навіть необхідним для обґрунтування сайту.

Наприклад:

Просування зображень Google: правильне використання зображень

Ви інвестували та купували фотографії з фотосайтів/сховищ зображень, чи навіть збільшували та фотографували самі? Ви також повинні максимізувати їх для цілей SEO!

Google Image Promotion є одним із найкращі способи збільшення відвідуваності веб-сайту в певних областях - особливо тих, які зосереджені на зоровій стороні.

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

Основні правила оптимізації зображення:

1. Вага та розміри зображення

Один з важливих параметрів для просування зображень в Інтернеті - це вага зображення.

З одного боку, ми хотіли б використовувати високоякісні зображення, але з іншого боку, це буде відбуватися не за рахунок швидкості сайту, досвіду користувача та просування. Рекомендація полягає в тому, щоб "оптимізувати" (від слова "оптимізація") зображення максимально можливо, не суттєво погіршуючи якість. Для цього дотримуйтесь усіх наступних правил:

Рекомендована вага для фотографій

Майже будь-яке зображення може бути стиснене в тій чи іншій мірі, тому завжди доцільно використовувати лише ті розміри, які дійсно потрібні і які фізично відображаються на сайті, і максимально зменшити вагу зображень. Це справедливо для будь-якого сайту. Але особливо для сайтів з великою кількістю зображень. Не існує жодного правила, яке відповідає дійсності у всіх випадках, але бажано переконатись, що вага зображення не перевищує 70-80 К, якщо це не зображення галереї/слайдера, яке має особливе значення.

2. Виберіть відповідну назву для зображення

Під час пошуку зображень у Google враховується кілька параметрів для відображення зображення, що відповідає запиту. Одне з них - ім’я файлу. Рекомендується витратити ще секунду і дати зображенню назву, яка описує те, що ви бачите на зображенні. Важливо зберегти ім'я файлу англійською мовою та використовувати середні рядки, а не пробіли. Причина в тому, що Google краще справляється із середніми тире.

Приклади поганої назви зображення:

DSC2387.jpg

Сайт promoter.png

Приклад гарного імені зображення:

Search-engine-optimizer.jpg

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

3. ALT для зображення

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

Технічно в коді це виглядає так:

<imgsrc="tree.jpg" alt="дерево">

Окрім важливості тегу з точки зору доступності веб-сайтів, він також має значення для пошукових систем. Тег alt допомагає пошуковим системам зрозуміти, що є предметом зображення (поряд з іншими речами, такими як назва файлу, контекст сторінки, на якій він знаходиться, тощо), і це також природно впливає на пошук зображень у Google.

Крім того, тег alt є частиною внутрішньої оптимізації для всього. Крім того, коли із зображення виходить зовнішнє посилання, тег alt служить своєрідним прив'язкою тексту ("прив'язувальний текст") для зображення.

Як перевірити, чи має зображення тег ALT?

Є кілька шляхів:
Кричала жаба - Використовуйте жабу, яка підходить, коли ми хочемо виконати ретельне сканування зображень на сайті.

Процес полягає у введенні URL-адреси для сканування, а потім натисніть на вкладку Зображення.

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

Просування зображень у Google - поради щодо оптимізації тегів ALT

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

4. Тег заголовка зображення

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

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

Ось як це виглядає в коді:

<img class="alignnone wp-image-1323 size-full" title="Приклад зображення заголовка">

5. Типи зображень та розширення файлів

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

Порада - Тим, хто використовує Photoshop, я завжди рекомендую порівнювати ваги зображень за допомогою функції «Зберегти для Інтернету» та пристроїв між різними форматами (перед збереженням файлу існує попередній перегляд ваги зображення).

Правила вибору форматів зображень

6. Правильне використання ескізів



Ескізи (попередній перегляд) є важливим і навіть критичним компонентом деяких веб-сайтів - особливо сайтів, що базуються на галереях, та сайтів торгівлі. Ескізи ("Ескізи" від Google Translate…) можуть бути чудовими, з одного боку, але суттєво саботувати сайт та взаємодію користувачів з іншого.

Найбільш важливим у використанні цих зображень є підтримка розумної якості та ваги якомога нижче. На великих торгових сайтах, які покладаються на мініатюри для відображення сторінок категорій та попереднього перегляду товарів, цей факт особливо важливий. Чи знали ви, що кожна секунда затримки завантаження сайту коштує Amazon $ 1,6 млрд на рік? Значна частина часу завантаження на таких сайтах - це зображення.

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

Поради щодо правильного використання ескізів

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

Що стосується правил оптимізації зображень, доцільно інвестувати більше у великі зображення, а не в ескізи. Наприклад - не включати ескізи до файлу Sitemap зображення (розширення нижче), у деяких випадках навіть не встановлювати для них теги ALT. Амбіція полягає в тому, що Google буде індексувати великі зображення за рахунок мініатюр, а не навпаки.

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

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

7. Використання загортання тексту

Зазвичай зображення приходять для того, щоб служити тексту, а не навпаки. Але що стосується оптимізації зображень та просування зображень Google, і якщо сайт є мережею, яка базується на зображеннях, дуже не варто нехтувати питаннями текстів, навіть якщо це базові речі.

Тим, хто хоче зберегти чистий і мінімалістичний вигляд, наскільки це можливо (наприклад, на веб-сайті портфоліо фотографа), рекомендується, щоб він принаймні визначав наступне на кожній сторінці, на якій є зображення:

8. Карта сайту для фотографій

Карта сайту зображень (image-sitemap.xml) допомагає Google краще читати та індексувати наші зображення на сайті. Подібно до стандартної карти сайту XML, мапа сайту зображень може бути надіслана за допомогою Search Console в області мап сайтів.

Додайте мапу сайту в Search Console

Карта сайту зображень особливо корисна при використанні всіляких галерей зі сценаріями та різними ефектами - які Google важко сканує традиційно.

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

Як створити карту сайту?

WordPress - як завжди, якщо ви працюєте над WordPress, ваше життя просте. Плагін Udinra All Image Sitemap закриває для вас кут. Все, що вам потрібно зробити, це встановити плагін, позначити трохи V у налаштуваннях, створити карту сайту та запустити його в Google через Search Console.

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

Жаба може допомогти вам легко створити мапу карти зображень. Єдина проблема - він не оновлюється автоматично (на відміну від плагіна), і його потрібно час від часу оновлювати.

Як ти це робиш?

Повне сканування запитуваного сайту повинно бути виконане, а потім у верхньому меню програмного забезпечення перейдіть до Sitemaps -> Create Images Sitemap. Отриманий вами кошерний XML-файл буде використаний і запущений через Search Console.

9. Заохочуйте обмін фотографіями

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

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

Для цього WordPress має 2 приємні плагіни:

10. Інструменти зменшення та оптимізації зображення

TinyPNG - відмінна послуга, яка дозволяє стискати зображення в Інтернеті за допомогою особливо зручного інтерфейсу перетягування. Вони також мають API, що дозволяє працювати у більших кількостях і автоматично, а також чудовий плагін для WordPress, який дозволяє стискати всі зображення на сайті - вимагає використання їх API (безкоштовно для 500 зображень на місяць).
Фотосайзер - приємне настільне програмне забезпечення, яке дозволяє редагувати зображення у великих кількостях - не тільки стиснення, але і зменшення розмірів, додавання водяних знаків та різних ефектів до зображень та багато інших приємних функцій.

Висновок

Ви щойно зрозуміли важливість оптимізації зображень веб-сайту. Однак, якщо ви хочете дізнатись про поточний стан вашого сайту, ви можете зробити це безкоштовно, завдяки Semalt's SEO-консультації.
Semalt допоможе вам визначити проблеми SEO, пов’язані з вашим сайтом. Крім того, із спеціалістами Semalt ви можете легко покращити ефективність вашого бізнесу в Інтернеті за нижчою вартістю.

mass gmail