Шаг 2: …?
Заполнение тегов alt — это далеко не всё, что можно сделать для SEO оптимизации изображений.
Некоторые могут возразить, что в связи с последними успехами Google в машинном обучении, теги alt больше не имеют значения. Например, вот, что происходит, если загрузить фото кота в Google’s Cloud Vision API — их инструмент по распознаванию изображений:
Google с почти стопроцентной точностью скажет, что на фотографии изображен кот. Впечатляюще.
Так зачем добавлять теги alt, если Google умеет распознавать изображения? Действительно ли SEO оптимизацию изображений стоит оставить в прошлом? Вовсе нет.
В данном посте я рассмотрю 12 практических советов по SEO оптимизации изображений для увеличения органического трафика в 2019 году.
Вот, что говорит Google о наименовании изображений:
[…] название файла может дать Google подсказки о том, что он содержит. Например, лучше назовите файл мой-новый-черный-кот.jpg вместо IMG00023.JPG.
Это основы SEO-оптимизации. Почти все так делают.
Вероятно, потому что Google годами давал один и тот же совет.
Доказательство того, что советы Google так и не изменились с 2013 года, взято из The Wayback Machine.
Но опять же, насколько это важно, учитывая последние успехи Google в машинном обучении и их новой способности распознавания изображений?
Хороший вопрос. Я уверен, что приведенный с котом пример был довольно впечатляющим. В таком случае, попробуем сделать то же самое с другим изображением.
Google с вероятностью 91% скажет, что это сыр. И Google окажется не прав. Это масло.
Хорошо, я первым готов признать, что масло похоже на сыр, но, возвращаясь к нашей теме: Google не идеален — вы должны сделать все, что в ваших силах, чтобы помочь понять ваши изображения.
Это не означает, что нужно заполнять название файла ключевыми словами. Наоборот, они должны быть описательными, но в то же время простыми и понятными.
Правильно собака.jpg
Неправильно: собака-щенок-щеночек-щеночки-щенки.jpg
Переименовать файлы, сделав их названия более описательными, не составит большого труда. Оно того стоит.
Alt-текст (Альтернативный текст) описывает изображение. Это то, что браузер отображает пользователям с программами для чтения с экрана. Браузеры также отображают alt-тексты, если возникает проблема с отрисовкой изображений.
Ниже представлен синтаксис HTML (язык разметки гипертекста):
<img src="щенок.jpg" alt="Щенок далматинца играет с мячом"/>
Данный пример взят напрямую из официальной справки Google. Он используется, чтобы показать, как выглядит хорошо написанный тег alt. И их главный совет по написанию:
Под использованием избыточного количества ключевых слов подразумевается добавление ключевых слов на страницу с целью манипулирования рейтингом сайта в результатах поиска Google. Зачастую эти ключевые слова добавляются в виде списка или блока, а также вне контекста (не как в естественном тексте). Избыточное количество ключевых слов на странице создает определенные неудобства для пользователей и может негативно повлиять на рейтинг сайта. Старайтесь создавать полезный и информативный контент, в котором ключевые слова используются уместно и не расходятся с контекстом.
В этом старом, но до сих пор актуальном видео, Мэтт Каттс дает несколько в одинаковой степени полезных советов по использованию тегов alt:
https://www.youtube.com/watch?v=3NbuDpB_BTc
Но есть способ попроще. И он работает практически идеально. Дополните предложение:
“Это изображение/скриншот/фотография/рисунок __________.”
Удалите все лишнее из получившегося предложения и используйте оставшуюся часть в качестве текста alt. Вот несколько примеров:
“Это фотография шоколадного чизкейка.”
<img src="шоколадный-чизкейк.jpg" alt="Шоколадный чизкейк"/>
“Это рисунок моего кота Марка играющего со своими игрушками.”
<img src="кот-марк.jpg" alt="Мой кот Марк, играющий со своими игрушками"/>
Вы можете слегка отклоняться от этой формулы при написании текстов alt для товаров. Для этого будет весьма полезно указать название продукта и/или его серийный номер. Например:
<img src="battery-tender.jpg" alt="Зарядное устройство (022-0186G-DL-WH)"/>
В официальной справке Google не сказано, что стоит делать именно так. Но в этом есть смысл, потому что Google четко понимает связь между названием товара и его серийным номером. Хотите доказательство? Взгляните на запросы одного и того же товара, но в разных формах:
Google знает, что за товар вы ищете, даже если вы ввели только его серийный номер. Таким образом, включение названия и серийного номера в alt-текст товара поможет Google понять, что это изображение определенного товара.
Найдите все изображения на вашем сайте с отсутствующими текстами alt, используя Ahrefs’ Site Audit.
Site Audit > project > Resources > Images > Missing alt text
И, конечно же, не забывайте про подписи. Они тоже важны.
Вот, что говорит Google:
Google получает информацию о теме изображений из другого контента на странице, включая заголовки картинок и подписи к ним. По возможности располагайте изображения на страницах, посвященных соответствующей теме, и рядом с текстом, к которому они относятся.
Взгляните на последнее изображение ещё раз, чтобы посмотреть на пример написания подписей к нему. Это маленький текст снизу, который описывает то, что изображено. Я рекомендую использовать этот прием везде, где возможно.
Большинство изображений на веб-страницах имеют один из трех форматов: JPEG, PNG или GIF.
Каждый из них использует разные методы сжатия. Это означает, что размер файла у всех форматов может очень сильно отличаться. Это важно. Вот почему:
Изображения — это часто файл больший по объему в сравнении с остальными, и это может негативно повлиять на загрузку страниц.
Время загрузки страницы имеет огромное значение для SEO. Google подтвердил, что это фактор ранжирования как для полной версии сайта, так и для мобильной. Ваша задача состоит в том, чтобы выбрать наиболее подходящий формат для каждого изображения — например, тот, который при сжатии не будет терять в качестве.
Ниже приведено одно и то же изображение в форматах JPEG, PNG и GIF:
Как видите, что изображение в формате JPEG — абсолютный победитель. У него самый маленький размер файла и разница в качестве изображения между ним и двумя другими изображениями практически незаметна. Можно ли сказать, что формат JPEG — всегда верный выбор? Не совсем.
Эта иллюстрация все объяснит:
Изображения в формате JPEG лучше подходят для фотографий, в то время, как PNG больше подходит для линейных рисунков, текстов и т.д. Формат GIF идеален для движущихся изображений.
Большинство профессиональных приложений для обработки фотографий (например, Photoshop) позволяют сохранять изображения в формате JPEG, PNG или GIF. Можете также использовать их для конвертации изображения из одного формата в другой. Нет никакого профессионального программного обеспечения для работы с изображениями? Попробуйте этот бесплатный инструмент.
Для экспорта скриншотов в другие форматы есть несколько приложений:
Вот как блог Ahrefs выглядит на моем 27-дюймовом мониторе:
Так выглядит Ahrefs Blog на моем 27-дюймовом мониторе с разрешением 2560x1440.
Заметили огромное количество белого пространства по бокам страницы? Это происходит из-за того, что максимальная ширина контента в блоге — 720 пикселей. Другими словами, не важно, какого размера будет экран, изображения не будут отображаться в формате более 720 пикселей.
Чем больше пикселей, из которых составлено изображение, тем больше будет размер файла.
Браузер будет изменять размер изображений шире 720 пикселей, чтобы подогнать их под размер экрана (по крайней мере, так работает с правильно свёрстанными сайтами). Но, что немаловажно, браузеру всё равно придется загружать полноразмерное изображение. Таким образом, при загрузке файла с разрешением 6000 пикселей, браузер все равно будет загружать его в полном размере, несмотря на то, что по умолчанию он отображается с разрешением в 720 пикселей. Это всё очень медленно.
Решить проблему можно, если изменить размер изображения и загрузить его в максимально большом разрешении. Не всегда это будет 720 пикселей. Размер зависит от дизайна страницы в целом и от расположения объектов на ней. Первый шаг — узнать размер. Можно сделать это, покопавшись в CSS.
Будьте осторожны, особенно с адаптивным дизайном. Иногда разрешение веб-сайта на маленьком экране может быть выше, чем на большом. В случае с блогом Ahrefs это так и есть.
Используйте этот инструмент для того, чтобы изменить размер нескольких изображений одновременно.
Только ширина имеет значение, поэтому загружайте изображения и переходите к опции “max width”, чтобы изменить только её.
Изображения в формате JPEG нужно загружать отдельно от изображений в формате PNG. В противном случае, инструмент конвертирует все изображения в единый тип файла. Выберете в инструменте то, что подходит больше именно вам — JPEG или PNG. Используйте соответствующие опции для разных форматов изображений.
Вот две причины, почему этот инструмент великолепен:
- Изменение размера по максимальной ширине: Допустим, максимальное разрешение для вашего сайта — 700 пикселей. У вас есть десяток изображений, которые нужно оптимизировать. Некоторые из них больше 700 пикселей, другие — меньше. Вы не хотите менять размер тех, что меньше, потому что это ухудшит их качество. Данный инструмент сохранит разрешение меньших изображений, преобразовывая только те, чьё разрешение шире установленного.
- Оставляет названия файлов без изменений: Итак, вы потратили кучу времени на то, чтобы переименовать файлы изображений для SEO. Вы меняете их размер и скачиваете версии с изменённым размером. Открываете .zip архив, и видите изображение1.png изображение2.png (вы поймёте всю боль и разочарование, если загружали когда-нибудь документы из Google Docs). Smart Resize сохраняет названия, поэтому их не придется переименовывать снова после того, как вы загрузите их в новом размере.
Взгляните на две фотографии:
Обе в формате JPEG, между ними почти нет разницы, хотя второе изображение на целых 58% меньше первого (31kb против 73kb).
У Google есть довольно большая и обширная документация на тему оптимизации изображений для сайта.
Ключевая информация о размере файла:
Для достижения наилучших результатов экспериментируйте с различными вариациями качества изображения, не бойтесь снижать качество изображения – часто результаты гораздо лучше, чем можно ожидать, а полноразмерные версии файла зачастую получаются довольно большими.
Для этого Google рекомендует три инструмента с открытым исходным кодом: Guetzli, MozJPEG (Mozilla) и pngquant. Можете прочесть их руководства по использованию здесь. Тем не менее, обратите внимание, что эти инструменты для командной строки. Если вам некомфортно пользоваться подобными инструментами, Google рекомендует попробовать ImageOptim — бесплатный инструмент для Mac. (Альтернативные версии для Linux и Windows можно найти здесь.)
Просто скиньте в него свои изображения и приложение само их сожмёт.
В настройках можно изменить уровень сжатия и даже включить функцию “с минимальной потерей качества”.
По умолчанию из файлов удаляется EXIF информация. Ещё больше это помогает уменьшить размер файла, пусть и не сильно. Можно также использовать эту бесплатную утилиту (официально рекомендованную Google) для удаления EXIF информации, если не собираетесь пользоваться ImageOptim.
Google утверждал, что данные EXIF могут быть фактором ранжирования в Изображениях Google.
https://www.youtube.com/watch?v=GMf6FmRus2M
Именно по этой причине вы, возможно, захотите сохранить эти данные. В таком случае, можно отключить удаление EXIF данных в настройках ImageOptim.
Более того, если вы занимаетесь локальным SEO, это может быть ещё одной причиной оставить EXIF данные. В Google никогда открыто не говорили о том, что они учитывают EXIF данные (например, GPS координаты) в качестве фактора ранжирования для локальной выдачи, но многие SEO специалисты считают что это важный фактор.
Какой вердикт можно вынести? При локальном SEO, плюсов от наличия EXIF больше, чем минусов.
Насколько хороши результаты при использовании этой утилиты? Я решил провести небольшой эксперимент. Я взял в качестве примера 15 изображений — некоторые в формате JPEG, некоторые в формате PNG. Часть из них я закинул в программу, оставив настройки по умолчанию. С оставшейся частью сделал то же самое, используя другие программы.
Вот как выглядят результаты сжатия в среднем:
- Imageoptim: 69% (JPEG). 40% (PNG)
- Shortpixel: 42% (JPEG). 59% (PNG)
- Kraken.io: 13% (JPEG). 63% (PNG).
- TinyPNG: 27% (JPEG). 65% (PNG).
- Optimizilla: 27% (JPEG). 60% (PNG)
- Imagify.io: 6% (JPEG). 1% (PNG)
- Compressor.io: 42% (JPEG). 58% (PNG)
Утилита Imageoptim (рекомендована Google) показала лучшие результаты в работе с форматом JPEG. Но она же была худшей в работе с PNG. Однако, стоит отметить — ImageOptim по умолчанию устанавливает качество PNG на уровне 70%. Вы можете опустить его до 40%. Сделайте это, и средняя степень сжатия PNG увеличится до 75,6%. Это делает его лучшим инструментом как для JPG, так и для PNG.
Тем не менее, если придерживаться результатов со стандартными настройками, Shortpixel выступает лучшим инструментом для сжатия.
Хорошие новости для пользователей WordPress, у которых есть плагин ShortPixel WordPress. Он бесплатно сжимает до 100 изображений в месяц.
С помощью инструмента Ahrefs Site Audit вы можете найти на сайте изображения, которые следует сжать.
Site Audit > project > Resources > Images
Вот что говорит Google о картах сайта для изображений:
Изображения — важный источник информации о контенте на сайте. Добавив информацию в карту сайта для изображений, вы можете дать Google дополнительную информацию об изображениях и предоставить URL изображений, которые по-другому найти было бы невозможно.
Вот теги, которые можно использовать в карте сайта для изображений:
При использовании WordPress и Yoast SEO изображения добавляются на карту изображений автоматически. Это работает даже на сайтах, где “медиа” страницы закрыты от индексирования. (Примечание: Это настройка по умолчанию в последней версии Yoast). Тем не менее, в Yoast есть только необходимые <image:image> и <image:loc> теги. Если добавить подписи к изображениям в WordPress, в Yoast их не будет.
Вам придется добавлять их вручную.
Google дает довольно скудную информацию по картам сайта. Они нигде не говорят об особенностях синтаксиса для <image:geo_location> тега. Не совсем ясно, как будет обозначено изображение Шеффилда в Соединённом Королевстве:
<image:geo_location>Шеффилд, Англия</image:geo_location>
<image:geo_location>Шеффилд, Соединённое Королевство</image:geo_location>
То же касается и <image:licence>. Хочет ли Google, чтобы вы ссылались на Creative Commons? Или лучше выбрать страницы с лицензиями на вашем сайте?
Не совсем понятно.
Также Google утверждает, что:
Карта сайта для изображений может состоять из URL разных доменов в отличие от обычной карты сайта, у которой есть междоменные ограничения. Это позволяет вебмастерам использовать CDN (сеть доставки содержимого) для размещения и хранения изображений.
Полезно знать, если пользуетесь CND для размещения изображений. Подробнее об этом позже.
Вот что об этом говорит Google:
В векторной графике для отображения картинки используются линии, точки и многоугольники. Векторный формат идеально подходит для изображений из простых геометрических фигур (например, логотипов, текста, значков и т. д.). Они остаются четкими при любом разрешении и масштабе, поэтому используйте этот формат для больших экранов и ресурсов, которые должны быть показаны в разных размерах.
Многие сайты используют векторную графику для логотипов и других простых элементов сайта.
SVGs (Scalable Vector Graphics — масштабируемая векторная графика), пожалуй, самый популярный векторный формат в Интернете. Консорциум Всемирной Паутины (W3C) разработал этот формат на базе XML. Все современные браузеры его поддерживают.
Вне зависимости от того, какой у вас браузер, устройство или разрешение экрана, формат SVG будет выглядеть чётко, потому что он не пикселизируется. Можно отобразить изображение в формате SVG даже на экране размером с планету — оно не потеряет ни граммы качества.
Вот советы от Google для оптимизации SVG:
- SVG-файлы должны быть предварительно минифицированы.
- SVG-файлы нужно сжимать при помощи GZIP.
Для минимизации SVG-файлов Google рекомендует инструмент svgo.
Неудобно использовать интерфейс командной строки? Используйте это веб-приложение или это приложение для Mac. Оба приложения имеют простой drag-and-drop интерфейс. Мне больше нравится веб-приложение.
На этом скриншоте все, что нужно знать об SVG. Тут можно увидеть, что исходный размер SVG был 8.54kb. Это безумно мало. Уменьшенная и сжатая через GZIP версия еще меньше, всего 3.56kb с экономией 41.67%.
GZIP-сжатие доступно на уровне сервера. Другими словами, если сервер позволяет выполнять сжатие, SVG файл использует всего 3.56 Кб трафика. В противном случае, он “съест” 8.54 Кб.
Воспользуйтесь этим инструментом, чтобы проверить, включено ли gzip-сжатие на вашем сервере. Если нет, просто следуйте этим инструкциям.
Допустим, вы загружаете изображение шириной 720 пикселей на свой сайт.
Если кто-то заходит с мобильного устройства с гораздо меньшим дисплеем, скажем, шириной 320 пикселей, то браузер все равно загрузит изображение шириной 720 пикселей. И это изображение будет выглядеть отлично. Но точно так же и изображение шириной 320 пикселей.
Видите в чём проблема? Загрузка изображения шириной 720 пикселей — пустая трата трафика, которая лишь замедляет загрузку страницы. Это вредно для SEO.
Решение заключается в использовании srcset.
Это волшебная часть HTML-кода, которая говорит браузеру загрузить различные версии изображения для экранов с разным разрешением.
Вот синтаксис с последующим объяснением:
<img src="image.jpg" srcset="image-medium.jpg 1000w, image-large.jpg 2000w">
Первая часть синтаксиса — стандартный тег <img>. Затем вставляем ссылки на две другие версии того же изображения в разных размерах — среднего (шириной 1000 пикселей) и большого (шириной 2000 пикселей).
На этом моменте я украду часть объяснения из этой статьи, потому что она как нельзя лучше объясняет происходящее.
Скажем, вы пользуетесь устройством с шириной экрана 320 пикселей и дисплеем 1x (не retina). Изображения, которые у вас есть: маленькое.jpg (шириной 500 пикселей), среднее.jpg (шириной 1000 пикселей) и большое.jpg (шириной 2000 пикселей).
Браузер работает следующим образом:
Дайте мне быстро кое-что подсчитать.
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
Хорошо, поскольку я дисплей 1x, разрешение 1.5625 — самое близкое к тому, что мне нужно. Оно немного выше нужного, но все равно этот вариант лучше. Другие будут слишком высокими.
Теперь на этот сайт заходит другой браузер. Это также дисплей разрешением 320 пикселей, но уже retina (2x). Этот браузер делает те же подсчеты, а только потом выдает:
Хорошо, поскольку я 2x дисплей, я собираюсь выбросить это изображение с разрешением 1.5625, потому что для меня оно слишком низкого качества и может плохо отображаться. Лучше я буду использовать изображение с разрешением 3.125.
Вы поняли? Браузер выбирает наиболее подходящее изображение для посетителя, тем самым снижая потребление трафика и время загрузки страницы. Идеально. Значит ли это, что вам нужно загружать множество разных размеров для всех изображений? Вовсе необязательно.
WordPress делает это автоматически (начиная с версии WordPress 4.4, которую, сейчас используют уже все). Для каждого загруженного изображения WordPress создает следующие версии по умолчанию:
- Миниатюра: квадратное кадрирование (150x150 пикселей).
- Средний: Размеры изменены так, что самая длинная сторона имеет 300 пикселей в ширину или высоту.
- Средне большой. Размеры изменены до 768 пикселей в ширину.
- Большой: Размеры изменены так, что самая длинная сторона — 1024 пикселя в ширину или высоту.
- Полноразмерный: Исходное изображение.
Кроме того, WordPress также автоматически добавляет srcset
Вот так это выглядит в моем блоге (который работает на WordPress):
Повторюсь: Этот код полностью сгенерирован WordPress. Я не загружал несколько версий этого изображения.
Обратите внимание, что можно использовать синтаксис @2x, если вы хотите оптимизировать изображения для дисплеев retina. Существует также плагин WordPress, который добавляет поддержку таких нестандартных дисплеев. Если вы не переусердствовали со сжатием изображений (т.е. не опустили качество ниже ~40%) для формата, вы, скорее всего, обнаружите, что “обычные” изображения прекрасно масштабируются на дисплеях retina. По крайней мере, так было у меня.
С микроразметкой Schema вы скорее всего знакомы по работе с поиском Google. В обычных результатах поиска она будет выглядеть так:
Знаете ли вы, что микроразметка может быть полезна и для SEO оптимизации изображений?
Потому что Google показывает соответствующие значки на миниатюрах в результатах поиска изображений в мобильной версии. Вот как они выглядят:
Вот что говорит Google об этих значках:
Если на вашем сайте есть изображения, вы можете помочь пользователям определить тип контента, связанного с изображением, используя соответствующие структурированные данные на ваших страницах. Это поможет пользователям быстро находить нужный контент, а также направит на ваш сайт более целенаправленный трафик.
В настоящее время Google поддерживает четыре вида разметки: товары, рецепты, видео и GIF.
Сделать так, чтобы на ваших изображения отображались эти значки в поиске очень просто. Нужно просто добавить соответствующую микроразметку на страницу.
Добавьте разметку рецептов на страницы с рецептами.
Добавьте разметку товаров на страницы с товарами.
Добавьте разметку видео на страницы с видео.
Обратите внимание, что GIF-файлы не нуждаются в специальной разметке — Google их и так распознаёт.
Разумеется, если на вашем сайте нет такого контента, нет смысла беспокоиться о микроразметке. Скорее всего, Google поддерживает бейджи для данных типов контента из-за того, что пользователи часто ищут подобный контент в Изображениях Google.
Отложенная загрузка данных — это когда браузер откладывает загрузку изображений до тех пор, пока их не нужно показывать на экране. Остальные изображения загружаются по мере прокрутки.
Вот что говорит Google об отложенной загрузке:
Отложенная загрузка может значительно ускорить загрузку длинных страниц, содержащих много изображений после первого экрана, загружая их либо по мере необходимости, либо когда основной контент загружен и отрисован.
Раньше было много споров о том, пользу или вред для SEO приносят изображения с отложенной загрузкой. Google также давал довольно неоднозначную информацию на этот счет. Однако, пожалуй, лучшим доказательством того, что Google рекомендует отложенную загрузку изображений, является следующее:
Это рекомендация от Google из их собственного инструмента PageSpeed Insights.
Здесь Google объясняет, как реализовать отложенную загрузку (таким образом, чтобы Google мог видеть это содержимое — это очень важно!). Существует несколько различных методов, но все они строятся на использовании Javascript. Если вы не знакомы с Javascript, стоит обратиться к программисту.
Если так же, как мы, вы пользуетесь WordPress, существует несколько плагинов для отложенной загрузки изображений.
У большинства из них плохие отзывы, но недавно (возможно, вы уже заметили) для блога мы стали использовать плагин отложенной загрузки A3. И пока все отлично работает.
Кэширование браузера — это когда изображения (и другие файлы) сохраняются в браузерах посетителей сайта. Как итог, они загружаются быстрее при последующих посещениях страницы.
Например, когда вы попали на этот пост, вам пришлось загрузить все изображения, чтобы они отображались в браузере. Без кэширования браузера вам придется проделывать все то же самое ещё раз, если вдруг решите перечитать эту запись завтра.
Однако, при использовании кэширования браузер сохраняет изображения. И при повторном просмотре этой или аналогичной страницы, не будет необходимости загружать все снова. Многие из них уже есть на вашем компьютере и, таким образом, загружаются гораздо быстрее.
Вот что говорит Google о кэшировании браузера:
HTTP кэширование может ускорить загрузку страницы при повторных посещениях.
Когда браузер запрашивает ресурс, сервер, предоставляющий ресурс может сказать браузеру, как долго он должен хранить кэшированную информацию. При любом следующем запросе на этот ресурс, браузер использует его локальную копию, а не отправляется в сеть для его получения.
Если ваш сайт не использует кэширование, в Google PageSpeed Insights можно даже увидеть такое сообщение:
Хорошо, так как же включить кэширование изображений в браузере?
В WordPress это сделать довольно просто. Просто установите плагин наподобие W3 Total Cache. Он включит кэширование браузера по умолчанию и внесет необходимые изменения в ваш .htaccess файл.
Для тех, кто не использует WordPress, нужно добавить этот код в ваш файл .htaccess вручную.
ExpiresActive On # Images ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year"
Можно изменить часть “1 year” на “1 month,” “1 week,” “1 day,” “1 hour,” и т.д. Тем не менее, эти настройки должны исправно работать для большинства сайтов. Это те же значения, что W3 Total Cache использует по умолчанию.
Подробнее о кэшировании браузера и о том, как оно работает, читайте здесь.
ВАЖНО. Перед внедрением кода, убедитесь, что он совместим с вашим сервером. Иногда работа с файлами .htaccess может доставить немало хлопот.
Большинство веб-сайтов обслуживают все свои файлы, включая изображения, с одного сервера в определённом месте.
Если предположить, что ваш сервер находится в Великобритании. Когда кто-то заходит на ваш сайт из Великобритании, вам не нужно отправлять изображения куда-то далеко. Однако, для посетителей сайта из США все работает несколько иначе: изображения проделывают намного более длинный путь. А это снижает скорость загрузки сайта.
Сети доставки контента (Content Delivery Networks, или CDNs) решают эту проблему путем кэширования файлов в глобальной сети серверов. Теперь, когда кто-то посещает ваш веб-сайт, изображения будут загружаться с ближайшего к ним сервера.
Вот крутая гифка от CloudFlare, которая идеально отображает описанный процесс:
На ней очень много CDN. Вот некоторые из них:
- Cloudflare (доступна бесплатная использование);
- KeyCDN;
- Amazon CloudFront (доступно бесплатное использование;
- Google Cloud CDN (доступна бесплатная пробная версия)
Если пользуетесь WordPress, настроить CDN очень просто. Зарегистрируйтесь в выбранной CDN, следуйте инструкциям, а затем воспользуйтесь плагином типа W3 Total Cache, CDN Enabler or WP Rocket и включите CDN на вашем сайте. Проще простого.
Однако, стоит отметить, что ваш CDN будет иметь URL типа xyz.cdnprovider.com.
Для SEO это не очень хорошо по следующим причинам:
- Фактически ваши изображения размещаются на отдельном домене. Если кто-то захочет вставить ваше изображение, сделав привязку к вам, есть вероятность того, что вместо этого он сделает привязку к вашему CDN. Это означает, что вы потеряете необходимую ссылку на вас.
- Могут возникнуть проблемы, если в будущем захотите сменить провайдера CDN. В таком случае, придется изменить (или перенаправить) все URL-адреса изображений и т.д.
Совет Джона Мюллера касательно CDN:
CDN URLs is fine, but I’d try to avoid moving image URLs too much, so I’d tend towards using your own domain/subdomain (via CDN).
— 🍌 John 🍌 (@JohnMu) October 17, 2017
По этой причине, я советую настроить запись CNAME. Думайте о ней как о псевдониме, который можно использовать вместо уродливого URL, присваемого провайдером CDN. Так что вместо xyz.cdnprovider.com вашим CDN может быть cdn.yourdomain.com.
Прочитайте это руководство, чтобы узнать, как это сделать (и вообще обо всем, что нужно знать про CDN).
CDN для изображений тоже существуют.
В своих официальных документах Google рекомендует две из них: Cloudinary и imgix.
Интересная особенность CDN для изображений заключается в том, что они помогают автоматизировать процесс оптимизации. Это рекомендует Google, и, честно говоря, если у вас большой сайт, CND для изображений — отличная идея.
Обычно такие сервисы платные, но они помогают сэкономить кучу времени.
Еще один совет: Восстановите “ссылочный вес” из обратных ссылок на изображение
Инфографика. Гифки. Таблицы. Это все ресурсы, которые привлекают ссылки и часто встраиваются в другие сайты.
Вот пример:
Это изображение из нашего исследования о блоках с ответами, которое кто-то вставил в свой пост.
Обычно при этом люди ссылаются на источник изображения, но так случается не всегда. Иногда люди вообще не оставляют ссылку, а иногда они ссылаются прямо на изображение (например, yourdomain.com/yourimage.jpg).
Именно так сделал и этот сайт.
К сожалению, эта обратная ссылка бесполезна, так как PageRank не передаётся на саму страницу. И он не “перетекает” по сайту.
Ссылочный вес этих ссылок можно быстро восстановить связавшись с владельцами ссылающихся сайтов:
Привет, [ИМЯ]! Я видел, что ты использовал моё изображение. Вместо изображения, можешь сделать ссылку на страницу, где ты её нашёл?
Это быстро, легко, а конверсия часто бывает довольно высокой.
Как найти такие ссылки? Очень просто. Вот так:
Site Explorer > введите свой домен > выберите режим “domain/*” > Backlinks > введите в поиск .jpg in “URLs of backlinks”
Напишите тем, чьи ссылки вы хотите получить и попробуйте их убедить.
Можно также повторить этот процесс с форматами .png и .gif.
Если вы используете CDN, можно также найти людей, ссылающихся на изображения, размещенные на вашем поддомене CDN.
Site Explorer > введите поддомен CDN > выберите режим “prefix”
На скриншоте выше показан ссылочный профиль для cdn-backlinko.pressidium.com, который Брайан Дин использует для backlinko.com. У него более 2,300 обратных ссылок со 158 ссылающихся доменов (т.е. уникальных сайтов).
Другими словами, 157 сайтов (один из них — сам backlinko.com) ссылаются на изображения и другие файлы, размещенные на CDN.
Это 157 возможностей получить ссылку.
Подробнее о похожих стратегиях создания обратных ссылок читайте в нашем полном руководстве по восстановлению ссылок.
Заключение
SEO оптимизация изображений — довольно сложная тема. Google располагает огромным количеством информации по этой теме Их страница об автоматической оптимизации изображений насчитывает более 15000 слов.
Поэтому важно отметить, что в этой статье я затронул не все аспекты оптимизации изображений. Это было бы невозможно. Можно почитать документы Google, если хотите знать больше (и потратить на это несколько недель). В этой статье мы намеренно сосредоточились на главных элементах, которые, на мой взгляд, больше всего повлияют на SEO.
Имейте в виду, что нужно приложить определенные усилия, чтобы все изображения были высокого качества и положительно влияли на пользовательский опыт. Это значит, что не стоит загружать стоковые фотографии плохого качества, делать изображения товаров расширяемыми и т.д.
