Руководство по оптимизации изображений для SEO

1. Изменение размера изображений и ограничение их веса
2. Название файла
3. Качество изображения
4. Лучшие форматы и отличия
5. TIFF:
6. JPG:
7. GIF:
8. PNG:
9. WebP:
10. Как поисковая система видит изображение
11. Альтернативный текст, заголовок и атрибут заголовка
12. Текст вокруг изображения
13. Теги Exif
14. Лучшие инструменты для оптимизации изображений с WordPress
15. Оптимизация изображений для SEO, выводы

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

Изменение размера изображений и ограничение их веса

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

Среди самых известных есть, конечно, Photoshop и Fireworks , оба от Adobe, которые, с одной стороны, позволяют делать даже очень «экстремальные» модификации своих фотографий, с другой стороны, они имеют недостаток в несколько сотен евро, что что не все готовы платить.

Лучшая бесплатная альтернатива Гимп , программное обеспечение с открытым исходным кодом, которое позволяет вам иметь превосходную эластичность при ретушировании фотографий или изображений. В этой статье я использовал эту программу, как вы можете видеть на скриншотах. Он доступен для Windows, Mac и Linux.

Возвращаясь к предмету этого текста, мы начали говорить о том, как изменять размеры изображений как первый этап процесса их оптимизации, но как это сделать? Просто откройте изображение, используя The Gimp, и используйте инструмент «Scala», который вы видите в голубой рамке ниже.

Мы определяем размер изменяемого изображения (можно выбрать различные единицы измерения, такие как пиксели, проценты, сантиметры и т. Д.).

Символ цепочки рядом с числами указывает, следует ли в режиме изменения размера сохранять пропорции или нет. Если цепь замкнута, пропорции сохранятся, в противном случае нет.

На этом этапе мы выбираем наш размер и нажимаем «Scala».

Если исходное изображение особенно велико, это может занять некоторое время, несколько секунд. Как только это будет сделано, щелкните правой кнопкой мыши на изображении и выберите «Изображение» → «Установить поверхность на слои». Таким образом, мы будем иметь поверхность изображения точно такого же размера, как уровни.

Затем вы должны перейти в Файл → Сохранить как, чтобы сохранить новое изображение.

Название файла

С точки зрения SEO важно выбрать хорошее имя файла. Мы должны помнить, что это должно быть:

• описание изображения;
• оптимизирован, например, если вы решили сохранить панораму Лондона, вы можете использовать «панорама-лондон» в качестве имени изображения;
• если состоит из нескольких слов, каждое из них должно быть отделено тире.

Сохраните изображение, выбрав « Файл» → «Экспортировать как» , вставьте имя файла, как и прежде, и нажмите «Сохранить».

Качество изображения

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

Хорошее качество обычно между 80 и 85.

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

Советуем начинать с качества 85 и продолжать опускаться до тех пор, пока вы не начнете видеть менее красивое изображение: это будет предел, за который вы не сможете опускаться.

Очень интересно играть с опциями продвижения .

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

Мы обращаем особое внимание на то, чтобы оставить галочку напротив «Сохранить данные EXIF» : мы скоро увидим, что это такое и почему они могут быть полезны с точки зрения SEO.

Как только мы нашли идеальную конфигурацию, мы нажимаем на Export и игра завершается.

Лучшие форматы и отличия

В принципе, веб-изображение может быть опубликовано в 5 форматах:

1. размолвка,
2. JPEG,
3. GIF,
4. PNG,
5. WebP.

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

TIFF:

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

JPG:

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

GIF:

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

PNG:

Это формат изображения, в котором используется сжатие, которое не теряет информацию, поэтому он является одним из самых тяжелых по абсолютной величине среди перечисленных в этом списке (второй после TIFF). Существует два типа файлов PNG: PNG-8 , которые мы можем сравнить с 256-цветным GIF, и PNG-24 , которые мы можем сравнить с JPG, но без сжатия.

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

WebP:

Это формат изображения, разработанный специально для Интернета, созданный Google для браузера Chrome и теперь также поддерживаемый Opera. Gimp поддерживает изображения WebP через плагин , Целью этого формата изображения является максимально быстрая загрузка , даже за счет качества.

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

Теперь мы переходим к несколько более технической части этой статьи, которая, однако, более интересна с точки зрения SEO : как пауки поисковых систем видят изображения?

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

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

Честно говоря, это не совсем так, в том смысле, что Google может, например, распознавать изображение кошки, но на уровне SEO эта емкость поисковой системы нас не особо интересует.

Чтобы загрузить изображение в WordPress , вам нужно нажать «Добавить медиа», пока вы находитесь в фазе редактирования. На этом этапе вам нужно нажать «Загрузить файл»: вы можете выбрать изображение на компьютере или перетащить его в открывшееся окно. После загрузки изображения вы сможете увидеть его в списке медиа-файлов на веб-сайте и ввести основную информацию по SEO-аспекту вопроса.

HTML-код изображения формируется следующим образом:

<img src = "path / immagine.jpg" alt = "Описание изображения" title = "Описание, видимое при наведении мыши" />

С точки зрения ранжирования у нас есть три способа заставить Google понять, что содержит наше изображение, а WordPress позволяет нам действовать на всех трех:

• тег ALT
• атрибут TITLE тега IMG
• текст вокруг изображения.

Альтернативный текст, заголовок и атрибут заголовка

альтернативный текст изображения (ALT) это фундаментальный ключ, потому что это то, что читает паук Google, чтобы понять, что представляет собой изображение. По этой причине он должен быть оптимизирован (но мы не должны преувеличивать), чтобы позволить Google точно понимать содержание изображения.

Также очень важно вставить хорошую подпись , то есть часть текста, которую WordPress автоматически вставляет под изображение и которая служит описанием для пользователя. Он также имеет преимущество в увеличении количества слов, которые являются частью текста и, будучи одним предложением, может быть хорошо оптимизировано на уровне SEO (всегда без преувеличения).

Заголовок представляет тег TITLE изображения , фразу, которую вы видите, когда наводите курсор мыши на графический файл. На уровне SEO это не имеет большого влияния, для пользователя довольно полезно понять, что представляет собой изображение, или провести его углубленный анализ, если это необходимо.

Мы всегда советуем не переусердствовать с оптимизацией тегов ALT и TITLE или заголовка.

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

Можно ли использовать один и тот же ALT, TITLE и Caption?

По идее да проблем нет. С другой стороны, зачем использовать одни и те же тексты, когда можно написать три разных текста, каждый из которых оптимизирован для определенной функции?

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

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

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

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

Теги Exif

Мы ожидали их раньше, Exif обозначает Exchangeable формат файла изображения и представляет серию метаданных, используемых в цифровых камерах, которые применяются к файлам в формате JPEG и TIFF (они не поддерживаются файлами PNG и GIF).

Информация, содержащаяся в метаданных, включает, среди прочего, дату и время съемки фотографии, настройки камеры (ориентация, диафрагма, фокусное расстояние, выдержка, чувствительность ISO и баланс белого) и географическое местоположение снимка (только для камер с встроенным GPS).

С точки зрения SEO, некоторое время назад Мэтт Каттс, еще будучи представителем Google, заявил, что поисковая система потенциально может использовать данные EXIF ​​в качестве фактора ранжирования . Вот видео в вопросе:

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

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

Когда дело доходит до WordPress, есть много плагинов, которые вы можете использовать для оптимизации изображений, вы перечисляете лучшие, начиная с WP Smush , что позволяет оптимизировать изображения, которые уже подключены к сети, и те, которые загружаются время от времени, предоставляя сводку по МБ, которые были сохранены благодаря использованию этого плагина.

Альтернативный плагин EWWW Image Optimizer , который имеет дело с автоматическим уменьшением размера изображений, используемых в блоге, а также позволяет применять сжатие с потерями к изображениям JPG и PNG .

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

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

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

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

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

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

И ваши изображения всегда оптимизированы для SEO? Каковы ваши инструменты?

Похожие

Комментарии