Автор: Если вы используете много изображений на своем сайте, хорошо, так и должно быть. Люди — визуально ориентированные существа, и ничто не привлекает наше внимание так, как привлекательное изображение. Фактически, по данным Optinmonster, онлайн- контент, содержащий изображения, получает до 94% больше просмотров , чем контент без них.
Проще говоря, вам нужно включать изображения в свой контент, чтобы привлечь пользователей и повысить свой рейтинг.
Итак, как вы гарантируете, что изображения способствуют вашим усилиям по SEO? Вот тут-то и вступает в дело SEO изображений.
Что такое SEO изображений?
SEO изображений — это процесс оптимизации изображений вашего сайта для повышения видимости и рейтинга в поисковых системах.
Он включает в себя стратегическую настройку имен файлов изображений, alt-текста и размеров, чтобы сделать их более заметными и улучшить их видимость в Google Images и в
SERP . Это означает, что они потенциально могут появиться в Google Image Pack…
…и в виде уменьшенных версий миниатюр рядом с вашей ссылкой в обычных результатах поиска.
Полная оптимизация изображений имеет множество преимуществ, таких как:
- Улучшенное время ожидания : если ваши страницы содержат привлекательные изображения, более вероятно, что пользователи захотят потреблять больше вашего контента и тратить на них больше времени. Это приводит к более длительному времени ожидания , что положительно влияет на ваше SEO .
- Расширенная доступность : альтернативный текст (alt text) добавляется к изображениям, чтобы предоставить поисковым системам дополнительную информацию и облегчить им понимание содержания изображений. Он также отображается поисковыми системами, когда изображение не может быть отображено.
Кроме того, включение alt text улучшает доступность страницы для пользователей, которые полагаются на программы чтения с экрана. Программы чтения с экрана — это программные приложения или аппаратные устройства, которые преобразуют цифровой текст в вывод шрифтом Брайля или синтезированную речь для пользователей, которые не могут видеть изображения или самостоятельно читать alt text. Это полезно не только для этих пользователей — это также хорошо для вашего SEO. - Лучший UX : оптимизированные изображения, которые отображаются плавно, приводят к улучшенному UX. Это снижает вероятность того, что слишком большие изображения загромождают экран и затмевают другие элементы. Плохо оптимизированные, громоздкие или плохо отформатированные изображения могут ЗНАЧИТЕЛЬНО увеличить время загрузки вашей страницы. Это не только приводит к отрицательному UX, но и может начать влиять на ваш рейтинг. Оптимизируя изображения, вы можете добиться более быстрой загрузки страниц и улучшить UX вашего сайта.
15 лучших советов по оптимизации изображений
Как вы видите, SEO изображений действительно важно и имеет много преимуществ. Вам нужно убедиться, что ваши изображения оптимизированы, чтобы помочь вам в вашем стремлении к лучшим рейтингам.
Чтобы помочь вам в этом, вот мои 15 лучших советов по оптимизации изображений.
1. Выберите правильный тип файла изображения.
Использование правильного типа файла изображения (также часто называемого форматами изображений) имеет решающее значение для того, чтобы ваши изображения отображались правильно, не были размытыми и были четко видны пользователям. Вам также необходимо убедиться, что вы используете форматы изображений, которые Google может правильно индексировать.
Форматы изображений, которые может индексировать Google:
- JPEG-файлы
- PNG
- ВебП
- SVG
- БМП
- и GIF-файлы
Итак, какой формат изображения лучше всего подходит для SEO? Прежде чем принять решение, вам нужно понять различные форматы:
- JPEG : этот формат совместим практически со всеми устройствами и может отображать широкий спектр цветов. Он также очень хорошо сохраняет оттенки изображения. Однако он использует сжатие с потерями, что означает, что некоторые данные теряются во время сжатия. В результате JPEG не идеален для подробных изображений, таких как цифровые фотографии.
- PNG : Этот формат также совместим со всеми. В отличие от JPEG, PNG использует сжатие без потерь, поэтому при сжатии не происходит потери данных. Главным недостатком является то, что файлы PNG, как правило, больше по размеру, чем файлы JPEG, что означает, что они могут увеличить скорость загрузки страницы.
- SVG : Этот формат использует векторы, а не пиксели для создания изображений. Он не очень подходит для фотографий, так как файлы получаются слишком большими. Однако он идеально подходит для логотипов, диаграмм и анимированных элементов.
- WebP : этот формат становится все более популярным и широко используемым — и легко понять, почему. WebP отлично подходит для уменьшения размера изображений, сохраняя при этом качество изображения. По данным Google, файлы WebP с потерями на 25–34 % меньше файлов JPEG , а файлы WebP без потерь на 26 % меньше файлов PNG.
Один из недостатков заключается в том, что WebP по-прежнему поддерживается не всеми браузерами, но это наверняка скоро изменится.
Так какой же из них следует использовать?
- Формат JPEG хорошо подходит для таких вещей, как снимки экрана, изображения публикаций в блогах и контент, для которого важна скорость загрузки сайта.
- PNG лучше по качеству и разрешению, но эти файлы обычно больше, что может привести к более медленной загрузке страницы. Если вы готовы пожертвовать небольшой скоростью ради лучшего качества, то PNG может быть форматом для вас.
- WebP имеет более широкие возможности сжатия, чем первые два, и вам не придется жертвовать качеством изображения. Он идеален, когда вы хотите оптимизировать скорость загрузки страниц и сократить использование полосы пропускания. Кроме того, WebP поддерживает возможности анимации GIF и прозрачные фоны PNG. С ним вы точно не ошибетесь.
- Когда дело касается таких вещей, как значки и логотипы, SVG является лучшим вариантом, поскольку эти файлы можно масштабировать до любого размера без потери разрешения.
В конечном счете, формат, который подходит вам, зависит от ваших собственных предпочтений. Типы изображений, которые вы используете на своем сайте, а также скорость и качество, которых вы хотите достичь, определят, какой формат вы выберете.
Кстати, я бы не рекомендовал использовать GIF-файлы на ваших страницах, если вы можете этого избежать. Они могут выглядеть круто, но у них есть тенденция ОЧЕНЬ замедлять скорость загрузки.
2. Изменение размера изображений для использования в Интернете
Важно помнить, что размер изображения и размер файла — это две разные вещи. Размер изображения определяет, насколько велико или мало изображение по ширине и высоте (например, 1050 пикселей на 1000 пикселей). Размер файла — это занимаемое им дисковое пространство (например, 350 КБ).
Изображения с большими размерами (ширина и высота) могут действительно замедлить скорость загрузки страниц. Это связано с тем, что браузер должен загрузить полное изображение, даже если оно больше максимальной ширины, отображаемой сайтом.
Например, если максимальная ширина вашего блога установлена на 650 пикселей, а вы загружаете изображение шириной 5500 пикселей, браузеру все равно придется загружать полноразмерное изображение. Это может значительно замедлить скорость загрузки страницы.
Поэтому размер изображения необходимо изменить, чтобы он соответствовал предполагаемому размеру дисплея.
Конечно, это означает, что вам нужно проверить максимальную ширину и высоту предполагаемого размера дисплея. Чтобы узнать, как это сделать, ознакомьтесь с полезным руководством, на которое я дал ссылку.
После того, как вы определили правильные размеры для своих изображений, пришло время изменить их размер. Один из моих любимых инструментов для изменения размера изображений — Bulk Resize Photos.
Все, что вам нужно сделать, это открыть его в браузере, а затем перетащить туда изображения или загрузить их со своего устройства.
Затем вы можете использовать инструмент для настройки размеров ваших изображений. Нажмите «Размеры изображения» и задайте ширину и высоту.
После изменения размера изображений вы можете загрузить их на свою страницу.
Изображения с высоким разрешением также могут замедлить скорость загрузки страницы. Конечно, эти изображения выглядят великолепно и идеально подходят для печати, но когда дело доходит до загрузки их на веб-страницу, вам придется пожертвовать частью этого качества ради более быстрой и отзывчивой страницы.
Стандартное разрешение для изображений в Интернете составляет 72 пикселя на дюйм (PPI). Пиксели (px) — это отдельные точки, из которых состоят изображения на экранах наших настольных компьютеров и мобильных устройств. PPI означает, сколько таких точек появляются на одном дюйме пространства на экране.
Большинство экранов мобильных устройств и настольных компьютеров отображают изображения с плотностью 72 PPI, поэтому использование более высокого разрешения не обязательно улучшит качество изображений.
Подводя итог, всегда изменяйте размер изображений в соответствии с предполагаемым размером дисплея и поддерживайте разрешение изображений на уровне 72 PPI или ниже.
3. Сжимайте изображения для более быстрой загрузки
Сжатие изображений уменьшает размер файлов изображений. Это делает их более подходящими для быстрой загрузки и эффективного хранения на различных устройствах.
Размер файла изображения напрямую влияет на общую скорость загрузки страницы. Таким образом, если на странице есть изображения с большим размером файла, то пользователям, возможно, придется ждать дольше обычного, чтобы начать с ней взаимодействовать. Это может раздражать пользователей и даже оттолкнуть их от вашего сайта.
Большие изображения также способствуют более высокому потреблению полосы пропускания. Это объем данных, передаваемых между вашим сайтом и его пользователями.
Если пользователь заходит на одну из ваших страниц с большими изображениями, то необходимо передать больше данных. Это приводит к увеличению использования полосы пропускания, что может нагрузить ресурсы вашего веб-хостинга.
Поскольку многие провайдеры веб-хостинга взимают плату на основе объема переданных данных или использованных ресурсов, это может привести к увеличению расходов на хостинг. Это означает, что вам следует сжимать изображения перед тем, как размещать их на своей странице.
Однако сжатие изображений может привести к потере качества. Все зависит от выбранного вами формата изображения. Как я уже упоминал ранее, JPEG использует сжатие с потерями, а PNG — без потерь. Таким образом, хотя JPEG обычно можно сжать сильнее, чем PNG, он потеряет качество.
Вот тут-то и появляется WebP. Помните, его можно сжимать сильнее, чем JPEG и PNG, при этом в определенной степени сохраняя качество изображений.
Как правило, следует стремиться сжимать изображения до 100 КБ или меньше. Если вы сжимаете очень большое изображение, может быть невозможно уменьшить его до такого размера без серьезного снижения качества. В этом случае сожмите его как можно сильнее, но при этом убедитесь, что изображение все еще пригодно для использования.
Один из лучших бесплатных инструментов оптимизации изображений, доступных для сжатия изображений, — TinyPNG . Открыв его в браузере, вы можете перетащить в него до 20 файлов JPEG, PNG или WebP.
TinyPNG значительно сжимает изображения, и после завершения процесса сжатия вы можете легко их загрузить.
Использование сжатых изображений — отличный способ снизить скорость загрузки страниц и улучшить UX вашего сайта. Это также снижает использование полосы пропускания и может привести к снижению расходов на хостинг.
4. Напишите описательный альтернативный текст
Как я уже упоминал ранее, alt-текст играет важную роль в том, чтобы помочь Google и альтернативным поисковым системам понять содержание и контекст изображений, особенно потому, что они не могут интерпретировать их визуально. Он также используется программами чтения с экрана для описания изображений для пользователей с нарушениями зрения. Поэтому он жизненно важен для доступности ваших страниц и улучшения вашего UX.
Кроме того, браузеры отображают альтернативный текст для изображения, когда само изображение не может быть отображено.
Это означает, что ваш alt-текст должен быть описательным, и вы должны использовать в нем соответствующие ключевые слова. Поступая так, вы предоставляете поисковым системам необходимый контекст и согласовываете свои изображения с поисковыми запросами пользователей. Это может повысить их релевантность в SERP и Google Images. Теперь давайте углубимся и рассмотрим лучшие практики его использования.
Лучшие практики альтернативного текста
Хороший прием при создании альтернативного текста — представить, как кто-то читает его вам, пока вы закрываете глаза. Если вы можете четко представить себе образ в своей голове, то альтернативный текст выполняет свою работу.
Теперь давайте рассмотрим пример плохого и хорошего альтернативного текста.
Плохой:
Примером неудачного альтернативного текста для изображения ниже может быть «Бисквитный торт «Виктория»».
Да, это действительно бисквит «Виктория», но это не совсем точно описывает образ, не правда ли?
Хороший:
Лучшее описание alt text было бы «Нарезанный бисквитный торт Виктория, посыпанный сахаром». Это гораздо лучше справляется с тем, чтобы вызвать образ в сознании пользователя и описать его Google.
Если вы не уверены, какие ключевые слова использовать для альтернативного текста, вам следует провести исследование ключевых слов с помощью инструмента Keyword Magic от Semrush.
Инструмент имеет функцию, которая может помочь вам найти ключевые слова для вашего alt-текста. Чтобы использовать его, войдите в Semrush и нажмите «Keyword Magic Tool» в меню слева.
Затем введите ключевое слово для вашего изображения, например, «Бисквитный торт «Виктория»», и нажмите «Поиск».
Затем нажмите «Расширенные фильтры» и «Функции SERP». Выберите «Изображение» и «Пакет изображений» из раскрывающегося списка и нажмите «Применить».
Теперь вы получите МНОГО вариантов ключевого слова, которые вы можете использовать в качестве альтернативного текста для своего изображения.
Теперь, после того как вы выбрали релевантные ключевые слова, как вы добавляете альтернативный текст к изображениям?
Если вы используете WordPress, то добавить их к вашим изображениям очень просто. Есть два способа сделать это.
Метод 1:
Просто выберите изображение из сохраненных медиафайлов, и у вас появится возможность добавить его в правой части экрана.
Сначала нажмите вкладку «Медиа» в меню в левой части экрана.
Затем выберите изображение из медиатеки и введите альтернативный текст в поле «Альтернативный текст».
Метод 2:
Это более быстрый способ добавить альтернативный текст к изображениям, которые уже загружены на ваши страницы или в сообщения, даже если они были опубликованы.
В меню слева нажмите «Сообщения» и выберите свое сообщение:
Нажмите на изображение в посте, и вы увидите, что над изображением появятся опции. Нажмите на значок карандаша:
Затем введите альтернативный текст в поле и нажмите «Обновить».
Вот и все. Вот так просто.
5. Используйте соответствующие имена файлов изображений и включайте ключевые слова.
Имена файлов изображений играют важную роль в том, чтобы помочь поисковым системам понять содержание и релевантность ваших изображений для поисковых запросов пользователей. Поэтому вам следует сохранять свои изображения, используя описательные имена, а не просто загружать их с именами по умолчанию.
Например, предположим, что вы разместили это изображение на своей странице, и его имя по умолчанию — «IMG_785432.jpg».
Когда Google сканирует вашу страницу, это не дает ему никакого контекста для изображения. Это означает, что маловероятно, что это изображение появится в Google Images или в обычных результатах поиска, когда пользователи ищут ваше ключевое слово.
Вместо этого вы должны дать ему описательное имя файла, например, «red-ford-mustang-1967.png». Просто помните, что имена файлов изображений также должны быть короткими, и вы должны разделять слова в заголовках дефисами, чтобы Google было легче их понять.
Вам также следует включать ключевые слова в названия и описания изображений, чтобы гарантировать, что ваши изображения будут отображаться в релевантных результатах поиска.
Например, предположим, что вы управляете сайтом электронной коммерции, и одним из продаваемых вами товаров является коричневый кашемировый свитер. Конечно, на вашем сайте будет его изображение. Вместо того чтобы называть изображение «свитер», вам следует выбрать более описательное имя, например «коричневый кашемировый свитер». Это может повысить вероятность того, что ваше изображение будет показано в результатах релевантного поиска пользователей.
Написание описаний изображений — это хорошая возможность включить в текст длинные ключевые слова, которые вы не смогли бы включить в другие разделы своего контента.
Чтобы найти длинные ключевые слова, вы можете использовать инструмент, который мы уже обсуждали — Keyword Magic Tool от Semrush.
Перейдите к инструменту и введите ключевое слово seed, как я показал вам ранее. Я собираюсь искать «воротничок рубашка» в качестве примера.
Хороший способ убедиться, что все полученные вами результаты содержат длинные ключевые слова, — нажать «Расширенные фильтры», а затем установить минимальное количество слов от трех и выше. Это связано с тем, что длинные ключевые слова содержат три или более слов.
После нажатия кнопки «Применить» вам будет представлен список вариантов длинных ключевых слов, из которых можно выбрать.
Выберите те, которые соответствуют вашим потребностям, и включите их в описания изображений.
6. Используйте адаптивные изображения
При сканировании и индексировании страниц Google сканирует их с точки зрения мобильного браузера. Затем он ранжирует страницы на основе мобильной версии. Это известно как «индексация с приоритетом на мобильные устройства» и возникло из-за ОГРОМНОГО увеличения количества поисковых запросов с мобильных устройств за последние несколько лет.
Фактически, в первом квартале 2023 года мобильный трафик составил 58,33% всего мирового интернет-трафика. Это означает, что оптимизация вашего сайта для мобильных устройств никогда не была столь важна, и это касается и ваших изображений.
Поскольку экраны мобильных устройств меньше экранов настольных компьютеров, важно использовать адаптивные методы создания изображений, которые позволяют вашим изображениям плавно адаптироваться к вашим адаптивным дизайнам. Это означает, что браузеры могут отображать изображения в соответствующем размере для устройства, на котором они просматриваются.
Несколько систем управления контентом (CMS) поставляются со встроенными адаптивными дизайнами или предлагают адаптивные темы и шаблоны. Это устраняет необходимость обеспечения того, чтобы ваш сайт был удобным для мобильных устройств. Некоторые из этих CMS включают:
- Вордпресс
- Joomla
- Друпал
- Викс
- Квадратное пространство
Однако вам все равно придется выбирать типы файлов изображений и сжимать их, как и для вашего сайта для ПК.
Если вы используете WordPress, есть куча плагинов, которые помогут вам сжимать и изменять размер изображений. Вот мои 3 лучших выбора:
- Smush : это широко используемый плагин для оптимизации изображений, который автоматически сжимает и изменяет размер изображений, сохраняя при этом качество.
- ShortPixel : Этот плагин предлагает как сжатие без потерь, так и с потерями. Он может сжимать изображения в больших объемах и даже обслуживает изображения WebP для более быстрой загрузки.
- Imagify : это еще один удобный плагин для оптимизации изображений, который позволяет с легкостью сжимать и изменять размер изображений.
Если вы планируете написать собственный HTML-код, чтобы сделать изображения адаптивными, это может оказаться довольно сложным, поэтому я рекомендую вам нанять веб-разработчика или ознакомиться с руководством Google по адаптивным изображениям .
7. Улучшите пользовательский опыт с помощью субтитров
Подпись — это текст, который появляется непосредственно под изображением. Обычно он не просто описывает изображение, но и дает ему больше контекста, как на изображении ниже:
Я знаю, о чем вы думаете: « Какое это имеет значение для SEO ?»
Ответ заключается в том, что подписи к изображениям не влияют напрямую на ваш рейтинг, но они могут улучшить ваш пользовательский опыт, привлекая посетителей и побуждая их проводить больше времени на вашей странице.
Когда пользователи проводят больше времени на ваших страницах, это посылает сигналы Google о том, что ваша страница обеспечивает положительный UX, и что она приятна и ценна для пользователей. Это может потенциально привести к улучшению рейтинга.
Вот несколько советов, которые помогут вам написать эффективные подписи:
Пусть они будут краткими, но описательными.
Ваши подписи должны быть краткими, понятными и по существу. Избегайте любых ненужных подробностей, которые могут ошеломить пользователя.
Например, предположим, у вас есть изображение прекрасного пейзажа в Тоскане. Вы можете поддаться искушению написать что-то вроде «Потрясающий и захватывающий вид на пышные зеленые долины и холмы Тосканы, Италия. Он демонстрирует живописное голубое небо и причудливые деревни в яркий летний день».
Однако, как бы ни было заманчиво расписывать эту сцену лирически, вам нужно сделать ее приятной и лаконичной. Что-то вроде этого было бы более уместно: «Пейзаж Тосканы, Италия, в солнечный день».
Эта подпись не перегружает пользователя ненужными подробностями изображения.
Однако вам все равно следует использовать яркий и описательный язык, чтобы нарисовать пользователю ясную ментальную картину. Я знаю, я знаю. Я только что сказал вам быть краткими с подписями, а теперь я говорю вам быть яркими и описательными.
Ну, эти два понятия не являются взаимоисключающими. Вы все равно можете написать убедительные подписи, которые не будут слишком цветистыми.
Давайте рассмотрим два примера:
- Пример 1: «Изящный серебристый автомобиль с тонированными стеклами и аэродинамическими характеристиками едет по извилистому, залитому солнцем пустынному шоссе. По обе стороны простираются обширные участки золотистых песчаных дюн, а над головой — ярко-голубое небо».
- Пример 2: «Серебристый автомобиль, скользящий по живописному пустынному ландшафту».
Видите? Второй пример рисует яркую картину изображения для пользователя, избегая при этом излишних подробностей. Первый пример слишком длинный и не добавляет особой ценности.
Добавить ценность
Ваши подписи должны давать пользователям дополнительную информацию, которая улучшает их понимание изображения. Это может включать интересные факты, исторический контекст или личные истории.
Например, «Эйфелева башня в Париже, Франция. Она была построена в 1887-1889 годах как центральное место Всемирной выставки 1889 года».
Вам не нужно добавлять подписи к каждому изображению на странице. Добавляйте только те подписи, которые, по вашему мнению, улучшат UX страницы и предоставят дополнительную ценность для читателя.
Добавить ключевые слова
Вам также следует оптимизировать подписи, включив в них ключевые слова. Это поможет поисковым системам связать ваши изображения с определенными ключевыми словами, которые соответствуют поисковым запросам пользователей.
Это может повысить релевантность вашего контента и увеличить вероятность появления ваших изображений в результатах поиска и в Google Картинках, когда пользователи ищут ключевое слово.
Чтобы найти ключевые слова для ваших подписей, вы можете использовать нашего старого друга Keyword Magic Tool. Используйте шаги, которые я изложил ранее, чтобы перейти к инструменту, введите ваши ключевые слова и выберите наиболее релевантные из них для включения в вашу подпись.
8. Используйте разметку схемы для изображений
Существует определенный тип разметки схемы, называемый ImageObject. Это структурированный формат данных, который позволяет вам предоставлять поисковым системам подробную информацию об изображениях на вашем сайте.
Это помогает поисковым системам понимать контекст и содержание ваших изображений, что может привести к лучшей индексации и видимости в результатах поиска.
Это означает, что ваши изображения потенциально могут быть показаны пользователям, которые активно ищут визуальный контент, связанный с вашей нишей.
Реализация разметки схемы ImageObject может привести к получению расширенных результатов, которые могут включать такие функции, как миниатюры изображений, подписи и другие визуальные улучшения.
Миниатюры изображений генерируются самими поисковыми системами на основе различных факторов, включая содержание вашей страницы, содержащиеся на ней изображения и то, насколько хорошо они соответствуют поисковому запросу.
Эти привлекательные дополнения могут сделать ваши объявления более привлекательными для пользователей и улучшить показатели кликабельности (CTR) .
Он позволяет вам предоставлять подробную информацию, такую как:
- Имя или название изображения
- Описание содержания изображения
- URL-адрес файла изображения
- URL для миниатюрной версии изображения
- Автор или создатель изображения
- Дата создания или публикации изображения
При реализации разметки схемы вы можете увидеть следующие типы расширенных результатов:
- Миниатюра изображения : Небольшой предварительный просмотр или миниатюра изображения.
- Название : Название или описание, относящееся к изображению.
- Автор или источник : информация об источнике или создателе изображения.
- Дата публикации : если применимо, дата публикации или загрузки изображения.
- Описание : Краткое описание или подпись, связанная с изображением.
- Дополнительные ссылки : ссылки на связанный контент или страницы на веб-сайте.
- Оценки и отзывы : если применимо, оценки или отзывы пользователей об изображении.
- Информация о лицензии на изображение : сведения о правах на лицензирование или использование изображения.
В настоящее время Google Images поддерживает следующие типы структурированных данных:
- Продукция
- Видео
- Рецепты
Допустим, вы управляете сайтом электронной коммерции, который продает обувь. Если вы используете разметку схемы для определения изображения как продукта, Google может отобразить изображение со значком ценника (часто называемым «значком») в пакете изображений в SERP и в Google Images. Для этого вам нужно будет добавить структурированные по продукту данные на свои страницы.
Это означает, что пользователи могут быстро определить, является ли ваше изображение тем типом результата, который они ищут. Если они планируют купить обувь, то значок продукта даст им знать, что они могут сделать это, нажав на ваше изображение. Если значок не отображается, то они могут предположить, что ваше изображение связано с чем-то вроде записи в блоге о обуви.
Если вы ведете сайт рецептов, то вы можете добавить разметку схемы рецептов на свои страницы. Когда вы это сделаете, ваше изображение может появиться в виде миниатюры рядом со ссылкой на вашу страницу.
Чтобы добавить разметку схемы ImageObject к изображениям, вы можете легко это сделать, используя структурированный код данных, доступный на Schema.org .
Этот код предварительно структурирован, то есть все, что вам нужно сделать, это ввести конкретные данные изображения, такие как URL-адреса изображений, размеры и описания. После того, как вы закончите, вы можете интегрировать код в раздел <head> вашего HTML-файла.
9. Используйте уникальные и оригинальные изображения.
Вы всегда должны стремиться использовать оригинальные изображения вместо стоковых. Если ваш сайт использует те же изображения, что и многие другие сайты в вашей нише, то вы не будете выделяться. Кроме того, вы не будете посылать хорошие сигналы EEAT в Google о надежности вашего сайта.
Вам следует использовать изображения, которые максимально соответствуют обсуждаемой вами теме и вашей нише.
Например, если ваш блог посвящен путешествию в Париж, то вам следует избегать использования изображений Эйфелевой башни, которые вы видели в сотнях других блогов.
Подумайте об этом – вы бы больше доверяли посту в блоге, использующему стоковые фотографии Парижа, или посту с фотографиями автора, посещающего самые известные достопримечательности города? Очевидно, что второй пост демонстрирует НАМНОГО больше опыта и надежности.
Вот еще один способ подумать об этом.
Когда вы пытаетесь улучшить свои рейтинги, вы не будете просто копировать и вставлять контент с другого сайта на свой. Вы потратите время на создание уникального и оригинального контента, который будет представлять ценность для пользователей.
Аналогично, стоковые изображения вряд ли помогут вашему рейтингу. С другой стороны, оригинальные изображения потенциально могут заработать ссылки с других релевантных сайтов.
Например, если вы создаете инфографику, содержащую полезную информацию по определенной теме, другие сайты могут захотеть ссылаться на нее, когда они создают контент по этой теме. Это помогает вашему сайту улучшить свой профиль обратных ссылок и может привести к более высоким рейтингам.
10. Создайте карту сайта для изображений
XML-карты сайта помогают поисковым системам находить ваши страницы для индексации, а также помогают им понять структуру вашего сайта. Мне нравится думать о них как о дорожной карте для поисковых систем. Карты сайта изображений похожи, но есть некоторые ключевые различия.
Карта сайта XML — это полный список всех страниц вашего сайта. Она включает URL-адреса для всех типов контента, включая блоги, статьи и страницы продуктов. Вы также можете добавить URL-адреса изображений в карту сайта XML, чтобы Google мог их сканировать и индексировать. Это называется добавлением тегов карты сайта изображений. Если вы хотите узнать об этом больше, ознакомьтесь с Руководством по карте сайта Google.
Карты сайтов изображений предоставляют Google список всех изображений на вашем сайте.
Это означает, что существует повышенная вероятность их появления в результатах поиска по изображениям, таких как Google Images, поскольку Google может их найти и проиндексировать. Это помогает расширить охват пользователей, которые ищут именно визуальный контент.
При создании обычной карты сайта XML, включающей URL-адреса изображений, или карты сайта изображений, есть определенные теги изображений, которые должны быть включены. Вот совет непосредственно от Google:
Итак, как на самом деле выглядит карта сайта для изображений? Вот пример от Google:
Если вы хотите создать карту сайта для изображений вручную, лучше всего следовать инструкциям Google .
Если вы не хотите делать это вручную, то можете использовать такой инструмент, как XML-Sitemaps . Это бесплатный онлайн-инструмент, который может сгенерировать для вас карту сайта изображений. Однако, если ваши изображения размещены на CDN, поддоменах или внешних серверах, вам нужно будет получить платный план, чтобы вы могли включить их.
Чтобы начать, перейдите на мой генератор карты сайта, введите свой домен и нажмите «Старт».
В зависимости от размера вашего сайта, генерация может занять некоторое время. После завершения это должно выглядеть так:
Затем загрузите файл в корневую папку вашего домена. Корневая папка вашего домена — это основной каталог, в котором хранятся папки и файлы вашего сайта на сервере. Его расположение зависит от вашей среды веб-хостинга. Если вы не уверены, где его найти, то, вероятно, лучше всего обратиться к вашему провайдеру веб-хостинга.
После загрузки в корневой файл вы готовы загрузить его в Google Search Console .
Итак, войдите в свою учетную запись GSC и нажмите «Файлы Sitemap» в левой части страницы.
Затем вставьте URL-адрес вашей карты сайта и нажмите «Отправить».
11. Используйте метатеги Open Graph
Метатеги Open Graph (OG) — это фрагменты кода, которые управляют отображением URL-адресов при публикации на платформах социальных сетей, таких как Facebook, LinkedIn и Pinterest.
Они могут сделать общий контент более заметным и кликабельным, что может привести к увеличению трафика на ваш сайт с платформ социальных сетей. Основные причины этого:
- Они делают контент в лентах социальных сетей визуально более привлекательным.
- Они дают пользователям быстрое представление о теме контента.
- Они помогают платформам социальных сетей понимать тематику и контекст контента, что может улучшить видимость вашего бренда в результатах поиска.
При внедрении тегов OG вы можете указать, какое изображение и информация должны быть заметны при публикации URL-адреса вашего сайта в социальных сетях.
Мета-теги OG обычно располагаются в разделе <head> HTML страницы и имеют префикс «og:» перед именем свойства. Например, вот как выглядит карточка Open Graph Facebook:
Чтобы выбранное вами изображение отображалось корректно при публикации в социальных сетях, обязательно включите тег изображения.
Чтобы начать использовать:
- Теги Facebook OG ,
- Pinterest OG теги ,
- и теги LinkedIn OG ,
следуйте инструкциям, изложенным в удобных руководствах, ссылки на которые я привел.
Что касается Twitter (теперь известного как X), платформа не использует протокол Open Graph. Она использует собственную версию под названием Twitter Cards. Если вы хотите узнать, как их настроить, ознакомьтесь с этим руководством по Twitter Card .
Добавление тегов OG в WordPress
Если вы используете WordPress, то добавлять теги OG НАМНОГО проще. Для этого можно использовать плагин Yoast SEO . Если вы еще не установили плагин Yoast SEO, сделайте это.
Отредактируйте пост, в который вы хотите добавить теги OG, и прокрутите вниз, пока не увидите поле «Yoast SEO». Нажмите вкладку «Социальные» вверху и выберите платформу социальных сетей, для которой вы хотите создать теги OG. Затем заполните поля заголовка и описания и загрузите изображение.
Теперь плагин автоматически настроит эти теги.
Красиво и просто!
12. Используйте ленивую загрузку
Ленивая загрузка — это метод, при котором изображения загружаются только тогда, когда они появляются в области просмотра пользователя (видимый экран). Это означает, что изображения, расположенные ниже на странице, загружаются по мере того, как пользователь прокручивает страницу вниз, и появляются в области просмотра. Это помогает:
- Улучшите скорость загрузки страницы, предотвратив одновременную загрузку всех изображений.
- Улучшите UX, чтобы пользователи могли быстрее взаимодействовать с вашей страницей.
- Уменьшите объем данных, передаваемых по сети, что позволит сэкономить полосу пропускания.
Реализация отложенной загрузки полезна для большинства страниц, содержащих изображения, но особенно для тех, на которых их большое количество.
Самый простой способ реализовать ленивую загрузку на вашем сайте — использовать плагин WordPress. Это избавит вас от всех хлопот, связанных с довольно сложной задачей.
Если вы используете WordPress версии 5.5 или более поздней версии, вам не нужно будет добавлять ленивую загрузку к вашим изображениям вручную. Это потому, что, начиная с версии 5.5, WordPress включает собственную ленивую загрузку, которая автоматически добавляет атрибут loading= «lazy» к изображениям.
13. Передача изображений через CDN
CDN (Content Delivery Network) — это сеть серверов, распределенных по всему миру. Они предназначены для эффективной доставки контента вашего сайта пользователям, позволяя им загружать файлы с ближайшего к их географическому местоположению сервера CDN.
Например, если вы находитесь в Лондоне, процесс значительно ускорится, если вы будете загружать контент с сервера в Великобритании, а не с сервера в США.
Это может повысить скорость загрузки страницы и значительно сократить время загрузки, что может привести к более позитивному пользовательскому опыту.
Плюс, CDN могут оптимизировать изображения в режиме реального времени. Это включает сжатие, изменение размера и кэширование изображений для дальнейшего повышения производительности вашего сайта. Некоторые из других преимуществ использования CDN для ваших изображений включают:
- Снижается потребление ресурсов сервера, что может снизить расходы на хостинг.
- Периоды высокого спроса и пики трафика легче обрабатывать без ущерба для скорости доставки изображений.
- Многие CDN имеют функции безопасности для защиты от DDoS-атак и других угроз.
- CDN часто предоставляют подробную аналитику для мониторинга эффективности изображений и вовлеченности пользователей.
Самый быстрый и лучший способ использовать CDN для ваших изображений — установить плагин CDN в WordPress. Один из лучших плагинов CDN для WordPress — Bunny.net , и я также настоятельно рекомендую взглянуть на провайдера CDN под названием Cloudflare .
14. Используйте кэширование браузера
Кэширование браузера подразумевает хранение файлов в браузере пользователя, чтобы не приходилось загружать эти файлы повторно при повторных посещениях.
Поскольку файлы изображений могут быть довольно большими, кэширование этих файлов может значительно улучшить время загрузки страницы для повторных посетителей, поскольку изображения хранятся локально в кэше браузера и не требуют повторной загрузки с сервера. Это обеспечивает более плавный пользовательский опыт.
Если вы хотите узнать больше о кэшировании браузера и о том, как его реализовать, вы можете ознакомиться с руководством по кэшированию браузера Google . Для пользователей WordPress лучшим плагином кэширования браузера, который вы можете использовать, является WP Rocket .
15. Оставайтесь в курсе последних тенденций SEO и развивайтесь
Как и все аспекты SEO, ландшафт SEO изображений постоянно развивается, и вам нужно отслеживать текущие лучшие практики . Это включает пристальное внимание к обновлениям алгоритма Google и изменениям в том, как Google индексирует изображения.
Плюс, вы должны следить за любыми новыми и появляющимися технологиями, которые могут повлиять на оптимизацию изображения. Новые технологии, которые повлияют на оптимизацию изображения, включают:
- ИИ : Инструменты оптимизации изображений, управляемые ИИ, способны автоматически анализировать и оптимизировать изображения. Это включает в себя тонкую настройку параметров сжатия и удаление ненужных метаданных.
- AR (дополненная реальность) : по мере того, как AR становится все более распространенным, оптимизация изображений для AR также станет более важной. Это подразумевает пристальное внимание к таким вещам, как соотношение сторон, масштабирование, согласованность и отзывчивость.
Хотя вам, возможно, пока не нужно быть в курсе всех этих технологий, они, скорее всего, окажут значительное влияние на SEO изображений в ближайшем будущем. Поэтому вам следует внимательно следить за этими разработками.
Как определить проблемы с изображениями
Итак, как вы можете отслеживать любые проблемы, связанные с изображениями на вашем сайте, и определять области, которые требуют улучшения? Ну, прежде всего, полезно знать, что анализировать, чтобы убедиться, что ваши изображения в хорошем состоянии. Вот некоторые из вещей, на которые следует обратить внимание:
Неработающие ссылки на изображения
Неработающие ссылки на изображения означают, что ваши изображения не могут быть отображены, потому что их URL-адреса написаны с ошибками, они больше не существуют или путь к файлу недействителен. Почему это плохо для вашего SEO? Ну,
- Поисковые системы, как правило, отдают предпочтение сайтам с хорошо поддерживаемым контентом. Поэтому наличие большого количества неработающих ссылок на изображения может быть признаком того, что ваш сайт не поддерживается должным образом и имеет низкое качество. Это может потенциально привести к снижению рейтинга.
- Неработающие ссылки на изображения создают плохой UX. Ваши посетители будут считать ваш сайт непрофессиональным и менее надежным, что приведет к увеличению показателей отказов и снижению вовлеченности пользователей .
- Когда поисковые системы, такие как Google, обнаруживают неработающие ссылки на изображения, они могут некорректно индексировать ваши изображения или даже не индексировать их вообще. Это означает, что ваши изображения могут не отображаться в поиске, связанном с изображениями.
Но как узнать, что ссылки на изображения не работают? Лучший способ определить это — использовать инструмент аудита сайта Semrush.
Для начала вам необходимо провести аудит вашего сайта.
Итак, войдите в Semrush и нажмите «Аудит сайта» в левой части экрана.
Затем введите свой домен и нажмите «Начать аудит».
После завершения аудита нажмите вкладку «Проблемы» в верхней части страницы.
Затем введите «изображения» в строку поиска. Теперь вы увидите любые проблемы, связанные с изображениями на вашем сайте.
Я вижу, что на моем сайте в настоящее время нет сломанных внутренних или внешних изображений. Если бы были проблемы, Semrush предоставил бы мне список URL-адресов для этих сломанных изображений. Я также мог бы нажать «Узнать больше», чтобы узнать больше о проблемах и способах их устранения.
Отсутствует альтернативный текст
Я уже упоминал, почему alt-текст СУПЕР важен, поэтому я не собираюсь тратить время на разговоры об этом снова. Но я хочу показать вам, как вы можете найти отсутствующий alt-текст на ваших изображениях.
Итак, продолжая использовать инструмент «Аудит сайта» и вкладку «Проблемы», введите «alt» в поле поиска.
Я вижу, что на моем сайте 189 изображений с отсутствующими атрибутами alt.
Если вы нажмете на проблему, вы увидите затронутые страницы и URL-адреса изображений. URL-адрес страницы — это место, где находится изображение, а URL-адрес изображения — это фактическое изображение, в котором отсутствует alt-текст. Теперь вы можете продолжить и начать добавлять отсутствующий alt-текст к своим изображениям.
Изображения неправильного размера
Один из самых простых способов выявить проблемы, связанные с размером изображений, — использовать Google PageSpeed Insights .
Для начала откройте его в браузере и введите свой URL. Затем нажмите «Анализ».
Далее прокрутите вниз до раздела «Диагностика». Я вижу, что на моем сайте есть проблемы, связанные с размерами изображений. Если я нажму «Правильно определить размер изображений», я получу больше информации об этой проблеме.
Инструмент покажет определенные изображения, которые не соответствуют размерам устройств, на которых они будут отображаться. Здесь он показывает мне, что, изменив размер этого изображения до правильных размеров, я мог бы потенциально сэкономить 12,8 КБ пропускной способности.
В этом же разделе вы можете узнать, есть ли у ваших изображений явные ширина и высота. Это означает, что ширина и высота этих изображений не указаны в HTML-коде моего сайта.
Нажав на эту проблему, я могу увидеть миниатюру каждого затронутого изображения и его URL. Это СУПЕР полезно, потому что все, что мне нужно сделать сейчас, это убедиться, что задана ширина и высота этих изображений. Это гарантирует, что моя страница будет эффективно загружаться на разных устройствах, что приведет к более позитивному UX и, в конечном счете, к лучшим рейтингам.
Мобильная-дружественность
Инструмент проверки удобства использования мобильных устройств от Bings — это самый простой способ проверить производительность вашего сайта на мобильных устройствах.
Этот бесплатный браузерный инструмент делает именно то, о чем говорит его название. Он сообщает вам, удобен ли ваш сайт для мобильных устройств, и предупреждает вас о любых проблемах с вашим сайтом, которые влияют на его производительность на мобильных устройствах.
Чтобы использовать его, просто откройте его в браузере, введите URL-адрес и нажмите «Анализ».
Затем инструмент сообщит вам, можно ли использовать страницу на мобильном устройстве.
Если есть какие-либо проблемы с изображениями, которые влияют на удобство использования мобильных устройств на вашей странице, вы сможете определить их здесь. К счастью, на этой странице не было никаких проблем с изображениями.
Общее количество запросов изображений и общее количество байтов изображений
Общее количество запросов изображений измеряет количество файлов изображений, которые браузер пытается загрузить при отображении веб-страницы. Если уменьшить это число, это может привести к более быстрой загрузке страницы.
Общий размер байтов изображения представляет собой объединенный размер всех файлов изображений, которые браузер запрашивает для загрузки страницы. Например, если есть пять файлов изображений, каждый из которых имеет размер 100 КБ, то общий размер байтов изображения составит 500 КБ. Уменьшив этот размер, вы можете ускорить время загрузки и снизить использование полосы пропускания.
GTmetrix — это бесплатный браузерный инструмент, который можно использовать для выявления этих двух проблем.
Чтобы начать, введите свой URL-адрес и нажмите «Проверить сейчас».
На следующей странице прокрутите вниз до раздела «Сведения о странице». Здесь вы увидите полосу, представляющую «Общее количество запросов страниц» для введенного вами URL.
Если вы наведете курсор на раздел «Img» панели, вы сможете увидеть количество запросов изображений среди общего количества запросов страниц. Вы также сможете определить часть общего размера страницы, которая состоит из изображений.
Один из лучших способов сократить количество запросов изображений на странице — использовать нашу старую знакомую ленивую загрузку. Это означает, что запрос изображения будет сделан только после того, как пользователь прокрутит страницу вниз и изображение станет видимым в области просмотра.
Вам также следует ограничить количество изображений на странице, используя только те, которые абсолютно необходимы. Если изображение не добавляет ценности или не улучшает UX, то лучше его не включать.
Чтобы уменьшить процент размера страницы, занимаемый изображениями, вам необходимо убедиться, что вы выбрали правильный формат изображения, и сжать все изображения.
FCP и время загрузки
Метрика FCP (First Contentful Paint) измеряет время, необходимое для отображения первого видимого контента на веб-странице при ее первоначальной загрузке. Это полезно, если изображение является первым фрагментом контента, появляющимся на странице. Если ваши изображения не оптимизированы, они могут оказать значительное влияние на FCP, что приведет к отрицательному UX.
Время загрузки — это время, которое требуется изображениям для загрузки и отображения на странице. Как вы могли догадаться, чем быстрее, тем лучше!
Вы можете использовать GTmetrix для просмотра FCP и общего времени загрузки изображений на выбранной вами странице. В верхней части экрана нажмите на вкладку «Водопад» и выберите «Изображения».
Затем вы увидите список изображений на странице, а также их URL-адреса и размер.
Если вы нажмете на синий, зеленый и фиолетовый блок рядом с изображением, вы получите более подробную информацию, включая FCP и время «полной загрузки» для этого изображения. Я вижу, что FCP для этого изображения составляет «+164 мс», а время «полной загрузки» составляет «+1,9 с».
Обычно оптимальное время полной загрузки изображения на странице составляет менее двух секунд. Опять же, если изображение загружается дольше, чем это, лучшим вариантом будет уменьшить размер файла.
Оптимизация изображений для Google Lens
Google Lens — инновационная программа визуального поиска. Она объединяет функциональность поиска с AR, AI и компьютерным зрением. Она использует искусственные нейронные сети для анализа изображений и расшифровки их содержания.
Все телефоны Google Pixel имеют Google Lens, и вы также можете получить к нему доступ через такие платформы, как Google Photos, Google Assistant и Google Maps. Или вы можете просто нажать на значок Google Lens в правой части строки поиска Chrome.
Важно оптимизировать для Google Lens, так как это помогает вашим изображениям появляться в Google Images, когда пользователи выполняют визуальный поиск. Как и в случае с традиционным текстовым SEO, если вы оптимизируете для Google Lens, это может повысить видимость вашего сайта и привлечь больше органического трафика. Это связано с тем, что пользователям становится проще находить ваши продукты или услуги по изображениям.
Итак, как же на самом деле его использовать?
Допустим, вы в ресторане и хотите получить больше информации о винах в винной карте. Вы можете просмотреть список с помощью Google Lens, и Google предоставит вам подробную информацию о различных предлагаемых винах.
Или, используя Google Maps, вы можете отсканировать уличный знак и увидеть информацию о компаниях в этом районе.
Вы также можете:
- Сканируйте предметы одежды или другие товары, и Google порекомендует вам, что купить.
- Сканируйте текст, встроенный в изображения, и переводите его на более чем 100 языков.
- Фотографируйте растения и животных, а Google Lens распознает их для вас.
Google Lens становится все более популярным, и вам необходимо убедиться, что ваши изображения оптимизированы для него.
Для этого вам следует придерживаться советов, которые я уже упомянул, таких как добавление альтернативного текста, уменьшение размера файлов изображений, включение подписей и использование адаптивных изображений.
Но давайте также рассмотрим некоторые дополнительные шаги, которые вы можете предпринять, чтобы убедиться, что ваши изображения готовы для Google Lens.
Предоставьте множество изображений
Если вы управляете сайтом электронной коммерции, предоставьте несколько изображений каждого продукта. Вам нужно убедиться, что ваши продукты можно рассмотреть со всех сторон. Не полагайтесь только на одно изображение.
Например, если лид использует Google Lens для сканирования задней стороны товара, то вы хотите, чтобы в результатах поиска отображалась фотография задней стороны соответствующего товара с вашего сайта. Если у вас есть только фотографии передней стороны товара, вы можете потерять лида.
Предоставляя многочисленные изображения вашей продукции, вы можете привлечь больше потенциальных клиентов, что может привести к увеличению конверсии.
Используйте высококачественные изображения
Чтобы Google мог сопоставить ваши изображения с поиском пользователя, ваши изображения должны быть высокого разрешения. Если вы используете размытые, некачественные изображения, то Google может не распознать, что ваше изображение соответствует элементу, отсканированному пользователем.
Кроме того, изображения с низким разрешением затрудняют пользователям возможность правильно проанализировать вашу продукцию.
По возможности используйте изображения с высоким разрешением, но помните, что вам, возможно, придется немного пожертвовать качеством, чтобы сохранить размер изображений. Возможно, вам придется поэкспериментировать с несколькими изображениями, чтобы увидеть, какое качество вы можете сохранить, не слишком замедляя скорость загрузки страницы.
Изображения с высоким разрешением удерживают интерес пользователей и создают у них наилучшее впечатление о ваших продуктах. Поэтому очень важно найти золотую середину между качеством и размером.
Включить метаданные фотографий IPTC
IPTC (Международный совет по прессе и телекоммуникациям) Фотометаданные — это стандарт, используемый для описания фотографий. Он важен, поскольку является наиболее универсальным стандартом для структурирования и определения свойств метаданных. Он позволяет добавлять надежные и точные данные о ваших изображениях.
Когда изображения появляются в Google Images, строка кредита, создатель изображения и уведомление об авторских правах отображаются рядом с изображением при его выборе, если эта информация была включена. Это выглядит так:
Метаданные IPTC могут помочь повысить доверие к вашему сайту. Когда пользователи видят имя создателя изображения и информацию об авторских правах с указанием даты, это показывает, что изображение является оригинальным. Это также дает пользователям представление о том, когда была сделана фотография, что может повысить ее релевантность для определенных запросов.
Лучший способ добавить метаданные IPTC к вашим изображениям — использовать Photoshop. Если вы хотите узнать, как добавить метаданные IPTC в Photoshop , ознакомьтесь с руководством.
Используйте Google Merchant Center
Если вы управляете сайтом электронной коммерции, то вам следует максимально использовать бесплатные листинги продуктов Google в Google Merchant Center. Благодаря этому ваши продукты будут отображаться в Google Images, когда пользователи будут сканировать элементы, связанные с вашими продуктами, с помощью Google Lens.
Если вы хотите настроить учетную запись Google Merchant Center, следуйте инструкциям в документации Google Merchant Center.
Часто задаваемые вопросы
Нужны ли мне разрешения на использование изображений на моем сайте?
Если вы используете на своем сайте изображения, защищенные авторским правом, необходимо получить соответствующее разрешение, чтобы избежать потенциальных юридических проблем. В качестве альтернативы вы можете использовать изображения, не защищенные авторским правом, или создать свои собственные оригинальные изображения.
Можно ли использовать слишком много изображений на странице?
Конечно. Если вы перегружаете страницу изображениями, это может привести к загромождению и непривлекательному макету. Это плохо для UX и, скорее всего, также приведет к медленной скорости загрузки страницы. Убедитесь, что вы отдаете приоритет релевантным изображениям, которые действительно добавляют ценность вашему контенту.
Стоит ли создавать изображения, которыми можно поделиться в социальных сетях?
Да, создание изображений для совместного использования в социальных сетях — отличный способ повысить видимость и вовлеченность вашего контента. Изображения привлекают внимание пользователей в социальных сетях и могут повысить вероятность того, что они нажмут на ваш контент.
Оптимизированное изображение из фотостоков https://simpleimage.online/ быстро передает информацию о вашем контенте и привлекает пользователей. Обязательно используйте высококачественные изображения и подбирайте правильный размер изображения для каждой платформы.
