SEO для изображений и Alt-теги: 7 советов по оптимизации изображений
Image SEO и Alt Tags: 7 советов по оптимизации изображений для увеличения трафика с помощью изображений.
Говоря о SEO изображений, первое, что обычно приходит на ум, это оптимизация alt-тегов, но есть гораздо больше того, что должно входить в оптимизацию ваших изображений.
На самом деле, можно с уверенностью сказать, что оптимизация изображений является одной из наиболее игнорируемых областей SEO, но это не обязательно так.
Нередко можно обнаружить, что на сайте есть изображения с огромными размерами файлов, непроизносимыми именами файлов и что они отображаются на сайте в гораздо меньшем размере, чем оригинальное изображение.
Часто проблема заключается в том, что в руководствах по SEO для начинающих рассматриваются только основы, а это означает, что оптимизация alt-тегов — это практически все, что упоминается.
Но давайте не будем забывать, что поиск изображений сам по себе имеет большое значение и может привести значительное количество трафика на ваш сайт. Наше недавнее руководство по визуальному поиску отлично демонстрирует, насколько важен поиск изображений.
И давайте посмотрим правде в глаза, кто не использовал их для просмотра фотографий котят?!
SEO изображений — это не то, что следует игнорировать, и в этом руководстве мы расскажем вам о шагах, которые вы можете предпринять, чтобы оптимизировать изображения вашего сайта и занять более высокие позиции в поиске по изображениям.
В этом руководстве по SEO изображений мы рассмотрим:
Почему изображения так важны? Что такое SEO изображений? Что такое Alt-теги и Alt-текст? Как оптимизировать Alt-текст Как добавить Alt-теги на популярных платформах веб-сайтов Как изображения влияют на показатели PageSpeed 7 советов по оптимизации изображений: За пределами Alt Text Оптимизация изображений и Google's Page Experience Update Поиск проблем с изображениями на вашем сайте's Images.
Почему изображения так важны?
Изображения помогают придать контекст вашему контенту.
Правильно подобранные изображения могут помочь пользователю лучше понять и воспринять написанный контент, а также разбить большие блоки текста.
Мало что может быть менее увлекательным, чем цельный блок из нескольких тысяч слов.
Но пользователи в стороне, Google' видит будущее в том, чтобы двигаться в сторону визуального поиска, и начало этому было положено полным обновлением Google Images пару лет назад.
Мы все чаще видим, как изображения занимают основное место в поисковой выдаче, часто выше обычных органических результатов.
Важный момент: изображения следует выбирать с осторожностью.
Мы все привыкли видеть одни и те же стоковые изображения на каждом другом сайте, а настоящая ценность появляется, когда вы используете изображения, созданные по индивидуальному заказу, которые помогают передать историю, которую вы пытаетесь рассказать.
Нельзя игнорировать важность изображений и поиска по ним. Оптимизация изображений должна стать частью вашей постоянной стратегии SEO и рассматриваться как одна из лучших практик, которой вы должны следовать.
Что такое оптимизация изображений?
Более часто называемое оптимизацией изображений, image SEO — это улучшение изображений вашего сайта по двум основным причинам:
Чтобы занять более высокое место в поиске изображений Google. для улучшения общей видимости и оптимизации веб-страницы.
А это означает выполнение ряда различных задач, которые помогут Google лучше понять изображения вашего сайта, включая правильное именование файлов, добавление и оптимизацию текста alt, уменьшение размера файлов и многое другое.
Один из вопросов, который часто задают в связи с SEO изображений, заключается в том, необходимы ли эти задачи до сих пор, учитывая прогресс Google' в использовании искусственного интеллекта и машинного обучения для распознавания изображений?
Простой ответ — да. Google все еще не может прочитать все типы изображений, хотя его способность к этому значительно улучшилась за последние годы. Важно также знать, что SEO изображений — это не только помощь поисковым системам в понимании того, что изображено на картинке.
Плохо оптимизированные изображения являются одной из основных причин медленной работы веб-страниц, а внесенные улучшения могут оказать большое влияние на скорость загрузки сайта и показатель PageSpeed.
Однако SEO изображений часто ограничивается оптимизацией alt-тегов. И нельзя отрицать, что это важная часть процесса, но только одна из них.
Тем не менее, понимание тегов alt и текста alt, а также их назначения является отличной отправной точкой.
Что такое alt-теги и alt-текст?
Вы часто слышите, как SEO-специалисты говорят об оптимизации тегов alt или текста alt; их также иногда называют описаниями alt или атрибутами alt. Они используются взаимозаменяемо для обозначения одного и того же.
Но что это такое?
Вот как Мэтт Каттс объяснил это давным-давно, простым для понимания способом. (Мы все скучаем по Мэтту)
Alt-теги обеспечивают текстовую альтернативу изображения для поисковых систем и тех, кто использует программы чтения с экрана для доступа к веб-странице. Первоначальное назначение и использование alt-текста заключалось в том, чтобы помочь сделать изображения доступными для слепых и людей с ослабленным зрением.
Проще говоря, это текстовое описание для каждого изображения, которое четко описывает, что на нем изображено.
Они являются частью HTML-кода в теге изображения и выглядят следующим образом:
Alt text — это описательный контент, который находится в атрибуте alt тега изображения.
Alt-текст может помочь улучшить SEO-показатели вашего сайта, добавляя дополнительные сигналы релевантности к веб-странице и помогая Google лучше понять содержание изображения и помочь ему ранжироваться.
Но многие делают это неправильно, и вам' не придется далеко искать, чтобы найти страницу, где все изображения используют один и тот же alt-текст — точное совпадение основного целевого ключевого слова страницы'.
Как оптимизировать альт-текст.
Существуют правила лучшей практики, которым вы должны следовать при оптимизации alt-текста вашего изображения'.
Создание описательных alt-тегов не должно быть сложным. Лучше всего не думать об этом слишком много и руководствоваться содержанием изображения.
Часто написание отличного текста alt означает использование здравого смысла для описания того, что изображено на картинке. Мы можем свести все это к трем правилам, которым вы должны следовать на практике.
3 ПРАВИЛА ТЕГОВ ALT.
1. Будьте описательны и конкретны.
Alt-текст всегда должен как можно подробнее описывать содержимое изображения.
Чем конкретнее вы можете описать изображение, тем лучше, так как это поможет ему ранжироваться в Google Image Search и даст представление о том, как оно связано с содержанием вашей страницы.
2. Быть релевантным.
Alt-теги не являются местом для спама точных ключевых слов и должны использоваться для описания того, что именно изображено на картинке.
Альт-теги должны быть абсолютно релевантными.
Старайтесь писать alt-текст, который описывает изображения таким образом, чтобы они относились к теме страницы, на которой находятся, особенно если изображение имеет общий характер и не так специфично, как другие.
3. Быть уникальным.
Не используйте основное целевое ключевое слово вашей страницы в качестве alt-тега для каждого изображения на странице.
Всегда пишите уникальный alt-текст, который описывает конкретное содержание изображения, а не повторяет содержание другого.
Но как выглядит хорошо оптимизированный alt-текст на практике?? Давайте напишем его для этого изображения двух котят:
Описательный, релевантный и уникальный тег alt может выглядеть следующим образом:
Это описательный текст для поисковых систем и устройств чтения с экрана, включающий ключевые слова.
Как добавить alt-теги на популярных платформах веб-сайтов.
На некоторых платформах для веб-сайтов уже настроены параметры alt-текста; вам просто нужно получить к ним доступ.
Как добавить Alt-текст к изображениям на WordPress.
Если вы используете WordPress, то добавить alt-текст к изображениям очень просто.
Просто щелкните на изображении в окне редактора, и вы увидите поле для этого на вкладке «Настройки изображения».
Или же щелкните на изображении из медиатеки, и вы увидите опции здесь, также.
Как добавить Alt-текст к изображениям на Shopify.
Если вы используете Shopify, вы можете добавить alt-текст как к изображениям темы, так и к изображениям товаров.
Чтобы оптимизировать alt-текст на изображениях товаров, перейдите в раздел Продукты > Все продукты и нажмите на список продуктов, который вы хотите отредактировать.
На странице подробностей о товаре щелкните на медиа-элементе и найдите страницу предварительного просмотра медиа. Теперь вы можете нажать на кнопку, чтобы добавить текст alt.
Чтобы добавить alt-текст к изображениям темы, перейдите в раздел Интернет-магазин > Темы и нажмите настроить тему вашего магазина'.
В левой части страницы вы увидите меню разделов, в котором можно выбрать блоки изображений, а затем отдельные изображения.
Вы увидите текстовое поле, в которое можно добавить текст alt.
Как добавить Alt-текст к изображениям на Magento.
Добавить alt-текст к изображениям в магазине Magento очень просто.
Для этого перейдите в раздел Каталог > Продукты, выберите продукт, к которому вы хотите добавить alt-текст, и прокрутите страницу до раздела «Изображения и видео».
Нажмите на изображение, и вы сможете отредактировать текст alt.
Image Credit: 121 eCommerce.
Как добавить альт-текст к изображениям на Wix.
Не так давно вы не могли добавить alt-текст к изображениям в магазине Wix. Но за последние годы платформа вложила ресурсы в исправление распространенных SEO-разочарований, и теперь редактирование alt-текста стало возможным.
Вы можете добавить alt-текст к изображениям в окне редактирования, щелкнув по изображению, к которому вы хотите добавить alt-текст, и открыв опции настроек.
Здесь вы увидите опцию 'Что'находится на изображении?' и именно там вы можете добавить свой alt-текст.
Как изображения влияют на показатели PageSpeed.
Нередко при использовании инструмента Google PageSpeed Insights оптимизация изображений упоминается как один из основных способов улучшения показателей PageSpeed вашего сайта.
Большие изображения являются наиболее вероятным виновником здесь, и это имеет смысл.
Большие изображения загружаются дольше, а это, в свою очередь, замедляет время загрузки страницы.
Подробнее о том, как улучшить показатели PageSpeed, вы можете прочитать в этом руководстве.
7 советов по оптимизации изображений: За пределами Alt Text.
Оптимизация изображений должна выходить далеко за рамки простого добавления alt-тегов.
Существует ряд вещей, которые вы можете сделать, чтобы улучшить общую органическую производительность вашего сайта, а также оптимизировать изображения для более высокого ранжирования в Google Image Search.
Многие проблемы возникают из-за того, что вы просто загружаете необработанные изображения на свой сайт, не проделав предварительно небольшую работу, что никогда не является хорошей идеей.
Вот 7 наиболее эффективных советов по оптимизации ссылок, которые вы можете использовать:
1. Правильно называйте свои изображения.
Google публикует руководство по лучшим практикам использования изображений, и один из самых простых выводов из него заключается в том, что вы должны убедиться, что используете описательные имена изображений.
В качестве примера можно привести использование " jordan-air-1-mid-front.jpg лучше, чем IMG00353.JPG ."
Когда вы экспортируете изображения с камеры или смартфона (или даже делаете снимок экрана), им присваиваются общие имена файлов. Не загружайте изображение с именем файла, которое он дал по умолчанию. Вместо этого дайте ему описательное имя, которое поможет создать контекст того, что на нем изображено, и разделяйте слова тире, а не подчеркиванием.
Сделайте эту задачу частью своего контрольного списка при загрузке изображений.
Если вы уже загрузили изображения на страницу, обновите имена файлов, чтобы они были описательными. Это не займет много времени и будет полезно.
2. Изменение размера изображений в соответствии с размерами дисплея.
Другая распространенная проблема с изображениями заключается в том, что файл изображения намного больше в пикселях, чем изображение, которое используется на вашем сайте.
Например, основная камера iPhone X создает изображения размером 4032px x 3024px.
Но, допустим, максимальная ширина, с которой это изображение будет отображаться на вашем сайте, составляет 600px.
Разница в размере файла между изображением шириной 4032px и 600px значительна, а использование нескольких изображений, превышающих размер отображения, может быстро привести к значительному увеличению размера файла страницы.
Обязательно изменяйте размер изображений до максимального размера, который они могут отображать.
Если вы используете WordPress, вы можете использовать такой плагин, как Resize Image After Upload, который поможет вам сделать это. В противном случае можно изменить размер изображения в Photoshop, а также с помощью такого инструмента, как Canva.
Вы также должны убедиться, что изображения масштабируются отзывчиво с помощью CSS.
3. Уменьшение размера файлов изображений.
Один из самых простых способов уменьшить размер файлов изображений — изменить их размер до максимальных размеров, но это не единственный способ.
Фактически, это то, что рекомендует Google в своем руководстве по оптимизации изображений:
Для достижения наилучших результатов экспериментируйте с различными настройками качества для ваших изображений и не бойтесь снижать качество — визуальные результаты часто очень хороши, а экономия размера файлов может быть довольно значительной. — Google.
Как можно уменьшить размер файлов ваших изображений?
С помощью одного из трех рекомендуемых Google инструментов с открытым исходным кодом:
Gutezli MozJpeg pngquant.
Но если вы не знакомы с использованием таких инструментов или хотите более быстрое веб-решение, вы можете использовать такой инструмент, как Optimizilla, который позволит вам сжать ваши изображения.
Или, если вы используете WordPress, попробуйте плагин Smush.
4. Создайте файл Sitemap изображений.
Если вы серьезно настроены на то, чтобы Google обнаружил все изображения на вашем сайте и нашел их в Google Image Search, вам следует создать специальную карту сайта, включающую URL всех изображений.
Проще говоря, создание карты сайта с изображениями повышает вероятность появления ваших изображений в результатах поиска, и хотя вы можете ссылаться на изображения в существующей карте сайта, обычно имеет смысл создать специальную карту, которую смогут использовать поисковые системы.
Вот пример, который приводит Google, чтобы помочь вам понять, какой формат вам нужно использовать.
Существует одно ключевое отличие при создании карты сайта изображений от создания карты, включающей ваши веб-страницы.
Как говорит Google, "Ситемы изображений могут содержать URL-адреса из других доменов, в отличие от обычных ситем, в которых действуют междоменные ограничения. Это позволяет использовать CDN (сети доставки контента) для размещения изображений."
И это приводит к пониманию того, почему вы должны размещать изображения на CDN.
5. Размещение изображений на CDN.
Чаще всего весь веб-сайт размещается на одном сервере.
Но давайте представим сценарий, когда сайт размещен в США, но посещает его пользователь из Европы.
Активы, такие как изображения, должны будут пройти большее расстояние до пользователя в Европе, что замедлит время загрузки страницы.
CDN (сети доставки контента) работают путем кэширования изображений вашего сайта на нескольких серверах в разных точках мира, что означает, что они могут быть переданы пользователю из ближайшего к нему места.
Вы можете легко настроить CDN на WordPress с помощью таких плагинов, как W3 Total Cache, а для дальнейшего руководства вы найдете полезные руководства по интеграции от каждого провайдера, как, например, это от Cloudflare.
Мы также рекомендуем вам ознакомиться с нашим руководством по обязательным SEO-практикам для CDN.
6. Внедрите ленивую загрузку.
Мы не можем игнорировать тот факт, что изображения обычно являются активами на странице с самым большим размером файлов и, следовательно, причиной медленной скорости сайта.
Мы не можем просто обойтись без изображений; это не вариант, потому что они слишком важны для обеспечения отличного пользовательского опыта.
Но мы можем использовать ленивую загрузку, чтобы отложить загрузку изображения до тех пор, пока оно не понадобится.
Ленивая загрузка означает, что ресурсы не загружаются до тех пор, пока они не понадобятся. Это означает, что страница загружается гораздо быстрее, когда пользователь впервые попадает на нее. И это используется не только для изображений; такие активы, как JavaScript, также могут быть загружены таким образом.
Подумайте об этом так — если пользователь никогда не прокручивает страницу вниз до второй половины, эти активы никогда не будут загружены. И это приносит заметное улучшение производительности.
Еще раз посмотрим, что говорит Google по этому поводу, наряду с тем, что ленивая загрузка является рекомендацией в PageSpeed Insights:
Ленивая загрузка может значительно ускорить загрузку длинных страниц, которые включают много изображений под сгибом, загружая их либо по мере необходимости, либо когда основной контент закончил загрузку и рендеринг. — Google.
Чтобы узнать, как реализовать ленивую загрузку на вашем сайте, ознакомьтесь с этим руководством.
7. Использование кэширования браузера.
В Google PageSpeed Insights часто можно увидеть рекомендации по использованию кэширования браузера.
Проще говоря, браузерное кэширование — это когда файлы сохраняются в браузере посетителя, что означает, что при следующем посещении страницы они загружаются быстрее.
Когда вы посещаете страницу, изображения загружаются, а затем отображаются в браузере. Без кэширования браузера при следующем посещении страницы все эти изображения придется загружать снова. Но с кэшированием браузера они уже будут сохранены, а значит, страница загрузится гораздо быстрее.
Кэширование браузера заметно влияет на сайты, где пользователи часто посещают одни и те же страницы.
Подробнее о том, как Google рекомендует использовать кэширование, вы можете узнать здесь.
Если вы используете WordPress, один из популярных плагинов кэширования поможет вам быстро реализовать эту функцию. Если нет, то это руководство от GTmetrix поможет вам в этом.
Оптимизация изображений и обновление Google's Page Experience Update.
Недавно Google объявил, что в 2021 году будет выпущено обновление Page Experience Update.
Это обновление будет учитывать ряд существующих факторов ранжирования, включая штраф за безопасный просмотр, штраф за навязчивые интерстиции, HTTPS как фактор ранжирования, обновление mobile-friendly, обновление Page Speed и Core Web Vitals.
Если вы пропустили объявление, это означает, что, по определению Search Engine Land, "При прочих равных условиях это обновление означает, что Google с большей вероятностью будет ранжировать ваши страницы выше, если они обеспечивают хороший пользовательский опыт."
Но как это связано с оптимизацией изображений?
Во-первых, вы заметите, что Core Web Vitals является одним из факторов, которые будут приняты во внимание, и это включает в себя LCP — Largest Contentful Paint. По сути, это показывает, насколько быстро загружается страница; когда пользователь считает, что страница загрузилась.
LCP рассчитывается Google по времени отображения самого большого элемента контента на странице, а это часто изображения.
CLS (Cumulative Layout Shift) — это еще одно основное свойство Web Vital, и это то, что происходит, когда контент продолжает двигаться, даже когда страница, кажется, полностью загружена. Проще говоря, это можно оптимизировать, включив атрибуты размера для ваших изображений (и видео).
Но, наконец, мы должны помнить, что обновление Page Experience Update также учитывает скорость страницы, и мы видели выше, как изображения могут влиять на это.
Поиск проблем с изображениями вашего сайта.
Мы рассмотрели, как можно оптимизировать изображения на сайте, но как найти проблемы, которые уже существуют на вашем сайте??
Для выявления этих проблем можно использовать инструмент аудита сайта SEMrush. Вкладка «Проблемы» аудита сайта — это, пожалуй, самый быстрый способ начать работу, показывающий следующие проблемы:
Сломанные внутренние и внешние изображения.
Неработающие изображения ухудшают пользовательский опыт; вам следует в первую очередь исправить все изображения, которые не отображаются.
Инструмент аудита сайта четко выделит все неработающие изображения на вашем сайте, и вы сможете либо обновить неверные URL-адреса, либо заменить изображение.
Аудит также выделит все неработающие внешние изображения, и лучшей практикой здесь будет замена этого изображения, учитывая, что вы не можете контролировать источник.
Изображения без атрибутов Alt.
Мы уже говорили о важности оптимизированного alt-текста для ваших изображений, и в отчете об аудите сайта будет представлен список всех изображений на вашем сайте, которые в настоящее время не имеют таких текстов.
В конечном итоге это облегчает работу по добавлению alt-текста, предоставляя вам список для работы на каждой странице.
Серьезное отношение к SEO изображений для удобства пользователей и поисковых систем.
Уделяя время правильной оптимизации изображений, вы можете оказать заметное влияние на трафик вашего сайта' из поиска по изображениям, а также улучшить впечатления пользователей' за счет более быстрого времени загрузки.
Не стоит забывать, что оптимизация имен файлов изображений и тегов alt также помогает обеспечить контекстную релевантность остальной части вашей страницы, улучшая в результате органическую видимость страницы.
Многие SEO-специалисты упускают из виду оптимизацию изображений, но с учетом обновления Google' Page Experience, которое произойдет в следующем году, никогда еще не было лучшего времени, чтобы сделать это приоритетным.
UPDATE: С 5 августа 2020 года в структурированных данных можно использовать все форматы изображений, поддерживаемые Google Image, включая BMP, GIF, JPEG, PNG, WebP и SVG. Узнайте больше здесь.
