SEO Images: Как оптимизировать изображения для SEO

1. Потому что важно оптимизировать изображения для SEO
2. Что оптимизировать под имидж SEO? Практическое руководство.
3. Как оптимизировать альтернативный текст изображений SEO (ALT)
4. Каким должен быть альтернативный текст? Советы ..
5. Как редактировать альтернативный текст изображений на WordPress
6. Как оптимизировать имя файла изображения
7. Пример SEO оптимизации имени файла изображения
8. Как оптимизировать заголовки SEO-изображений
9. Как изменить заголовок изображения на WordPress
10. Как использовать подписи к изображениям
11. Как редактировать подписи к изображениям на WordPress
12. Как оптимизировать размер файлов изображений
13. Пример оптимизации файла
14. Как уменьшить вес образа (места на диске)
15. Лучшие бесплатные инструменты для уменьшения изображений для SEO
16. Pixlr: редактировать и оптимизировать изображения
17. Видеоурок: как оптимизировать изображения с Pixlr
18. Compressor.io: для сжатия JPEG, PNG, GIF и SVG
19. Optimizilla: множественное сжатие JPEG и PNG
20. kraken.io: сокращение нескольких изображений с помощью перетаскивания
21. Как измерить улучшения после оптимизации изображений
22. Как оптимизировать изображения тегов Exif для SEO будущего
23. Как создать структурированные данные для изображений
24. Как оптимизировать файл Sitemap для изображений
25. Как оптимизировать изображения в мобильной версии
26. Как выбрать изображения, чтобы вызвать эмоции
27. Использование CDN для изображений (Сеть доставки контента)
28. Каковы преимущества CDN для изображений?
29. Как использовать CDN для изображений?
30. Как определить, придает ли Google значение изображениям для поискового запроса?
31. Плагины WordPress для оптимизации изображений в SEO
32. SEO дружественные изображения
33. Сжатие и сжатие изображений
34. W3 Total Cache
35. WP Fastest Cache
36. EWWW Image Optimizer
37. Простые размеры изображения

Статья обновлена ​​16 января 2018 г.

Давайте посмотрим, как действовать и какие инструменты использовать для SEO изображений, чтобы улучшить органическое позиционирование и использовать Google Images , Обновления дополнений от ноября / декабря 2017 года включают новые плагины, доступные для WordPress , новые инструменты измерения производительности , данные о структурированных изображениях, новые видеоуроки , важность использования CDN и многое другое.

РЕЗЮМЕ: Что вы найдете в посте?

Потому что важно оптимизировать изображения для SEO

1. Потому что изображения могут определять успех контента .
2. Потому что поисковые системы могут получать информацию, необходимую для контекстуализации изображений; и это позволяет повысить качество содержимого .
3. Потому что оптимизированные изображения могут гарантировать лучшую производительность сайта (увеличение скорости).
4. Чтобы улучшить пользовательский опыт .

Зачем оптимизировать изображения для SEO?

Недооценка важности изображений SEO на веб-странице является серьезной ошибкой, как с точки зрения поисковой оптимизации, так и, прежде всего, с точки зрения пользовательского опыта : давайте не будем забывать, что изображения приносят пользу людям, которые читают контент. И мы всегда помним, что Google работает над тем, чтобы гарантировать этот аспект! Сегодня SEO, прежде всего, должно идти в том же направлении, что и улучшение пользовательского интерфейса ( UX ).

Часто блоггеры (или, по крайней мере, те, кто имеет дело с контентом на веб-сайтах) не придают значения выбору изображений : этот фактор, однако, может определять успех поста .

Что оптимизировать под имидж SEO? Практическое руководство.

Оптимизация изображений в SEO веб-сайта и связанных с ним HTML-тегов сегодня является фундаментом хорошего рейтинга в поисковых системах.
В этом посте мы увидим, насколько важно сегодня оптимизировать изображения и как понять степень рассмотрения изображений Google в запросах пользователей, которые нас привлекают.

В следующих пунктах мы видим руководство по совершенной оптимизации .

Как оптимизировать альтернативный текст изображений SEO (ALT)

Атрибут ALT тега IMG

ALT обозначает « альтернативный текст » и указывает элемент HTML, который будет связан с нетекстовыми частями содержимого (главным образом изображениями), чтобы предоставить описание, если они не могли быть отображены.

Оптимизировать альтернативный текст изображений в SEO

Знание того, как оптимально использовать атрибут изображений ALT, имеет много преимуществ.

• Самым известным и незамедлительным является закрепление текстового содержания статьи.
• Мы не недооцениваем факт нахождения на Google Images : ALT, по сути, является одним из элементов, используемых Google для классификации изображений .
• Менее известное преимущество, пожалуй, самое важное: доступность веб-страниц. Фактически, атрибут ALT - это интерпретация изображений читателями голоса для слепых.

Каким должен быть альтернативный текст? Советы ..

Я предлагаю вставить, где это возможно, ключевое слово для улучшения в контенте (основное правило для SEO на месте ) и создавать тексты с высокой степенью описания.

Если изображение не совсем соответствует ключевому слову , вы можете использовать метод, который я объясню на примере. Если в содержании было использовано ключевое слово « яблоки », и по какой-то причине мне пришлось вставить изображение груш, я мог бы создать альтернативный текст, например: « Мы продаем великолепные яблоки, но также и эти восхитительные груши ».

Таким образом, я получу альтернативный текст, соответствующий изображению и тексту и содержащий ключевое слово.

Как редактировать альтернативный текст изображений на WordPress

Просто откройте изображение в разделе « Медиа » или непосредственно из публикации и измените поле « Альтернативный текст ».

Оптимизируйте альтернативный текст изображений на WordPress

[Tweet "#SEO - Каким должен быть альтернативный текст (#alt) изображений?"]

Как оптимизировать имя файла изображения

Имена файлов изображений должны быть « говорящими », то есть сконструированы таким образом, чтобы обеспечить дальнейшее описание (без преувеличения по длине); По сути, поисковые системы также обнаруживают эти данные. Мы говорим, что правило такое же, как « кусок » веб-страниц: слова, разделенные дефисом («-»).

Оптимизировать изображения: имя файла

Лучше не использовать пробелы в именах файлов, используемых на веб-страницах, поскольку в URL-адресе пробел заменяется строкой « % 20 », что делает URL менее мнемоническим и менее быстрым.

Советую вставить интересующее нас ключевое слово в название файла изображений, содержащихся в статьях.

Пример SEO оптимизации имени файла изображения

Вставка изображений, названных таким образом IMG_5216.JPG (или типичные имена, которые камеры присваивают фотографиям), имеет мало смысла в терминах SEO . Гораздо лучше использовать такие имена, как come-optimize-images-seo.jpg .
Я повторяю, что отношение имени изображения к тому, что оно представляет, и к контексту абзаца, в котором оно содержится, имеет решающее значение.

Как оптимизировать заголовки SEO-изображений

Атрибут TITLE тега IMG

Мы говорили только об альтернативном тексте изображения, но не о НАЗВАНИИ. Существуют противоречивые мнения о предпочтениях поисковых систем между двумя атрибутами.

Тем не менее, я советую, так как это не требует усилий, чтобы использовать оба, чтобы использовать НАЗВАНИЕ в качестве дополнительной возможности для характеристики изображений.

Чтобы узнать больше, я предлагаю прочитать следующий контент или рекомендации Google для изображений : https://goo.gl/V5FtrU

Как изменить заголовок изображения на WordPress

На той же панели, которая ранее была видна для альтернативного текста, есть поля « Атрибут заголовка изображения ».

Как использовать подписи к изображениям

Текст, который « окружает » изображение, помогает контекстуализировать его, предоставляя дополнительный источник контента, который поисковые системы будут использовать для « расшифровки » контента. По этой причине я предлагаю всегда использовать подписи для поддержки изображений.

И давайте никогда не забудем, и я никогда не устану повторять это, насколько важны заголовки для удобства просмотра пользователя .

Как редактировать подписи к изображениям на WordPress

На той же панели, которая ранее была видна для альтернативного текста и заголовка, есть поле « Заголовок ».

Как оптимизировать размер файлов изображений

Оптимизировать изображения: размер файла

Как размер одного или нескольких изображений влияет на позиционирование ? Ответ прост: чем больше увеличивается размер изображения, тем больше уменьшается скорость открытия веб-страниц; Известно, что скорость открытия веб-страниц является одним из элементов, определяющих рейтинг и качество взаимодействия с пользователем.

Одной из наиболее распространенных ошибок является использование очень больших и неоптимизированных изображений и установка меньших размеров с помощью атрибутов « высота » и « ширина » тега IMG на HTML-страницах.
Результатом этого управления является замедление открытия веб-страниц без видимой мотивации.

Пример оптимизации файла

Если я помещу изображение 1260 x 1050 пикселей на веб-страницу размером 3 МБ со следующим синтаксисом,

<img src = "/ la-mia-immagine.jpg" alt = "Мое изображение" title = "Мое изображение" width = "100" height = "63" />

на веб-странице это будет отображаться следующим образом (100 x 63 px, или размеры, указанные атрибутами тега IMG):

Проблема заключается в том, что браузер должен загрузить 3 МБ данных, чтобы иметь возможность их просматривать. Изображение этого типа (изображение на картинке), оптимизированное может быть меньше тысячи раз, значительно ускоряя открытие веб-страницы.

Как уменьшить вес образа (места на диске)

Оптимизация изображения основана не только на размерах в пикселях, но и на размере файла изображения. Почему это так важно для оптимизации изображений SEO? По той же самой причине, показанной выше: чем больше ресурсов потребуется загрузить веб-странице, тем медленнее она будет, что сделает работу пользователей менее затратной и неоправданно приведет к потере бюджета на сканирование .

Именно по этой причине существуют специальные алгоритмы сжатия, которые уменьшают размер файлов изображений без потери качества (по крайней мере, воспринимаются).

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

Лучшие бесплатные инструменты для уменьшения изображений для SEO

Наиболее престижное программное обеспечение для цифровой обработки изображений, такое как Adobe Photoshop, содержит специальные функции, позволяющие уменьшить размер и оптимизировать изображения для Интернета, но я хотел бы порекомендовать некоторые бесплатные и полностью веб-инструменты.

Pixlr: редактировать и оптимизировать изображения

Pixlr , позволяет выполнять все виды обработки изображений, может использоваться на всех устройствах, благодаря приложениям для Android и Apple , а также доступен в качестве расширения для браузеров Firefox и Google Chrome . Мы можем сказать, что это Photoshop, доступный через Интернет. Для технических специалистов, чтобы понять всю мощь программного обеспечения, мы думаем, что оно способно открывать и редактировать файлы psd на разных уровнях.

Видеоурок: как оптимизировать изображения с Pixlr

Compressor.io: для сжатия JPEG, PNG, GIF и SVG

Compressor.io Это бесплатный и очень простой в использовании инструмент, который позволяет снизить « вес » изображений более чем на 90% без потери информации и, следовательно, без потери воспринимаемого качества .

SEO изображения: оптимизация с помощью Compressor.io

Допустимые форматы изображений: JPEG, PNG, SVG и GIF.

Optimizilla: множественное сжатие JPEG и PNG

Optimizilla Благодаря идеальной калибровке алгоритмов сжатия, которые он использует, гарантирует высокое сжатие при сохранении превосходного уровня качества изображения .

Дополнительную ценность инструмента представляет возможность многократной загрузки и обработки : до 20 файлов одновременно.
Поддерживаемые форматы: JPEG и PNG.

kraken.io: сокращение нескольких изображений с помощью перетаскивания

kraken.io имеет современный и интуитивно понятный интерфейс. Он позволяет загружать одно изображение или группу изображений (даже в ZIP-архив) с возможностью импорта их из Box, Google Drive и Dropbox.

Kraken.io

Существует также платная версия PRO, которая открывает дополнительные функции, а также позволяет использовать API плагин для WordPress и Magento и облачное хранилище.

Как измерить улучшения после оптимизации изображений

Я также предлагаю два очень полезных инструмента, которые могут проверить улучшение производительности сайта после оптимизации:

[Tweet "#SEO - Как уменьшить размер изображения?"]

Как оптимизировать изображения тегов Exif для SEO будущего

Теги Exif ( Формат файла сменного изображения ) - это метаданные, которые характеризуют изображения и интерпретируются поисковыми системами. Благодаря этим данным Google Images также может фильтровать результаты. Примером является новый фильтр « Права на использование », который считывает метаданные, относящиеся к авторскому праву.

Оптимизация изображений: теги Exif

Давайте посмотрим на всю доступную информацию подробно.

• Информация о дате и времени,
• данные о настройках камеры, создавшей изображение,
• маленький предварительный просмотр,
• описания и информация об авторских правах.

Чтобы лучше понять, как работают теги Exif , мы можем провести аналогию с наиболее популярными тегами, которые характеризуют MP3-файлы, содержащие исполнителя, название песни, альбом, год, жанр и т. Д. Эти теги затем они используются игроками для предоставления информации о дорожках, а также для создания фильтров поиска дорожек.

В настоящее время не все поисковые системы могут интерпретировать теги Exif , но хорошо быть готовым, когда они имеют решающее значение. Существуют специализированные программы для их модификации и оптимизации, но я предлагаю использовать самый известный Adobe Photoshop или Google Picasa .

В старом видео Мэтт Каттс сказал, что данные были собраны и интерпретированы Google, который в будущем может использовать их как фактор ранжирования .

Сегодня, в 2017 году, мы можем быть близки к этому будущему ... так зачем рисковать неподготовленным?
В другом сценарии мы можем подумать, что последних достижений в области искусственного интеллекта в распознавании изображений будет достаточно, чтобы извлечь из них какие-либо данные ... мы скоро узнаем!

[Tweet "#SEO - Как использовать теги Exif для отображения наших изображений"]

Как создать структурированные данные для изображений

Благодаря схемам, предназначенным для изображений, определенных schema.org мы можем обогатить образ структурированные данные что поможет поисковой системе понять ее содержание и контекст.

Посредством следующих ссылок можно будет углубить использование диаграммы со ссылкой на изображения , используя тип разметки, с которым у нас больше уверенности.

Как оптимизировать файл Sitemap для изображений

Оптимизируйте изображения: Google Sitemap

Как мы знаем, файлы Sitemap являются незаменимым элементом для оптимального сотрудничества сайта и поисковых систем. Google , используя специальный синтаксис, позволяет вам создать конкретную карту сайта для изображений.
Следующий пример карты сайта был взят из официальная документация доступно на Google Search Console ,

Данные, которые составляют узел, который определяет изображение, следующие:

• <image: image> : вся информация на изображении (тег контейнера);
• <image: loc> : URL изображения;
• <изображение: заголовок> : заголовок изображения;
• <image: geo_location> : географическое расположение изображения;
• <image: title> : заголовок изображения;
• <изображение: лицензия> : URL-адрес лицензии на изображение.

&lt;? xml version = "1.0 �� encoding =" UTF-8 "?>
<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9 ″ xmlns: image =" http://www.google.com/schemas/sitemap-image/1.1 ″>
<Url>
<LOC> http://example.com/sample.html </ LOC>
<Изображение: Изображение>
<Изображение: LOC> http://example.com/image.jpg </ изображение: LOC>
</ Изображение: изображение>
</ Url>
</ URLset>

Как оптимизировать изображения в мобильной версии

Чтобы оптимизировать изображения даже при отображении веб-сайта с мобильных устройств (что сегодня является фундаментальным, учитывая, что мы все больше и больше говорим об индексе Mobile-First ), появляется атрибут « srcset », который позволяет нам установить « резка »изображения при разных разрешениях или разных размерах области отображения ( видовой экран).

Простой пример:

<IMG
srcset = "ap-320w.jpg 320 Вт,
ap-480w.jpg 480 Вт,
ap-800w.jpg 800w "
размеры = "(максимальная ширина: 320 пикселей) 280 пикселей,
(максимальная ширина: 480 пикселей) 440 пикселей,
800px "
src = "ap-800w.jpg" alt = "Привет, мир!">

Как выбрать изображения, чтобы вызвать эмоции

Оптимизация изображений: положительные ощущения

Важным аспектом при выборе изображений для статьи является оценка эмоций, которые мы хотим вызвать у читателей. Попробуйте подумать о том, что происходит, как только вы откроете веб-страницу ... Я считаю, что та же схема применима ко всем: сначала изображения, а затем текст.

Изображения, по сути, сразу же захватывают внимание и вызывают эмоции, которые обуславливают действия читателей.
Именно по этой причине полезно вставлять в текст изображения, соответствующие содержанию и способные заставить читателя развить позитивные ощущения, которые заставят его чувствовать себя непринужденно.

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

Например, образы улыбающихся детей могут стимулировать нежность и спокойствие у читателей; Образы людей, которые радуются, будут способствовать увеличению внутренней энергии . Я бы избегал использования « неприятных » фотографий или в любом случае, который может привести к негативным эмоциям, чтобы не заставить пользователей убегать и не вызывать увеличения показатель отказов (процент пользователей, которые не выходят за пределы первой посещенной страницы).

[Tweet "#SEO - Использование изображений, которые делают чтение приятным, снизит показатель отказов"]

Использование CDN для изображений (Сеть доставки контента)

Что такое CDN для изображений

CDN ( Content Delivery Network ) - это сеть серверов в мире, которая локально перераспределяет изображения (но также и другое содержимое, если они загружены). Эти серверы высоко оптимизированы для выполнения этой операции, фактически изображения хранятся « в кэше », чтобы сделать поиск максимально быстрым.

SEO изображения: зачем использовать CDN?

Каковы преимущества CDN для изображений?

Этот тип оптимизации, как понятно из предыдущего параграфа, не относится непосредственно к изображениям, но это « другая практика использования изображений на сайте ».
Основными преимуществами являются:

• увеличение скорости загрузки, и это означает, как мы знаем, улучшение взаимодействия с пользователем , а также более широкое использование обход бюджета ;
• снижение нагрузки на сервер ;
• ускорение загрузки из любой точки мира;
• сокращение (много) оценок любого теста Page Speed .

Как использовать CDN для изображений?

Хостинг-провайдеры обычно предоставляют доступную услугу CDN. Подписавшись на услугу, они предоставляют инструкции по использованию и / или интеграции в веб-сайты.

Для пользователей WordPress есть два очень простых способа использования CDN для изображений, и мы рассмотрим их подробно.

• Бесплатное решение (но очень мощное). Плагин JetPack предоставляет эту услугу бесплатно, которая называется фотон , Просто активируйте его в настройках JetPack, и он будет активен немедленно! Этот веб-сайт в настоящее время (ноябрь 2017 года) использует его.
• Платные решения . Если вы будете искать среди плагинов, вы найдете множество решений, разработанных непосредственно поставщиками услуг CDN: есть много дел! Более того, почти все плагины для управления кэшем обеспечивают поддержку CDN.

WP Fastest Cache (который мы увидим позже в этом посте и который я рекомендую) обеспечивает поддержку как Photon, так и MaxCDN, но дает возможность настроить любой CDN, который будет приобретен как сервис.

Для дальнейшего изучения использования CDN для оптимизации изображений для SEO , а также для ускорения работы веб-сайтов, я рекомендую прочитать следующий пост: Ускорьте WordPress для SEO и достигните 100/100 на PageSpeed ​​Insight. Руководство и размышления ,

Как определить, придает ли Google значение изображениям для поискового запроса?

Предпосылка: оптимизация изображений в SEO должна ВСЕГДА осуществляться независимо от концепции, которую я собираюсь выразить.

Как известно, Google с помощью универсального поиска предоставляет результаты в разных форматах в зависимости от предполагаемого намерения пользователя, который пишет поисковый запрос.

Наиболее известные виды « обогащений »:

• Избранный фрагмент (нулевая позиция)
• отзывы
• ссылки на сайт
• видео
• образность
• панель знаний
• платные объявления
• местные результаты

SEO изображения: Google Universal Search

Таким образом, изучение SERP позволяет нам понять типы контента, на котором мы должны сосредоточиться, чтобы позиционировать себя или чтобы более полно отвечать на вопросы пользователей.

Некоторые примеры:

• если я посмотрю « как сложить рубашки », вполне предсказуемо, что Google предложит мне видео;
• если я буду искать « как оптимизировать изображения в SEO », Google, вероятно, выдаст мне текстовые результаты со ссылками на сайты и «рекомендуемым контентом »;
• если я найду « простое оригами », почти очевидно, что серп предложит мне изображения и видео.

Для тех, кто использует SemRush как SEO инструмент , недавно представили функциональность, называемую «Функции SERP », которая рядом с каждым ключевым словом, расположенным для веб-сайта проекта, указывает, какие мультимедийные элементы присутствуют в соответствующем serp.

Особенности SERP от SemRush

Этот инструмент делает анализ SERP намного более актуальным для ключевых слов, представляющих интерес, и позволяет нам сразу же понять, с какими типами контента нам нужно работать, чтобы достичь хорошего рейтинга .

Таким образом, в заключение, если исследование серпа, в котором мы хотим расположить себя, содержит изображения, становится ясно, что в производимом нами контенте нам придется это учитывать и очень тщательно работать с ним.
Хороший ценитель ...

Я завершаю тему другим недавно разработанным рекомендуемым инструментом. Речь идет о WordLift : плагин WordPress, который, благодаря семантическому анализу и искусственному интеллекту, способен интегрировать контент с мультимедийными элементами (включая, конечно, оптимизированные изображения, которые можно найти в свободных каналах), чтобы « придерживаться » запросов змея

Плагины WordPress для оптимизации изображений в SEO

Я добавляю скобки для пользователей WordPress , предлагая несколько интересных плагинов для оптимизации изображений.

Оптимизация изображений: плагин WordPress

SEO дружественные изображения

Плагин с очень простой конфигурацией, но он предлагает отличные результаты. Позволяет установить правила автоматической генерации для атрибутов ALT и TITLE всех изображений веб-сайта. Для создания правил доступны следующие теги: % title (заголовок сообщения), % name ( имя файла без расширения), % category (категория сообщения), % tag (теги, связанные с сообщением).
Для тех, кто хочет узнать больше, я создал один мини обзор на Medium ,

Сжатие и сжатие изображений

Фундаментальный компонент для тех, кто не оптимизирует файлы изображений перед загрузкой. Плагин по сути заботится об улучшении файлов, уменьшая размеры, для последующего увеличения скорости открытия веб-страниц. Вмешивается в различные аспекты: сжимает файлы JPEG и уменьшает неиспользуемые метаданные, преобразует формат GIF в « индексированный PNG», чтобы повысить производительность, удаляет неиспользуемые цвета, чтобы уменьшить размер.
Для тех, кто хочет узнать больше, я создал один мини обзор на Medium ,

W3 Total Cache

Плагин, который не нацелен непосредственно на изображения, но является элементом, который нельзя упустить, когда мы говорим об оптимизации для увеличения скорости веб-сайта WordPress . W3TC, по сути, представляет собой систему для управления кэшем страниц, баз данных и браузеров. Это также позволяет сжимать код с помощью функции minify .
Для тех, кто хочет узнать больше, я создал один мини обзор на Medium ,

Чтобы получить больше информации об оптимизации WordPress , я рекомендую следующий пост: Создание SEO WordPress: советы по оптимизации ,

WP Fastest Cache

Альтернатива предыдущему плагину, для тех, кто хочет меньше настроек, и плагин « подключи и работай » прямо сейчас (11/11/2017), мой сайт использует его вместе с более чем 400 000 других установок.
Ссылка на плагин: https://goo.gl/6WQ5DZ

EWWW Image Optimizer

Очень действенная альтернатива WP Smush.it . На самом деле, я тестировал его в течение длительного времени на многих сайтах с превосходными результатами с точки зрения производительности.

Плагин оптимизирует все загружаемые изображения, но также работает выборочно по странице или каталогу, или в фоновом режиме. Особенностью, которая делает его уникальным, является возможность оптимизировать изображения, составляющие тему , а не только те, которыми управляют в Media.
Ссылка на плагин: https://goo.gl/ugpge8

Простые размеры изображения

Этот плагин позволяет создавать « порезы » (с точки зрения размера) специального изображения для веб-сайта. Благодаря этой функциональности можно будет рассчитывать на изображения именно необходимого размера, поэтому всегда оптимизированы для этой цели. Я давно использовал его на всех сайтах, которыми управляю.
Ссылка на плагин: https://goo.gl/NfDDQj

[Tweet "#SEO & #wordpress - Как оптимизировать изображения для улучшения позиционирования"]