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


Содержание материала:

Как автоматически заполнять атрибут Alt в изображениях на WordPress

Table of Contents

Значение атрибута Alt в SEO-продвижении

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

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

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

Правильно заполняем атрибут alt

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

  1. Поисковики не приветствуют большие описания. Длина должна быть ограничена 250-ю знаками. А лучше выбрать для себя среднее значение в 5 или 6 слов.
  2. Смысл текста должен совпадать с тем, что изображено на картинке. Пишем в атрибуте «дворец», а на фото виден сарай. Такая бессмыслица только оттолкнет пользователей от вашего блога.
  3. Используйте в атрибутах ключевики, но не перегибайте палку. Некоторые блогеры вставляют в атрибут alt самые топовые запросы через запятую. Это автоматически будет считаться спамом и поисковик может вас заблокировать.
  4. Не прописывайте атрибуты alt у картинок, которые не несут смысловой нагрузки, а являются элементом дизайна.
  5. Не следует фантазировать с дополнительными тегами alt для похожих картинок из одной статьи или карточки товаров. Предположим, у вас интернет-магазин футболок и для каждой вещи вы припасли по несколько картинок. Поэтому все изображения одного товара надо подписывать одинаково, но разграничить цифрами на конце. Например: «футболка красная 1», «футболка красная 2».

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

Автоматическое заполнение атрибута alt в WordPress с помощью плагина

Мы рассмотрим способ как автоматически заполнить атрибут alt в wordpress: используя инструменты плагина Clearfy. Скачиваем и приступаем к его настройке:

Открываем «Настройки» => «Clearfy меню».

В меню настроек плагина выберите раздел «SEO».

В первом же блоке «Базовые настройки SEO оптимизации» вы найдете необходимые функции. В строке Автоматически устанавливать атрибут alt нажмите кнопку ВКЛ и не забудьте сохраниться.

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

Заключение

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

Как автоматически добавить атрибут Alt в теги Img вашего блога на WordPress (там, где их нет)

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Валидатор Html кода и другие инструменты аудита вашего сайта, будут выдавать предупреждения, если найдут на странице теги изображений IMG без прописанного внутри атрибута ALT.

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

А вот сил на обратное добавление атрибутов ALT в статьи у меня уже не осталось. Сейчас, когда обновляю старые материалы, естественно, дописываю и ALT-ты, но далеко не все статьи я переписываю (не до всего доходят руки). Поэтому я и подумал о том, чтобы поставить «времянку».

Автоматическое добавление ALT к изображениям, где его нет

Идея очень простая, а реализация изящная. Показанный внизу скрипт (функция для WordPress) просто ищет теги IMG, в которых атрибута alt нет вообще. Найдя такое безобразие она добавляет ALT и тупо прописывается в нем название статьи (содержимое тега Title страницы).

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

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

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

В ее коде вы найдете ALT-ты хоть и одинаковые, но все же присутствующие.

Все лучше, чем ничего. ИМХО.

На страницах же, где альты были прописаны ничего не поменяется:

Как добавить атрибуты alt и title миниатюрам в WordPress

И еще на тему. Миниатюры в WordPress по умолчанию выводятся с пустыми тегами Alt (типа alt=»»). Если это вам не нравится, то можете добавить в качестве альта к миниатюрам названия статей, из которых они были взяты. Заодно можете и атрибут Title к тегу Img добавить:

Если к миниатюрам хотите добавить только альты, то можно использовать такой код:

Как прописать атрибут ALT к картинке правильно?

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

Оптимизация кода

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

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

Что такое атрибут ALT?

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

Итак, для понимания данного текста в первую очередь необходимо разбираться в языке разметки HTML. Это — код, на котором пишутся базовые веб-страницы, который, как уже было отмечено, имеет свойство отображаться в браузере. Весь язык состоит из специальных атрибутов (например, IMG, ALT, FONT и так далее). Каждый из них отвечает за работу с тем или иным элементом дизайна. На практике применяется упомянутый выше атрибут ALT для картинок, которые можно встретить на страницах сайтов. Если говорить конкретнее, то с его помощью создается описание к картинкам, по которым пользователь (посетитель сайта) может легко и просто разобраться в том, что же на них показано. Наверняка вы и сами сталкивались с такими описаниями — они возникают при наведении мышки на картинку.

Практическое значение

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

Бонусы от поисковиков

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

Как прописать атрибут ALT?

Технически нет ничего сложного в том, чтобы заполнить под той или иной картинкой описание. Это очевидно: нужно зайти в HTML-редактор на своем сайте и найти код изображения (начинается с IMG и заканчивается им же). Внутри этого блока кода есть код. Именно его и имеют в виду, когда говорят, что нужно прописать атрибут ALT. Делается это так: “alt = “описание”.

Если вы работаете не с чистым кодом, а используете какой-то отдельный “движок” для сайта (например, WordPress или Joomla), — в нем интегрирован особый механизм добавления “альтов”, через которые наш сайт и запомнится поисковикам. Если вы заполняете новый ALT, обновление оказывается на вашей странице.

Что пишут в атрибуте?

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

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

Требования

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

Например, первое такое требование — это длина всего текста. Если вы ищете, как правильно прописать атрибут ALT, решение элементарно: используйте не больше 2-3 слов. Текст такого размера будет, во-первых, идеально считываться поисковым роботом (и делать ваш сайт более релавантным); во-вторых, такое описание более понятно самим пользователям. Согласитесь, читать целое предложение, если вы хотите просто знать, что показано на картинке, никто не будет. Достаточно кратко и точно изложить описание, что будет полезно как вам, так и клиентам.

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

Еще один важный момент (который был установлен в ходе многочисленных практичных испытаний) — это уникальность. Если ищете, как прописать атрибут ALT к картинке, помните: его нужно подбирать уникальным для каждой из перечисленных фотографий на сайте. Например, публиковать три картинки подряд с подписью “мой слон” будет неправильно — это только навредит вашему ресурсу в поисковой выдаче. Лучше назвать изображения “слон 1” и “слон 2”, что сделает их более уникальными.

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

Поиск ALT

Наконец, мы поговорили об основах атрибута, о некоторых правилах его составления и требованиях обеих сторон (как пользователей, так и поисковых роботов) к ним. Теперь подумаем: так как же искать ключевые слова и фразы, которые мы будем прописывать на своем сайте? Как уже отмечалось выше, поиск нужно направлять в сторону готовых баз ключевых слов, которыми реально начать привлечение клиентов на ваш сайт. Разумеется, этого не добиться, если у вас все же отсутствует атрибут ALT. Берите в готовом виде ключевые слова и фразы, которые применяете в контенте, и вставляйте в картинки.

Если таких сведений у вас нет и вы совсем не думали над тем, чтобы начать понемногу раскручивать свой ресурс, предлагаем начать искать базы таких “ключевиков”, с которыми вы сможете легко создавать новые сайты. Для этого отлично подойдут сервисы вроде Google Keyword Extract Tool или Yandex.Wordstat, где показана статистика поиска по тем или иным фразам. “Играя” с этими настройками, можно существенно расширить долю поискового трафика на своих сайтах и тем самым начать извлекать новую выгоду. Главное, чтобы не возникло ситуации, в которой у всех видимых изображений отсутствует атрибут ALT.

Выводы

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

Указание тега может привести и новых посетителей — особенно часто такое явление наблюдается на таких сервисах, как Google и Yandex Images. При клике на картинку сайт самостоятельно определяет источник, с которого было взято изображение, и перенаправляет посетителя. А это, как вы понимаете, очень важно уметь делать в будущем.

Атрибут ALT для картинок в WordPress

Многие ищут, как прописать ALT для картинок в WordPress в коде шаблона. Я имею ввиду не простое разъяснение, где его прописывать и он появится, а где возникают проблемы с его отображением.

На дворе 2020 год, и самая популярная система CMS — WordPress. Шаблоны приплывают то с ThemeForest, то с TemplateMonster, красивые, моднявые, но с точки зрения SEO ни какие. �� Одним из недочетов, является отсутствие важного тэга для картинок — ALT (альтернативный текст).

Соответственно как бы вы не хотели его прописать, по умолчанию его там нет. Я говорю про шаблоны, плагины, которые являются частью и дополнением к красивеньким скинам, например Visual Composer и т.д.

Проверь прописан ли ALT

Проверьте свои сайты, а именно страницы, где большое кол-во картинок, прописаны ли к ним тэги ALT? Если нет, то я рекомендую ручками залесть по FTP и решить данную проблему. Искать плагины для решения этой проблемы не стоит. Поверьте, золотое решение не найдете, нужно искоренять проблему в её зародыше, а установкой плагина, только добавите дополнительный груз букету WordPress. ��

Итак проверяем сайт, смотрим исходные коды, например программой Screaming Frog ��, выявляем подобное:

Определяем местонахождение пустых тэгов alt=»» в файлах по FTP. И прописываем в них:

— если желаем всем картинкам, передать название этой страницы TITLE — в ALT.

— если хотим отобразить надписи заполненные в МедиафайлахАтрибут ALT.

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

А в заключении, предлагаю посмотреть ролик далекого 2007 года, где Мэтт Каттс рассказывает об важности атрибута ALT. Всего Вам доброго.

Как автоматически добавить атрибут alt в теги img вашего блога на wordpress (там, где их нет)

Как автоматически добавить атрибут Alt в WordPress

Заметили, что при проверке в PageSpeed Insights Гугл ругается на отсутствие alt в изображениях на Вашем WordPress-сайте? Не переживайте, все поправимо!

Важность атрибута Alt

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

Как автоматически добавить Alt?

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

Наиболее быстрым и корректным способом является использование многофункционального плагина Clearfy Pro, который автоматически заполнит пустой Alt-тег в изображениях на Вашем сайте. Для этого всего лишь потребуется в админке перейти Clearfy Pro и на вкладке SEO передвинуть вправо ползунок напротив опции Автоматически проставить alt.

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

Плагин Clearfy Pro подставляет это значение в зависимости от названия записи, в которой выводится то или иное изображение.

Топ-пост этого месяца:  Центрирование с помощью Sass

Способ 1. Плагин Auto Image Attributes From Filename With Bulk Updater

Плагин Auto Image Attributes From Filename With Bulk Updater позволяет не только автоматически добавить значение в атрибут Alt, но также Title, Caption и Description. Для этого, после его установки и активации, в админ-панели следует перейти Настройки -> Image Attributes, и на вкладке Bulk Updater нажать кнопку Run Bulk Updater.

Способ 2. Update Image Tag Alt Attribute

Update Image Tag Alt Attribute — еще один плагин для добавление мета-информации в изображения. Способ его работы аналогичен предыдущему плагину.

Он также “жестко” устанавливает значения, которые невозможно будет изменить для отображения в разных публикациях. Итак, после активации плагина следует перейти в раздел Maui Marketing -> Update Alt и нажать кнопку Start Update Only Media.

Этим Вы запустите трудоемкий процесс поиска и установки для всех фото Вашего сайта Alt-атрибута.

Задай их экспертам в нашем телеграм канале «WordPress сообщество» Если Вам понравилась статья — поделитесь с друзьями

Правильно оптимизируем изображения для сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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 страница, то придется добавлять руками.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прежде всего, мы знаем имя файла изображения. И неважно, что расположено изображение на другом сайте. Также мы видим, блок ДИВ с классом . И то, что этот блок находится внутри списка, элемент которого имеет идентификатор >

И уже по классу «textwidget» становится понятно, что нужный нам код расположен в Виджетах. А раз так, то искать все эти элементы, на которые мы обратили внимание – бесполезно.

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

Который никак не укажет на конкретный виджет.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавляем атрибут Title к изображениям WordPress

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

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

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

Что такое атрибут Title у изображений?

В HTML изображения выводятся с помощью тега img. Вот так:

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

Тег alt также отображается, когда изображение не найдено или когда браузер не может загрузить картинки. Вот так:

Для того, чтобы упростить жизнь пользователям, пользующимся экранными дикторами и пользователям с ограниченными возможностями, вы такое можете добавить атрибут title изображению. Вот так:

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

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

Проблема

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

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

Добавление атрибута Title к изображениям WordPress

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

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

Плагин берет значение, которое вы ввели в заголовке изображения и добавляет его в код вставки картинки в качестве title атрибута.

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

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

Rating: 3.0/5 (2 votes cast)

Массовое добавление и изменение атрибутов изображений (Alt, Title)

Не буду расписывать долго, если кратко и по сути:

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

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

Скачать плагин: https://ru.wordpress.org/plugins/auto-image-attributes-from-filename-with-bulk-updater/.

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

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

Перед массовой обработкой настоятельно рекомендуется сделать бэкап базы данных.

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

Automatic Alternative Text

Автоматически вставляет атрибут alt с помощью сервиса Microsoft’s Cognitive Services Computer Vision API.

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

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

Bulk SEO Image

Скачать плагин: https://wordpress.org/plugins/bulk-seo-image/.

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

Плагин не обновляет контент в базе.

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

DP ALTerminator — Missing ALT manager

Страница плагина: https://wordpress.org/plugins/dp-alterminator-missing-alt-manager/.

Плагин позволяет заполнить пустые или отсутствующие атрибуты alt для всех страниц с помощью шаблона (например, %%DP_TITLE%%— вставит в alt название записи).

Если плагин деактивировать, результат пропадет.

PB SEO Friendly Images

Плагин автоматически синхронизирует alt и title в контенте. Есть возможность переписать уже заданные атрибуты по выбранной схеме.

Опять же, плагин работает пока активен. Он заменяет атрибуты на лету в HTML коде.

SEO Friendly Images By OptimalPlugins.com

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

SEO Images Optimizer by Weblizar

Скачать плагин: https://wordpress.org/plugins/seo-image-optimizer/.

Результат работы как и у предыдущих двух.

Плагин не делает изменений в базе, вставляет атрибуты на лету.

Seo Optimized Images By priyanshu.mittal

Страница плагина: https://wordpress.org/plugins/seo-optimized-images/.

По внешнему виду представляет ясный интерфейс, который также переведен на русский.

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

Итоги по оптимизации атрибутов изображений

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

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

Какая может быть стратегия:

  • физически переименовать файлы, можно воспользоваться плагином;
  • обновить название, описание, подпись, alt из имени файла с помощью Auto Image Attributes From Filename (обновятся метаданные в библиотеке);
  • обновить атрибуты в контенте на лету с помощью плагина Seo Optimized Images By priyanshu.mittal, или SEO Images Optimizer by Weblizar по нужной вам схеме.

ALT картинки – как правильно прописать

Время чтения: 7 минут

Тема сегодняшней статьи – SEO – оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:

Что такое атрибут ALT?

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

Так же, как и Title и Description он учитывается поисковой системой

Синтаксис html описания картинки

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

Читайте в нашем блоге: Продвижение сайта в регионах – поддомены для Яндекса

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

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

Топ-пост этого месяца:  Фреймворк Yii2. Установка шаблона

Пустые атрибуты ALT и TITLE. Как правило, многие SEO оптимизаторы не заморачиваются по поводу этого тега. Да, возможно, если ваш сайт очень крупный имеет посещаемость 100000 в сутки заморачиваться не стоит, но если вы только раскручиваетесь и вам нужен первый трафик, то указать атрибуты все же стоит.

Не соответствие изображения и атрибутов. Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.

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

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

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

Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.

А как же нужно прописывать теги для картинок?

Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.

Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.

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

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

Карточка товара содержит много картинок

Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:

Похожие товары

Помимо картинок товара, есть у вас на сайте имеются элементы: похожие товары, с этим товаром чаще смотрят и так далее. Данный вид картинок не стоит сбрасывать со счетов и SEO оптимизировать их прописав ALT и Title. Причем стоит уделить время прописать конкретно: бренд, модель, номер товара, все важные параметры, которые люди могут вбивать в поиск.

Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.

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

Атрибут alt для картинок – как его заполнить и для чего он нужен

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

Там будет просто крестик (или иконка), который указывает на то, что в этом месте должно быть изображение. Например, на этом изображении можно увидеть карту мира:

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

Влияние alt в SEO

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

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

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

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

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

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

Соответственно, идеальным заполнением атрибута будет максимально точное и короткое описание картинки. Как правило, 30-100 символов достаточно. При этом максимальная длина должна быть примерно 250 символов.

Но зачем вам так подробно описывать изображение?

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Роль атрибутов ALT и TITLE у изображений!

Приветствую вас дорогие пользователи isif-life.ru. Оптимизация своего блога — это сложный процесс, требующий определенных навыков, опыта, а если его нет, тогда надо владеть большой базой знаний, которую мы и берем из статей на блогах популярных вебмастеров.

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

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

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

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

Но сейчас я не об этом. Хотелось бы поделиться с Вами о работе тегов «alt» и «title». Постараюсь, как можно подробнее объяснить, что это вообще такое и с чем эти теги едят.

Что такое alt и title для изображений?

Атрибут «alt»!

Его предназначение для отображения фрагмента текста картинки. Чаще всего, это описание изображения.Вашим пользователям он не заметен. Подобные теги очень важны для поискового продвижения. Для людей они практически ничего не значат.

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

Таким образом поисковая проверка будет захватывать всю вашу статью и там не будет каких-то недочетов и мелких погрешностей. Исходя из этого странница будет находиться близ ТОПА-10 или вовсе будет туда вылетать.

ТОП — это высокая посещаемость. А, как её нарастить я писал в статье про увеличение посещаемости сайта или блога.

Атрибут title!

«title» — это заголовок. Наверное, каждый об этом знает. В картинке — это название, которое доступно каждому, допустим, когда мы наводим курсор мыши на изображение появляется короткий текст, который и является title. С этим все ясно. Указать название можно у себя на ПК или ноутбуке, а потом вы закидываете картинку в сам пост и опять же прописываете заголовок и описание (alt).

Что касается того, что-куда писать, то с этим не волнуйтесь.

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

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

Вот еще на счет «title». Они не должны быть длиннее 5 слов. А также желательно, чтобы вы их прописывали на латинском языке, то есть английском. И самое важное формат изображения должен быть jpg. Это снижает вес, а значит и загрузка будет быстрее, что оказывает немалое влияние на трафик сайта.

Снизить массу картинки можно в фотошопе. Открываем его. Кликаем файл и далее Сохранить для WEB. Там, где написана цифра 50, 60 или какая-нибудь другая вы её можете регулировать, чем меньше, тем вес ниже. Если у вас еще нет фотошопа, тогда вперед овладевайте им. Ведь это неотъемлемый элемент любого вебмастера.

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

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

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

Думаю, не будет лишним, как можно лучше оформить её, а вы как думаете?

Почему важно прописывать теги title и alt? Как они добавляются к изображениям?

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

  • Первым делом, конечно, надо написать статью и найти уникальную картинку. Как правило, все делают стандартный шаблон, свой, и туда уже вставляют изображение, скрины, например, или рисуют что-то, либо вовсе заказывают у художника.
  • Посмотрели на ключевые фразы, которые вы использовали для поста и один прописали в title;
  • Второй ключ прописали в alt, в описание и добавили еще несколько слов, одним словом разбавили запрос.
  • Теперь сохраняем изменения и добавляем картинку в текст, потом просматриваем статью и наводим курсор на изображение, смотрим: какой title отображается. Все готово.

Соблюдайте эти рекомендации и тогда ваш сайт намного быстрее полезет вверх в поисковых системах.

Короче преимущества в следующем, это для тех, кто еще не убедился до конца.

  1. Трафика больше;
  2. Качество его выше, так как вы указали точные ключи, которым и посвящена статья, посетитель будет забивать их в поиск и найдет у вас нужную инфу, значит пробудет на вашем блоге дольше и число отказов будет меньше;

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

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

С уважением, Жук Юрий.

Как правильно заполнять alt и title для картинок – Академия SEO (СЕО)

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

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

Что же из себя представляют атрибуты alt и title? Нужно ли их заполнять? Какова их роль в поисковой оптимизации? Продолжайте читать и Вы получите ответы на перечисленные и некоторые другие не менее важные вопросы.

Атрибут title. Необходимость и основные правила использования

Если честно, атрибут title является далеко не обязательным элементом SEO-оптимизации. Основная цель его использования – давать подсказки пользователям насчет содержимого просматриваемого изображения. При наведении курсора на картинку выводится содержимое атрибута title в белом прямоугольнике.

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

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

  1. Не содержал информацию, по смыслу не соответствующую картинке. Иначе это будет вызывать отталкивающий эффект.
  2. Был не слишком длинным. Ограничений как таковых нет, но всплывающая подсказка в две–три строки явно будет портить впечатление.
  3. По возможности содержал одно из основных ключевых слов. Да, поисковики не зачтут этот дополнительный «прогиб». Но зато посетитель лишний раз убедится в релевантности просматриваемого материала его изначальному запросу в поисковой системе.
  4. Не дублировать заголовки на странице (основной title, H1, H2 и т. д.) и содержимое атрибута alt. 100%-й уникальности тут, конечно же, добиться невозможно. Но добавить разбавляющие слова вроде «фото» или «картинка» по силам каждому.

Важность и нюансы заполнения атрибута alt изображений

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

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

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

Что касается посетителей сайтов, то они могут увидеть содержимое атрибута alt лишь в нескольких случаях:

  1. При отключении в браузере отображения графического контента (что по сути случается довольно редко).В этом случае вместо опубликованных картинок пользователь будет наблюдать стандартную иконку изображения и прописанный в атрибуте alt текст. Отсюда и его название «alt» – сокращенное от «alternative». Т. е. речь идет об альтернативном варианте (когда стандартный режим отображения не устраивает или по какой-то причине недоступен пользователю), позволяющему все же в общем понять, что было изображено на скрытом в данный момент фото.
  2. При просмотре результатов «Поиска по картинкам» в описании найденного изображения.

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

  1. Как и название самого графического файла, атрибут alt для картинок должен по смыслу соответствовать их содержимому и быть релевантным обтекающему тексту.
  2. Длина текста не должна быть меньше 3–4 слов и длиннее 250 символов.
  3. Использовать ключевые слова можно, но не стоит перечислять в нем сразу несколько из них, так как поисковики посчитают это спамом и могут исключить из выдачи не только само изображение, но и всю страницу, на которой оно размещено. Выберите одно, наиболее подходящее, и разбавьте парочкой дополнительных, стараясь сделать так, чтобы его употребление выглядело максимально естественным. Также можно взять ту же фразу, что и в атрибуте title (если она не очень длинная) и заменить употребленные там слова-разбавители (например, вместо «картинка» использовать «фото»).
  4. Не употреблять слова вроде «купить», «оформить», «цена», если они напрямую не относятся к изображению (если это не прайс-лист, например).
Топ-пост этого месяца:  10 самых популярных бесплатных тем для WordPress

Коротко подведем итоги

Атрибут title:

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

Заполненный атрибут alt изображений:

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

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

Благодарим за внимание. Ждем Ваших вопросов под этой статьей.

Как добавить title image к ссылочному описанию миниатюры — WordPress

Эта коротенькая статья очень и очень важная и посвящена оптимизации сайта на WordPress, а именно миниатюрам статей. По умолчанию — многой полезной атрибутикой cms не располагает! Посему у большинства неопытных создателей сайтов руки так не доходят до правки кода, что весьма печально! (и у меня «не дошли» написать пост раньше)

Важный аспект настройки сайта касается оптимизации изображений: нынче добавим title к ссылке миниатюры image, или превьюшке… или thumbnails, кому как угодно.

То, что нужен title в цикле любой ссылки — это бесспорно !! title очень важен: посудите… если у вас не будет главного описания сайта или статьи, которые также как и картинка должны иметь собственный тег title, что из этого получится. Верно! — каша-малаша!

Ну, давайте — по порядку…

Вот основная теговая атрибутика, которая должна присутствовать в ссылке картинки: img src alt title…

Alt — подсказка имени картинки, если та не прогружается браузером пользователя.

title — подсказка поисковому роботу; желательно, чтобы текст титле включал в себя ключевое слово.

Если первое можно и позабыть в процессе оптимизации, то второе ни в коем случае! Сами понимаете.

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

Так что внимательнее…

Вот картинка, так должен располагаться в ссылке миниатюры виновник темы сегодняшней статьи:

И коли у вас в ссылке тега title нет, нужно это дело поправить!

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

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

код автоматической прописки тега title к миниатюрам

/** КАРТИНКИ – добавляем title в атрибутику миниатюры **/ function titles_gallery($atts,$img) < $atts['title'] = trim(strip_tags( $img->post_title )); return $atts; > add_filter(‘wp_get_attachment_image_attributes’,’titles_gallery’,10,2); /** фин добавляем title в атрибутику миниатюры **/

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

Эта поэтическая кодировка автоматом пропишет необходимый в продвижении тег title ко всем уже имеющимся на сайте миниатюрам!

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

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

А вот ещё один важный момент, который нужно решить также (желательно) в момент создания сайта!

как подключить в текстовом редакторе автоматическое добавление тега title к картинке в статье

…в системе WordPress (по крайней мере — в последних версиях) автоматическое добавление (или заполнение поля) тега title не предусмотрено.

При добавлении картинки в статью (не миниатюры), в текстовом редакторе нужно вручную прописывать атрибут (тег) Тайтл (Title) — это очень важно в плане индексации и продвижения сайта!

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

…а вот для тега тайтл-картинки будет весьма полезно прописать в заголовке ключевые слова (подсказки роботу поисковика).

Вероятно, обращали внимание у «старых блогеров»), что, к примеру, Alt фотки несколько отличается от имени — её (или его)) Title.

Очень многие этой разностью успешно пользуются, заместо автопрописки типичных имён, — ибо частенько мы именуем картинки в папке ноутбука мало осмысленно, а иногда и под нумерацией — этакие медиа не стоит загонять на сервер — очень неправильно это!! ))

Ну, ладно, хорош брюзжать…

Вот код: пропишите его в своём файле функций (functions.php) активной темы…

/** АВТОМАТИЧЕСКОЕ ДОБАВЛЕНИЕ К КАРТИНКЕ статьи title **/ if ( !function_exists(‘avd_insert_image_title’) ) : function avd_insert_image_title( $html, $ >

ALT картинки — как правильно прописать

Время чтения: 7 минут Нет времени читать?

Тема сегодняшней статьи – SEO — оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:

Что такое атрибут ALT?

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

Так же, как и Title и Description он учитывается поисковой системой

Массовое добавление и изменение атрибутов изображений (Alt, Title)

Почему важно наличие атрибутов в изображении

Не буду расписывать долго, если кратко и по сути:

    атрибуты изображений способствуют поисковой оптимизации;

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

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

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

Auto Image Attributes From Filename With Bulk Updater

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

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

Перед массовой обработкой настоятельно рекомендуется сделать бэкап базы данных.

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

Automatic Alternative Text

Автоматически вставляет атрибут alt с помощью сервиса Microsoft’s Cognitive Services Computer Vision API.

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

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

Bulk SEO Image

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

Плагин не обновляет контент в базе.

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

DP ALTerminator — Missing ALT manager

Плагин позволяет заполнить пустые или отсутствующие атрибуты alt для всех страниц с помощью шаблона (например, %%DP_TITLE%% — вставит в alt название записи).

Если плагин деактивировать, результат пропадет.

PB SEO Friendly Images

Плагин автоматически синхронизирует alt и title в контенте. Есть возможность переписать уже заданные атрибуты по выбранной схеме.

Опять же, плагин работает пока активен. Он заменяет атрибуты на лету в HTML коде.

SEO Friendly Images By OptimalPlugins.com

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

SEO Images Optimizer by Weblizar

Результат работы как и у предыдущих двух.

Плагин не делает изменений в базе, вставляет атрибуты на лету.

Seo Optimized Images By priyanshu.mittal

По внешнему виду представляет понятный интерфейс, который также переведен на русский.

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

Итоги по оптимизации атрибутов изображений

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

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

Какая может быть стратегия:

физически переименовать файлы, можно воспользоваться плагином;

обновить название, описание, подпись, alt из имени файла с помощью Auto Image Attributes From Filename (обновятся метаданные в библиотеке);

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

Уважаемые форумчане.
Подскажите пожалуйста куда именно вставлять Alt в product.html? , тема дизайна «удобная покупка»

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

Это содержание файла product.html

#13 2015-01-08 22:56

Re: Проставить автоматом alt для всех изображений

Spalah написал:

Разработчику шаблона не пробовали написать?

Спасибо.Напишу,праздники просто,не хотел тревожить пока

#14 2015-01-08 23:33

Re: Проставить автоматом alt для всех изображений

Ден-бармен написал:

Уважаемые форумчане.
Подскажите пожалуйста куда именно вставлять Alt в product.html? , тема дизайна «удобная покупка»

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

Тут никуда ALT прописывать не надо, тут же стоит include файла product.image.html, давайте его содержимое.

Обратите внимание на строчку

<$wa->shop->productImgHtml($product, ‘300×0’, [ ‘itemprop’ => ‘image’, ‘id’ => ‘product-image’, ‘data-zoom-image’ => $ImgUrl, ‘alt’ => $product.name|escape|cat:’ ‘:strip_tags($product.summary)|escape, ‘default’ => «`$wa_theme_url`img/dummy200.png» ])>

Вот ALT и он уже предполагает «имя продукта», а не номер.

Отредактировано webirus (2015-01-08 23:35)

#15 2015-01-09 02:48

Re: Проставить автоматом alt для всех изображений

webirus написал:

На счет $image.id не совсем понял, нафига оно вам?

Написал же выше для чего (делал для себя).

P/s: Остальным кто просит прописать атрибут ATL или код давайте полностью или ту часть где у вас все это лежит, но прежде всего обращайтесь к дизайнерам\верстальщикам и прочим кто делал шаблон, так как прописано это может через что угодно, у меня лично через lightbox, как у вас не могу гадать.

#16 2015-01-09 10:39

Re: Проставить автоматом alt для всех изображений

Вот у меня аналогичный отрывок есть этому:

<$wa->shop->productImgHtml($product, ‘300×0’, [ ‘itemprop’ => ‘image’, ‘id’ => ‘product-image’, ‘data-zoom-image’ => $ImgUrl, ‘alt’ => $product.name|escape|cat:’ ‘:strip_tags($product.summary)|escape, ‘default’ => «`$wa_theme_url`img/dummy200.png» ])>

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

#17 2015-01-11 12:34

Re: Проставить автоматом alt для всех изображений

В файле «product.image.html» (магазин-витрина-дизайн)
есть строка

‘alt’ => $product.name|escape|cat:’ ‘:strip_tags($product.summary)|escape

вставляет атрибут «alt» содержимое которого название товара и краткое описание

изображение публикуется этой строкой

определяет атрибут «alt»
в качестве содержимого — описание самого изображения

Вы в шаблоне «удобная покупка» можете изменить конструкцию

Атрибут ALT – оптимизация картинки

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

Сначала давайте разберемся, зачем нужна поисковая оптимизация картинки.

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

Каждой картинке соответствует имя файла – Title и атрибут ALT

На что же обращает внимание поисковик? В первую очередь на атрибут Alt.

Атрибут ALT дает возможность отображения текста, если картинку по каким-либо причинам невозможно показать. То есть посетитель, например, отключил показ картинок в браузере. Тогда информация атрибута будет показана вместо этой картинки. И посетитель будет понятно, о чем эта картинка.

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

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

Как видите, насколько важно грамотно оформить атрибут ALT.

Теперь поговорим об имени файла – Title.

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

В идеале информация ALT и Title должны совпадать.

Очень хорошо, если в описании файла и атрибуте ALT будет прописано ключевое слово.

На что надо обратить внимание:

  1. Формат восприятия поисковика картинок и поддержка их браузерами – JPEG, PNG, BMP, GIF ;
  2. Используйте информативные и короткие тексты для имени файлов и атрибута Alt. Не надо писать в названии что-то подобное – 1.gif или page1.jpeg;
  3. Не заполняйте информацию множеством ключевых слов или предложениями;
  4. Если вы делаете картинку ссылкой – не заполняйте длинный ALT – текст;

Ну вот, пожалуй, и все. А сейчас посмотрите короткое видео по оптимизации картинки

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

Атрибут alt тега img

Что такое атрибут alt?

Атрибут alt=»» (от англ. alternative) тега img представляет собой альтернативный текст или проще говоря — описание изображения. Для каждой картинки он прописывается отдельно и вкратце рассказывает, что на ней изображено. Синтаксис его крайне прост. Внутри тега img необходимо прописать атрибут alt=»», внутри кавычек которого и располагается описание.

Ниже приведен пример использования атрибута alt в теге img у нас на сайте.

Для чего нужен данный атрибут?

На заре развития Интернета, когда скорость передачи данных была крайне низка, не все пользователи при просмотре сайтов загружали фотографии. Была даже такая функция у браузеров — не загружать изображения. Для тех времен они «весели» слишком много и могли открываться по 10 минут. Как раз в этом случае на помощь приходил атрибут alt=»», который описывал изображенное на фотографии текстом. (Вместо рисунка отображался пустой квадрат, в котором находилось описание незагруженного изображения)

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

Роль alt в SEO

С окончанием эпохи низкоскоростного Интернета и сильно ограниченного трафика alt получает «новую жизнь». Причиной тому стала постоянно развивающаяся SEO индустрия.

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

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

Прописываем alt для изображений

Заполнение атрибута alt основывается на трех столпах — статистика ключевых слов, удобство для пользователей и технические требования.

Статистика ключевых слов

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

Ориентированность на пользователей

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

Действительно, в отличие от тегов title, h1-h6 и description, атрибут alt человек скорее всего не увидит. Но, данное описание используется поисковыми системами в органической выдаче, то есть, подходить к нему нужно со всей серьезностью.

Немного технических требований

Атрибут alt не имеет длинного списка технических требований, однако должен соответствовать всему ниже перечисленному:

Длинна не более 160 символов. Физически, alt=»» не ограничен в своем объеме, однако многочисленные исследования показали, что эффективно поисковиками используется лишь 160 первых символов. (Google — 160, Yandex чуть больше — около 240);

Длинна не менее 20 символов. Очень короткое описание не способно передать всю суть изображения;

Атрибут alt должен находится внутри тега img: ;

Должен быть написан на том же языке, что и содержимое страницы;

Недопустим пустой alt.

Автоматическая генерация alt

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

Какой он — правильный alt?

Правильный атрибут alt должен соответствовать следующим требованиям:

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

Должен быть понятен пользователю и легко читаться;

Имеет длину не более 160, но и не менее 20 символов;

Не обманывать и не вводить в заблуждение;

Содержать в себе основные ключевые слова;

Написан на том же языке, что и содержимое страницы;

Не является поисковым спамом или списком ключевых слов;

Атрибут не должен быть пустым;

Желательно отсутствие сложных технических терминов и аббревиатур. (Если это не оправдано тематикой сайта).

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

Ошибка — «Отсутствует alt»

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

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

Alt для распространенных CMS

Так как большинство сайтов созданы на основе популярных CMS, таких как WordPress, Joomla! или Bitrix, то скорее всего Вам придется столкнуться с заполнением атрибута alt в этих системах управления. Поэтому мы собрали несколько пошаговых инструкций.

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

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

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

Способ 1 — При добавлении фотографии в статью

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

Способ 2 — Если изображение уже в статье

Если изображение уже вставлено в статью, нужно его выделить и нажать на карандаш во всплывающей подсказке. (Как показано на рисунке ниже)

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

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

Создание атрибута alt в Joomla! происходит на этапе добавления изображения в статью. Находим иконку показанную на рисунке ниже и нажимаем на нее.

Перед Вами откроется всплывающее окно, в котором будет поле «Описание изображения». Это и есть атрибут alt.

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

Если не устанавливать дополнительные расширения и модули, то добавление alt в bitrix происходит в два этапа.

Открываем статью в режиме редактирования. Нажимаем на пункт меню «Изменить страницу» -> «В визуальном редакторе«.

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

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

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

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

Далее открывается всплывающее окно, в котором сразу под ссылкой располагается поле «Альтернативный текст«. Это и есть наш alt.

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