Что такое alt атрибут в html. Атрибуты alt и title. Где заполнять alt и title картинок на примере wordpress
Привет, народ. Дабы не тратить ваше время, давайте коротко и по делу.
Title картинки – это надпись, которая всплывает при наведении курсора на изображение. Это нужно, чтобы дать подсказку посетителю. Рассказать, что изображено на картинке или куда обратить внимание.
Alt картинки – от английского слова alternative. Это такая полезная вещь, которую очень любят индексировать поисковики, дабы определить, что изображено. Также, он будет виден, если пользователь отключит в браузере отображение картинок. Что не имеет смысла и совершается в редких случаях.
Если все же пользователь выключит отображения графического контента или произойдет какой-то сбой на чьей-то стороне, то вместо картинки будет виднеться маленькая иконка с текстом. Этот текст и есть alt изображения.
Alt и title картинки для SEO
Для тайтл картинки имеет минимальное значение. Он индексируется не охотно, но вот может сыграть вам на руку в поведенческих факторах. На дворе 2018 год, seo сейчас — это юзабилити и качественный контент. Поэтому привлекайте внимания пользователя любым способом.
Даже сами подумайте, приятней же когда появляется всплывающая подсказка у изображения.
А вот alt картинки — это клад. Во-первых, его отсутствие GoogleBot считает ошибкой, Яндекс относится лояльней. Во-вторых, он охотно индексируется, а такое изображение попадает в раздел «Картинки» в поиске. Это значит, что таким способом вы сможете привлекать дополнительный трафик на свой сайт.
В-третьих, так как он индексируется, то есть возможность с его помощью увеличивать значение страницы. Будет хорошо, если вы пропишете в alt лишний низкочастотный запрос. Но тут нужно быть внимательным.
Как правильно заполнять alt и title для картинок
C title все намного проще. Для поисковика правил нет, но это не значит, что вы пишите тут любую ересь. Выше мы делали подводку к поведенческим факторам. Желательно вам не надоедать пользователю, быть ему полезным.
1) Он не должен быть длинным. Согласитесь, подсказка в 4 строки будет вызывать отторжение.
2) Должен как-то относиться к изображению.
3) Не должен дублироваться с основным title, заголовками h1-h5, с атрибутами alt.
Alt картинки имеет вес у поисковика, поэтому здесь есть ограничения с правилами, но так и возможности.
1) Одного слова не достаточно, желательно держаться в рамках от 3 слов. Максимальное число символов 250.
2) Он должен соответствовать содержимому изображения.
4) Желательно, не должен повторяться с другими alt на странице.
Так что, добавляя очередную картинку в блог, подумайте. Может какой-то человек захочет её найти? Попробуйте превратить его в лишний трафик.
Где заполнять alt и title картинок на примере wordpress
Например, в вордпресе вам достаточно зайти из панели управления (консоль) в раздел «Медиафайлы» — «Библиотека» . Далее выбираете любое изображение.
Или, редактируя статью, просто жмёте на любую вставленную картинку, после на карандашик.
Конечно, на примере wordpress показать легче всего, но многие популярные CMS дают такую возможность. Вот, к примеру – Joomla. Там есть свои подводные камни, но у большинства графического контента можно прописать alt если нажать «Редактировать изображение»
На этом все. Очень надеемся, что мы вам были полезны. Если да, поставьте лайк. Это нас мотивирует делать больше качественного и интересного контента!
С уважением, Ваша Суть.
Тема сегодняшней статьи – SEO - оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:
Что такое атрибут ALT?
ALT – это атрибут, в котором содержится альтернативный текст изображения. Атрибут показывается, когда в браузере отключен показ изображения, но в стандартных настройках вы его не увидите.
Как правильно прописывать описание картинки
Прежде чем прописывать Title я расскажу вам частые ошибки, которые замечаю на сайтах.
Пустые атрибуты ALT и TITLE . Как правило, многие SEO оптимизаторы не заморачиваются по поводу этого тега. Да, возможно, если ваш сайт очень крупный имеет посещаемость 100000 в сутки заморачиваться не стоит, но если вы только раскручиваетесь и вам нужен первый трафик, то указать атрибуты все же стоит.
Не соответствие изображения и атрибутов. Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.
Переоптимизация . Часто встречающаяся проблема, можно ставить прям в пример как не нужно делать. Оптимизаторы надеясь получить заветный трафик прописывают по несколько ключевых слов в атрибут “alt” и ждут, когда позиции в выдаче среди картинок начнут расти. Вы должны понимать, что данный текст будут читать люди, которые оценивают несколько картинок и если там сплошь спам никто не перейдет по ссылке. Добавлять коммерческие слова “купить, заказать, цена, стоимость, наименование города” не рекомендуется.
Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.
А как же нужно прописывать теги для картинок?
Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.
Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.
Вхождение ключевых слов. Собственно, из-за чего атрибут ALT и стоит указывать. Пишите ключевое слово понятным для пользователя текстом.
Например:
alt=”Ремонт компьютеров в Чебоксарах”
Уникальные атрибуты для каждой картинки. Так же важная составляющая, самая встречающаяся проблема у SEO-оптимизаторов. На примере я вам покажу как ее решить.
Карточка товара содержит много картинок
Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:
“Сплит-система HYUNDAI H-AR6-07H Вид 1”
“Сплит-система HYUNDAI H-AR6-07H Вид 2”
Помимо картинок товара, есть у вас на сайте имеются элементы: похожие товары, с этим товаром чаще смотрят и так далее. Данный вид картинок не стоит сбрасывать со счетов и SEO оптимизировать их прописав ALT и Title. Причем стоит уделить время прописать конкретно: бренд, модель, номер товара, все важные параметры, которые люди могут вбивать в поиск.
Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.
Расположение изображения – как можно ближе к тексту, который содержит ключевые слова. Вот почему многие оптимизаторы учитывают этот фактор и стандартная схема расположения картинок выглядит так:
Текст заголовка с ключевым словом
Дальнейшее описание
Уменьшение веса изображения. Размер картинки играет ключевую роль, ведь если она будет весить очень много, что даже будет тормозить скорость загрузки сайта это скажется на ранжировании всего сайта. Да-да бывало и такое!
Подпись под картинкой
Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:
- Указать ключевые слова. Вхождение ключевиков в подпись обязательно, так как данный текст сыграет роль в ранжировании всей страницы;
- Указать какой-либо факт/преимущество о картинке.
Например, у вас картинка динамиков Iphone 7.
В подписе укажите данный факт: “Звучание звука в Iphone 7 стало заметно лучше благодаря Lighting” Отношение Яндекса к атрибуту ALT
“Как поместить мою картинку на первое место?"
При ранжировании картинок учитывается прилегающий к картинке текст. Чем точнее описание изображения соответствует запросу пользователя, тем выше вероятность того, что картинка будет показана на первой странице результатов поиска.”
Текст под картинкой несет гораздо большую пользу для поисковика, чем собственно сам ALT.
Ранжирование картинок в Google
Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.
Давайте пробежимся по главным факторам для Google.
Фотографии хорошего качества – это должно быть понятно, итак. Никому не будут интересны размытые фотографии или просто плохого качества. Здесь скорее качество картинки играет на ее кликабельность, некий CTR.
Отдельные страницы для каждой картинки – интересная мысль, но честно редко встречаю такие сайты. Проблематичным становится оптимизировать: интернет-магазины, одностраничные сайты, сайты каталоги, где хранится большое количество изображений.
А что по поводу атрибута Title
Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом ). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.
Во всяком случае он несет гораздо больше пользы чем , который я писал совсем недавно.
Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?
Если Вы хотите продавать баннер-место на своем WordPress-блоге, необязательно идти и регистрироваться на бирже баннерной рекламы , потому что этому сервису есть отличная замена — это плагин для показа баннеров на вашем блоге AdRotate.
Стоит отметить: удобен, потому что не нужно индивидуально договариваться с рекламодателями о размещении баннера, т.е. Вы в этом практически никакого участия не принимаете. Основная работа ложится на рекламодателя: он выбирает размер, баннер, ссылку с него и размещает на определенный срок (например на месяц) и за назначенную Вами цену (чем популярнее Ваш блог, тем больше цена), а Вы только получаете деньги за купленное рекламодателем баннер-место автоматически. Нужно только установить на блоге код для отображения объявления «купить рекламу» с логотипом :
1. Баннер будет висеть у Вас на блоге до тех пор, пока не кончится срок размещения баннера.
2. Нет ротации, т.е. возможности показывать другие баннеры в ротации с баннером рекламодателя.
При использовании плагина AdRotate таких проблем не будет! Но договариваться с рекламодателями, размещать баннеры и назначать сроки показа Вы будете сами.
Теперь перейдем к настройке плагина AdRotate.
Скачиваем и устанавливаем на наш WordPress-блог AdRotate и переходим к созданию рекламной ротации баннеров.
Плагин предназначен для вставки ротации нескольких рекламных баннеров. Каждая группа должна иметь баннеры одинаковых размеров, например в группе 1 будет ротация баннеров 468х60, а в группе 2 — 125х125.
После добавления нескольких баннеров в одну группу AdRotate начинает показывать их на сайте переменно: сначала будет показываться один баннер, а при переходе на другую страницу, или обновлении текщей страницы в браузере – уже другой и т. д., в зависимости от количества добавленных Вами баннеров в одну группу.
Как добавить баннер?
Ищите в админпанели AdRotate, заходите в пункт Manage Ads и кликаете на Add New , чтобы добавить в ротатор новый баннер.
В поле Title вводите название для себя, чтобы сориентироваться потом, если понадобится удалить, или отредактировать баннер.
В поле AdCode следует указать код вашего баннера, к примеру:
И не забудьте поставить галочку в поле Clicktracking и прописать url вашей спрятанной ссылки.
Для каждого баннера можно установить приоритет показа (Weight ), т.е. насколько больше(меньше) остальных будет показываться данный баннер. Приоритет от 2 до 10.
В пунктах Display From … Until можно указать период показа данного баннера. После этого в пункте Activate выбирайте Yes, this ad will be used , чтобы включить баннер. Это удобно, если на Вашем сайте кто-то купил рекламное место, допустим, на месяц.
Теперь нужно перейти в Manage Groups
, чтобы создать группу ротации ваших баннеров. Здесь указываем имя для группы баннеров, и затем выберите галочкой баннеры, которые будут входить в данную группу.
Жмем на Save
.
Чтобы добавить ротацию в пост, или на страницу, можно использовать шорткод.
Атрибуты 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 лучше сканировать ваш сайт. Не советуем:
