SEO оптимізація зображень на WordPress (і не тільки): легкий путівник для бабусі

1. Тому що важливо оптимізувати зображення на стороні SEO
2. Що оптимізувати, щоб зробити SEO дружній образ
3. Ім'я файлу
4. Як правильно написати назву оптимізованого файлу SEO
5. Альтернативний текст або текст alt
6. Як оптимізувати альтернативний текст
7. Як вставити тег alt на WordPress
8. Назва зображення або тег заголовка
9. Що вставити як назву зображення
10. Розміри пікселів
11. Як легко змінити розмір зображення
12. Простір, зайнятий на диску
13. Як стиснути зображення
14. А інші елементи редактора WordPress щодо зображень?
15. Чи важливий порядок вставки в коді alt і title ?
16. Поради щодо використання зображень "робити SEO"
17. Скільки зображень я повинен розміщувати на кожній сторінці / публікації?
18. Перше зображення має бути оптимізовано для одного і того ж ключового слова на сторінці / публікації
19. Де знайти безкоштовні та допустимі зображення?

Останнім часом я часто отримую відправку цього посібника для SEO зображень веб-сайту клієнтам і співробітникам: оптимізація зображень для SEO є однією з діяльності, яка часто недооцінена, але це дійсно може змінити ситуацію.

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

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

Ось чому я створив цей посібник для SEO оптимізації зображень для бабусі , тому що я впевнений, що якщо моя бабуся придумала ідею зробити хороший сайт про те, як зробити її смачні тортелліні і оптимізувати зображення, вона зможе зробіть це з цим довідником у руці! Посібник містить конкретні кроки для SEO оптимізації зображень на WordPress .

Перед від'їздом : цей посібник фактично є витягом, адаптованим до блогу посібника SEO, я пишу, вічний посібник зі сталого SEO , але це вже інша історія ... щоб дізнатися більше, підписатися на SEO-бюлетень !

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

Один з моїх бета-тестерів (це не так).

Тому що важливо оптимізувати зображення на стороні SEO

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

• Вони не відразу зрозумілі для Google. Алгоритм, який їх аналізує, ще не в змозі зрозуміти , що саме стосується зображення, «спостерігаючи за ним» (навіть якщо вони існують неймовірні технології у зв'язку з цим: для цього ми повинні використовувати інструменти, які надані нам, щоб дати конкретні вказівки на зміст зображення .
• Якщо Google не розуміє їх, вони не корисні на рівні SEO . Оптимізовані зображення SEO можуть вводити сенс , а отже, зробити вашу веб-сторінку більш релевантною для певного запиту (пошук користувача). Ті незрозумілі для Google тільки знижують якість сайту (і його позиціонування).
• Важкі зображення можуть сповільнювати роботу сайту, а отже, і пропустити його. Зображення завжди повинні бути адекватно змінені та стислі, щоб зайняти найменший простір на сервері та під час подання користувачам. Важкий сайт, тому що не оптимізований - це сайт, який не дуже корисний, і тому сайт, який Google не сподобається .

Що оптимізувати, щоб зробити SEO дружній образ

Технічно необхідно подбати про 5 основних характеристик зображень:

• ім'я файлу;
• альтернативний текст ( текст alt );
• назва зображення ( назва );
• розміри пікселів ;
• розмір з точки зору використовуваного дискового простору ;

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

Ім'я файлу

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

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

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

Приклад фото з оптимізованим зображенням SEO, який ви бачите вище, описується ім'ям файлу "maine-coon-black-tortie-annoiato.jpg" і, звичайно, не "DSC_2330.jpg".

Оптимальне ім'я файлу зображення повинно описувати зображення розумним і реалістичним способом : немає зображення синіх кульок з ім'ям файлу "square-rossi.jpg", тому що ми хочемо розмістити сторінку для "червоних квадратів", і ми думаємо, що зробимо це, пробивши через ім'я файлу зображення.
Якщо це трапиться з вами, проблема в цьому випадку полягає в тому, що ви вибрали зображення, які не є дуже актуальними та актуальними , а не навпаки!

Звичайно, як це відбувається в цьому керівництві, якщо зображення являє собою конкретний об'єкт абстрактного знання, його ім'я може (і повинно) представляти його. Фактично, фотографії в цьому посібнику називаються "optimize-images-seo-guide-example-[number], тому що насправді вони є прикладами!

Не робити це - насильно заповнювати ім'я файлу за допомогою ключових слів, або надмірно оптимізувати (дійсно перебільшуючи ), дійсно погана ідея: це практика, що карається Google через алгоритми, які регулюють спам, як скандальний Penguin (який насправді не є штраф, але алгоритм покарання, якщо бути точним). Пам'ятайте, сторінка з надто оптимізованими іменами зображень не призведе до зниження сайту, але робити це в будь-якому місці може дати вам погану чверть години (або навіть цілий рік, враховуючи біблійні часи для оновлення цих алгоритмів і відплата посібник). Більшість "precisini" може подумати, що я сам зробив це в цій посаді, але я не думаю, що ручний рецензент вважав би спам номенклатурою образів, які я використовував для цього посібника.

На закінчення, правильне запитання: « якщо я закриваю очі і описую образ через його ім'я, чи можу я зрозуміти, що він представляє? "

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

ПРИМІТКА : У WordPress, як і в багатьох інших CMS, ім'я файлу не може бути змінено після завантаження файлу! Тепер, однак, з'явилася опція "замінити", за допомогою якої ви можете замінити файл, я завжди використовував плагін " Увімкнути заміна медіа «Навіть якщо потрібно звернути увагу на ці плагіни, які забивають таблицю БД, маленький сюрприз завжди може бути за рогом, а наявність з пошкодженою базою даних не дуже смішно.

Як правильно написати назву оптимізованого файлу SEO

Використовуються лише ключові слова (без статей, прийменників або пунктуації, сумнозвісні стоп-слова ), бажано розділені символом "-" ("мінус", а не підкреслення "_").
ПРИМІТКА: якщо у вас є 10 тисяч зображень, оптимізованих з підкресленням, не робіть нічого, не виправляйте їх, якщо замість цього ви почали використовувати символ "мінус" згідно з умовами.

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

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

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

Так що не дайте одне і те ж ім'я файлу зображенням і не будьте занадто загальними : пропустіть хорошу можливість створити релевантність.

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

Альтернативний текст або текст alt

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

Альтернативний текст є найважливішим елементом всього разом з ім'ям файлу: з alt tag Google екстраполює ключові слова, які описують зображення і для яких він перейде в позицію. Його можна легко вставити в будь-яку сучасну CMS: WordPress, Joomla, Drupal і Magento мають всі поля, які можна легко змінити.

Ми завжди пам'ятаємо, що його мета полягає в наданні інформації про зображення «альтернативним» способом чисто візуальному: для цього він повинен містити опис, що стосується реальності образу. Ми не повинні оптимізувати зображення, що містить кішку з "розведенням кішок", тому що ми прагнемо до цього ключового слова: це насправді практика спаму . Потрібно описати фотографію так, ніби ви це робите для людини з закритими очима.

Як оптимізувати альтернативний текст

Як правило, альтернативний текст зображення може бути просто складений з рядка, який ви використовували в імені файлу, з необхідними пунктами / статтями до повідомлення роздільників "-".

наприклад, для зображення у прикладному зображенні ми матимемо наступний HTML-код:

<img src = "https://www.emanuelevaccariweb.it/wp-content/uploads/2016/09/maine-coon-black-tortie-annoiato" alt = "Чорна кішка tortie нудьга" />

Альтернативний текст у цьому випадку - " кіт чорної черепахи ", який в коді інкапсульований у тезі HTML ' alt = '.

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

На WordPress ви можете змінити альтернативний текст як під час вставки зображення, так і після завантаження в будь-який час.

Як вставити тег alt на WordPress

Існує два способи вставки альтернативного тексту на WordPress: через розділ "Медіа" або безпосередньо в редакторі повідомлень , в обох випадках, коли зображення вставлено або після модифікації.

Коли вставляєте зображення, або через розділ носія, або у редактор статті / сторінки, ви знайдете це вікно з полем "альтернативний текст":

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

Попередження: зміна альтернативного тексту в повідомленні призведе до його зміни в бібліотеці медіа та навпаки!

Назва зображення або тег заголовка

Заголовок зображення (або назви зображення) замість поля, що служить для розширення значення зображення в браузері користувача.

Фактично він відображається при зупинці за допомогою вказівника миші на самому зображенні, генеруючи так звану підказку .

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

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

Що вставити як назву зображення

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

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

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

На WordPress ви можете змінити заголовок під час вставки зображень або після завантаження в будь-який час.

Розміри пікселів

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

Якщо говорити про блог, що відображається на робочому столі, то зображення в принципі не повинно бути ширшим ніж 800px і не вище 400px (оцінки засновані на середньому розмірі преміум-вмісту WordPress, близько 960px) ,

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

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

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

ПРИМІТКА: Я розумію, що існують способи для масштабування та реагування зображень (наприклад, srcset, який WordPress, здається, тепер використовує автоматично), але це занадто просунута концепція для бідної бабусі, як ви думаєте?

Як легко змінити розмір зображення

Якщо ви працюєте в середовищі Windows (як в есе " Nonne and Linux говорить , ми стаємо cretinux "), щоб змінити розмір зображення просто використовуйте Paint!

Фарба, друга бабусь, які оптимізують зображення

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

Якщо ваша бабуся використовує Linux або MacOS, завантажте щось на зразок цього!

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

Простір, зайнятий на диску

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

Як особистий розгляд, максимальний розмір, який я можу рекомендувати для будь-якого зображення, вставленого в блозі, становить 100 кб . Природно, ми повинні брати до уваги не тільки «вагу» єдиного зображення, але і всіх присутніх на певній сторінці. Загалом, я завжди намагаюся не перевищувати 500 кб.

Це ознаки, продиктовані досвідом , а не правилами, написаними на камені!

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

Як стиснути зображення

Після того, як зображення було вирізано та змінено за допомогою власного редактора, якщо ви перебуваєте в середовищі Windows, щоб стиснути його та оптимізувати його простір пам'яті, просто передайте його копію (завжди краще зберігати окрему "оригінальну" версію) у вільній програмі. дуже просто називається Riot (завантажується безкоштовно на http://luci.criosweb.ro/riot/ ).

Після запуску програми перетягування зображення в його вікно отримає такий екран:

Екранний знімок бунту з повсюдними кішками Мейн-Куна

Зліва - оригінальне зображення , тому можна порівняти якість з попереднім переглядом оптимізованої версії справа; крім того, після збільшення масштабу зображення за допомогою колеса CTRL + +, наприклад, натискання на фотографію і перетягування курсору можна прокручувати зображення, щоб перевірити вплив стиснення на деталі зображення .

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

1. Оригінальні величини Kb зображення;
2. Kb розміри версії стислого зображення;
3. Тип зображення стислої версії (зберегти те ж саме!);
4. Рівень якості стисненого зображення : перетягніть панель (або введіть число від 0 до 100), щоб зменшити якість зображення і, відповідно, використати простір. Ви можете спостерігати візуальний вплив зміни зображення праворуч;
5. Chroma Subsampling : це метод стиснення зображень, який може трохи змінити кольори, але зменшить простір, зайнятий на диску. Корисно оцінити, чи є вплив на зображення прийнятним за допомогою попереднього перегляду;

Якщо ви забули змінити розмір зображення, подумайте про Riot і пам'ятайте цей важливий крок!

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

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

Потім натисніть "зберегти", щоб зберегти зображення в новому стисненому файлі, готовому до завантаження.

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

Я також вказую вам:

А інші елементи редактора WordPress щодо зображень?

У WordPress ви також знайдете два інших поля, які, однак, не мають сильного впливу на SEO, як описано вище:
• Caption : це поле використовується для вставки підпису, що з'явиться під зображенням у повідомленні. Будучи текстом, вкладеним у статтю, і будучи близьким до образу, його можна використовувати для зміцнення семантичного контексту зображення та підвищення його релевантності;
• Опис : воно використовується всередині WordPress для відстеження вмісту зображень у списках медіа. Не стосується на рівні SEO;

Чи важливий порядок вставки в коді alt і title ?

Абсолютно ні! Порядок вставки в код цих елементів жодним чином не впливає на SEO (а також на порядок вставки будь-якого іншого "шматка" HTML всередині тега <img>).

Поради щодо використання зображень "робити SEO"

Хочу повернути кілька порад і розвінчати деякі міфи про комбінацію "Images and SEO".

Скільки зображень я повинен розміщувати на кожній сторінці / публікації?

Подивимося правді в очі: не існує оптимальної кількості зображень для кожного типу веб-сайту .

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

Це єдиний спосіб орієнтуватися у цьому рішенні.

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

Перше зображення має бути оптимізовано для одного і того ж ключового слова на сторінці / публікації

Одна річ, яку я і інші колеги використовують, це використовувати як перше зображення, яке можна оптимізувати для одного і того ж центрального ключового слова статті.

Пам'ятайте, однак: це зображення, яке повинно бути придатним для запиту, а не навпаки : примушуючи ключове слово до нерелевантного зображення, ви, безумовно, матимете проблеми в майбутньому, коли машини стають здатними розпізнавати вміст зображення ,

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

Я перестану використовувати вас для цього SEO керівництво по оптимізації зображень!

• Посада назва: Мейн Кун, кіт, який виглядає як собака
• Назва файлу: maine-coon-black- tortie.jpg
• Назва: Наш Пенні, 1 рік і півроку Мейн Кун чорна черепаха!
• Альтернативний текст: Мейн Кун чорна черепаха Пенні
• Розміри: 350 * 300px
• Об'єм пам'яті: 40 кб

Пізніше в статті, де ми говоримо про щенят Maine Coon (який є популярним запитом і розробляє головну тему "Мейн-кун"), я ставлю цю картину:

Ось вони ...

• Назва файлу: maine-coon-cuccioli-2-mesi.jpg
• Назва: Пара красивих цуценят Мейн-Куна
• Альтернативний текст: щенята Мейн-Куна 2 місяці
• Розміри: 300 * 300px
• Об'єм пам'яті: 43kb

Цей образ розробляє основну тему і вводить дуже актуальну, актуальну та досліджувану підтему: щенята.

Але будьте обережні, який напрямок досліджень пов'язаний з маленькими на боці, але це вже інша історія ...

Де знайти безкоштовні та допустимі зображення?

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

Ви можете знайти багато іншого на цьому сайті ,

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

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

PS: Ви хочете навчитися SEO безкоштовно і залишатися в курсі? Дізнайтеся, натиснувши тут, як підписатися на мій інформаційний бюлетень, мій подкаст або мій канал YouTube , введіть і подивіться чи прочитайте без зобов'язань, а потім вирішіть, чи потрібно зареєструватися чи ні (і ви повинні це зробити, повірте мені!)