Заполняем атрибут ALT или как подписывать изображения на коммерческом сайте

69.5К просмотров

Часто владельцы коммерческих проектов пренебрегают таким источником трафика, как поиск по изображениям. Кто-то случайно закрывает изображения от индексации в robots.txt, другие забывают подписать фотографии товаров, третьи используют малоинформативные подписи типа общих фраз или просто слово “фото”. Предлагаю исправить эту ситуацию и оптимизировать подписи, так как это может дать, пусть и не большой, но дополнительный целевой трафик.

Если мы говорим о коммерческих сайтах, то человек пришедший из поиска по изображениям не обязательно имеет информационный интент. Часто эти люди имеют коммерческий интент, просто не знают, как выглядит тот или иной товар/изделие (например, запросы “нож для резки линолеума” или “samsung 4220 картридж”) или ищут модель по понравившейся фотке (пример запросов из практики: “стульчик для кормления”, “домашний телескоп”).

Чтобы получать весь этот трафик, первое, о чем нужно позаботиться – рассказать поисковым системам, с помощью атрибута ALT, что изображено на картинке, но в тех словах, как это искали бы ваши клиенты.

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

1. “Фото 1” — Неудачный вариант, так как совсем не описывает изображение, а имеет чисто технический характер. Также отсутствие содержательного текста плохо сказывается на индексации изображений (см. подробнее в хелпе Яндекса).

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

3. “Шапка вязаная” — уже лучше, эта надпись сможет привлечь нужных людей. Но у вас на сайте может быть много вязаных шапок, да и лучше описать изображение немножко подробней.

4. “Вязаная шапочка Huppa Bros” — оптимальный вариант, так как имеется название фирмы изделия, а также слово “шапочка” лучше отражает размер. Если на сайте есть подобные шапочки разных цветов, то можно в ALT добавлять в том числе цвет.

5. “Вязаная шапка Huppa Bros, детская шапка, шапочка для ребенка Huppa Bros, желтая вязаная шапочка отзывы” — не занимайтесь ерундой переоптмизацией. В наше время за такие тексты можно получить санкции от поисковых систем, плюс такое описание в ALT не даст больших преимуществ сайту, если у вас большой ассортимент.

Как подписывать изображения

Какие общие принципы подписей изображений можно выделить из приведенного выше примера?

— Краткое и правдивое описание изображения.

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

— Длина не менее 3-4 слов и не более 250 символов.

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

— Наличие важных ключевых слов.

Аналогично заголовкам h2 и TITLE, атрибут ALT должен содержать важные для продвижения этого изображения (не целевой страницы) ключевые фразы.

— Отсутствие спама.

Переоптимизированные и заспамленные альты могут стать причиной наложения санкций, как от Яндекса, так и от Google. Поэтому, не надо вставлять в ALT все нужные вам ключевые слова, ограничивайтесь самыми необходимыми и наиболее точно описывающими изображение. Также не нужно добавлять в альты слова “купить”, “отзывы” или “цена” (если это конечно не скриншот отзывов или прайса), но можно использовать слово “фото”.

— Пустые альты для декоративных изображений.

Если какие-то картинки на сайте являются частью дизайна – логотипы, кнопочки и стрелочки, а также другие декорации, для них лучше использовать пустые теги ALT. Некоторые умудряются и сюда вставлять ключевики, но это бесполезно. Оптимальным решением будет вообще вынести подобные изображения в CSS-спрайты.

Тут больше нечего добавить, разве что уделить внимание нескольким моментам.

Несколько фотографий одного и того же товара

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

Как поступать с подписью в таком случае? Самый простой вариант – оставить одно и то же описание для всех фото. Это нормальный и часто используемый случай. Поисковику важней уникальность самих фото, и понятно, что на фотографиях карточки товара скорей всего изображено одно и то же, то есть, описывать подробней смысла нет. Разве что добавить к основному тексту: “вид 1”, “вид 2” и так далее.

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

Много похожих товаров

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

Как поступить с описаниями изображений в этом случае? Как и в предыдущем пункте, здесь можно использовать один и тот же ALT, например, “Юбка джинсовая детская”, так как тут сложно описать картинку подробней. Google и Яндекс уже будут показывать разные фото с одного сайта с учетом их уникальности и общего числа хороших фоток в сети на эту тему (конкуренции). Для названий/заголовков стоит тратить время, чтобы сделать их уникальными для каждой юбки, добавить бренд, цвет, наличие каких-то фишек или другие характеристики, но для тега ALT в данном случае это не так важно.

Категории vs карточка товара

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

Здесь аналогичная ситуация, ALT картинки в категории можно оставлять таким же (так чаще всего делает большинство интернет-магазинов), как и на карточке товара. А уже в зависимости от запроса, поисковик покажет наиболее релевантный документ.

Например, по запросу “шапка huppa” Google в поиске по изображениям выведет желтого мальчика с ссылкой на категорию сайта /huppa. Но если мы добавим в запрос название модели “шапка huppa bros”, то отобразиться тот же мальчик, но уже с ссылкой на более релевантную запросу страницу карточки товара /huppa-vyazanaya-shapka-bros-8337-047.

Атрибут ALT важен только для поиска по изображениям или для органики также?

Атрибут ALT для тега IMG играет большую роль в поиске по изображениям, как в Google, так и в Яндексе. А помогает ли он для ранжирования в обычных органических результатах поиска? Судя по данным проведенных экспериментов, Google использует ALT как обычный текст, и если вы здесь используете уникальные ключевые слова, то по ним также будет находиться документ с картинкой. Что касается Яндекса, этот атрибут игнорируется при органическом поиске.

Другими словами, оптимизация альтов не повлияет на трафик из органики в Яндексе (разве что косвенно), но может повлиять на веб-трафик из Google.

А что на счет тайтла?

Атрибут изображения TITLE учитывается только Яндексом при поиске по изображениям (исходя из того же эксперимента), и нигде не учитывается гуглом. Его лучше использовать для юзабилити, чем для подписей изображений, так как написать туда что-то отличное от ALT будет сложно, если на сайте имеются тысячи картинок. Другими словами, я бы рекомендовал либо не использовать title=”“, либо дублировать его вместе с alt=”“, или же заморочиться и прописать уникальные тайтлы для изображений, отличные от альтов, но также красиво, коротко и емко описывающие фотки, но на мой взгляд последний вариант это лишнее.

А какие описания ALT используете вы?

Атрибуты alt и title картинок

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

Что такое alt и title картинки

Традиционно в начале начнем с определения, чтобы было понятно, о чем идет речь.

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

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

Правила заполнения title

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

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

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

• Информация в параметре должна соответствовать изображению. Посудите сами: наводя курсор на картинку, пользователи ожидают увидеть какие-то комментарии именно по поводу изображения. Ненужная и обманывающая их ожидания информация будет отталкивать посетителей;
• Нужно знать меру. Длинные подсказки, написанные в несколько строк мелким шрифтом и норовящие исчезнуть при любом перемещении курсора, читать очень утомительно. Поэтому текст title всегда должен быть небольшим, дающим быстро понять пояснение;
• Желательно присутствие в title ключевого слова. Поисковые системы это вряд ли заметят, зато пользователи будут довольны, в очередной раз убедившись, что сайт соответствует их запросу, он удобен и понятен, а это прямой путь к улучшению поведенческих факторов, о которых мы поговорим в ближайших публикациях;

Важным аспектом является то, что title изображения должен быть уникален. Не стоит заполнять заголовки (и не только title) и текст alt одной и той же информацией. Полностью изменять каждый из них не требуется, но можно хотя бы разбавить их содержимое синонимами.

Особенности атрибута alt

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

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

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

• При проблемах с отображением изображений в браузере. Такие ситуации случаются редко, но забывать о них не стоит. Вместо картинки на странице будет висеть обычная иконка незагруженного изображения с текстом, записанным в параметр alt. Именно поэтому он так и называется: «alt» — сокращение слова «alternative». Благодаря информации заполненной в alt пользователь сможет хотя бы примерно понять, что изображено на картинке, которую он не может в данный момент увидеть;
• В описании картинки, найденной через поиск изображений. Именно поэтому продвижение в «поиске по картинкам» требует правильного содержимого атрибута alt.

Строгих ограничений тут нет, однако стоит помнить несколько закономерностей:

• Параметр alt должен подходить по смыслу содержания изображения и тексту, к которому оно относится;
• Длину текста стоит держать в рамках от 10 до 250 символов. Слишком короткие тексты малоэффективны для поискового продвижения, а слишком большие будут отпугивать посетителей;
• В alt не стоит употреблять много ключевых слов. Ключевые слова — дело хорошее, но если их слишком много в одном месте, то поисковые роботы считают это спамом и могут наложить на сайт санкции вплоть до исключения его из выдачи по ключевым запросам;
• Используйте один из главных ключей (можно приправить его парой второстепенных, но, опять же, важно знать меру!) и впишите его в текст как можно более естественно. Также можно взять текст из атрибута title и немного его изменить, чтобы не было дублирования: правила по употреблению ключевых слов в этих атрибутах одинаковы;

Помните еще одно правило, нельзя употреблять слова, коммерческой направленности для всех видов сайтов. В тексте alt нет места словам вроде «стоимость», «оформить», «купить» и т.д., исключение если только само изображение не лишает Вас выбора (например, если это меню ресторана).

Краткие выводы

Атрибут title:

• Необязателен для заполнения;
• Влияет на поисковое продвижение, но только на уровне поведенческого фактора;
• Служит для повышения удобства пользования страницей.

Атрибут alt:

• Напрямую влияет на продвижение сайта, так как учитывается поисковыми системами;
• Даёт возможность найти сайт через поиск по изображениям;
• Улучшает релевантность страницы ключевым запросам;
• Даёт посетителю ознакомиться с дополнительным описанием изображения, если оно по каким-то причинам не отобразилось.

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

Атрибуты alt и title у картинок

– Автор: Игорь (Администратор)

В рамках данного обзора, я расскажу вам о том что такое атрибуты alt и title, а так же каковы особенности их применения.

Раньше скорость интернета была весьма низкой и поэтому картинкам требовались специальные пояснительные описания. Например, на случай если изображения не загрузятся или же их загрузка отключена в настройках браузера (в целях экономии размера страницы). Поэтому в стандарте html для тега img были предусмотрены атрибуты alt и title.

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

Но, обо всем по порядку.

Атрибут Alt картинок

Alt атрибут — это атрибут тега img, в котором содержится название картинки, отображаемое до ее загрузки.

Пример использования:

<img src="/[адрес картинки]" alt="[название картинки]" />

Как браузер использует атрибут alt тега img? Вначале загружается html разметка страницы. Для картинки выделяется специальная область. В этой области размещается текст из атрибута alt. Если картинка не загрузилась, то пользователь видит текст из атрибута. Если же картинка загрузилась, то вместо текста появляется изображение.

Сделано это для решения проблем с загрузкой картинок. Рассмотрим пример для понимания. Допустим, у сайта используется несколько картинок-кнопок. И так случилось, что они не были загружены браузером. Как пользователь поймет что ему необходимо нажать, например, для того, чтобы сохранить данные? Вот для этого и нужен атрибут alt, так как вместо картинок пользователь увидит названия кнопок и сможет, как говорится, сориентироваться на местности.

Как поисковые системы, такие как Яндекс или Google, используют атрибут alt тега img? Поисковик не может видеть картинку так, как ее видит человек (что изображено на ней и с чем связано). Поэтому он ориентируется по доступной текстовой информации, которая ее окружает, в том числе и по тексту из атрибута alt. Так, например, если картинка называется «милые котики», то поисковик отобразит ее для поискового запроса «милые котики», даже если там нарисованы цветы (почему так делать не стоит рассмотрим чуть позже).

Атрибут Title картинок

Атрибут Title — это атрибут тега img, в котором содержится описание картинки, отображаемое при наведении курсора мыши на картинку.

Пример использования:

<img src="/[адрес картинки]" alt="[название картинки]" title="[описание картинки]"/>

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

Как браузер использует атрибут title тега img? Суть в следующем. Когда пользователь наводит курсор на картинку, то ему отображается текст из title (простыми словами, это банальная подсказка). Используется этот атрибут для разных целей. Например, если в title написан номер шага и краткое описание действия, то пользователю существенно проще ориентироваться в инструкции со множеством картинок.

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

Особенности alt и title у картинок

Рассмотрим особенности использования атрибутов alt и title у картинок.

1. Атрибут Alt является обязательным, а атрибут title нет. В принципе, это следует из основного стандарта html. Однако, в нынешнее время это в большей степени актуально для картинок основного контента, в целях сео продвижения (хотя и без этого сайты могут неплохо себя чувствовать), так как вероятность, что картинки не загрузятся, крайне низка.

2. Атрибуты alt и title не обязательно должны содержать разный текст. Может казаться, что текст атрибутов обязательно должен быть разным, но это не так. Так, например, если вы посмотрите картинки из ТОПа, то в одних текст одинаковый, а в других разный.

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

4. Описания не должны превышать 200-250 символов. Иными словами, не стоит в них засовывать полстраницы текста. В противном случае, либо картинка не проиндексируется, либо из текста будут взяты только первые несколько слов (а то и случайные). Кроме того, длинные тексты так же неудобны и пользователям.

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

6. Описания картинок могут совпадать. Если у вас в обзоре встречается несколько картинок, то совершенно не обязательно для каждой из них придумывать уникальное описание. Вполне можно ограничиться одним, максимум добавив цифры или нечто подобное (картинка 1, картинка 2 и т.д.). Поисковики прекрасно понимают, что изображения могут относиться к одним и тем же ключевым словам. Например, скриншоты какого-либо товара с разных ракурсов или же с разными цветами. Хотя во втором случае можно (и лучше) добавлять цвета к названию.

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

Надеюсь, рассказанная мной информация была для вас полезна! Подписывайтесь в социальных сетях и делайте репосты!

☕ Хотите выразить благодарность автору? Поделитесь с друзьями!

• Аудит сайта: что это такое и зачем нужно?
• Мета теги: Title, Description, Keywords

Добавить комментарий / отзыв

Роль тегов alt и title для изображений в оптимизации сайтов

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

Именно поэтому при добавлении графики в CMS важно обязательно прописывать предусмотренные HTML-атрибуты тега img, а именно alt и title. От них зависит, насколько эффективно индексируется ресурс поисковым роботом + они положительно влияют на прирост органического трафика. А это в свою очередь, хорошо отразится и на росте прибыли и на увеличении рентабельности.

Что такое теги alt и title

Во избежание путаницы сразу нужно обратить внимание на то, что под терминами «тег alt» и «тег title» на самом деле понимаются атрибуты, присущие HTML-тегу «img», используемому для размещения иллюстраций на веб-странице с помощью языка разметки.

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

Теперь обратимся непосредственно к синтаксису. Полный код картинки выглядит следующим образом:

<img src="путь_к_файлу_картинки" alt="замещающий текст" title="описание" />

<img src=»путь_к_файлу_картинки» alt=»замещающий текст» title=»описание» />

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

Альтернативный текст (alt) необходим для того, чтобы описать картинку словами и объяснить, какую функцию эта иллюстрация выполняет в статье. Кроме того, если пропускная способность канала интернет-связи слишком низкая, при загрузке страницы первоначально вместо графики в статье высвечивается именно этот текст. К примеру, если в коммерческом вебсайте используется кнопка-картинка «Купить», то alt должен содержать что-то вроде «кнопка для покупки товара».

Тогда как в title находится фраза/слово, что отображаются на экране компьютера, если навести на изображение курсор мыши. Эту возможность хорошо использовать для увеличения конверсии в коммерческих нишах, вставив в тег дополнительный призыв для совершения действия, например: «Купите наш товар сейчас со скидкой 25%». Однако сообщение увидят только пользователи компьютеров, поэтому особого значения в его наличии нет.

В общем, если вам обязательно нужно донести до целевой аудитории посыл, который планируете добавить в поле title, лучше разместить его где-то в контенте в виде простого текста. Если же он и вовсе нерелевантен, — удаляйте. Иное дело альты — они обязаны присутствовать всегда: для помощи плохо видящим юзерам + SЕО.

Нулевой атрибут alt

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

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

Как alt влияет на SEO

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

Эта рекомендация не случайна. Поисковые роботы при просмотре сайтов большую роль уделяют значениям атрибутов alt. Именно по ним система определяет, соответствует ли размещенное изображение окружающей текстовой информации. Специалисты по SЕО при анализе перед оптимизацией обязательно проверяют, есть ли в alt’ах ключевые слова, по которым ведется продвижение.

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

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

По-другому заполняются данные атрибуты в веб-проектах коммерческих тематик, где используются фотографии реализуемых товаров (тех же интернет-магазинах). В этом случае в поле рекомендуется прописывать название изделия + идентификатор.

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

Заполнение атрибутов img в WordPress

При размещении статьи с помощью системы управления WordPress текст/графика добавляются в специальный редактор в таком виде, как они будут видны на сайте. Самостоятельно прописывать HTML код не нужно. Поля alt/title заполняются с помощью свойств изображения, которые открываются в отдельном окне.

Причем в некоторых случаях сама CMS автоматически прописывает в атрибут title имя файла и копирует его в alt. Если это случилось, то оставлять их в таком виде категорически не рекомендуется.

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

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

Плюс использования WordPress состоит в том, что для заполнения полей не требуется переключаться в режим отображения HTML-кода, искать там нужный тег и редактировать его. После загрузки картинки достаточно кликнуть на нее курсором, выбрать кнопку «редактирование» и в открывшемся окне ввести соответствующие значения (см.скриншот выше). Даже ленивый контент-менеджер способен совершить эти несложные действия.

Итого. Заполнение атрибутов title и alt у тега img – важный, но далеко не единственный способ оптимизации картинок на сайтах. Можете еще почитать пост про XML Sitemap для изображений. Также важно позаботиться и об оптимизации самих графических файлов дабы страница с ними быстрее загружалась в браузере пользователя. Однако об этом вы узнаете из других публикаций.

Атрибут alt для картинок

От автора: атрибут alt для картинок позволяет задать текст, который появится у пользователя, если у него отключен показ этих самых картинок. Но это далеко не все, что вы должны знать о нем. Давайте подробнее разберемся, на применять этот атрибут.

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

Очевидно, что если ввести его некорректно, ничего вы на экране не увидите. Короче, для вывода картинки вам всего-то нужно в нужном месте html-кода писать это:

<img src = «путь к изображению»>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

Влияние alt в SEO

Ох, сколько споров на СЕО-форумах я видел о том, влияет ли заполнение атрибута на улучшение ранжирования сайта и его отдельных статей в поиске. Можно с уверенностью сказать, что сегодня все осталось по-прежнему. Кто-то считает, что заполнение alt помогает в поисковой оптмизации, кто-то – что абсолютно никак это не влияет.

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

Знаете, заполнение alt я бы сравнил с кроссбраузерной версткой (если кто понимает, о чем речь). Это когда сайт адаптируется под все популярные браузеры. Если у самых важных картинок на вашем сайте вы будете заполнять этот атрибут, вы сделаете свой проект хотя бы на чуть-чуть, но лучше. Также вы сделаете свой проект немного доступнее для людей.

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

Как заполнять alt?

А вот это самое важное, на мой взгляд. Если вы читали мои прошлые статьи по СЕО, то наверняка уже там не раз слышали, что поисковики любят естественность. Соответственно, идеальным заполнением атрибута будет максимально точное и короткое описание картинки. Как правило, 30-100 символов достаточно. При этом максимальная длина должна быть примерно 250 символов. Но зачем вам так подробно описывать изображение?

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

Итак, давайте подытожим основное по заполнение alt:

Нужно максимально просто и коротко описать картинку

Если вы и вставляете ключевую фразу, делайте это всего 1 раз и так, чтобы выглядело естественно

Для остальных картинок заполнение alt по вашему личному желанию

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

Из этих трех вариантов оптимальными являются первый и второй. То есть тут есть 2 решения: либо вообще никогда не трогать alt, либо заполнять его максимально естественно.

Заполнять alt или нет? Зависит от сайта

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

Соответственно, для каждого товара в интернет-магазине разумно прописать alt. Давайте как раз разберем на примере, как сделать это грамотно. Допустим, у нас есть товар – ноутбук ASUS G560 (не ищите в поиске, название я выдумал). Естественно, есть фото этого ноутбука. Как прописать для нее альтернативный текст? Вот варианты:

“Фотография”, 1, “ыыавпв” и прочее – это все варианты, которые никак не годятся. По такому описанию абсолютно непонятно, о каком товаре речь. Текст “фотография” или “картинка” (так часто подписывают фото) вообще самый забавный, ведь люди и так понимают, что это не видео. Это все равно что на слона повесить табличку, где написать, что он слон.

“Крутой красный ноутбук для игр” – это неплохое описание, если ноутбук действительно является игровым. Но если вы целитесь на трафик с картинок, то такое описание не является самым оптимальным, так как подобную фразу я в поиске набирает 0 человек. Люди чаще набирают названия конкретных моделей или хотя бы производителя.

“Ноутбук” – описание, которое можно охарактеризовать так: лучше, чем ничего. Но тоже не оптимально, так как нет конкретики. Не будете же вы каждый товар подписывать так? Описание должно быть уникальным для каждого отдельного ноутбука.

“Ноутбук ASUS G560” – оптимальный вариант, есть конкретное описание. Возможно, если товар присутствует в разных цветах, можно дописать и цвет, а также слова, которые часто используют при описании ноутбуков: для офиса, мощный, игровой и т.д.

“Ноутбук ASUS G560, купить в Москве с доставкой, отзывы” – похоже на спам, правда? Это самый плохой вариант из всех.

Итог

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Прописать атрибут alt для картинок, как заполнять и что он значит

Alt (в русской транслитерации «альт») — это признак тега, который используют для описания изображений. Этот атрибут позволяет указать иное текстовое описание, которое позволит пояснить содержание графических вложений.

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

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

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

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

Как используются ALT-теги в SEO?

Они важны, потому что без них Google (а также Bing, Yahoo и другие поисковые системы) не может интерпретировать визуальный контент, кроме сканирования имен файлов изображений по ключевым словам. Люди с ослабленным зрением также не смогут понять графическое содержимое вашего сайта, что делает эту важную проблему UX, которую необходимо решать для всех изображений и графики.

Пример

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

Вот как это выглядит в виде исходного кода (внимательно посмотрите на тег alt = «Тринадцать интерактивных примеров контента, которые заинтересуют вашу аудиторию»):

Вот еще один взгляд на HTML:

4 совета по написанию тегов ALT

1) Создайте описательные теги ALT

Теги ALT должны быть как описательными, так и полезными. Теги ALT должны содержать достаточно информации, чтобы люди, которые не видят изображения, могли понять, что они представляют. При написании тегов ALT спросите себя, понимаете ли вы важность тега ALT, если бы вы не видели изображение.

2) Используйте короткие теги ALT

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

Например:

Этот тег ALT недостаточно информативен для изображения:

Alt = 2 кролика

Этот тег ALT слишком длинный для изображения:

Alt = серый кролик слева и белый кролик с красными глазами справа, лежащий в траве с желтыми цветами вокруг них

Это прекрасный пример тега ALT для этого изображения:; ;

Alt = серый и белый кролик, лежащий в траве

3) Используйте ключевые слова в тегах ALT

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

Вот прекрасный пример наполнения ключевыми словами (НЕ ДЕЛАЙТЕ ЭТО):

Alt = синяя мужская рубашка с коротким рукавом, голубая футболка

4) Не пишите теги ALT только для SEO

Теги ALT должны быть написаны с учетом интересов пользователя. Не сосредотачивайтесь исключительно на SEO и поисковых системах. Помните, что текст в теге ALT должен соответствовать изображению и содержимому страницы. Наполнение тегов ALT ключевыми словами, скорее всего, повредит вашему рейтингу в поисковых системах, а не поможет ему, поскольку вас могут рассматривать как спам. Наряду с наполнением ключевыми словами использование одних и тех же тегов ALT и ключевых слов для нескольких изображений может показаться спамом. Каждое изображение должно иметь уникальный тег ALT.

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

Назначение ALT и TITLE картинки — SEO-оптимизация изображения

Как оптимизировать изображения

Альтернативный текст (альтернативный текст) описывает изображение на веб-странице. Он находится в коде HTML и обычно не отображается на самой странице.

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

В этом руководстве вы узнаете:

Почему так важен замещающий текст?

Альтернативный текст имеет значение по четырем основным причинам.

1. Улучшает доступность
2. Может улучшить «актуальность темы»
3. Может помочь вам занять место в Картинках Google
4. Служит в качестве якорного текста для ссылок на изображения

1.Альтернативный текст улучшает доступность

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

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

Google говорит о важности альтернативного текста для пользователей с программами чтения с экрана в своем руководстве для начинающих по SEO.

2. Альтернативный текст может улучшить «актуальность»

Google просматривает слова на странице, чтобы понять, о чем они говорят.

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

Как это относится к изображениям?

Потому что иногда контекст «заперт» в изображениях, которые Google не может прочитать.

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

3. Альтернативный текст может помочь вам занять место в Google Картинках

Google Images — вторая по величине поисковая система в мире. На его долю приходится 20,45% всех поисковых запросов в Интернете, что позволяет ему опережать YouTube, Bing и другие поисковые системы вместе взятые.

Это означает, что есть возможность привлекать трафик из Картинок Google.

Достаточно взглянуть на количество кликов, которые мы получили на блог Ahrefs из Google Images за последние три месяца:

Sidenote.

Джон Мюллер из Google говорит, что замещающий текст — важная часть оптимизации для Google Картинок:

Замещающий текст чрезвычайно полезен для Картинок Google — если вы хотите, чтобы ваши изображения занимали там место. Даже если вы используете ленивую загрузку, вы знаете, какое изображение будет загружено, поэтому получите эту информацию как можно раньше и проверьте, как оно отображается.- 🍌 John 🍌 (@JohnMu) 4 сентября 2018 г.

4. Альтернативный текст служит в качестве текста привязки для ссылок на изображения

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

Но не все ссылки являются текстовыми; некоторые — изображения.

Google сообщает:

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

Как добавить замещающий текст к изображениям

Просто добавьте атрибут alt к тегу в HTML-коде.

Изображение с тегом alt:

alt = «steak and ale pie» >

Если вы используете современную CMS, вы можете добавить альтернативный текст, не копаясь в HTML-коде.

Например, в WordPress есть поле для замещающего текста при добавлении изображения на страницу или сообщение:

В других CMS все похоже.

Вот инструкции для некоторых из самых популярных:

Следует ли добавлять замещающий текст ко всем изображениям?

Нет, это распространенное заблуждение.

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

Например, на некоторых веб-сайтах есть значки для разделения контента:

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

То же самое касается обычных или стоковых изображений, например:

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

Но вот важный момент…

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

Вот как это выглядит:

Подробнее читайте в этом руководстве от WebAIM.

Как написать хороший альтернативный текст

Альтернативный текст — это не ракетостроение.

Следуйте этим пяти рекомендациям, и у вас все получится.

• Будьте лаконичны . Длинный замещающий текст раздражает тех, кто использует программы чтения с экрана. Используйте как можно меньше слов. (Используйте атрибут longdesc, если необходимо длинное описание.)
• Будьте точны. Сосредоточьтесь на описании изображения.
• Избегайте переполнения ключевыми словами. Это не место для ключевых слов.
• Не говорите, что это изображение. Нет необходимости включать в описания «Изображение…» или «Изображение…». И Google, и программы чтения с экрана могут решить это сами.
• Избегайте избыточности. Не повторяйте информацию, которая уже существует в контексте изображения. Например, если у вас есть фотография Стива Джобса, а текст прямо под изображением гласит «Стив Джобс», нет необходимости добавлять это описание в тег alt.Google должен понимать, что заголовок фактически является замещающим текстом.

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

Хорошие и плохие примеры замещающего текста

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

Плохо:
Хорошо :
Хорошо :
Лучшее :

Плохо :
Хорошо :
Хорошо :
Best :

Плохо :
Хорошо :
Хорошо :
Best :

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

Как найти и исправить проблемы с атрибутами alt

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

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

Например, обратите внимание на эти недостающие атрибуты alt:

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

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

Для этого есть две причины:

1. У них есть читатели для слабовидящих. 2,4% граждан США имеют инвалидность по зрению. Это примерно один из каждых 42 человек. Это означает, что в среднем, если вашу страницу посещают 10 000 посетителей в месяц, 240 из них не могут правильно использовать ваш контент.
2. Они могли бы получить больше трафика. Альтернативный текст может повысить рейтинг изображений в Картинках Google, что приведет к увеличению посещаемости. Даже всего лишь 1% -ное увеличение страницы с 10 000 посещений в месяц — это еще 100 посетителей.

Вот процесс:

Шаг №1.Найдите наиболее посещаемые страницы в обычном поиске

Проверьте Google Analytics, Google Search Console или отчет «Самые популярные страницы» в Site Explorer Ahrefs.

Шаг 2. Проверьте свои атрибуты alt

Установите бесплатное расширение Chrome Alt Text Tester, загрузите страницу с наибольшим объемом трафика, затем активируйте расширение.

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

Если атрибут alt отсутствует, вы увидите предупреждение.

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

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

… в то время как то же самое не относится к этой странице в The Mirror:

Step # 3. Повторите этот процесс для других страниц

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

Поскольку большинство веб-сайтов направляют большую часть своего трафика на несколько страниц, это не займет много времени.

Например, всего на десять сообщений в блоге Ahrefs приходится 51% ежемесячного органического трафика…

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

Заключительные мысли

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

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

7 советов по расширенной оптимизации изображений

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

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

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

Часто проблема в том, что руководства по SEO для новичков охватывают только основы, а это означает, что оптимизация тегов alt — это почти все, что когда-либо упоминалось.

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

И давайте посмотрим правде в глаза, кто не использовал его как способ просматривать фотографии котят ?!

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

В этом руководстве по поисковой оптимизации изображений мы рассмотрим:

Почему изображения так важны?

Изображения помогают придать контекст вашему контенту.

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

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

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

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

Важный момент: Изображения следует выбирать с осторожностью.

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

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

Что такое SEO для изображений?

Более часто называемая оптимизацией изображений, SEO изображений — это улучшение изображений вашего сайта по двум основным причинам:

1. Для повышения рейтинга в поиске картинок Google.
2. Для улучшения общей видимости и оптимизации веб-страницы.

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

Один из вопросов, который часто задают в отношении SEO изображений, заключается в том, необходимы ли эти задачи по-прежнему, учитывая успехи Google в использовании ИИ и машинного обучения для распознавания изображений?

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

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

Тем не менее, поисковая оптимизация изображений часто останавливается на оптимизации тегов alt. И нельзя отрицать, что это важная часть процесса, но только один из них .

Тем не менее, понимание тегов alt и текста alt, а также их назначения является отличной отправной точкой.

Что такое альтернативные теги и замещающий текст?

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

Но какие они?

Вот как Мэтт Каттс объяснил это давным-давно, легко для понимания. (Мы все скучаем по Мэтту)

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

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

Они являются частью HTML-кода в теге изображения и выглядят следующим образом:

.

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

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

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

Как оптимизировать замещающий текст

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

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

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

3 ПРАВИЛА АЛЬТ-ТЕГОВ

1. Будьте описательными и конкретными

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

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

2. Будьте релевантными

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

Альтернативные теги должны быть абсолютно релевантными.

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

3. Будьте уникальными

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

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

Но как на практике выглядит хорошо оптимизированный замещающий текст? Давайте напишем один для этого изображения двух котят:

Описательный, релевантный и уникальный тег alt может выглядеть так:

alt = "два милых рыжих котенка спят с клубками шерсти"

Это является описательным для поисковых систем и программ чтения с экрана, включая ключевые слова.

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

Как добавить замещающий текст к изображениям в WordPress

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

Просто щелкните изображение в окне редактора, и вы увидите поле для этого на вкладке «Параметры изображения».

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

Как добавить замещающий текст к изображениям на Shopify

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

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

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

Чтобы добавить замещающий текст к изображениям темы, зайдите в Интернет-магазин > Темы и щелкните, чтобы настроить тему вашего магазина.

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

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

Как добавить замещающий текст к изображениям на Magento

Добавить замещающий текст к изображениям в магазине Magento действительно легко.

Для этого щелкните Каталог > Продукты, выберите продукт, к которому вы хотите добавить замещающий текст, и прокрутите до раздела «Изображения и видео».

Щелкните изображение, и вы сможете редактировать замещающий текст.

Кредит изображения: 121 eCommerce

Как добавить замещающий текст к изображениям на Wix

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

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

Отсюда вы увидите вариант «Что на изображении?» и здесь вы можете добавить свой альтернативный текст.

Как изображения влияют на показатели PageSpeed ​​

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

Скорее всего виноваты большие изображения, и это имеет смысл.

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

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

7 советов по расширенной оптимизации изображений: помимо альтернативного текста

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

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

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

Вот 7 наиболее эффективных советов по расширенной оптимизации ссылок, которые вы можете использовать:

1. Назовите свои изображения правильно

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

В качестве примера используется « jordan-air-1-mid-front.jpg лучше, чем IMG00353.JPG . «

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

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

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

2. Измените размер изображений до размеров дисплея

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

Например, основная камера iPhone X создает изображения размером 4032 x 3024 пикселей.

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

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

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

Если вы используете WordPress, вы можете использовать такой плагин, как «Изменить размер изображения после загрузки», чтобы помочь вам в этом. В противном случае можно изменить размер изображений в Photoshop, а также с помощью такого инструмента, как Canva.

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

3. Уменьшите размер файла изображения

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

Фактически, это снова то, что Google рекомендует в своем руководстве по оптимизации изображений:

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

— Google

Как уменьшить размер файлов изображений?

Используя один из трех рекомендованных Google инструментов с открытым исходным кодом:

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

Или, если вы используете WordPress, попробуйте плагин Smush.

4. Создайте карту сайта для изображений

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

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

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


xmlns: image = "http: //www.google.com/schemas/sitemap-image/1.1 ">

http://example.com/sample.html

http://example.com/image.jpg


http: // example.com / photo.jpg




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

Как говорит Google, «карты сайта изображений могут содержать URL-адреса из других доменов, в отличие от обычных карт сайта, которые обеспечивают междоменные ограничения. Это позволяет вам использовать CDN (сети доставки контента) для размещения изображений».

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

5. Размещение образов на CDN

Чаще всего весь веб-сайт размещается на одном сервере.

Но давайте представим сценарий, когда веб-сайт размещен в США, но его посещает пользователь где-то в Европе.

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

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

Популярные CDN включают Cloudflare, Fastly, KeyCDN и Amazon CloudFront.

Вы можете легко настроить CDN на WordPress с помощью плагинов, таких как W3 Total Cache, или для получения дополнительных указаний вы найдете полезные руководства по интеграции от каждого поставщика, например, от Cloudflare.

Мы также рекомендуем вам ознакомиться с нашим руководством по обязательным методам SEO для CDN.

6. Реализуйте отложенную загрузку

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

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

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

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

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

Если взглянуть, опять же, на то, что Google говорит по этому поводу, наряду с предоставлением ленивой загрузки в качестве рекомендации в PageSpeed ​​Insights:

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

— Google

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

7. Используйте кеширование браузера

Вы часто будете видеть, что Google PageSpeed ​​Insights рекомендует вам использовать кеширование браузера.

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

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

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

Подробнее о том, как Google рекомендует использовать кеширование, можно узнать здесь.

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

Оптимизация изображения и обновление Google Page Experience.

Google недавно объявил, что они собираются выпустить свое обновление Page Experience Update в какой-то момент в 2021 году.

Это обновление будет учитывать ряд существующих факторов ранжирования, включая безопасный просмотр штраф, штраф за назойливые межстраничные объявления, HTTPS как фактор ранжирования, оптимизированное для мобильных устройств обновление, обновление Page Speed ​​и Core Web Vitals.

Если вы пропустили объявление, это, по сути, означает, что, как определено в Search Engine Land: «При прочих равных условиях это обновление означает, что Google с большей вероятностью повысит рейтинг ваших страниц, если они обеспечат хорошее взаимодействие с пользователем».

Но как это связано с оптимизацией изображений?

Во-первых, вы заметите, что Core Web Vitals — это один из факторов, который будет приниматься во внимание, в том числе LCP — Largest Contentful Paint.По сути, это показывает, насколько быстро чувствует себя страница; когда пользователь считает, что страница загружена.

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

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

Но, наконец, мы должны помнить, что обновление Page Experience Update также учитывает скорость страницы, и мы видели выше, каким образом изображения могут повлиять на это.

Поиск проблем с изображениями вашего сайта

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

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

Неработающие внутренние и внешние изображения

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

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

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

Изображения без альтернативных атрибутов

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

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

Серьезно относитесь к SEO для пользовательского опыта и поисковых систем

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

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

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

ОБНОВЛЕНИЕ: С 5 августа 2020 года вы можете использовать все форматы изображений, поддерживаемые Google Image, включая BMP, GIF, JPEG, PNG, WebP и SVG, в структурированных данных. Узнайте больше здесь.

Руководство для начинающих по оптимизации изображений для SEO

Изображение большего размера

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

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

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

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

Давайте теперь перейдем к замещающему тексту изображения (или альтернативному тексту), заголовку изображения и имени файла.

Как работает замещающий текст

Поисковые машины — это не люди, верно? Они не видят и не видят изображения так, как мы.

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

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

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

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

Важно не забыть про имя файла (такое случается часто, поверьте). Многие люди загружают файл с очень общим именем (например, «home-page-graphic-6.png») — и это нехорошо. Вы можете (и должны) быть более информативным — как для пользователей программ чтения с экрана, так и для поисковых систем.

Также имейте в виду, что эта тактика подвержена чрезмерной оптимизации. Я знаю это, потому что делал это раньше.

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

В конце концов, они переходят к части оптимизации изображения и смотрят на свои изображения, а потом просто… перестараются.

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

Давайте посмотрим на пару примеров.

Ниже вы увидите изображение от Zappos. Имя файла — «mens-boat-shoe.jpeg». Помните, что всякий раз, когда у вас есть пробелы в именах файлов, вы хотите использовать дефисы , , а не символы подчеркивания .

Что касается альтернативного текста (также известного как «тег alt»), то это «Mens Boat Shoe». Ничего страшного, это стандартная оптимизация изображений и alt-тегов.Могло быть немного лучше, а могло быть и хуже. Я думаю, что это нормально для всех намерений и целей.

Изображение выше включает пример того, как выглядит реальный HTML-код (). В теге изображения вы увидите как имя файла, так и тег alt.

Давайте посмотрим на пример «плохая, лучшая, лучшая».

Ниже у нас есть изображение женщины. Рыжеволосая женщина. Она моложе.Она по телефону.

• Пример неверного замещающего текста здесь будет «image source = woman.png». Имя файла — «женщина», тег alt — «женщина». С точки зрения оптимизации это лучше, чем отсутствие замещающего текста, но не , что хорошо. Это просто недостаточно наглядно.
• Лучшим примером альтернативного текста будет «woman-phone.png» в качестве имени файла и альтернативным тегом «женщина по телефону». Это хорошие альтернативный текст и имя файла (намного лучше, чем в приведенном выше примере), но их все еще можно улучшить.
• Лучший пример — это имя файла «red-hair-millennial-woman-iPhone10-iPhoneX.png» и тег alt «рыжая женщина-миллениал, использующая iPhone10». Это гораздо более информативный замещающий текст, и в нем много типов фраз.

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

Если вы можете описать это, если вы приблизитесь, вы в хорошей форме.

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

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

Еще больше ресурсов

Если вы ТОЛЬКО начинаете заниматься цифровым маркетингом, воспользуйтесь нашим учебником / руководством по интернет-маркетингу и нашим учебным пособием / руководством по поисковой оптимизации, чтобы получить общий обзор того, как они работают.

Как писать замещающий текст для изображений для SEO (3 простых совета)

Вы хотите знать, как писать замещающий текст для изображений для SEO?

Ежедневно в Картинках Google выполняется более 1 миллиарда поисковых запросов.В 2019 году на поиск изображений приходилось 20,45% всех запросов в поисковых системах. Вот почему так важно оптимизировать ваши изображения, и один из шагов в этом — написание альтернативных текстов изображений, оптимизированных для SEO.

Итак, в этом посте мы покажем вам 3 простых совета о том, как написать замещающий текст для изображений для SEO. Мы также расскажем, что такое SEO для изображений и как добавить замещающий текст к изображениям в WordPress.

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

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

Image SEO: что это такое?

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

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

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

Например, сможете ли вы удержаться от нажатия на эти очаровательные фотографии щенков?

Не думаю…

Вы поняли!

Изображения придают контекст вашему контенту

Изображения также придают контекст вашему контенту. Поговорка «картинка стоит тысячи слов» придумана не зря.

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

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

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

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

Что такое замещающий текст для изображений?

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

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

Вот пример альтернативного текста в коде HMTL:

Альтернативный текст — это текст после тега alt =.

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

Как писать замещающий текст для изображений для SEO (3 простых совета)

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

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

Хорошо, давайте подробнее рассмотрим, как писать замещающий текст изображения для SEO.

1. Добавьте свое ключевое слово

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

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

Google утверждает, что:

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

Рекомендации по использованию Картинок Google

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

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

Лучше всего то, что AIOSEO анализирует вашу Focus Kepyphrase и проверяет, использовали ли вы ее в альтернативных текстах изображений. Он также проверяет, использовали ли вы его в других важных показателях SEO, таких как заголовок SEO, мета-описание и т. Д.

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

Тем не менее, перейдем к следующему совету.

2. Будьте описательны

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

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

Например, как бы вы описали это изображение?

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

Он не говорит о том, что изображено на картинке, просто это что-то вроде пирога на картинке.

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

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

3. Держите его менее 125 символов

Используйте альтернативный текст длиной менее 125 символов. Слишком длинные альтернативные тексты (как в примере ниже) трудны для чтения и также не оптимальны для поисковых систем.

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

Также не начинайте замещающий текст с «изображение…» или «изображение…». Это ненужная информация, поскольку и поисковые системы, и программы чтения с экрана определят, что это изображение из тега HTML.

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

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

Добавление замещающего текста к изображениям в WordPress

Добавить замещающий текст к изображениям очень просто при использовании редактора блоков WordPress.

Для начала просто прокрутите вниз сообщение или страницу, которые вы редактируете, и нажмите на свое изображение, чтобы оно было отмечено синей рамкой. Затем перейдите к Image Settings в правом столбце редактора сообщений и введите замещающий текст в поле Alt Text (альтернативный текст) .

Вот и все!

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

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

И вот оно!

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

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

Еще не используете AIOSEO? Чего же ты ждешь?

Почему замещающий текст изображения важен для SEO

Знаете ли вы, что загрузка изображений без учета важности замещающего текста может негативно повлиять на SEO вашего сайта? Это связано с тем, что поисковые системы, такие как Google и Bing, сканируют веб-страницы и не могут понять файлы изображений, если не установлен тег alt.

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

Что такое замещающий текст?

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

Как альтернативный текст влияет на SEO?

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

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

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

Как писать хорошие альтернативные теги

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

Примеры хорошего и плохого замещающего текста

Bad — Лыжи

Хорошо — Мужчина катается на лыжах по заснеженной горе

Хорошо — Строитель рубит дерево электроинструментом

Плохо — Стадион

Хорошо — многолюдный футбольный стадион

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

Убедитесь, что в ваших изображениях есть замещающий текст!

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

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

оптимизируйте свои изображения! (Полное руководство)

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

Визуальный контент важен, но он не может отличаться от текстового контента, потому что Google еще не интерпретирует изображения. Когда его робот просматривает страницу вашего сайта, он «понимает» только слова, указания HTML-кода.Следовательно, изображение, у которого нет названия, не существует в глазах Google. Именно здесь тег ALT действительно играет свою полную роль, потому что он позволяет указать, чему соответствует изображение.

Содержание

Коротко об атрибуте ALT!

Тег ALT, или, точнее, атрибут ALT, позволяет Google узнать, что такое изображение.

Это соответствует части HTML-кода страницы, но не паникуйте! Вам не нужно знать, как писать код для всех этих >> CMS, таких как WordPress, Magento, Shopify и т. Д… показать вам поле ALT, которое нужно заполнить при импорте каждого из ваших изображений.

Пример импорта изображения в WordPress с атрибутом ALT

Если вы затем захотите убедиться, что эти атрибуты были установлены, вы можете проанализировать свой HTML-контент или использовать программное обеспечение SEO. Например, в SmartKeyword мы позволяем вам анализировать, правильно ли указаны ваши теги, используя вкладку «Работать с этим ключевым словом» («travailler ce mot clé»).

Пример проверки наличия ALT-атрибутов изображений на SmartKeyword

Таким образом, вы можете напрямую узнать, какие изображения не содержат тега ALT, и перейти в программное обеспечение вашей CMS, чтобы изменить его.

• Оптимизация тега ALT означает оптимизацию вашего SEO, ключевые слова, содержащиеся в ALT, учитываются при позиционировании в поисковых системах: этот атрибут помогает Google контекстуализировать ваш контент .
• Универсальные исследования приобретают все большее значение. Таким образом, ссылки на ваши изображения в поисковых системах становятся важными, чтобы их можно было увидеть, и это может генерировать трафик на ваш сайт через Google Images, например .
• Атрибут ALT считывается устно средством чтения с экрана для слабовидящих.
• Это будет контент, отображаемый, если ваш веб-сайт замедляется из-за какой-либо проблемы (сервер, медлительность …), что, следовательно, дает понять, что это должно указывать пользователю, что должно быть найдено вместо этого изображения.

• Определите тег ALT изображения, описав ваши изображения на простом английском языке и ключевые слова, которые вы хотите, чтобы они отображались в поисковых системах.
• А конкретно: выберите от 5 до 6 ключевых слов, которые описывают то, что представляет собой ваше изображение.Идея состоит в том, чтобы представить его содержание и функции.

Пример: для изображения ниже «групповые уроки кулинарии» или «групповые уроки кулинарии».

Сложно говорить об оптимизации изображений, не говоря о:

Размер изображения

Также будьте осторожны, не снимайте слишком тяжелые изображения, чтобы не замедлить время загрузки. Теоретически размер изображения не должен превышать 200 КБ. Когда страница загружается слишком долго, поисковые системы тратят на нее слишком много времени (в ущерб остальному контенту), и у вас больше шансов, что пользователь покинет вашу страницу.У вас есть возможность сжимать изображения с помощью таких плагинов, как wp smush для wordpress или Optimzilla, чтобы легко сжимать изображения.

Атрибут заголовка

Атрибут TITLE — это текст, который появляется при наведении курсора мыши на изображение. Этот текст не учитывается при позиционировании в Google и поэтому не очень важен для SEO: однако он может быть интересен вашим пользователям, поэтому заполните его!

Подпись

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

Имя файла

Он состоит из ключевых слов, связанных с изображением. Обратите внимание: не допускается «_», заглавные буквы и символы с диакритическими знаками.

Атрибут ALT — это часть HTML-кода страницы, которую легко заполнить. Нам не обязательно знать, как кодировать, такие CMS, как WordPress, сообщают вам поле ALT, которое нужно заполнить для каждого изображения на вашем веб-сайте.

Итак, если мы возьмем пример WordPress, тег ALT вашего изображения будет находиться под именем «ALT text».Если это поле пусто, имейте в виду, что важно заполнить его, присвоив ему заголовок, соответствующий содержанию изображения.

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

• Не путайте атрибуты alt и title.
• Избегайте изображений с текстом, потому что текст в изображении не будет индексироваться роботом, вместо этого отдавайте предпочтение ключевым словам.
• Заголовок изображения, сайты часто предоставляют возможность иметь заголовок изображения или даже логотип. Избегать! Заголовок — одна из самых важных областей вашего веб-сайта, куда вам следует вместо этого интегрировать основные ключевые слова для оптимизации вашего SEO.

Теперь вы знаете, как настроить атрибуты ALT, вы можете оптимизировать их с помощью Smartkeyword!

Статья написана Луи Шеваном

Имеют ли значение альтернативные теги для SEO в 2020 году?

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

Почему это изменение так важно для сообщества цифрового маркетинга?

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

Независимые исследования подтверждают, почему это важно. Согласно исследованию, опубликованному Jumpshot и SparkToro, на поиск изображений Google в 2018 году приходилось более 22% всех поисковых запросов в Интернете… и 3% всех кликов в поиске Google.

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

Имеют ли значение альтернативные теги?

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

Что такое замещающий текст для изображений (также известный как Alt-теги)?

Важно отметить, что то, что мы имеем в виду в этом посте, технически не является «тегом alt». Хотя большинство владельцев веб-сайтов и специалистов по SEO понимают, что кто-то имеет в виду, говоря об альтернативном теге, правильная терминология — это alt text или alt attribute .

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

До 2000 года сообщество Консорциума Всемирной паутины (W3C) — люди, ответственные за разработку универсальных стандартов для Интернета — хотело сделать Интернет более доступным для всех.Это означало выяснить, как улучшить работу в Интернете для людей с ограниченными возможностями и нарушениями зрения.

5 мая 1999 г. W3C опубликовал Руководство по доступности веб-контента 1.0 (WCAG). Цель заключалась в том, чтобы объяснить, как сделать контент более доступным для пользователей Интернета с ограниченными возможностями, и побудить разработчиков содействовать доступности.

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

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

Анатомия альтернативных атрибутов

Alt-атрибуты (также известные как alt-теги) — это короткие описания примерно из 100 символов, которые веб-сайты могут назначать любому изображению на своем сайте. Они также видны при наведении курсора мыши, когда изображение не может загрузить.

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

Для приведенного выше изображения нашего любимого офисного щенка, Digital Duke, альтернативный текст тега изображения в формате HTML будет выглядеть примерно так:

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

Создание и распространение поиска картинок Google