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

Зачем нужен атрибут alt в картинках?

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

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

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

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

Как видно, на панели присутствует поле Атрибут alt . По умолчанию, оно является пустым. Задавать текст в атрибуте необходимо длиною из 2-3 слов, причем они должны точно описывать что на фото. Чтобы вставить изображение на сайт, следует нажать кнопку Вставить в запись .

Зачем нужен атрибут title в картинках?

Title — еще один атрибут HTML -тега вставки изображения . Он используется для заголовка картинки и обычно указывает на ее название. Отметим также, что текст внутри title не будет показан пользователю, если изображение не отображается на странице.

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

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

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

Здравствуйте, друзья.

Сегодня следующий материал по работе с изображениями.

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

В этой статье я покажу, как производится оптимизация изображений на сайте с помощью атрибутов title и alt для продвижения страниц в поисковых системах.

Статья будет не очень большая, но полезная.

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

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

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

Весь процесс оптимизации я разделяю на 3 этапа:

1. Создание уникального изображения;
2. Подготовка окончательного изображения для размещения на сайте, которое не будет грузить блог. На данном этапе мы уменьшаем размер изображения, чтобы страницы грузились быстро;
3. Правильная оптимизация атрибутов title и alt изображения.

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

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

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

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

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

Как правильно заполнять title и alt изображений?

Сначала скажу пару слов об этих атрибутах. Зачем они нужны?

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

Теперь рассмотрим, как же нужно заполнять их.

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

Сначала разберем, что это за атрибуты.

• Title - во всех случаях это тег заголовка чего-либо (заголовка записи, изображений и так далее);
• Alt - атрибут тега img itemprop="image", который описывает изображение. Еще называется "альтернативный текст".

Атрибут alt является очень важным для изображений. Его нужно заполнять в 100% порядке. На заполнив же Title, ничего плохо не произойдет, но для лучшего эффекта также необходимо на него обращать внимание.

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

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

Видим, что эти атрибуты находятся в коде во 2й строке. Им заданы определенные значения, а точнее те фразы или слова, которые описывают содержимое картинки. Именно содержимое картинки, а не ключевые слова и еще что-то.

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

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

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

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

Title и alt должны быть одинаковы?

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

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

Поэтому, следующий вывод - атрибуты title и alt можно делать одинаковыми.

Но, это не 100% догма. Можете сделать их немного отличными, но чтобы смысл не терялся от этого. И тайтл и альт должны описывать изображение. К тому же title может вообще отсутствовать (ошибки в этом нет) и содержать иную информацию кроме описания самой картинки. Более подробно о грамотном заполнении альта и тайтла я . По предыдущей ссылке я копнул глубже в вопросе заполнение данных тегов. Очень советую проштудировать материал.

Как практически прописать атрибуты к изображению

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

Во всплывающем окне задаются параметры изображения, в том числе прописываются title и alt.

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

Если же у вас сайт не управляется никакой платформой, то есть простая html страница, то придется добавлять руками.

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

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

Смотрите на него, как на образец, куда необходимо вставлять атрибуты, которые копируете из этого же кода. Затем прибавляете их к своим картинкам, заполнив при этом свое описание.

Не забываем, что заполняем эти данные, исходя из содержимого картинки. Описываем само изображение!

С этим вопросом разобрались. Тут все предельно ясно.

Вкратце вывод таков: "title и alt заполняем одинаковыми и прописываем в них описание самого изображения, то есть того, что изображено на картинке" .

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

Другие важные моменты

Имеется еще 3 вещи, которые я не рассмотрел выше:

• название файла изображения;
• уменьшение веса изображений;
• уникальность картинок для сайта.

Сейчас я рассмотрю только 1й момент, так как под остальные 2 я выделил полноценные объемные материалы.

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

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

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

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

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

Код изображения имеет вид.

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

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

Это полезный инструмент для SEO. Поисковые системы не умеют распознавать изображения и реагируют исключительно на слова. Добавляя к картинке alt-текст, вы делаете ее «заметной» для Яндекса или Google, и в результате ваш сайт начинает подниматься в результатах поиска.

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

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

Не будьте многословны . Добавляя alt-текст, постарайтесь уложиться максимум в 15 слов.

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

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

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

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

В добавить alt-текст очень просто. Вот инструкция.

Для Wix-сайта:

Щелкните мышкой по изображению.

Нажмите на иконку «Настройки».

Добавьте alt-текст в поле «Тексты фото» - «Опишите картинку поисковикам».

Для блога на Wix:

Откройте новый или уже написанный пост в редакторе блога.