50 руководств по SEO-оптимизации. Часть №2

Анатолий Косарев

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

§26. 12 СОВЕТОВ ПО ПОИСКОВОЙ ОПТИМИЗАЦИИ ИЗОБРАЖЕНИЙ, КОТОРЫЕ НУЖНО ЗНАТЬ

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

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

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

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

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

Считаете, что эти два фактора незначительны?

Согласно данным Jumpshot за 2019 год, более 20% всех поисковых запросов в Интернете приходится на Google Images.

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

Без надлежащей оптимизации изображений вы теряете значительный вес при ранжировании сайта.

Это похоже на то, что поисковые системы бесплатно раздают пирожные и молоко. Но вы берете только молоко.

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

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

Но какие факторы наиболее важны для того, чтобы ваши изображения были доступны для поиска и не замедляли работу вашего сайта?

12 ВАЖНЫХ СОВЕТОВ ПО ОПТИМИЗАЦИИ ИЗОБРАЖЕНИЙ, КОТОРЫЕ ВАМ НЕОБХОДИМО ЗНАТЬ

1. ВЫБЕРИТЕ ПРАВИЛЬНЫЙ ФОРМАТ

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

Хотя существует множество форматов изображений, наиболее распространенными для Интернета являются PNG и JPEG.

PNG: создает изображения более высокого качества, но имеет больший размер файла.

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

WebP: Google рекомендует применять этот формат сжатие без потерь или с потерями. Используя этот формат изображения для веба, поддерживаемый как Chrome, так и Firefox. Однако продукция компании Apple этот формат не поддерживает.

Чтобы угадить всем ставится скрипт определяющий версию обозревателя, в затем выводящий формат, соответствующий обозревателю.

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

2. СЖИМАЙТЕ ИЗОБРАЖЕНИЯ

Размер изображения и размер файла — это не одно и то же. Размер изображения относится к размерам изображения (например, 1024 на 680 пикселей). Размер файла — это объем места, необходимый для его хранения на сервере (например, 350 килобайт).

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

Согласно HTTP Archive, изображения составляют в среднем 21% от общего веса веб-страницы.

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

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

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

Можно воспользоваться и таким инструментом как TinyPNG.

У TingPNG также есть плагин WordPress, которым могут воспользоваться любители этой СМС.

Кстати для обратных ссылок в WordPress сучествует плагин WP Smush. Уменьшает размер файла изображения без потери качества.

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

Другие инструменты оптимизации изображений

— Affinity Photo

— Pixlr; (оптимизация JPEG)

— ImageOptim (только Mac)

— Kraken (объемное сжатие)

— GIMP

— JPEG мини

— OptiPNG

— FileOptimizer

— Обрезка

Если вы ещё сомневаетесь, как изображения влияют на скорость загрузки страницы, я рекомендую использовать инструмент Google PageSpeed Insights измерение скорости загрузки веб-страниц.

3. СОЗДАВАЙТЕ УНИКАЛЬНЫЕ ИЗОБРАЖЕНИЯ

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

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

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

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

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

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

Я уверен, что вы видели многократно, стоковые фотографии о определённой теме, которые массово размещены на сотнях сайтов.

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

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

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

Поэтому время, потраченное на создание и размещение таких изображений будет оценено достойно.

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

Как рекомендует Google в своем ресурсе Advanced SEO:

Большие изображения должны быть не менее 1200 пикселей в ширину и разрешены max настройкой или использованием AMP».

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

Google считает, что в теге изображения обязательно должен присутствовать атрибут alt=«». Если этот атрибут — пуст, то это дизайнерский элемент. Если же в нём прописан некоторый текст, то это визуальный контент. Текст из атрибута alt=«» воспринимается как часть контента, который учувствует в оценке качества страницы.

4. ОСТЕРЕГАЙТЕСЬ АВТОРСКИХ ПРАВ

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

Если Getty, Shutterstock, DepositFiles или какой-либо другой поставщик стоковых фотографий владеет изображением, которое вы используете, и у вас нет лицензии на его использование, вы рискуете получить дорогостоящий судебный процесс.

В соответствии с Законом об авторском праве в цифровую эпоху (DMCA) вам может быть направлено уведомление, если вы нарушили какие-либо вопросы авторского права. Если владелец контента увидит свой контент на вашем веб-сайте, он может сообщить о нарушении закона «Об авторском праве в цифровую эпоху», который вы должны соблюдать.

Конечно, если у вас небольшой сайт в маленьком городке, и вы работаете только в своём регионе, а ваш доход сопоставим с куриными слезами, то вряд ли при обнаружении плагиата с вами будут судится — с вас нечего взять. Убрать же плагиат придется. Но если с вас возможно будет что-то поиметь, то не сомневайтесь, изымут! С другой стороны, фотография с телефона реального объекта будет внушать большее доверие потенциальным пользователям, чем стоковое изображение.

5. НАСТРОЙТЕ ИМЕНА ФАЙЛОВ ИЗОБРАЖЕНИЙ

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

Желательно файлам изображений, давать содержательные имена.

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

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

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

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

Кроме этого имена файлов не только должны соответствовать изображенному объекту, но и быть уникальными. Например, если вы продаёте дома, то название файлов «dom-1», «dom-2», «dom-3» — считается неоправданной небрежностью. Более авторитетно смотрятся такие названия: «2-jetazhnyj-dom», «dom-na-mira», «kirpichnyj-dom». Желательно включать в название файла и его уникальность. Например, если уникально, что дом 2-х этажный, и других 2-х этажных домов на продаже нет, но название «2-jetazhnyj-dom» — хорошо отображает суть фотографии.

6. НАПИШИТЕ УДОБНЫЙ АЛЬТЕРНАТИВНЫЙ ТЕКСТ ДЛЯ ПОИСКОВЫХ СИСТЕМ

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

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

Обращение внимания на альтернативные теги также полезно для общей стратегии SEO на странице.

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

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

Даже Google отметил ценность замещающего текста в изображениях.

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

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

Альтернативный текст мог бы выглядеть так:

<img src = ”chocolate-1.jpg» alt = «шоколад» />

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

<img src = ”chocolate-kofe.jpg» alt = «батончик со вкусом темного шоколада и кофе» />

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

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

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

Хотя Атрибут title=«», многим кажется не уместным, однако при наведении мыши на изображение видеть некоторый текст

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

Атрибут title=«», также желательно употреблять. Его заполнение не должно быть идентичным атрибуту alt=«». Он должно иметь более подробное описание, и также содержать ключевые слова, или фразы.

7. ПОДУМАЙТЕ О СТРУКТУРЕ ФАЙЛА ИЗОБРАЖЕНИЯ

В 2018 году Google обновил свои правила изображения.

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

Путь к файлу и имя файла являются фактическим фактором ранжирования.

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

8. СДЕЛАЙТЕ ЗАГОЛОВОК И ОПИСАНИЕ СТРАНИЦЫ

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

На странице поддержки Google сказано:

«Google Images автоматически генерирует заголовок и фрагмент, чтобы лучше всего объяснить каждый результат и то, как он соотносится с пользовательским запросом…

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

Все ваши основные факторы SEO на странице, такие как метаданные, теги заголовков, текст на странице, структурированные данные и т. д., влияют на то, как Google ранжирует ваши изображения.

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

Я мясоед, но если вы не едите мясо, то придумайте своё сравнение.

9. ОПРЕДЕЛИТЕ СВОИ РАЗМЕРЫ

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

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

Кроме того, это позволяет браузерам изменять размер изображения до загрузки CSS.

Атрибуты размеров изображения также важны для предотвращения проблем с кумулятивным сдвигом макета (CLS), которые могут помешать вашей оптимизации Core Web Vitals.

Ключевым моментом является включение атрибутов ширины и высоты для каждого элемента изображения и видео.

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

10. СТРУКТУРИРОВАННЫЕ ДАННЫЕ ИЗОБРАЖЕНИЯ

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

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

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

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

11. СДЕЛАЙТЕ ИЗОБРАЖЕНИЯ УДОБНЫМИ ДЛЯ МОБИЛЬНЫХ ГАДЖЕТОВ

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

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

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

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

Важно отформатировать это с другой частью значения атрибута в каждой строке, как показано в этом примере из их ресурса:

<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w» sizes=» (max-width: 600px) 480px, 800px» src="elva-fairy-800w.jpg» alt=«Elva dressed as a fairy»>

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

12. ДОБАВЬТЕ ИЗОБРАЖЕНИЯ В СВОЙ ФАЙЛ SITEMAP

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

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

Если вы используете WordPress, Yoast предлагает решение для карты сайта в своем плагине.

ОПТИМИЗАЦИЯ ТЕСТА НА СКОРОСТЬ

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

— WebPageTest

— Pingdom

— GTmetrix

— WebWait

— Google PageSpeed Insights

ПОНИЖАЕТСЯ РЕЙТИНГ СТРАНИЦЫ, ЕСЛИ

— Большое количество графических ссылок для навигации на сайте.

— Избегайте файлы изображения называть так: “image1.jpg», “pic.gif», “1.jpg»

— Затрудняют индексацию длинные имена файлов, например, moi_dgugany_po_universitetu_2014_goda.jpg. Пробелы в именах файлов, и написание имен файлов кириллицей — не допустимо.

— Не допустимо в атрибутах alt и title писать длинные предложения, и с избытком использовать ключевые слова.

— Для навигации по сайту использовать только графические объекты.

КЛЮЧЕВЫЕ ВЫВОДЫ ПО ОПТИМИЗАЦИИ ИЗОБРАЖЕНИЙ

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

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

ДРУГИЕ ВАЖНЫЕ ВЫВОДЫ

Выберите правильный формат файла.

Уменьшите размер файла для более быстрой загрузки страницы.

Убедитесь, что ваши SEO-элементы на странице (метаданные, структурированные данные и т. д.) сочетаются с вашим изображением.

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

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

Удачной оптимизации!