Что писать в атрибуте alt. Атрибуты Alt и Title для изображений в WordPress

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

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

Alt и Title: что это такое и для чего необходимы

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

Alt для изображений на сайте нужен, прежде всего, поисковику, который с помощью этого атрибута (альтернативного текста) может «понять», что находится на картинке (разумеется, если описание составлено корректно), проиндексировать ее и добавить в свою коллекцию – базу медиафайлов. Если графика на сайте не закрыта от индексации в файле , Alt дает возможность сайту получать трафик из поиска Яндекс и Гугл по картинкам или фотографиям. Для посетителя этот параметр становится видимым, если в настройках браузера функция показа графики отключена, что делается в некоторых случаях для ускорения веб-серфинга по текстовому содержимому сайтов.

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

Атрибуты Title и Alt изображений выглядят в коде страницы следующим образом:

Как и где заполнять Alt и Title в WordPress

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

В WordPress задать атрибуты можно в процессе добавления на сайт изображения, заполнив предлагаемые системой поля «Заголовок » и «Атрибут Аlt ».

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

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

Оптимизация изображений: что писать в Alt и Title

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

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

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

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

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

Объем текста для Alt должен составлять 3-10 слов, для Title допустимо более развернутое описание, но увлекаться здесь тоже не нужно – всплывающая подсказка из нескольких строк не всегда бывает уместна и может лишь испортить впечатление.

• всегда заполнять атрибут Alt описания картинки;
• текст, представленный на картинке, необходимо дублировать в ее описании – особенно важно это при использовании в навигации сайта графических элементов меню;
• использовать в именах файлов изображений осмысленные названия, например, atribut-alt-dlya-kartinki.jpg вместо alt001.jpg;
• для улучшения позиций в поиске по картинкам располагать изображение в непосредственной близости от текста, который оно иллюстрирует.

Заключение

Подведем итоги сказанному выше.

Заполнение атрибута Alt на сайте:

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

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

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

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

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

Плюсы и минусы применения изображений на web-проекте:

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

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

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

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

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

2.Минусы.

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

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

Роль атрибутов title и alt в SEO-оптимизации картинок

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

Несмотря на то, что это простой метод поднять позиции web-проекта в поисковиках, большинство web-мастеров в полном объеме их не используют, а то и вообще их игнорируют. Некоторые вообще их путают, и не осознают какая между ними разница. Также бывает, что данные атрибуты именуют тегами, а ведь это атрибуты тега img (от слова «image»), но ни как не отдельные теги, запомните это!

Сам же HTML-тег «img» используют для отображения на странице сайта картинок (изображений, фото) в графическом формате PNG, JPEG или GIF. Если нужно, то ту же картинку можно сделать ссылкой, для этого нужно заключить тег «img» в контейнер .

1. Атрибут ALT.

Этот атрибут входит в HTML-язык. Его предназначение состоит в том, чтобы описать какой-либо объект с целью подачи дополнительной информации об этом объекте (в нашем случае картинок). Т.е. атрибут alt для картинок передает ее описание для браузеров при отключенной графике. Если вы не пропишете этот атрибут, то посетитель увидит пустую иконку вместо желаемой картинки, если же прописать атрибут alt, то показывается его текст. Этот атрибут, кстати, сильнее всего оказывает влияние на ранжирование картинок ботами поисковых систем.
Как этот атрибут работает? Да очень просто: берете выбранную картинку, которую вы уже скачали себе на компьютер и заливаете на необходимую страничку вашего сайта в нужном месте. Затем находите HTML-код этой картинки и прописываете в нем следующее значение: alt=”Описываете кратко картинку и вписываете ключевые слова”. Описание нужно сделать как можно кратким (максимум парочка предложений) и вписывать в него много ключевиков также не нужно, поскольку, поисковые системы к этому относятся отрицательно, и это может негативно отразиться на вашем проекте.

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

2. Атрибут TITLE

Этот атрибут title то же входит в HTML-язык. Его предназначение в принципе такое же, как и атрибута alt, но разница в том, что ваше описание будет видеть посетитель, если наведет курсор на выбранную картинку. Этот атрибут не оказывает влияния на раскрутку и продвижение сайта, но он может повлиять на поведенческий фактор, который влияет на ранжирование web-проекта. Пишем его таким образом: title=”Описываете картинку”. Вот и все. Добавим, что оптимизация изображения, атрибуты его, все это играет существенную роль в раскрутке сайтов в поисковиках.
Далее приведем примеры SEO-оптимизированных картинок с применением атрибутов title и alt

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

Заполнение атрибутов title и alt пользователю значительно облегчено в CMS WordPress. При заливке изображения на сайт появляется специальный загрузчик и специальное окошко для оптимизации:

Заголовок (не путать с title) заполняется автоматически, а вот атрибут alt придется заполнить самостоятельно. Далее, непосредственно после вставки картинки на сайт, ее нужно отредактировать. Кликните по ней в визуальном редакторе, и вы попадете в окошко редактора:

Как видите, атрибут alt можно прописать и здесь, но он уже заполнен (это еще важно для картинки, которую вы будете использовать в качестве миниатюры). Вот именно здесь и заполняете атрибут title , прописывая в нем ключевые запросы, идентичные тем, что вы указываете в плагине: All In SEO Pack. После этого, сохраняете и все – ваша картинка оптимизирована.

В каком качестве необходимо использовать картинки на сайте

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

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

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

Так же, для уменьшения веса картинки можно использовать программу Фотошоп. В программе заходите в меню «Файл»→ «Сохранить для web и устройств» — вот и все.

Улучшайте оптимизацию вашего проекта, вместе с грамотной у вас будет хороший !

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 ("альт") - тег, который устанавливает альтернативный текст для изображения, которое ещё не загрузилось браузером. Также этот текст показывается в случае, когда в интернет браузере отключен показ изображений. При стандартных настройках браузера этот текст по мере загрузки замещается картинкой.

Так атрибут Alt для картинок выглядит в коде страницы:

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

Что значат атрибуты Alt для изображений в аспекте SEO оптимизации? Благодаря данным тегам мы даём понять поисковому роботу с помощью текста, какая графическая информация содержится на странице.

Как оптимизировать атрибут ALT

У многих вебмастеров и сеошников возникает вопрос, а как необходимо подписывать изображение в атрибуте Alt?

Стоит учесть, что поисковики учитывают только первые несколько слов из атрибута Альт у картинки, потому делать слишком длинные описания картинки не рекомендуется. Достаточно от 3-х до 10-ти слов.

О чем и что писать в теге Alt?

Чтобы определиться, что писать в атрибуте Alt, нужно просто посмотреть на само изображение. В первую очередь, тег Alt в описании картинки должен описывать её. Если на картинке изображен тег Альт, значит и подпись должна быть соответствующая. Пример:

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

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

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

Синтаксис атрибута Альт для картинок

Так выглядит код HTML атрибута Alt тега IMG:

В коде XHTML:

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

Как задать тег Альт для картинки

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

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

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

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

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

Что такое альт-теги?

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

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

Атрибут alt (alternative text) - это атрибут тега , позволяющий поисковому роботу «увидеть» изображение и проиндексировать его. По сути, краткое описание того, что изображено на картинке

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

Так выглядят теги альт и тайтл в коде страницы:

Правила написания текста в атрибутах alt и title

• Описание должно полностью соответствовать содержимому картинки.
• Должны содержать ключевое слово.
• На одной и той же странице должны быть разные alt теги. Если использовать одни и те же ключи для всех изображений, эта страница будет плохо ранжироваться, и есть шанс попасть под фильтр АГС
• Оптимальный объём - от 3-ех до 10-ти слов для alt. Title должен быть длиннее, более развёрнутым.
• Тексты для alt и title должны отличаться

Задаём alt для изображений

В большинстве CMS задать такой атрибут довольно просто. Например, в Wordpress кликаем правой кнопкой на картинку -> "Редактировать" -> добавляем описание атрибута alt.

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

Если хотите развёрнутой информации, то она есть в нашего блога.

Допустим, посещаемость вашего сайта растёт на глазах, но даже в этом случае не нужно пренебрегать оптимизацией изображений. Это возможность получать больше трафика, на уже вложенные ресурсы. Ключи вписаны в тексты идеально, техническая сторона сайта на высоте, посетителей немало, но может быть ещё больше. В этом поможет оптимизация изображений на сайте, ведь в ранжировании поисковых запросов так же участвуют и фото. А ещё, есть шанс собирать дополнительный трафик с запросов «+ фото».