Что такое alt на сайте – Как правильно заполнять Alt и Title для картинок

Содержание

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

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

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

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

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

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

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

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

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

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

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

Валидатор кодаВалидатор кода

Валидатор кода

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

Отчёт об ошибкахОтчёт об ошибках

Отчёт об ошибках

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

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

Средство анализа SEOСредство анализа SEO

Средство анализа SEO

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

Отчёт об ошибках в средствах BingОтчёт об ошибках в средствах Bing

Отчёт об ошибках в средствах Bing

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

и найти, где допущена ошибка. Сделать это легко, нужный код будет выделен жёлтым цветом.

Код страницы с ошибкойКод страницы с ошибкой

Код страницы с ошибкой

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

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

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

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

— на ссылки,

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

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

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

Прежде всего, мы знаем имя файла изображения. И неважно, что расположено изображение на другом сайте. Также мы видим, блок ДИВ с классом <div class=»textwidget»>. И то, что этот блок находится внутри списка, элемент которого имеет идентификатор id=»text-10″.

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

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

Код в виджетеКод в виджете

Код в виджете

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

До
<img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" 
width="250" border="0"/>
После
<img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" 
width="250" border="0" alt="Инфомаркетинг 20/80"/>

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

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

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

Ошибки элементов дизайнаОшибки элементов дизайна

Ошибки элементов дизайна

В качестве примера рассмотрим кнопки социальных сетей.

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

Искомые элементыИскомые элементы

Искомые элементы

Далее начинаем искать. Обычно для таких поисков я использую свой любимый Total Commander. Через ftp-соединение подключаюсь к своему блогу, открываю папку с темой и запускаю поиск ALT+F7.

Поиск в Total CommanderПоиск в Total Commander

Поиск в Total Commander

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

Найден нужный файлНайден нужный файл

Найден нужный файл

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

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

Добавление атрибута alt
Добавление атрибута alt

Добавление атрибута alt

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

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

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

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

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

С уважением, Максим Зайце.

1zaicev.ru

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

Влияние alt в SEO

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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

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

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

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

Узнать подробнее Атрибут alt для картинки

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

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

Смотреть

webformyself.com

что такое alt-текст и почему он так важен

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

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

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

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

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

Содержание статьи

Что такое alt-текст?

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

3 ошибки при создании atl-текстов

1. Просто набор ключевых слов
2. Номер, дата или другая техническая информация
3. Не учитывает контекст

Как писать эффективные альтернативные тексты

Заключение

Что такое alt-текст?

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

Вот, как выглядит данный атрибут для поисковиков:

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

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

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

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

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

3 ошибки при создании atl-текстов

1. Просто набор ключевых слов

Это пример не самого удачного альтернативного текста: 

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

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

Правильнее было бы снабдить изображение таким текстом:

«Сделать landing page за 25 минут бесплатно и с гарантией результата»

2. Номер, дата или другая техническая информация  

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

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

Вот еще один пример: 

На этом сайте все изображения имеют один и тот же alt-текст.

3. Не учитывает контекст

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

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

Для статьи о дизайне лендингов:

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

Для страницы, посвященной фрилансерским услугам по созданию лендингов:

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

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

Читайте также: 20 базовых HTML & CSS приемов для маркетологов

Как писать эффективные альтернативные тексты

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

  1. Описывая изображение, будьте конкретны. Можете задействовать контекст.
  2. Каким бы длинным ни был альтернативный текст, инструменты чтения с экрана обычно озвучивают только первые 125 символов, обрывая текст буквально на полуслове.
  3. Не стоит начинать описание со слов «Это изображение...» или «На этом изображении...». Переходите к описанию сразу. Скринридеры (и Google с Яндексом, если на то пошло) поймут, что перед ними изображение, исходя из HTML-кода страницы.
  4. Используйте ключевые слова, но не переусердствуйте с ними. В тег стоит включить ключевое слово только в том случае, если есть возможность органично его вписать. Если это трудно или невозможно, попробуйте заменить этот «ключ» близкими по смыслу словами, либо использовать только самые важные термины в низкочастотных запросах. Например, если в теге head статьи ключевым словом является фраза «как генерировать лиды», в альтернативном тексте вы можете использовать словосочетание «генерация лидов», поскольку прямое вхождение исходной фразы затруднительно;
  5. Не впихивайте одинаковые слова в alt-текст каждого изображения. Если пост или лендинг содержит серию изображений, включите в их описание только в то, которое, на ваш взгляд, лучше всех раскрывает каждое из них.

Заключение

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

Обратите внимание на то, как изменится объем поступающего трафика на те страницы, где вы изменили или добавили описания.

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

Высоких вам конверсий! 

По материалам: blog.hubspot.com

19-10-2018

lpgenerator.ru

Что такое атрибут alt | Где используется атрибут alt

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

Атрибут Альт

Альт (alt) — атрибут тега <img> HTML верстки, который используется для указания «альтернативного текста» (описания графических изображений, размещенных на сайте), который отображается на месте картинки в том случае, если загрузка изображения блокируется браузером или отключается самим пользователем. Также картинка может быть недоступной по другим причинам. Если «альтернативный текст» прописан, пользователь увидит, какую приблизительно информацию содержит незагруженная картинка. В некоторых браузерах более ранних версий атрибут alt используется для отображения описания содержимого изображения при наведении курсора мыши на картинку, тогда как в более поздних версиях для этого используется атрибут title.

Роль атрибута альт в SEO-продвижении

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

Пример использования атрибута: <img src=”http://лучший_сайт.ru/photo.jpg” alt=”Альтернативный текст-описание” title=”Описание вашего изображения”/>.

Важность атрибутов alt и title

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

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

Отличия в оформлении

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

cropas.by

HTML атрибут alt | назначение, значения, примеры

Последнее обновление: 03.02.2011

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

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


чувствуешь разницу?
Тип значения текст, CDATA
Значение по умолчанию Нет
Применим к:
Аналог в CSS Нет

Пример

<img src="path-to/pic.gif" alt="текст, поясняющий, что отображено на картинке" />

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- --> </style> </head> <body> <img src="img/fail.png" alt="картинка с заведомо неправильным путем"/> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Для элементов <img> и <area> атрибут alt обязателен.

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

Рекомендации:
  • не используйте alt для декоративных изображений. Если таковые по каким-то причинам не получается убрать в CSS, оставляйте alt пустым
  • описывайте в alt, то, что изображено на картинке (для img / area) или назначение элемента (input / applet)
  • не делайте содержимое alt и title одинаковыми — у этих атрибутов разное назначение
  • старайтесь, чтобы фраза в alt содержала ключевые слова
  • дополнительный вес получат ключевые слова в alt, если из картинки сделать ссылку
  • текст должен быть кратким (помнишь, что каждый символ увеличивает вес страницы)
По теме

html-css-php-js.ru

Атрибут alt | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 2.1+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

HTML
<area alt="текст">
XHTML
<area alt="текст" />

Обязательный атрибут

Да.

Значения

Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег AREA, атрибут alt</title>
</head>
<body>
 <p><img src="images/europe.png" alt="Европа" 
   usemap="#Map">
 <map name="Map">
  <area shape="poly" coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,
  75,110,61,120,42,116,37,110,25,94,32,82" href="is.html" alt="Исландия">
  <area shape="poly" coords="168,262,173,254,180,254,207,272,201,290,206,309,
  197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263" 
  href="fr.html" alt="Франция">
  <area shape="poly" coords="250,223,264,217,274,222,295,221,298,235,301,257,
  290,269,274,268,247,254,243,241,243,241" href="pl.html" alt="Польша">
 </map></p>
</body>
</html>

htmlbook.ru

Что такое Alt текст изображения и насколько он важен для SEO?

Что такое alt текст?

 

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

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

 

Зачем вообще заполнять alt теги?

 

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

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

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

 

Как использовать теги в SEO продвижении?

 

Чтобы привлечь потенциальных клиентов по продвигаемым запросам, необходимо составлять описания с использованием ключевых фраз для тегов alt и title. Текст, используемый для тега alt, может иметь такой формат: «прилагательное + ключевая фраза». Для атрибута title рекомендуется создать сложное предложение «прилагательное + ключ + дополнение».

К примеру, давайте рассмотрим ключевую фразу «Лондонская недвижимость». Для такого ключа вы можете прописать alt «Роскошная лондонская недвижимость», а также title «роскошная недвижимость в Сити, Саттоне и Бексли». Оптимизированное описание изображения должно содержать такие слова, как «фотография», «изображение».

Что делать, если у вас на сайте уже много страниц и картинок? Вероятно, на каких то из них альт теги прописаны, на каких то нет. Здесь алгоритм простой. Берите свои страницы (начиная с самой ценной) и проверяйте каждую в Sitechecker. Во вкладке “Картинки” наш сервис выводит alt и title всех картинок на странице. Так вы можете оценить, где они пропущены, или указаны неправильно. Заполните их правильно (лучше всего использовать данные о поисковых запросах с Search Console и данные с собранного ранее семантического ядра). Далее спустя время проверьте как изменилось количество показов данного URL-адреса в поисковой выдаче. Пару таких экспериментов помогут понять, насколько правильно заполненные альты влияют на продвижение именно вашего сайта.

sitechecker.pro

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *