Прописать атрибуты alt и title у картинок можно следующим образом:

В том случае, если на изображение назначена ссылка, то title лучше прописать к ссылке:

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

• Информацию о изображениях передает атрибут “alt”
• Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать (1).
• Зачем используется этот атрибут? Если пользователь просматривает ваш сайт через браузер с отключенными картинками или использует программу чтения текста с экрана, alt-текст будет служить описанием изображения.
• Alt-текст также используется в графических ссылках. В таком случае он обрабатывается поисковыми системами как анкорный текст ссылки. Несмотря на это, мы не советуем использовать большое количество графических ссылок для навигации по вашему сайту, так как текстовые ссылки справляются с этой ролью не хуже.
• Ну и, наконец, грамотное описание изображения в теге alt вместе с информативным именем файла помогают системам поиска картинок, таким как Поиск Картинок Google, проиндексировать изображения с вашего сайта.
• Файлы следует хранить в отдельных директориях, и сохранять их в общедоступных форматах
• Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку(например, имя-сайта.ru/images/). Это упрощает путь к графическим файлам.
• Используйте широко поддерживаемые типы файлов. Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом.

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

Большинство владельцев сайтов не задумывают о том, насколько важны изображения и их описания для SEO продвижения. И для пользователей, и для поисковиков важна не только картинка, но и её правильное описание — Alt и Title изображений.

Зачем нужно заполнять Alt и Title

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

Название «Alt» является сокращённым от английского «alternative» — суть атрибута сводится к тому, что он становится видимым пользователю в том случае, если изображение почему-то не загружается.

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

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

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

Как правильно заполнять Alt и Title для изображений

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

Правильное заполнение Alt ориентировано на:

• соответствие описания изображению;

• релевантность обтекающему тексту;
• небольшой размер — до 250 символов.

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

Правильно заполненный Title:

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

Важный момент: Alt, Title — атрибуты, которые не должны быть спамными. Это не понравится ни пользователям, ни поисковикам.

Трудности при заполнении Alt и Title

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

Если товар одинаковый, но различается только цветом, лучше всего добавлять название цвета в тексты Alt и Title. Например, для костюмов одной модели использовать описания Alt: «зеленый женский костюм» и «красный женский костюм».

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

что это и как прописать

Всем привет!

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

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

Содержание:

1. Зачем нужны атрибуты тега <img> на сайте
2. Как в WordPress прописать Alt и Title
3. Какой текст использовать в описании картинки

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

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

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

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

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

<img src=»https://pro-wordpress.ru/wp-content/uploads/2017/01/land_1.jpg» alt=»Лендинг пейдж: пример посадочной страницы» title=»Лендинг компании, занимающейся разработкой одностраничных сайтов» />

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

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

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

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

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

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

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

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

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

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

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

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

В рекомендациях для вебмастеров Яндекса атрибуту Alt посвящен раздел «Использование графики». Советы основной поисковой системы рунета таковы:

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

Заключение

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

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

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

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

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

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

В комментариях под статьей предлагаю вам поделиться собственным опытом и ответить на вопрос, используете ли вы Alt и Title для seo-продвижения сайта?

ручной и автоматический способ заполнения

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

Что такое атрибут alt в CMS WordPress

ALT – специальный атрибут применяемый к медиафайлам. Разрабатывался для поисковых систем, чтобы понять что показано. На сайте увидеть нельзя только через исходный код страницы в images.

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

Как прописать атрибут alt в вордпресс

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

В классическом редакторе

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

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

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

В Gutenberg

В новом удобном редакторе Gutenberg процесс занесения атрибута alt проще:

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

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

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

Ссылка на Clearfy PRO

У плагина есть более 50 настроек по улучшению, чистке, SEO, ускорению и оптимизации блогов на WordPress. В разделе SEO передвигаем переключатель в активное положение, теперь ко всем картинкам, не имеющих альта, он сделает автозаполнение взяв текст из заголовка.

Title и подпись для картинок

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

• Тайтл показывает всплывающую подсказку при наведении на объект
• Подпись добавляет текст снизу, который индексируется как простой контент, но находится в одном блоке с файлом в разметке HTML

В старом редакторе:

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

Приложу авторское видео, чтобы представить процесс более ясно.

Что писать в alt и остальные теги в WordPress

Правил должны придерживаться не только владельцы WordPress, но и другие вебмастера:

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

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

Alt и Title изображений для SEO: как правильно заполнять

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

Alt — это атрибут тега <img>, который передает картинку на индексацию поисковому роботу. Другими словами, это краткое описание содержимого изображения.

Title — это атрибут <img>, выступающий в качестве заголовка картинки. Он выводит подсказки, которые показываются, когда посетитель на него наводит.

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

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

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

Пример заполненного тега alt в коде веб-документа:

<img class=»alignleft size-medium wp-image-19492» src=»https://puzat.ru/wp-content/uploads/2019/12/image1-4-201x300.png» alt=»Роман Пузат о 2020 годе» width=»201» height=»300» srcset=»https://puzat.ru/wp-content/uploads/2019/12/image1-4-201x300.png 201w, https://puzat.ru/wp-content/uploads/2019/12/image1-4.png 521w» sizes=»(max-width: 201px) 100vw, 201px»>

Правила заполнения

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

Прописываем alt для картинок

Во всех популярных CMS предусмотрено удобное заполнение тега альт. Например, чтобы прописать тег на Вордпресс достаточно выбрать картинку и нажать «Редактировать», после чего появится форма для его заполнения. 

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

Могут ли атрибуты Alt и Title быть одинаковыми?

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

Вот что об этом говорит тех.поддержка Яндекса: 

Выводы

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

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

А вы заполняете тег альт? Поделитесь наблюдениями и опытом в комментариях.

Как прописать атрибут ALT к картинке правильно? Что такое и для чего нужны атрибуты alt и title в WordPress

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега ).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок — это текст, описывающий изображение в html-теге . Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега :

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

Как правильно составить атрибут Alt для картинок

1. Оптимальное количество слов — 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
2. Обязательное условие — использование ключевых запросов.
3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:

В html-коде заполненный атрибут Title для картинок выглядит так:

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

Как правильно составлять Title для картинок

1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
2. Лучше использовать небольшой по длине Title для удобства пользователей — никто не захочет читать километровую подсказку к картинке.
3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок , такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Alt=»значение»

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

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

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

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

Примечание: если ошибок много, советую использовать поиск CTRL+F для быстрого поиска нужной информации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>> Оптимизация картинок | Атрибуты ALT и TITLE для описания изображений

Как правильно оптимизировать картинки для сайта.

Приветствую Вас, уважаемый читатель моего сайта!

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

Плюсы и минусы использования картинок на сайте:

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут TITLE: Данный атрибут title также входит в язык html. Назначение его такое же, как и атрибут alt, но с той разницей, что данное описание будет показываться пользователю сайта при наведении на картинку курсором. Данный атрибут не участвует в продвижении сайта, но он позволяет увеличивать поведенческий фактор, который также влияет на позицию сайта в поисковой системе. Пишется оно так title=» Описание картинки » . Поэтому оптимизация изображений играет тоже большую роль при продвижении сайта в поисковых системах.

Образец SEO-оптимизированной картинки с использованием атрибутов alt и title:

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

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

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

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

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

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

Кстати если Вы не знаете, как уменьшить качество картинки то воспользуйтесь программой Фотошоп. Для этого заходите в меню «Файл» и там выбираете пункт «Сохранить для Web и устройств».

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

Другие страницы сайта:

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

Ранее мы рассматривали в целом, теперь поговорим более конкретно об картинках и ссылках.

Грамотное использование атрибутов title и alt позволит вам оптимизировать ваши картинки и ссылки и поспособствует увеличению трафика на ваш сайт.

Навигация по странице:

Отличие атрибутов title и alt

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

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

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

Атрибуты alt и title для картинок.

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

Что писать в атрибутах title и alt?

Атрибут title предназначен для посетителей , для получения подробной информации об изображении. При наведении курсора на картинку мы получим текст который был прописан в тайтле. В title стоит вносить обширное описание , которое даст понять суть картинки.

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

Пример использования атрибутов title и alt при оптимизации картинок.

Давайте рассмотрим на примере использование атрибутов title и alt, и их оптимальное заполнение. Есть у нас вот такая картинка:

Тег img в данном случае имеет вот такой вид:

.

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

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

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

Оптимизация внутренних ссылок с помощью атрибута title

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

Что писать в атрибуте ссылки title?

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

Текст title должен отличаться от анкора (текста ссылки), это важно и не стоит этого забывать. Так же стоит использовать в title ключевые слова , что увеличат вес целевой страницы.

Пример использования атрибута title при оптимизации ссылки

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

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

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

Будьте оптимизированными и да прибудет с вами ТОП 1)))

Альтернативный текст изображения, текст заголовка и имена файлов: в чем разница?

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

Но в чем разница между альтернативным текстом изображения и заголовком?

Вы сохраняете их прежними? Вы делаете их всех разными?

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

Альтернативный текст или альтернативный тег: что правильно?

Когда вы думаете об альтернативном тексте изображения, на ум сразу приходит термин «тег alt».

Что ж, тег alt на самом деле неправильное название и вообще не существует. Альтернативный текст или альтернативный текст — это альтернативный текстовый атрибут тега изображения.

Что такое замещающий текст изображения?

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

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

Объявление

Продолжить чтение ниже

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

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

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

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

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

Важно отметить Руководство W3C по доступности для альтернативного текста:

При использовании элемента img укажите альтернативный короткий текст с атрибутом alt.Примечание. Значение этого атрибута называется «альтернативный текст».

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

Реклама

Продолжить чтение ниже

Что такое текст заголовка изображения?

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

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

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

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

Намерение пользователя и его опыт должны быть в центре внимания вашей оптимизации

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

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

Не добавляйте ключевые слова и, конечно же, меняйте ключевые слова, когда это необходимо.

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

• Поможет ли этот замещающий текст и текст заголовка моим пользователям?
• Удовлетворят ли этот замещающий текст и текст заголовка намерения пользователя?
• Улучшит ли это пользовательский опыт?

Джон Мюллер из Google также подтвердил в твите 2017 года, что изображения, которые используются в целях дизайна / позиционирования, не обязательно должны иметь замещающий текст, поэтому пустой замещающий текст, такой как этот (alt = ””) , вполне подойдет.

Дополнительные разъяснения по поводу того, как Google обрабатывает замещающий текст

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

Реклама

Продолжить чтение ниже

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

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

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

Объявление

Продолжить чтение ниже

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

Рекомендации Google по изображениям

Вот предложения Google по улучшению взаимодействия с замещающим текстом, прямо из их Рекомендаций по публикации изображений:

Создайте удобное взаимодействие с пользователем

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

• Обеспечьте хороший контекст: Убедитесь, что ваш визуальный контент соответствует теме страницы. Мы рекомендуем отображать изображения только там, где они добавляют исходную ценность странице. Мы особенно не приветствуем страницы, на которых ни изображения, ни текст не являются оригинальным содержанием.
• Оптимизировать размещение: По возможности размещайте изображения рядом с соответствующим текстом. Когда это имеет смысл, подумайте о размещении самого важного изображения в верхней части страницы.
• Не вставляйте важный текст в изображения: Избегайте встраивания текста в изображения, особенно важных текстовых элементов, таких как заголовки страниц и пункты меню, потому что не все пользователи могут получить к ним доступ (а инструменты перевода страниц не работают с изображениями). Чтобы обеспечить максимальную доступность вашего контента, сохраняйте текст в HTML, предоставляйте замещающий текст для изображений.
• Создавайте информативные и качественные сайты: Хороший контент на вашей веб-странице так же важен, как и визуальный контент для Картинок Google — он обеспечивает контекст и делает результат более действенным.Содержимое страницы может использоваться для создания фрагмента текста для изображения, и Google учитывает качество содержимого страницы при ранжировании изображений.
• Создавайте сайты, удобные для устройств: Пользователи ищут в Google Картинках чаще с мобильных устройств, чем с компьютеров. По этой причине важно, чтобы вы создавали свой сайт для всех типов и размеров устройств. Используйте инструмент тестирования для мобильных устройств, чтобы проверить, насколько хорошо ваши страницы работают на мобильных устройствах, и получить отзывы о том, что необходимо исправить.
• Создайте хорошую структуру URL для ваших изображений: Google использует путь URL, а также имя файла, чтобы помочь ему понять ваши изображения.Рассмотрите возможность организации содержимого изображения так, чтобы URL-адреса были построены логически.

Реклама

Продолжить чтение ниже

Оптимизация имен файлов

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

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

По большей части вам не нужны длинные имена файлов с длинным описательным текстом.

Реклама

Продолжить чтение ниже

Ключевое слово, которое в основном описывает изображение, является прекрасным.

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

Да! Оптимизируйте свои изображения. Но не переусердствуйте.

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

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

Но при этом не упускайте из виду конечную цель — улучшить взаимодействие с пользователем.

Дополнительные ресурсы по оптимизации изображений:

Кредиты на изображения

Изображение 1: metamorworks / Shutterstock.com
Изображение 2: Piscine26 / Shutterstock.com
Изображение 3: GaudiLab / Shutterstock.com
взято автором

Разница между текстом ALT и текстом заголовка

ALT-текст или ALT-атрибут (иногда неправильно используется как « ALT tag ») — важный текст изображения, понятный Google и другим поисковым системам.Его читают слепым или показывают людям, заблокировавшим изображения.

Текст заголовка или Атрибут заголовка (часто неправильно используемый как « Тег заголовка ») — это текст изображений, который пользователь видит после наведения курсора на изображение. Однако этот атрибут не так важен, как текст ALT.

Давайте поговорим об этом немного подробнее.

Практическое использование текста ALT и заголовка

Когда использовать ALT-текст?

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

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

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

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

Чем точнее вы используете текст ALT, тем лучше. Лучше всего также использовать целевые ключевые слова в тексте ALT, но не переусердствуйте.Вы, наверное, уже слышали о наполнении ключевыми словами.

Самый простой способ найти текст ALT изображения на странице — в исходном коде:

Анализируйте изображения

Если вам нужно одновременно проанализировать больше изображений и их ALT-тексты, вы можете легко сделать это с помощью Spotibo. Просто следуйте нашему руководству по анализу изображений SEO.

Когда использовать текст заголовка?

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

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

Настройка ALT и текста заголовка в WordPress

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

Не забудьте название и заголовок изображений

ALT и текст заголовка — не единственные свойства изображения. Также следует знать название и подпись к изображению.

Название изображения

Название изображения не является добровольным. У каждого изображения есть собственное имя, иначе вы бы не сохранили его на свой диск.Поэтому убедитесь, что имя вашего изображения красивое и в идеале состоит из вашего целевого ключевого слова. Под « nice » я подразумеваю, что это не что-то вроде « 24353494548549.jpg » или « Printscreen 10-2-2017 v 11.50.12. ”

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

Так что сделайте имя вашего изображения ясным и красивым при загрузке его на свой сервер.См. Примеры ниже:

Подпись к изображению

Это терминология, установленная WordPress. Вы, вероятно, заметите это как первую опцию в настройках изображений.

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

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

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

Сводка

А понятнее? Надеюсь, потому что теперь ваша очередь

Давайте проанализируем ваши изображения!

Альтернативный текст изображения и заголовок изображения в WordPress

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

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

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

Что такое замещающий текст и заголовок изображения?

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

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

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

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

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

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

Совет для профессионалов: Мы рекомендуем использовать плагин All in One SEO для WordPress, чтобы добавить правильную карту сайта с изображениями и другие функции SEO для улучшения вашего SEO-рейтинга.

Как добавить замещающий текст к изображению в WordPress

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

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

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

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

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

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

Сначала нажмите «Добавить медиа» над полем для публикации.

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

Затем нажмите на нужное изображение, чтобы выделить его, а затем введите замещающий текст, который вы хотите, в «Сведения о прикреплении» вашего изображения:

Как добавить заголовок изображения в WordPress

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

Атрибут заголовка WordPress по умолчанию не добавляется в HTML-код изображения. Он используется внутри WordPress для идентификации медиафайлов.

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

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

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

Например, вы увидите поле «Заголовок» при редактировании изображений в медиатеке:

«Заголовок» здесь используется WordPress для идентификации изображения. Если вы нажмете ссылку «Просмотреть вложение» в нижней части экрана, вы увидите, что заголовок используется в качестве заголовка на этой странице:

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

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

После этого откроется экран «Сведения об изображении». Чтобы установить атрибут заголовка изображения, нажмите маленькую стрелку вниз рядом с «Дополнительные параметры» внизу:

Затем вы можете установить атрибут заголовка изображения.

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

Чтобы переключиться на представление блока в формате HTML, нажмите «Дополнительные параметры» (3 вертикальные точки), затем нажмите «Редактировать как HTML».

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

Чтобы добавить атрибут title к вашему изображению, вам просто нужно добавить title = "Your image title here" к тегу изображения, например:

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

После ввода заголовка вы увидите сообщение с предупреждением: «Этот блок содержит неожиданное или недопустимое содержание».

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

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

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

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

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

Например, если вы пишете статью о лучшем хостинге WordPress, то вашим целевым ключевым словом может быть «лучший хостинг WordPress».

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

Вот несколько возможных вариантов альтернативного текста для этого изображения:

• «Настройка учетной записи» — это не очень информативное описание и не содержит ничего, связанного с вашим ключевым словом.
• «Лучший хостинг WordPress, хостинг WordPress, лучший веб-хостинг для WordPress» — это не описывает изображение и набито ключевыми словами.
• «Настройка учетной записи хостинга WordPress» — это намного лучше, так как оно информативно и использует часть ключевого слова естественным и подходящим образом.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Оптимизация замещающего текста, имени и заголовка

В этой статье подробно рассказывается о тегах HTML и оптимизации атрибутов для изображений SEO .Если вы ленивы или ищете эффективности, мы приглашаем вас взглянуть на плагин Image SEO WordPress.

Image SEO: факты и ключевые цифры

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

Вот некоторые цифры, которые должны убедить вас в том, что изображений SEO стоит вашего времени и денег:

• Ежедневные просмотры страниц изображений Google составляют больше, чем , чем 1 миллиард.Эта статистика исходит от Бенджамина Линга, директора по поисковым продуктам Google.
• Более 1/3 всех ключевых слов теперь содержат изображения Google.
• Более чем в 50% случаев, когда изображения попадают в первую десятку результатов, они фактически находятся в трех верхних позициях (Source SEO Clarity).

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

• Альтернативный текст
• Текст заголовка
• Figcaption
• Имя файла

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

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

В приведенном выше html-коде имя файла — «imageSEO-Tool-Screenshot.png». Старайтесь, чтобы древовидность всегда была короткой, логичной и актуальной.