От автора: атрибут alt для картинок позволяет задать текст, который появится у пользователя, если у него отключен показ этих самых картинок. Но это далеко не все, что вы должны знать о нем. Давайте подробнее разберемся, на применять этот атрибут.
Вообще чтобы понимать, как он прописывается, нужно знать основы html, иметь хотя бы какое-то представление о том, как текст и изображения добавляются на веб-страницы. В частности, фото– это одинарный тег img, у которого есть всего один обязательный атрибут – src. Это путь к файлу.
Очевидно, что если ввести его некорректно, ничего вы на экране не увидите. Короче, для вывода картинки вам всего-то нужно в нужном месте html-кода писать это:
< img src = "путь к изображению" > |
С этим все должно быть понятно, но кроме src есть и другие атрибуты, которые можно прописать в img. Вот они уже необязательные, то есть без них можно обойтись. В частности, alt. Атрибут, который выводит так называемый альтернативный текст.
Почему альтернативный? Потому что он будет выведен на экран только в случае отключения графики в браузере пользователя. В таком случае должна же быть какая-та альтернатива? Во всяком случае, если вы вставите фотографию Эйфелевой башни в статью, то это здорово, но если вдруг найдется человек, который выключил показ картинок в своем браузере, он просто ничего не увидит в этом месте. Там будет просто крестик (или иконка), который указывает на то, что в этом месте должно быть изображение. Например, на этом изображении можно увидеть карту мира:
Но если у человека выключен показ графики, он этого не увидит. Если же прописать alt, то рядом с крестиком будет поясняющий текст. В таком случае человек будет хотя бы примерно представлять, что на ней находится. Также я подозреваю, что речевые браузеры каким-то образом могут читать содержимое этого атрибута.
Влияние alt в SEO
Ох, сколько споров на СЕО-форумах я видел о том, влияет ли заполнение атрибута на улучшение ранжирования сайта и его отдельных статей в поиске. Можно с уверенностью сказать, что сегодня все осталось по-прежнему. Кто-то считает, что заполнение alt помогает в поисковой оптмизации, кто-то – что абсолютно никак это не влияет.
Я бы сказал, что оба мнения можно оспорить, а лучше выбрать что-то среднее. То есть не утверждать, что это дает прям существенный результат, но в то же время не думать, что абсолютно никакого толку от этого нет.
Знаете, заполнение alt я бы сравнил с кроссбраузерной версткой (если кто понимает, о чем речь). Это когда сайт адаптируется под все популярные браузеры. Если у самых важных картинок на вашем сайте вы будете заполнять этот атрибут, вы сделаете свой проект хотя бы на чуть-чуть, но лучше. Также вы сделаете свой проект немного доступнее для людей.
Конечно, сегодня людей, которые сидят в браузерах с отключенными картинками, все меньше и меньше. Я бы сказал, что их совсем мизер. Но если вы перфекционист и хотите идеализировать свой проект – пожалуйста, заполняйте этот атрибут, кто вам мешает?
Как заполнять alt?
А вот это самое важное, на мой взгляд. Если вы читали мои прошлые статьи по СЕО, то наверняка уже там не раз слышали, что поисковики любят естественность. Соответственно, идеальным заполнением атрибута будет максимально точное и короткое описание картинки. Как правило, 30-100 символов достаточно. При этом максимальная длина должна быть примерно 250 символов. Но зачем вам так подробно описывать изображение?
При этом вы должны постараться написать в атрибуте такой текст, чтобы при его чтении можно было мысленно представить себе картинку, даже если вы ее не видите. Многие оптимизаторы советуют в первую картинку в публикации прописать alt, в котором будет ключевая фраза.
Тут нужно понимать, что поисковики стали умнее. Если вы вставили какую-то левую картинку и в наглую прописали туда ключ, положительного результата ждать не стоит. Я не говорю, что поисковик вас накажет, но эффекта как такового не будет.
Мало того, если во все картинки напихать побольше ключей и делать так с каждой страницей вашего сайта, тогда наказание отхватит как раз очень даже реально. В таком случае это дело времени.
Как же быть? Если вы и вставляете какую-то ключевую фразу в alt, добавляйте ее только в описание одной картинки на статью. Также не стоит любой ценой пытаться добавить фразу в ее точном вхождении. Запрос может быть вставлен с разбавлением.
Ну а самое главное, это постараться писать alt так, чтобы было максимально естественно, как будто вы случайно употребили там ключ. Для этого описание, возможно, придется сделать чуть больше, но это только для одной картинки, куда вы будете вставлять ключ.
Собственно, для остальных изображений, если их несколько в статье, можно заполнять alt, а можно и нет. Это ваше личное решение. Вообще важно относится к заполнению этого атрибута без всяких лишний ожиданий, будто вы грамотно заполните и завтра окажетесь в топе. Эффекта может и не быть, либо он будет минимальным, но главное тут, что вы все сделали качественно.
Итак, давайте подытожим основное по заполнение alt:
Нужно максимально просто и коротко описать картинку
Если вы и вставляете ключевую фразу, делайте это всего 1 раз и так, чтобы выглядело естественно
Для остальных картинок заполнение alt по вашему личному желанию
Опять же, не стоит думать, что это какое-то руководство к действию. Это всего лишь рекомендации. Каждый веб-мастер делает по-своему. Кто-то вообще никогда не заполняет alt ни у одной картинки, кто-то делает как тут рекомендовано, а кто-то спамит ключами.
Из этих трех вариантов оптимальными являются первый и второй. То есть тут есть 2 решения: либо вообще никогда не трогать alt, либо заполнять его максимально естественно.
Заполнять alt или нет? Зависит от сайта
Например, вы ведете личный блог. Ну и зачем вам сдался этот alt? Скорее всего, вам картинки нужны будут чисто для разбавления текста, но никак не для привлечения клиентов. Другое дело – коммерческий сайт. Например, интернет-магазин. Тут картинки играют огромную роль, потому что люди чаще всего покупают то, что больше всего нравится их глазу.
Соответственно, для каждого товара в интернет-магазине разумно прописать alt. Давайте как раз разберем на примере, как сделать это грамотно. Допустим, у нас есть товар – ноутбук ASUS G560 (не ищите в поиске, название я выдумал). Естественно, есть фото этого ноутбука. Как прописать для нее альтернативный текст? Вот варианты:
“Фотография”, 1, “ыыавпв” и прочее – это все варианты, которые никак не годятся. По такому описанию абсолютно непонятно, о каком товаре речь. Текст “фотография” или “картинка” (так часто подписывают фото) вообще самый забавный, ведь люди и так понимают, что это не видео. Это все равно что на слона повесить табличку, где написать, что он слон.
“Крутой красный ноутбук для игр” – это неплохое описание, если ноутбук действительно является игровым. Но если вы целитесь на трафик с картинок, то такое описание не является самым оптимальным, так как подобную фразу я в поиске набирает 0 человек. Люди чаще набирают названия конкретных моделей или хотя бы производителя.
“Ноутбук” – описание, которое можно охарактеризовать так: лучше, чем ничего. Но тоже не оптимально, так как нет конкретики. Не будете же вы каждый товар подписывать так? Описание должно быть уникальным для каждого отдельного ноутбука.
“Ноутбук ASUS G560” – оптимальный вариант, есть конкретное описание. Возможно, если товар присутствует в разных цветах, можно дописать и цвет, а также слова, которые часто используют при описании ноутбуков: для офиса, мощный, игровой и т.д.
“Ноутбук ASUS G560, купить в Москве с доставкой, отзывы” – похоже на спам, правда? Это самый плохой вариант из всех.
Итог
Особо тут больше говорить не о чем. Оптимизация картинок alt атрибутом, это то, что может помочь вам улучшить свой сайт и получить небольшой трафик с поиска по изображениям. Это дело для перфекционистов, потому что вполне можно обойтись и без этого. И конечно, стоит учитывать, какой у вас сайт. Если коммерческий, то подписывать изображения желательно, а если вы ведете какой-нибудь блог или информационный сайт, то можно на это вообще забить.
Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.
Зачем заполнять атрибут alt
В поисковой системе индексируется не только текст, но и графическая информация, и изображения – один из источников дополнительного трафика. Чтобы показывать релевантные изображения при поиске по картинкам, Google и Яндекс ориентируются на теги, в которых и написано, что представлено на них. Благодаря этому в результатах поиска пользователь получает именно то, что искал.
Поисковый робот же в первую очередь ориентируется на изображения с атрибутом alt, поэтому с точки зрения seo-оптимизации это очень важный пункт. Например, если у вас на сайте размещено более 1000 изображений в сотнях статей, то каждое из них может принести дополнительный трафик.
Посетители увидят атрибут alt только в случае отключения загрузки изображений или при плохом соединении Интернета. Загрузка графических элементов осуществляется после получения информации браузером, поэтому замещающий текст на экране монитора виден раньше.
Атрибут alt поможет только при поиске картинок, поэтому на органическую выдачу никак не повлияет.
Правила правильного заполнения alt
Для достижения максимального результата от заполнения тегов alt нужно придерживаться следующих правил.
- Поисковые системы игнорируют длинные описания, поэтому регулируйте длину alt до 5–6 слов, но не превышайте 200–250 символов.
- Описание изображения должно четко соответствовать его содержимому. Например, бессмысленно вставлять фразу «домашний кот» для изображения с автомобилем.
- Для увеличения эффекта от оптимизации картинок рекомендуется использовать ключевые слова из тега H1 или заголовка статьи, но только в том случае, если они похожи по смыслу.
- Не используйте в тексте большое количество ключевых слов, не допускайте спама в описании.
- Не оптимизируйте атрибуты alt у изображений, которые относятся к фону вашего сайта, элементам меню. У них тег должен быть пустым или вовсе отсутствовать. Изображения для элементов дизайна по возможности можно выносить в CSS-спрайты.
- Не придумывайте дополнительные теги alt для похожих картинок из одного материала или товара. Например, у вас интернет-магазин курток, у каждой несколько фотографий. Это значит, что для всех вы пишете одно и то же название, только можете добавить цифры 1, 2, 3 для разграничения.
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Что такое альт-теги?
Альт-теги - это текстовое описание содержимого графического изображения на странице, позволяющего получить более полную информацию о нём и улучшить навигацию на сайте. Для тех пользователей, которые выключают графические изображения в браузере, удобно будет по тегу alt определить, что должно было быть на картинке. А title содержит в себе подсказку для изображения, всплывающую при наведении курсора.
Все мы уже знаем, как важно разбивать текст на блоки, добавлять картинки, визуально делающие текст привлекательным и более лёгким для восприятия. Если представить SEO как скачки на ипподроме, то к финишу первой всегда придёт лошадь, которая выложилась на полную. Где надо ускорилась или прошла по внутреннему кругу, да и жокей был максимально лёгким в облегающем костюме. Так и здесь - нужно выжать из продвижения по максимуму. Поисковый робот, который пробежит по вашей странице и увидит оптимизированное изображение, прекрасно поймёт, что там изображено, когда прочтёт тег alt. Он внесёт эту информацию в индекс, и вы получите SEO-плюс для своей странички и преимущества в выдаче.
Атрибут alt
(alternative text) - это атрибут тега , позволяющий поисковому роботу «увидеть» изображение и проиндексировать его. По сути, краткое описание того, что изображено на картинке
Атрибут title
- это атрибут , выполняющий роль заголовка для изображения. Он формирует всплывающие подсказки для картинки.
Так выглядят теги альт и тайтл в коде страницы:
Правила написания текста в атрибутах alt и title
- Описание должно полностью соответствовать содержимому картинки.
- Должны содержать ключевое слово.
- На одной и той же странице должны быть разные alt теги. Если использовать одни и те же ключи для всех изображений, эта страница будет плохо ранжироваться, и есть шанс попасть под фильтр АГС
- Оптимальный объём - от 3-ех до 10-ти слов для alt. Title должен быть длиннее, более развёрнутым.
- Тексты для alt и title должны отличаться
Задаём alt для изображений
В большинстве CMS задать такой атрибут довольно просто. Например, в Wordpress кликаем правой кнопкой на картинку -> "Редактировать" -> добавляем описание атрибута alt.
Во множестве CMS функционал похожий. В некоторых есть даже плагины для шаблонной постановки этих тегов.
Для того, чтобы вручную прописать атрибут alt - ориентируйтесь на синтаксис тега , представленный выше.
Если хотите развёрнутой информации, то она есть в нашего блога.
Допустим, посещаемость вашего сайта растёт на глазах, но даже в этом случае не нужно пренебрегать оптимизацией изображений. Это возможность получать больше трафика, на уже вложенные ресурсы. Ключи вписаны в тексты идеально, техническая сторона сайта на высоте, посетителей немало, но может быть ещё больше. В этом поможет оптимизация изображений на сайте, ведь в ранжировании поисковых запросов так же участвуют и фото. А ещё, есть шанс собирать дополнительный трафик с запросов «+ фото».
Атрибуты title и alt должны использоваться для каждого изображения или ссылки на странице для того, чтобы роботы поисковиков поняли содержимое каждой ссылки или изображения . Помните всегда о том, что роботы поисковых систем не рассматривают сайты так, как мы с вами.
Ниже вы можете посмотреть на примеры использования атрибутов title и alt для изображения и ссылки.
<A HREF = "http://www.yoursite.com" title = "заголовок вашей страницы" alt = "заголовок вашей страницы"> заголовок вашей страницы
На вымышленном примере рассмотрим, как реально применяются ат - трибуты title и alt для ссылки на, скажем, e-book, предлагаемую для скачивания со страницы сайта "Основы ипотечного кредитования" :
HTML код для изображения :
<IMG SCR ="/images/seo/alt-and-title-attributes.gif" title ="Атрибуты ALT и TITLE тега IMG" alt ="Атрибуты ALT и TITLE тега IMG" />
Атрибуты ALT и TITLE тега IMG
Несмотря на то, что использование при оптимизации изображений атрибуто в title и alt - это простой способ поднять позиции сайта в поисковых системах, многие вебмастера не в полной мере применяют их, а то и вовсе игнорируют. Некоторые их путают и не понимают, какая разница между title и alt . Следует отметить, что частенько title и alt по ошибке именуют тегами, хотя это атрибуты тега img (от слова “image”), а не отдельные теги.
HTML тег img применяют для отображения на страницах сайта изображений (картинок) в графическом формате GIF, JPEG или PNG . При необходимости, картинку можно сделать гипер-ссылкой, заключив тег img в контейнер . Атрибут alt передает описание изображения для браузеров при отключенной графике. Если данный атрибут не будет прописан, то пользователи увидят пустую икону вместо изображения, а если alt прописан, то будет показано его текстовое содержание. Атрибут alt сильнее всего влияет на ранжирование изображений поисковиками.
Атрибут title предоставляет дополнительную информацию о картинке и не является обязательным, хотя SEO - эксперты рекомендуют его применять для лучшего продвижения по изображениям . Текст, внесенный в атрибут title, показывается при наведении курсора мышки на картинку, а согласно генеральной концепции поисковых систем - все, что видит пользователь - учитывается при ранжировании. Проверить данное утверждение вы можете, на картинке, расположенной в начале этой страницы.
Роботы поисковых систем не умеет распознавать текст, нанесенный на графические изображения , поэтому ключевая фраза, написанная на картинке большими буквами, никак не повлияют на ее поисковое продвижение. Больший эффект принесет нанесение доменного имени вашего сайта - это не только способствует его популяризации, но и защитит картинку от копирования.
Поисковые системы учитывают не весь текст, заключенный в атрибут alt : Google, к примеру, показывает только первые 15-17 слов, а Яндекс чуть больше – до 28 слов. В любом случае, этого количества слов вполне достаточно, чтобы составить вразумительный контекст.
Поисковые системы акцентируют основное внимание на тексте, относящемся к изображению
. Особенно к тому, что написано непосредственно под ним, воспринимая этот текст как название изображения. Поэтому, название должно полностью копировать содержание соответствующего атрибута
alt
и его следует размещать в том же абзаце <
p>
, ячейке таблицы <
td>
или теге Как и со всеми другими вопросами поисковой оптимизации
, ваше внимание должно быть сосредоточено на создании уникального контента, представляющего ценность для пользователей вашего сайта. Наличие точного описания изображений на вашей странице будет значительным подспорьем не только для пользователей с очень медленным соединением или, у которых показ изображений отключен полностью, но и полезен для основной массы ваших пользователей, которые по достоинству оценят то, что они могут простым наведением курсора мыши на изображение
получить немного больше информации. ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ
Информацию о изображениях передает атрибут “alt”
Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать
(1). Зачем используется этот атрибут? Если пользователь просматривает ваш сайт через браузер с отключенными картинками или использует программу чтения текста с экрана, alt-текст будет служить описанием изображения.
Alt-текст также используется в графических ссылках. В таком случае он обрабатывается поисковыми системами как анкорный текст ссылки. Несмотря на это, мы не советуем использовать большое количество графических ссылок для навигации по вашему сайту, так как текстовые ссылки справляются с этой ролью не хуже. Ну и, наконец, грамотное описание изображения в теге alt вместе с информативным именем файла помогают системам поиска картинок, таким как Поиск Картинок Google, проиндекси- ровать изображения с вашего сайта. Файлы следует хранить в отдельных директориях, и сохранять их в общедоступных форматах
Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку
(например, moyastranaotkrytok.ru/images/
). Это упрощает путь к графическим файлам. Используйте широко поддерживаемые типы файлов
. Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом. ПРАКТИЧЕСКИЕ СОВЕТЫ
Пишите информативные анкоры.
Анкорный текст должен содержать хотя бы краткую информацию о странице по ссылке. Не советуем:
Стремитесь к краткости.
Ваша цель – короткий и информативный текст, обычно одна точная фраза. Не советуем:
Выделяйте ссылки.
Сделайте анкорный текст ссылок визуально отличимым от обычного текста вашего сайта. Пользователя вводят в заблуждение малозаметные ссылки или ссылки, на которые он может нажать случайно. Не советуем:
Не забывайте про анкорный текст для внутренних ссылок.
Возможно, вы уделяете внимание прежде всего ссылкам, указывающим на другие веб-сайты, но внутренние ссылки не менее важны, так как они помогают Google лучше сканировать ваш сайт. Не советуем:
Атрибут alt - это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута: Без заданного атрибута alt изображение будет показано как пустое: Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения. Задать атрибут alt можно следующим образом: В атрибуте alt следует писать не все ключевые слова сайта или страницы, а лишь те, которые действительно относятся к картинке. Это поможет роботу точнее найти картинку, а пользователю Яндекса - выбрать ее в результатах поиска и перейти на ваш сайт. Оставлять атрибут alt пустым нежелательно. Если вы добавляете несколько похожих изображений (например, фотографии товара из интернет-магазина), то стоит задать уникальные атрибуты alt (вид спереди, вид сзади). Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку: Задать атрибут title можно так: Для каждой картинки стоит указать уникальный title . Оставлять атрибут title пустым нежелательно. Кроме значений атрибутов alt и title при поиске по картинкам используются следующие тексты: тексты ссылок на картинки с других страниц и с других сайтов; прилегающий к картинке текст - расположенный на странице в непосредственной близости к картинке; тексты и заголовки коротких документов, обрамляющих одиночную картинку; имена файлов и скриптов картинок, в том числе с учетом транслитерации и упрощенного подстрочного перевода. Однако атрибуты alt и title являются наиболее универсальными, поэтому их стоит прописывать всегда. Статьи по теме
Текст атрибута title тега img
Другие тексты
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows