SEO для Google изображений

  1. Используйте изображения
  2. Остерегайтесь изображения авторского права
  3. Проверьте ваш robots.txt
  4. контекст
  5. Используйте стандартные веб-форматы
  6. Создать хорошее имя файла
  7. Организуйте свои изображения в папки
  8. Изображения правильного размера
  9. Предпочитаю изображения высокого качества
  10. Будьте осторожны с весом изображения
  11. Атрибуты тега изображения
  12. Атрибут Src
  13. Alt атрибут
  14. Ширина и высота атрибута
  15. Название атрибута
  16. Сделать хорошую подпись
  17. Не забывайте OpenGraph и Twitter карты
  18. Макет изображений в CSS Sprites
  19. Упростите отслеживание с помощью Image Sitemap
  20. заключение

В марте этого года Моз опубликовал исследование о поведение пользователей в результатах поиска Google и некоторые данные привлекли мое внимание (я рекомендую вам также прочитать это исследование).

Из всех данных, которыми поделился Рэнд Фишкин, больше всего меня привлекло внимание людей к изображениям . Почти четверть поисковых запросов (на самом деле 26,76%) в Соединенных Штатах осуществляется с помощью Google Images.

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

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

Используйте изображения

Я знаю, что вы уже уверены, что использование изображений важно , но это не сложно укрепить: используйте изображения в своем контенте!

Вы, наверное, слышали, как кто-то говорит, что поисковые системы не могут читать изображения. Я полностью не согласен с этим утверждением. Google (и другие поисковые системы) достаточно развились и уже имеют алгоритмы, способные понимать содержание изображения . Смотри например проект Google Crowdsource который маркирует изображения и подсчитывает с помощью пользователей, чтобы убедиться, что надпись была сделана правильно.

Использование изображений полезно для SEO по двум причинам: 1 - изображения дополняют ваш контент, и это сделает вашу страницу лучше позиционированной в естественном поиске Google; 2 - Ваше изображение будет найдено в поиске изображений, и это также увеличит посещаемость вашего сайта. Во втором случае все еще существует вероятность того, что ваше изображение появится в глобальном поиске, рядом с результатами страниц, как на распечатке ниже.

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

Остерегайтесь изображения авторского права

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

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

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

В дополнение к этому, вы можете найти много других, выполнив простой поиск в Google 🙂

Проверьте ваш robots.txt

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

Вы можете сделать это, обратившись к robots.txt, который находится в корне вашего сайта, для этого вам просто нужно получить доступ к адресу http://www.seu-site.com.br/robots.txt в браузере. Если этот файл не существует, возможно, сейчас самое время его создать. Узнайте больше о robots.txt на этой странице ,

контекст

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

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

Используйте стандартные веб-форматы

Наиболее распространенные типы файлов изображений в Интернете: JPG , JPEG , GIF и PNG , следует избегать любых других расширений.

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

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

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

Создать хорошее имя файла

Имя файла является одним из наиболее важных пунктов SEO для изображений . Никогда не публикуйте общие или стандартные изображения, созданные камерой. Для вас (и для Google) гораздо сложнее расшифровать содержимое файла с именем DSC01563.JPG, чем с именем escort-convertible-red-1993.jpg .

Несколько советов по созданию хорошего имени для файла изображения:

  • Поставьте очевидное имя , которое легко идентифицирует изображение;
  • Используйте только строчные буквы и без акцентов ;
  • Заменить пробелы дефисами (-);
  • Избегайте статей и предлогов в названии;
  • Создать короткие имена не более 5 слов.

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

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

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

Изображения правильного размера

Очень важно, чтобы вы масштабировали каждое изображение до той же ширины и высоты, что оно будет занимать на вашей странице. Давайте представим, что у вас есть пространство 500 пикселей для отображения изображения: если вы отправите изображение меньшего размера, оно будет растянуто и потеряет разрешение; При отправке большего будет тратить драгоценные КБ загрузки.

Если вы используете умную платформу, такую ​​как WordPress , она, вероятно, изменит размер изображения, если оно будет больше, чем должно. Проверьте, как ваша CMS работает в этих случаях.

Предпочитаю изображения высокого качества

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

Будьте осторожны с весом изображения

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

Недавнее исследование, опубликованное в Думай с Google Выяснилось, что «53% потребителей покидают сайты, загрузка которых занимает более трех секунд». Тяжелые изображения являются одним из крупнейших злодеев времени загрузки. С другой стороны, важно позаботиться о том, чтобы ваше изображение не теряло качество при попытке сжать его.

Есть некоторые онлайн-сервисы, которые сжимают изображение, сохраняя его качество для Интернета. Мой любимый это TinyPNG , Использовать этот сервис очень просто: просто зайдите на сайт, загрузите оригинальное изображение, подождите, пока система обработает изображение, а затем загрузите изображение светлее и практически с тем же качеством .

Помимо TinyPNG есть и другие сервисы, такие как Optimizilla т Kraken и даже сам Photoshop с функцией «Сохранить для Интернета».

Хотите стать ниндзя в оптимизации веса изображения? то прочитайте это руководство от Google ,

Атрибуты тега изображения

Тег включения изображения в HTML поддерживает некоторые атрибуты, четыре из которых важны для SEO.

Атрибут Src

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

Alt атрибут

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

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

Ширина и высота атрибута

Изображения обычно являются последними элементами для загрузки на странице. Если размеры не объявлены в HTML-коде страницы, браузер должен будет корректировать макет при загрузке страницы , и это может привести к плохим результатам для вашего посетителя.

Атрибуты width и height служат для информирования о ширине и высоте в пикселях изображения. Таким образом, загрузив тег Атрибуты width и height служат для информирования о ширине и высоте в пикселях изображения браузер уже зарезервирует место, которое изображение займет после загрузки.

Название атрибута

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

Любопытство! Имя этого поля, которое появляется при наведении на элемент страницы, является всплывающей подсказкой .

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

Если вы хотите узнать другие атрибуты тега <img>, посетите эту страницу w3schools.com ,

Сделать хорошую подпись

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

Не забывайте OpenGraph и Twitter карты

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

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

Знать все теги OpenGraph визит эта страница проект. о Карты Твиттера вы можете увидеть более подробную информацию на этой странице , Оба проекта поддерживают многие другие данные, кроме изображений, поэтому я предлагаю вам реализовать их на своем сайте, если ваша CMS больше не поддерживается.

Макет изображений в CSS Sprites

Как вы уже знаете, время загрузки очень важно для SEO и особенно для опыта вашего посетителя. Один из способов сэкономить время загрузки - уменьшить количество запросов на сервере, и вы можете сделать это, используя CSS Sprites в изображениях макета.

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

Google, например, использует эту технику на странице поиска. Посмотрите, как оригинальное изображение загружается до применения CSS.

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

Упростите отслеживание с помощью Image Sitemap

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

Чтобы узнать больше о файлах Sitemap, и особенно о списках изображений, посетите официальная страница проекта ,

заключение

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

Рост социальных сетей, таких как Instagram и Pinterest, а также с охватом, который изображения достигают в Facebook, демонстрируют, что люди становятся все более и более визуальными . Наличие хорошего контента является ключевым, но для того, чтобы ваш контент был идеальным, вам нужно уметь исследовать изображения.

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