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

1. Основы для картинок SEO
2. Структура папок для изображений на сервере
3. PNG: альтернатива
4. Изображения SEO: Старый день, заголовок и другие аспекты
5. Старый тег и заголовок
6. Роль карты сайта для картинок
7. Поиск изображений как источник трафика
8. Поиск изображений непосредственно на веб-страницах
9. Использование изображений SEO
10. Будущие разработки
11. Задачи на будущее
12. Улучшить время загрузки
13. Вызов сетчатки дисплея
14. Смартфоны и голосовой поиск
15. Оптимизация изображения является важной частью устойчивого SEO

Авторское право © Shutterstock / Rawpixel.com

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

Основы для картинок SEO

Необходимый HTML-код для интеграции изображения в веб-сайт сравнительно прост и не претерпел существенных изменений в последние годы. Однако изменилась автоматизация этой интеграции с помощью инструментов CMS (системы управления контентом), таких как WordPress, Drupal или Joomla. Как правило, они имеют так называемый редактор WYSIWYG который является предварительным просмотром контента. Здесь изображение просто вытягивается путем перетаскивания. Код для отображения изображения генерируется в фоновом режиме.

Атрибуты «src» (= источник, источник), «старый» (= альтернатива) и «заголовок» используются чаще всего. Дополнительная информация о представлении изображения (например, ширина и высота) также может быть сохранена. Например, код, с помощью которого картинка встроена в веб-страницу, выглядит следующим образом.

Атрибут src указывает имя исходного файла и путь к изображению относительно расположения веб-страницы на сервере. Если изображение находится на стороннем сервере, полный адрес указывается: «http://www.example.com/images/logo.png». Для изображений, размещенных на других серверах, всегда существует риск, что либо путь доступа внезапно изменится, либо изображение (или веб-страница) внезапно станет недоступным. Поэтому лучше размещать образы на своем собственном сервере, несмотря на повышенные требования к хранилищу. Атрибуты alt и title помогают Google и читателям экрана для слепых лучше понимать содержание изображения. Это важные элементы в картинках SEO. так рекомендует сам Google Обязательно используйте эти элементы, чтобы ваше изображение появлялось в Поиске картинок Google.

намек

Структура папок для изображений на сервере

Структура папок для изображений уже определяется заранее при использовании решения CMS, такого как WordPress. Здесь изображения (в зависимости от заводских настроек) сортируются по дате загрузки в разные папки. Доступ к самим файлам предоставляется сервером, а сами папки недоступны. Где файл изображения хранится на сервере, в первую очередь неважно при поиске веб-сайта. Пока папка находится над корнем или Корневой каталог каждая позиция возможна . Первой задачей должно быть хорошее представление, чтобы избежать дублирования и логически связать изображения и файлы HTML.

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

Когда вы называете файл изображения, это опять-таки очень увлекательно с точки зрения SEO. Искушение состоит в том, чтобы сохранить оригинальное имя файла при добавлении множества новых изображений. Это не имеет отношения к внутренней коммуникации и функционированию сайта. Для индексирование Тем не менее, через Google и, следовательно, SEO для изображений, имя файла играет большую роль. Например, если пользователь ищет модель автомобиля XY в Поиске картинок Google, изображения с именем «Automodell_XY_2010.jpg» всегда имеют более высокий рейтинг, чем изображения с общими именами, например «Foto_1_12_2010.jpg».

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

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

Формат JPEG - это классический файл изображения. Формат уже немного старше. Это происходит с 1992 года. Это относится также как PNG или GIF Формат для растровой графики. То есть отдельные пиксели изображения располагаются в виде сетки. Таким образом, они следуют фиксированной структуре. Формат JPEG универсален и особенно подходит для цветных и высококонтрастных цветных фотографий.

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

• Нет представления прозрачных областей
• Потеря мелких деталей при сжатии
• Масштабируется без потерь

PNG: альтернатива

Как и формат JPEG, PNG является одной из растровых изображений. Он был разработан в 1994 году как альтернатива формату GIF, так как он был запатентован в то время. Особенность PNG в том, что существует два варианта формата. Формат PNG8 может отображать только 256 цветов. Напротив, формат PNG24, а также JPEG, может отображать до 16,7 миллионов цветов. Кроме того, PNG могут отображать прозрачные области через альфа-канал. Поэтому они подходят для отображения логотипов или текстов.

• разносторонний
• Презентация прозрачности
• Сжатие без потерь

• Большие файлы для сложной графики
• Ограниченная гамма цветов для файлов PNG8
• Масштабируется без потерь

В отличие от двух предыдущих форматов, файлы SVG являются векторной графикой. SVG расшифровывается как Scalable Vector Graphics. Формат идет на развитие W3C с 2001 года назад. Он основан на языке разметки XML и поэтому может быть интегрирован непосредственно в HTML-код веб-сайта. Графика и изображения загружаются непосредственно в веб-браузер, что положительно сказывается на Время загрузки сайта эффект. Файлы SVG особенно подходят для логотипов или графики.

Тем не менее, формат файла также имеет большой недостаток. Из-за того, что он основан на разметке XML и непосредственно в коде HMTL, формат не очень безопасен. Формат по своей природе имеет потенциальные дыры в безопасности. Например, могут быть внедрены вредоносные скрипты, которые негативно влияют на производительность сайта. В общем, вредоносный код может быть легко перенесен в файл SVG.

• Масштабируется бесплатно и без потерь
• Презентация прозрачности
• Анимация через Java Script

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

В дополнение к выбору подходящего формата файла, конечно, размер и разрешение самого изображения играет роль. Чем меньше изображение и его разрешение, тем быстрее загружается веб-страница. Но это также потеряло больше информации об изображении. Убедитесь, что ваши фотографии загружены на сервер как можно меньше и больше. Нет смысла упаковывать изображение шириной 1000 пикселей в область шириной 600 пикселей. Поэтому убедитесь, что вы всегда корректируете разрешение изображения для элемента.

Вы также должны сделать это, если вы уменьшите размер изображений программно. Если вы программно (= растягиваете) изображение на своем веб-сайте, то вам следует проверить на максимально возможном экране, является ли качество изображения для вас приемлемым. Также убедитесь, что изображение увеличено правильно. Ваша картинка не должна быть искажена при растяжении. Вы можете убедиться в этом, посмотрев на интеграцию изображения в HTML-код. Опять же, соотношение сторон исходного изображения должно быть сохранено. Размер изображения указан в начале тега изображения.

Даже если PNG, JPEG или SVG зарекомендовали себя, разработка форматов файлов изображений не приостанавливается. Таким образом, форматы JPEG 2000 и JPEG XR являются усовершенствованием оригинального формата JPEG. Они предлагают то же качество с меньшим размером файла. Кроме того, формат JPEG XR поддерживает прозрачность. о Google Lighthouse Можно проверить качество веб-сайта и тем самым оптимизировать изображения на сайте.

Кроме того, есть еще новые Форматы файлов изображений разработаны. Они имеют названия FLIF (бесплатный формат изображений без потерь) и HEIF (файл изображения высокой эффективности) , Оба формата также должны обеспечивать лучшее качество изображения при меньшем размере файла. Это экономит ресурсы и улучшает время загрузки.

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

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

Старый тег и заголовок

Тег Alt и Title (на самом деле: атрибут Alt и Title) являются двумя наиболее важными элементами изображений SEO. Когда SEO для изображений, вы должны быть осторожны, чтобы дать поисковику как можно больше ссылок на содержание ваших фотографий. Например, сканер Google, который ежедневно ищет и индексирует Интернет, не может распознать содержание изображений и видео. Поэтому для него, а также для пользователей с программами чтения с экрана важно предоставить дополнительную текстовую информацию.

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

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

Метаданные EXIF ​​автоматически генерируются камерами и включают в себя информацию о модели и настройке камеры, а также дополнительную информацию, такую ​​как положение GPS или время создания. Также возможно добавить дополнительные данные, такие как информация об авторских правах, используя подходящее программное обеспечение. В настоящее время данные EXIF ​​считываются Google, но больше не отображаются в поиске. Google также указывает использовать это как потенциальный фактор ранжирования. Точное утверждение Мэтта Кутса можно найти в связанное видео YouTube ,

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

Роль карты сайта для картинок

Файлы Sitemap представляют собой файлы в формате XML , которые хранятся на видном месте на веб-сервере, чтобы их можно было найти, позвонив по адресу "www.example.com/sitemap.xml". Этот файл содержит список всех страниц и подстраниц соответствующего веб-сайта. Таким образом, поисковая система может точно определить, какие страницы нужно проиндексировать, а какие нужно обновить. Частота обновления также может быть указана. Эта первая карта сайта может также ссылаться на несколько других карт сайта, таких как карта сайта для изображений. Это мало отличается от базовой структуры обычных файлов Sitemap, за исключением дополнительных тегов изображений для каждой указанной страницы. Есть много бесплатные инструменты SEO в Интернете, помогая создавать карты сайта для изображений.

Поиск изображений как источник трафика

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

(c) Поиск картинок Google.

Через последний Изменения в поиске картинок Google Для поддержки авторского права лицензионные изображения не могут быть легко загружены - пользователь / дизайнер должен теперь посетить оригинальный веб-сайт изображения. Например, если вы предлагаете коммерческие фотографии на своем веб-сайте, это может помочь вам увеличить трафик.

Поиск изображений непосредственно на веб-страницах

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

Эта функция, также известная как поиск изображений Chrome, основана на размере и типе изображения, а также на уже описанной информации SEO, такой как alt tag и filename. Затем Google ищет все проиндексированные изображения, которые имеют похожую информацию. Только тогда предлагаются похожие изображения по цвету и структуре. Здесь, однако, согласие с исходным изображением очень мало.

Использование изображений SEO

Поисковая оптимизация изображений является важной частью общей концепции SEO вашего сайта. Сам Google придает большое значение оптимизации изображений. И это не случайно, потому что альтернативные теги и имена файлов не только важны для Google, чтобы узнать содержание изображения, они также помогают точно определить тему окружающего текста. Поэтому вам обязательно следует использовать на каждой из ваших страниц хотя бы одно изображение, которое содержит желаемое ключевое слово SEO в теге alt ( ключевое слово ) содержит. Также не помешает оставить особо подробные тексты в Старый день. Гугл помогает, и обычный пользователь ничего не видит. Это также улучшает доступность вашего сайта.

Будущие разработки

Наибольшее развитие в области поисковой оптимизации изображений представляет собой алгоритм визуального поиска, разработанный Google. Кроме того, есть проект Google Lens вверх Android Смартфоны, вкус возможностей визуального поиска.

Объектив Google - это первый шаг к визуальному поиску, источник: Google Copyright © Google

Предыдущий поиск изображений и SEO изображений работает на основе текстовой информации, предоставленной веб-мастером - либо через теги alt, через имена файлов, изображения, окружающие тексты, либо через карту сайта. Используя искусственный интеллект (машинное обучение), Google может присвоить изображению несколько ключевых слов. Эти ключевые слова следует понимать как приближение к фактическому содержанию изображения, и пока для описания этих изображений используются только несколько тысяч категорий. Однако эта технология - если она используется в поиске изображений в Google - не должна рассматриваться как замена традиционного определения alt-тегов, а скорее как дополнение. Важная информация, толкования и названия объектов, встречающихся на изображении, в любом случае должны быть дополнены для обеспечения изображения SEO сайта.

Задачи на будущее

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

Улучшить время загрузки

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

Вызов сетчатки дисплея

Между тем, на смартфонах, планшетах, а также настольных ПК и ноутбуках дисплеи с высоким разрешением являются стандартными. Дисплеи Retina на смартфонах и планшетах обеспечивают разрешение выше Full HD. Разрешения в диапазоне 4K теперь являются стандартными для ноутбуков и настольных компьютеров.

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

Смартфоны и голосовой поиск

Использование Интернета продолжает уделять больше внимания смартфонам. Все веб-сайты и веб-мастера должны подготовиться к этому источнику пользователя с помощью гибких строительных блоков веб-сайта. Здесь важна скорость: пользователи хотят получать информацию на ходу как можно быстрее. Обычно только короткий голосовой ввод à la «Ok Google» должен привести к желаемому контенту. Только самые необходимые изображения должны быть загружены - и затем в максимально необходимом разрешении, чтобы не подвергать опасности «Мобильный опыт».

Оптимизация изображения является важной частью устойчивого SEO

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

Изображение на обложке: © Shutterstock / Rawpixel.com