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

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

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

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

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

Приступим!

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

Атрибут «alt»!

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

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

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

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

Атрибут title!

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

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

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

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

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

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

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

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

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

Вот и они:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

alt=”Ремонт компьютеров в Чебоксарах”

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

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

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

“Сплит-система HYUNDAI H-AR6-07H Вид 1”

“Сплит-система HYUNDAI H-AR6-07H Вид 2”

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

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

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

Текст заголовка с ключевым словом

Дальнейшее описание

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

Подпись под картинкой

Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:

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

Например, у вас картинка динамиков Iphone 7.

В подписе укажите данный факт: “Звучание звука в Iphone 7 стало заметно лучше благодаря Lighting” Отношение Яндекса к атрибуту ALT

“Как поместить мою картинку на первое место?"

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

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

Ранжирование картинок в Google

Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.

Давайте пробежимся по главным факторам для Google.

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

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

А что по поводу атрибута Title

Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом ). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.

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

Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?

Каждая веб-страница создается при помощи разметки - кода, который пишется на специально предусмотренном языке (чаще всего это 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. При клике на картинку сайт самостоятельно определяет источник, с которого было взято изображение, и перенаправляет посетителя. А это, как вы понимаете, очень важно уметь делать в будущем.

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

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

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

В этой статье я покажу, как производится оптимизация изображений на сайте с помощью атрибутов 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 определить, что должно было быть на картинке. А title содержит в себе подсказку для изображения, всплывающую при наведении курсора.

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

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

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

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

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

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

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

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

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

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

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