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

Прописываем alt и title

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

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

Прописываем alt тег

Главная особенность данного атрибута - значительное влияние на поисковые системы и помощь в выведении статьи в топ Яндекса или Google . Считывая тег, поисковая машина понимает, что изображено на картинке. Если прописать alt грамотно, в соответствии с тематикой статьи, ее релевантность значительно вырастет. Приятный бонус – на сайт придут пользователи из раздела Поиск по картинкам. Оттого применение тега alt особенно выгодно интернет-магазинам.

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

Рассмотрим пример продуманной SEO оптимизации. Мы выбрали сайт о цветах. На скриншоте ниже виден хорошо заполненный атрибут title, речь о котором пойдет в отдельном абзаце.

При наведении курсора на изображение, появляется всплывающий текст: какие цветы дарить. Проверим, как прописан alt. Нажимаем сочетание клавиш Ctrl+U. Открывается код сайта. Теперь жмем Ctrl+F для поиска по странице. При наборе фразы какие цветы купить, видим правильно заполненный тег alt.

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

Как видите, оптимизация по тегам прекрасно работает. Достаточно со знанием дела прописать alt . Как это сделать?

• Краткость – сестра таланта. И хорошего SEO продвижения. Приемлемое количество слов – 3-5. Лимит тега составляет 250 символов.
• Наличие поисковой фразы или слова. Если у title фраза во всплывающем тексте больше влияет на пользователя, то у alt – напрямую на поисковик. Но не стоит перебарщивать с ключевыми словами, иначе робот определит это как спам.
• Как и в случае с title, прописывать alt нужно в соответствии с изображением на странице.

Как прописать title тег

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

Как правильно прописать title?

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

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

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

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

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

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

Зачем нужен атрибут alt

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

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

Alt="значение"

Как проверить изображения на наличие атрибута alt

Самый простой и доступный каждому способ – это проверить исходный код страницы (валидация кода) на ошибки.

Для этого нужно открыть сервис проверки кода W3C и ввести url страницы.

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

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

А вот ещё один способ, который позволит узнать об ошибках в исходном коде вашего сайта. Но, для использования этого инструмента нужно зарегистрироваться в кабинете веб-мастера Bing. И в этом самом кабинете есть инструмент «Средства анализа SEO» .

Где вы также вводите адрес страницы сайта для анализа и получаете отчёт. И если где-то отсутствует тег alt , вы это увидите.

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

Как найти нужный фрагмент исходного кода и добавить атрибут alt

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

— на имя файла изображения,

— на название класса, блока в котором размещено изображение,

— на соседние элементы.

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

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

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

. И то, что этот блок находится внутри списка, элемент которого имеет идентификатор id=»text-10″ .

И уже по классу «textwidget» становится понятно, что нужный нам код расположен в Виджетах. А раз так, то искать все эти элементы, на которые мы обратили внимание – бесполезно. Так как в большинстве тем WordPress виджеты в сайтбаре формируются динамически. А значит, в коде файла, отвечающего за cайтбар (sidebar.php ) будет преимущественно php код. Который никак не укажет на конкретный виджет.

Следовательно, идём в административную панель WordPress – «Внешний вид» — «Виджеты» и ищем нужный виджет.

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

До После alt="Инфомаркетинг 20/80" />

Вот и всё готово.

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

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

Открываем вкладку «Код страницы» и анализируем код. Ищем элементы, за которые можно зацепиться, по которым можно найти нужный файл и код.

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

Далее, лучше сделать резервную копию файл (скопируйте отдельно на компьютер) и можно приступать к редактированию. В Total Commander достаточно выбрать файл и нажать клавишу F4. Или можно скопировать файл на компьютер и открыть его через Notepad++. Ну, или на крайней случай, через Блокнот.

Итак, открываем файл и ищем нужный код. Можно использовать поиск CTRL+F.

Нашли, и вставляем нужный атрибут alt. Итак, со всеми изображениями, у которых он отсутствует.

После того как изменения внесены, сохраняете файл и снова проверяете инструментами анализа.

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

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

А у меня на этом сегодня всё. Жду ваших комментариев. Всех успехов и хорошего настроения! До встречи в новых видео и статьях.