Alt title для картинок: Как правильно заполнять Alt и Title для картинок | Дропшиппинг

Содержание

Атрибуты alt и title для картинок как правильно прописать

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

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

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

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

1 Как заполнить атрибут alt, заголовок и описание картинок

2 Как правильно прописать атрибуты для изображения записи (тизер).

3 Как задать атрибут title у изображений в консоли wordpress

3.1 Поделиться ссылкой:

Как заполнить атрибут alt, заголовок и описание картинок

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

Чтобы оптимизировать картинку на вашем блоге, зайдите в консоль сайта и перейдите в «Медиафайлы», затем нажмите на картинку, которую решили оптимизировать, перед вами откроется изображение и с правой стороны нужно заполнить поля:

атрибут alt;
заголовок;
описание.

Подпись заполнять не обязательно, иначе в тексте это описание будет видно всем вашим читателям.

В атрибуте alt нужно написать краткое описание того, что изображено на картинке, например, к картинке с окном я напишу «Установка окна».

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

Войдя в него, с левой стороны в меню выбираем подпункт «Транслитерация для поисковиков Яндекс и Google». Затем, в окошко «Русский текст для перевода» вставляем наш текст (атрибут alt) и ниже нажимаем «перевести». Копируем перевод и в консоли сайта вставляем в поле «заголовок».

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

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

Как правильно прописать атрибуты для изображения записи (тизер).

Изображение записи оптимизируем следующим образом:

1. При публикации статьи, когда вы уже внесли текст и задали рубрику для новой статьи, нажмите «Сохранить», затем копируете ссылку будущей статьи (это будет название изображения записи).

2. Картинку называем по названию статьи. Изменить имя изображения несложно. Нужно правой кнопкой мыши нажать на него и в выпадающем меню выбрать пункт «Переименовать», нажимаем и задаем новое название нашему тизеру, получается вот так: первоначальное наименование файла и переименованный файл.

3. Возвращаемся к статье и с правой стороны нажимаем на «Установить изображение записи».

4 Закачиваем картинку и начинаем прописывать в атрибуте alt и описании (полное название статьи) русскими буквами.

5. Заголовок у нас уже готов и поэтому останется без изменений.

4. Внизу нажимаем «Установить изображение записи».

Как задать атрибут title у изображений в консоли wordpress

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

Чтобы прописать атрибут title, нажимаем на карандаш, перед нами откроются «Сведения об изображении». Но здесь все атрибуты у нас заполнены, поэтому переходим в «Дополнительные настройки», вот тут то нам и нужно прописать title, затем не забываем обновить изменения.

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

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

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

Но не нужно писать много, достаточно будет 1-2 ключевых слов.

Теперь вы знаете, как прописать атрибуты alt и title у изображений.

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

Поделиться ссылкой:

Прочитано: 74

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

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

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

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

Оптимизация изображений для сайта: требования к картинкам

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

Все иллюстрации, фотографии, картинки нужно применять в формате jpeg, скриншоты в png, сохранение в правильных форматах, они обеспечат самый эффективный вес.
Соотношение сторон изображений использовать 16:9, внешний вид был одинаковый, аккуратный, чтобы не было вытянутых картинок, узких, широких, разных по размеру и в одном формате.
Использовать разрешение изображений 730×410 (внутри статьи), расширение 300, качество 40 или 60, иначе картинки будут слишком тяжелые, для тизера 1920х1080.
Не использовать слишком много картинок в маленьких по объему текстах, нужно придерживаться на каждые 1500 знаков использовать одну картинку, то есть если статья 7000 знаков, то использовать не более 5 картинок. Дефицит текста значительно сыграет роль уменьшения заработка, текст должен преобладать над картинками, поэтому нужно уменьшать картинки в фотошоп, как сказано здесь.

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

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

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

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

Оптимизация картинок для сайта: атрибуты alt и title для картинок

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

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

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

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

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

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

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

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

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

вхождения title -;прописать alt и title изображению

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

html код изображения

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

как прописать alt и title изображению

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

как правильно заполнять alt к картинкам
№	Атрибут Alt к картинкам
1.	должен быть уникальным, содержательным и описывать картинку;
2.	не менее 3-5 слов, не более 250 знаков, включать ключевой запрос;
3.	не должен быть спамным;
4.	релевантным, совпадать с запросом пользователя поисковой системы;
5.	alt к картинкам прописывать кириллицей, до 250 знаков без пробелов, с большой и маленькой буквы.

Внутренняя оптимизация сайта: Alt и Title — Как увеличить трафик на сайт

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

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

Проверить часто игнорируемые атрибуты тега <img> — Alt и Title и улучшить внутреннюю оптимизацию, тщательно поработать с фото, картинками и изображениями. SEO оптимизация изображений скажется на трафике. Вставить фокусное ключевое слово в заголовок, в первые два абзаца, написать интригующие анонсы, давать материал в разном виде, расширить тематику.

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

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

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

Оптимизация: title, description и h2

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

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

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

За первые три пункта с 1-3 отвечают сервера, то за пункт №4 отвечают сами участники обучения: работать правильно и не захламлять ресурс.

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

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

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

Что такое атрибуты и как прописать alt и Title

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

Что лучше, стоять в топ 1 и получать 10% посетителей с поисковой выдачи или в топ 3 получать 20% и может не стоит забывать, что мы производим статьи для людей, не только для поисковых машин.

Description — это описание к статье из 140 символов в поисковой выдаче, поисковик может брать из дескрипшн и добавлять к заголовку заметки метки в поиске. Yandex.ru в текущий момент составляет сам, выдергивая релевантный текст к поисковому запросу статьи, а Google отдает предпочтение тексту, который внесли мета тег и выводит его в поиске.

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

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

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

Что важно в оптимизации: мета теги Title — 50 символов, правильный description — 140 символов, выработать шаблон сео оптимизации. Нужно работать системно со старыми заметками и двигаться к успеху по плану.

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

Технические моменты оптимизации изображений для сайта

В проект приходят взрослое поколение, которое отдает отчет в том, что они хотят и зачем пришли, более 70% — это люди старше 40 лет, из которых треть вышедшие на пенсию. Перед тем, как запустить проект, перед командой стояла задача, как сделать так, чтобы технические моменты легли на плечи компании IT, профессиональной команды людей интернет сервиса.

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

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

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

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

Заключение [оптимизация изображений для сайта]

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

Атрибут Alt для картинок должен глубоким по смыслу и описывать картинку четко, не менее 3–5 слов, не превышать 250 знаков и включать ключевой запрос. Не включать слова «оформить», «купить», «цена» и не спамить. Alt влияет на ранжирование и релевантность сайта в поиске и на попадание фото в поисковую выдачу по картинкам.

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

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

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

alt и title для картинок — Вопрос от Антон Гильзатов

Вопросы
Горячие
Пользователи
Вход/Регистрация

Категории вопросов

Задать вопрос +

Основное

Вопросы новичков (16373)

Платные услуги (2093)
Вопросы по uKit (81)

Контент-модули

Интернет-магазин (1430)
Редактор страниц (236)

Новости сайта (497)
Каталоги (805)
Блог (дневник) (111)
Объявления (294)

Фотоальбомы (432)
Видео (255)
Тесты (60)
Форум (575)

Продвижение сайта

Монетизация сайта (218)
Раскрутка сайта (2447)

Управление сайтом

Работа с аккаунтом (5293)
Поиск по сайту (425)

Меню сайта (1757)
Домен для сайта (1529)
Дизайн сайта (13444)
Безопасность сайта (1463)

Доп. функции (1304)

Доп. модули

SEO-модуль (225)
Опросы (62)
Гостевая книга (98)
Пользователи (431)
Почтовые формы (318)
Статистика сайта (197)
Соц. постинг (212)
Мини-чат (91)

Вебмастеру

JavaScript и пр. (642)
PHP и API на uCoz (233)
SMS сервисы (10)
Вопросы по Narod. ru (422)
Софт для вебмастера (39)

…

как выйти в топ поиска по картинкам — SEO на vc.ru

Иллюстрации и фотографии, использованные с умом, полезны не только для пользователей, но и для SEO. При правильном подходе к оптимизации изображений вы можете получать качественный трафик из «Яндекс.Картинок» или «Google Картинок».

36 190 просмотров

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

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

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

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

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

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

Размещайте изображения рядом с текстом, который они иллюстрируют.

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

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

Качественная картинка иллюстрирует и дополняет заголовок новости

У изображения должна быть цель

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

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

Здесь показан конечный результат

А здесь — процесс работы

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

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

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

Например, это изображение очень симпатичное, но использовано уже на сотнях сайтов, посвященных фрилансу

2. Используйте оригинальные изображения по возможности

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

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

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

С помощью сервиса TinyEye.

TinyEye — бесплатный сервис для проверки уникальности картинки

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

Если же картинка уже используется на каких-либо сайтах, то TinyEye покажет список этих сайтов.

Проверить, есть ли изображение в индексе поисковых систем.

Например, загрузите фотографию в «Яндекс.Картинках». Если в индексе поисковика ее нет, то вы увидите такое:

Если картинка есть в индексе, то «Яндекс» это покажет.

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

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

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

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

В «Google Картинках» вбейте поисковый запрос, а затем выберите «Инструменты» → «Право на использование» → «С лицензией на использование» (или «С лицензией на использование и изменение»).

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

О поиске бесплатных картинок можно почитать в справке Google.

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

Картинки с фотостоков можно улучшить

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

Например, вот такая картинка:

…обретает новую жизнь в блоге Максима Ильяхова с его фирменной оранжевой рамкой.

Для такого оформления необязательно быть мастером «Фотошопа». Достаточно онлайн-сервисов, таких как Canva или Crello.

3. Названия файлов важны: замените «DSC1234.jpg» на понятное название

Чтобы выдать в ответ на запрос пользователя релевантную картинку, поисковые роботы используют все доступные текстовые элементы.

Помимо универсальных атрибутов title и alt (о которых мы еще поговорим) роботы «Яндекса» и Google обращают внимание на название загруженного файла. Название должно соответствовать содержимому картинки. Например, если на фотографии — шоколадный торт, то стоит заменить набор букв и цифр, автоматически сгенерированных камерой, на название:

Правильно: shokoladnyj_tort_s_kremom.jpg.

Неправильно: DSC4980.jpg.

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

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

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

Хорошее название файла. Робот просканирует его и «поймет», что изображено на картинке

Такое название не дает никакой полезной информации поисковому роботу

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

Оптимизация фото для интернет-магазина

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

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

Подумайте о том, как пользователи ищут товары на вашем сайте. Какие шаблоны названий они используют при поиске? Люди, которые ищут «эйр максы», могут вбивать поисковый запрос по-разному:

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

Пропишите правила переименования картинок для контент-менеджера, если хотите оптимизировать их для продвижения интернет-магазина.

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

4. Выберите правильный формат изображения

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

Нет правильного или идеального формата для изображений. Все зависит от типа картинки и как вы планируете ее использовать.Чаще всего используются такие форматы: JPEG, PNG, GIF. Их поддерживают все браузеры и поисковые системы. Реже — SVG и WebP.

Вот несколько рекомендаций:

Для интернет-магазинов оптимальный вариант — JPEG. Этот формат дает лучшее качество при наименьшем размере файла. Также рекомендуется использовать JPEG для больших фотографий или иллюстраций.
PNG используйте, если нужно сохранить прозрачность фона. Остальные форматы не поддерживают эту возможность. Иногда PNG выигрывает у JPEG и по весу файла.
Для логотипов и иконок используйте векторный SVG. С помощью CSS или JavaScript вы можете управлять картинками в формате SVG. Например, менять их размер без потери качества.

Вместо JPEG и PNG можно использовать малоизвестный формат WebP. Этот формат сохраняет высокое качество при еще меньших размерах файла. Конвертировать фотографию в WebP можно с помощью Squoosh. Правда, есть нюанс — формат WebP не поддерживается браузером Safari.

5. Сжимайте изображения в меру: картинка не должна сильно терять в качестве

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

Можно пойти двумя путями:

Уменьшить вес файлов изображений на сайте.
Оптимизировать способ отображения картинки — показывать превью.

Насколько большими должны быть файлы изображений

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

Как уменьшить вес изображений

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

Вес изображения можно уменьшить при экспорте картинки в «Фотошопе» («Файл» → «Экспортировать» → «Сохранить для Web»), просто снизив качество.

Что здесь можно сделать:

Выбрать JPEG-формат.
Немного снизить качество (до 60-80%).
Изменить размеры изображения.

Для примера, картинка в формате PNG-8 и размером 3000 х 3000 пикселей занимает 2,18 МБ.

Неоптимизированная фотография

Сохраняем ее в JPEG, снижаем качество до 80%, а также уменьшаем размеры до 1500 х 1500 пикселей. Вес после оптимизации — 250,2 КБ.

Вес оптимизированной фотографии почти в девять раз меньше

Сервисы для сжатия картинок

Если вы не мастер «Фотошопа» (и не купили лицензионную версию), можно воспользоваться одним из сервисов для сжатия картинок.

JpegMini — позволяет уменьшать вес картинок до 80%.

ImageOptim — десктопная программа для Mac. Позволяет оптимизировать картинки без потери качества. Программа удаляет из файла картинки метаданные: местоположение GPS, серийный номер камеры, данные о снимке и так далее. Работает с форматами JPEG, SVG , GIF и PNG.

Compressor — бесплатный онлайн-сервис. Может сжимать до 90%. Правда, в сервис нельзя загружать картинки весом более 10 МБ.

TinyPNG и TinyJPG — онлайн-сервисы для сжатия PNG и JPEG-изображений. Бесплатно можно одновременно загружать до 20 файлов весом до 5 МБ каждый. Степень сжатия — более 70%.

Compressjpeg — сервис для пакетной загрузки и оптимизации изображений (до 20 файлов одновременно).

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

После оптимизации изображений проверьте скорость загрузки страницы с помощью Google PageSpeed Insights.

Повышаем скорость загрузки за счет превью

Используйте уменьшенный вариант изображения (превью) для отображения по умолчанию. Просмотр изображения в полном размере — по клику на картинке.

Уменьшенная версия изображения в карточке товара, размер — 245 х 245 пикселей. Вес файла — 6,5 КБ

Изображение можно посмотреть в большем размере — 500 х 500 пикселей. Вес этого файла — 26,1 КБ

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

Помните: каждая лишняя секунда загрузки обходится вам потерями трафика.

6. Загружайте на сайт изображения точно по размеру

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

К примеру, вы загрузили картинку в размере 2500 х 1500 пикселей, а на странице она должна отображаться в размере 250 х 150 пикселей. Несмотря на то, что фактически показывается картинка небольшого размера, для ее отображения большое изображение должно загрузиться полностью. Если таких картинок на странице несколько — это может существенно повлиять на скорость загрузки.

Что с этим делать?

Создавайте изображения в том размере, в котором они должны отображаться на сайте. Размер можно изменить в «Фотошопе». Выберите «Изображение» → «Размер изображения».

Укажите нужное значение пикселей. Измените только одно значение (например, ширину). Значение высоты автоматически подстроится, сохраняя пропорции.

Посмотрите, как много лишнего «веса» картинки мы можем убрать таким способом.

Изменение размеров позволяет в 130 раз уменьшить вес файла с картинкой

Если не можете использовать «Фотошоп», можно воспользоваться онлайн-редакторами (например, PIXLR) или сервисами по обработке картинок. Например, ресайз картинок от Slide.ly позволяет подогнать иллюстрацию под форматы соцсетей или произвольный размер.

Пример

В карточках новостей картинки отображаются в уменьшенном виде. Смотрим код — изображение меньшего размера:

На странице новости отображается полноразмерная картинка большего разрешения:

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

7. Используйте адаптивные картинки

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

Например, вы разместили фото в разрешении 800 х 400 пикселей:

Один пользователь зайдет на сайт со смартфона, и фотография будет смотреться нормально.
Другой пользователь использует iMac с retina-дисплеем. На таком дисплее картинка будет отображаться с существенной визуальной потерей качества.

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

Используйте для этого атрибут srcset. С его помощью можно указать в элементе <img> несколько версий одного изображения для экранов разных размеров.

Вот так выглядит HTML-код:

А так это реализовано у «Лайфхакера», например:

В исходном коде страницы указаны ссылки на картинки разного размера для адаптации под различные устройства

8. Заполните атрибуты title и alt

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

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

При наведении курсора на картинку всплывает текст из атрибута title

Вот так выглядит код, в котором заданы атрибуты title и alt:

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

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

Картинка не грузится, но можно понять, о чем она

Нужно обязательно добавлять альтернативное описание картинки:

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

Вот несколько простых правил для атрибутов alt:

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

Хороший пример того, как правильно заполнять атрибут alt, приводит Google в справке для вебмастеров:

9. Создайте Sitemap-файл для изображений

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

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

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

В Sitemap-файле для изображений (в отличие от обычных XML-файлов) можно указывать URL с других доменов. Это позволяет использовать CDN (Content Delivery Network — сеть доставки контента) для размещения графических файлов.

Пример кода:

<?xml version=»1.0″ encoding=»UTF-8″?> <urlset xmlns=»http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:image=»https://www.yandex.ru/schemas/sitemap-image/1.1″> <url> <loc>http://example.com/primer.html</loc> <image:image> <image:loc>http://example.com/image.png</image:loc> <image:geo_location>Карелия</image:geo_location> </image:image> </url> </urlset>

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

Подробнее о Sitemap-файлах для изображений: справка Google, справка «Яндекса».

Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images, который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт.

10. Добавьте подписи к изображениям

Подпись — это текст, сопровождающий изображение на странице. Например, так:

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

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

Что можно сделать в подписи:

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

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

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

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

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

Специальный класс для картинок с подписью

11. Используйте микроразметку Open Graph и Twitter Card

Микроразметки Open Graph и Twitter Cards нужны для того, чтобы настроить внешний вид поста в социальных сетях при репосте статьи с сайта.

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

И когда пользователи захотят поделиться статьей у себя в соцсетях:

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

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

Open Graph

Разметка Open Graph — разработка Facebook. Кроме Facebook, ее также используют несколько других соцсетей: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest.

Вот как выглядит пост в Фейсбуке, если мы размещаем ссылку на статью с разметкой Open Graph:

А так — если на странице нет микроразметки:

Код микроразметки Open Graph для изображений выглядит так:

Микроразметка Open Graph в исходном коде страницы

Подробнее о микроразметке можно почитать в справке «Яндекса», а также в официальном руководстве.

Twitter Cards

Twitter Cards отвечает за внешний вид постов в Twitter. Если этой разметки нет, Twitter использует Open Graph.

Так выглядит код с разметкой Twitter Cards:

Микроразметка Twitter Cards в исходном коде страницы

Подробнее о микроразметке Twitter Cards — в руководстве Twitter.

Как добавить

Для сайтов на WordPress микроразметку можно добавлять автоматически с помощью плагинов Yoast SEO или All In One Seo Pack.

Также есть плагины и для других CMS:

Open Graph Meta — для OpenCart;
Open Graph и Twitter Cards для Битрикс.

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

12. Структурированные данные Schema.org — для лучшего отображения в поиске

Еще один вид микроразметки, который стоит использовать — Schema. org. С ее помощью вы можете точно указать поисковым системам, какой тип контента представлен на странице.

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

Например, в «Google Картинках» изображения из карточек товаров (размеченных с помощью Schema.org) будут отображаться со специальным значком «Продукт»:

В Google Картинках поддерживаются структурированные данные для нескольких типов контента:

товары,
видео,
рецепты.

Пример кода разметки для товара:

Разметка Schema.org для страницы товара

Подробнее о разметке можно почитать в справочных материалах Google:

разметка для товаров;
разметка для рецептов.

13. Размещайте изображения на своем хостинге

Иногда изображения размещают на сторонних ресурсах (например, на хостингах для картинок Imgur, FactPic или других). Это делают для экономии места на собственном хостинге.

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

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

Сети доставки контента (CDN)

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

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

Рекомендации:

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

Несколько слов от поисковых систем

Google рекомендует:

Использовать только те изображения, которые вписываются в контекст страницы и дополняют остальное содержание по смыслу.
Не использовать неоригинальные изображения.
Размещать картинки рядом с релевантным текстом.
Заполнять атрибуты alt.
Уделять внимание качеству и содержанию страниц. Google учитывает качество информации с сайта при ранжировании картинок. А также может использовать фрагменты текста страницы в описаниях к изображению в Google Картинках.
Прорабатывать структуру URL для изображений, так как кроме названий файлов картинок Google также учитывает пути в URL.
Оптимизировать сайт под просмотр с мобильных устройств.

Яндекс рекомендует:

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

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

Размещайте только релевантные изображения. Они должны дополнять основной контент страницы или объяснять что-то быстрее и лучше, чем текст.
Используйте оригинальные изображения или изображения с открытой лицензией. В России уже есть случаи, когда за использование чужих фотографий приходится выплачивать штрафы.
Давайте файлам изображений понятные названия.
Выбирайте оптимальный формат. Для большинства случаев подойдет JPEG.
Сжимайте картинки, если визуально не будет заметно потерь качества.
Загружайте изображения в тех размерах, в которых они будут отображаться на сайте.
Для разных экранов — разные версии одного изображения.
Обязательно прописывайте title и alt.
Добавьте список изображений в Sitemap-файл.
Подписывайте изображения, если это полезно для пользователей.
Позаботьтесь о внешнем виде постов в соцсетях с ссылками на ваши статьи. Тут вам помогут OpenGraph и Twitter Cards.
Используйте Schema.org.
Лучше размещать медиаконтент на своем хостинге. Если его слишком много — используйте CDN.

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

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

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

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

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

Все они могут ссылаться на атрибут img alt="text" :

Alt-теги
Метаданные
Мета-теги
Alt-атрибут

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

Тег заголовка
Текст заголовка
Атрибут заголовка

Содержание

Зачем использовать альтернативные теги

Как минимум, вы должны заполнить поле замещающего текста.

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

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

«Альтернативный текст» означает «альтернативная информация». Согласно консорциуму World Wide Web (W3C), атрибут «alt» указывает альтернативный текст для пользовательских агентов, которые не могут отображать изображения, формы или апплеты. Например, пользовательский агент Googlebot не может «видеть» изображения напрямую. Вместо этого он полагается на информацию в атрибуте alt, чтобы определить, что представляет собой изображение и что отображать в результатах поиска.

Вот хороший обзор важности тегов alt от Мэтта Каттса, главы Google по веб-спаму. Обратите внимание, что он говорит «альтернативный тег» и называет его 9.0056 альтернативный текст , помогающий описать сцену на изображении .

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

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

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

Зачем использовать теги заголовков

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

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

Могу ли я дублировать заголовок и альтернативный текст?

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

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

Практические правила:

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

Должен ли я включать их в аудит веб-сайта?

Для тех, кто использует Raven’s Site Auditor, на странице «Сводка» может отображаться ряд сообщений об ошибках, которые, на первый взгляд, сбивают с толку, особенно если веб-мастер знает, что он или она помечает все загруженные изображения.

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

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

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

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

Почему метаданные имеют значение

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

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

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

Как добавить заголовки изображений и альтернативный текст

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

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

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

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

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

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

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

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

Здесь вы можете добавить или изменить альтернативный текст:

И название вашего изображения:

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

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

Добавление метаданных с помощью плагина

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

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

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

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

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

Обязательно установите флажок Вставить заголовок изображения в сообщение HTML .

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

Когда вы выставите все как в примере выше, добавление нового изображения придет с такими настройками:

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

Темы Qode WordPress: лучший выбор

Просмотр коллекции

Bridge

ТЕРЕВСКАЯ Многоцелевая Тема WordPress

Stockholm

Действительно многоучетная тема

Startit

Свежий стартап бизнес-тема

Как написать Perfect Image Alt Tags Alt

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

Часто говорят, что «изображение стоит тысячи слов». Но как вы описываете эти изображения в своих тегах alt? Вам нужна тысяча слов? Вам вообще нужно использовать теги alt изображения?

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

Больше, чем кажется на первый взгляд
Представьте это…
Что такое альтернативные теги?
- Альтернативные теги и теги заголовков
Как написать идеальные альтернативные теги изображения в WordPress
- Использование тегов Alt для WordPress SEO
- различных типов изображений, которые вы можете использовать в WordPress
  - Информационные изображения
  - Декоративные изображения
  - Функциональные изображения
  - Изображения текста
  - Сложные образы
  - Группы изображений
  - Карты изображений
Советы по тегу Alt для улучшения SEO и веб-доступности
Проверьте свои альтернативные тексты
И последнее…

Больше, чем кажется на первый взгляд

Когда мы думаем об «альтернативных тегах» (вы ведь думаете о них, верно?), мы редко отваживаемся представить себе альтернативные атрибуты как нечто полезное для SEO нашего сайта. Что ж… в этих щенках гораздо больше, чем кажется на первый взгляд! Как мы скоро увидим, альтернативный текст также играет важную роль в доступности веб-сайтов.

И если вы думаете, что видео стоит тысячи изображений, вот одно, которое подытоживает этот урок (остерегайтесь щенков с безумными глазами) …

Picture This …

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

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

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

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

Альтернативные теги позволяют оптимизировать изображения для SEO и доступности в Интернете.

Что такое альтернативные теги?

«Тег alt» или атрибут alt — это альтернативный текст, используемый для описания изображения или того, что представляет собой изображение, если изображение не может быть отображено по какой-либо причине (например, из-за медленного соединения или ошибки в атрибуте src), или если пользователи не могут просматривать его из-за нарушения зрения, просмотра веб-страниц с отключенными изображениями и т. д.

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

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

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

Теги Alt и теги заголовков

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

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

Вот как выглядит полный синтаксис HTML-тега изображения:

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

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

И при редактировании изображений (вы также можете добавить тег заголовка к вашему изображению в процессе редактирования) …

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

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

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

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

Итак, вот наш начальный пост с текстом и первым изображением поста…

Давайте оптимизируем этого щенка!

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

Использование альтернативных тегов для WordPress SEO

Основные рекомендации для альтернативного атрибута текста следующие:

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

На самом деле, вот что бывший глава группы веб-спама в Google, Мэтт Каттс, должен был сказать об использовании тегов Alt для улучшения результатов поиска вашего сайта …

Согласно Google, вот связь между использованием теги alt и изображение ниже …

Хотите больше трафика на изображение щенка в чашке? Добавьте теги alt… как дела, щенок!

(изображение: pixabay. com)

Плохо (отсутствует замещающий текст):
Плохо (наполнение ключевыми словами):
Лучше:
Лучший:

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

Следовательно,

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

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

Различные типы изображений, которые вы можете использовать в WordPress

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

Эй… нажмите на баннер, чтобы загрузить PDF-шпаргалку Alt Tag Decision Tree… это БЕСПЛАТНО!

WordPress позволяет добавлять все виды изображений к сообщениям, страницам и пользовательским типам сообщений. Согласно Руководству по обеспечению доступности веб-контента (WCAG) Консорциума World Wide Web изображения делятся на следующие категории с точки зрения доступности:

Информативные изображения
Декоративные изображения
Функциональные образы
Изображения текста
Сложные образы
Группы изображений
Карты изображений

Информативные изображения

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

Информативные изображения можно использовать для:

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

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

Черно-белый пример информативного изображения.

0123 456 7890

Декоративные изображения

Примеры декоративных изображений включают изображения, которые:

Используются как часть дизайна страницы (например, границы, разделители разделов и т. д.)
Используются как часть текстовой ссылки (например, чтобы привлечь внимание пользователя к кликабельной ссылке или увеличить кликабельную область).
Иметь альтернативный текст рядом (т. е. текст, отображаемый рядом с изображением, достаточен, чтобы объяснить, почему изображение там).
Используются исключительно для создания атмосферы или улучшения внешнего вида страницы (т. е. «услаждения глаз»).

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

Идеальный пример декоративного изображения, которое абсолютно бесполезно!

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

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

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

Например, возьмем изображение доктора Зигмунда Фрейда в нашем примере ниже…

Благодаря Фрейду все, что хранит WordPress, имеет идентификатор.

Доктор Фрейд упоминается в содержании как человек, который «не недооценивал силу ранней любви». Хотя мрачный взгляд доктора Фрейда в камеру придает статье вид достоверности и авторитетности, является ли его фотография информативной или чисто декоративной?

Как бы мы сознательно (или подсознательно) оптимизировали это изображение с учетом доступности? Оставляем ли мы читателей в догадках, каковы мотивы Фрейда в нашем посте? Мы позволяем вещам ускользать?

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

Декоративный:

Если мы решим, что изображение информативно , то мы должны сказать что-то в тегах alt, чтобы объяснить изображение.

Справочная: jpg" alt="Доктор Зигмунд Фрейд признал значение ранней любви."/>

В качестве альтернативы мы могли бы решить, что изображение является декоративным, но мы сделаем признание д-ром Фрейдом обоснованности «пресловутой долговечности первой любви» заметной для всех пользователей, включая читателей с нарушениями зрения, путем объединения текста в такие атрибуты изображения, как как тег img alt и поле img caption .

WPMU DEV AccountFREE