Рассмотрим такой вопрос, для чего нужно использовать изображения на сайте, и какую роль они занимают в SEO-оптимизации ресурса. Кроме этого, мы рассмотрим использования таких составляющих HTML как атрибут title и alt для картинок, и в чем их важность. Приведем примеры оптимизированных картинок и не оптимизированных, рассмотрим, в каком качестве используются изображения, и каким образом это отражается на работе web-ресурса.
Плюсы и минусы применения изображений на web-проекте:
1. Плюсы.
Скорее всего, вы, заходя на какой-либо сайт, замечали, что практически на каждом из них есть разнообразные картинки, фотографии, изображения или другие графические элементы.
Зачастую происходит следующее, владелец сайта пишет очередной текст по определенной теме и хочет подчеркнуть свои мысли наглядно, чтобы посетителю, пришедшему на сайт, было более понятно, и он остался доволен полученной в полном объеме информацией. Поскольку, это в дальнейшем положительно сказывается на авторитетности ресурса в глазах пользователей и продвижению сайта в поисковиках, социалках и т.д.
Люди, которые путешествуют в интернете в поисках необходимой информации (контента), будут знать, что именно на вашем сайте помимо качественного и полезного материала присутствует и наглядное пособие в виде изображений, картинок и другой графики. Естественно, чтобы ваши картинки оставляли впечатление, необходимо их загружать на сайт, желательно в отличном качестве, заполнив атрибут title и атрибут alt, конечно.
Следующим положительным моментом использования на сайте картинок, является возможность их оптимизации под определенные ключевые запросы соответствующей страницы ресурса, на которой они располагаются. Это, кстати, прямым образом влияет на продвижение страницы по продвигаемым ключевикам.
Вдобавок ко всему, в поисковиках присутствует поиск по картинкам расположенным на web-проектах. Если вы прописали ключи к картинкам, то пользователь, который по данному запросу подбирает себе какое-либо изображение, может по выбранной картинке перейти на ваш ресурс. В итоге, вы получите еще одного целевого посетителя.
2.Минусы.
При использовании изображений, фотографий, картинок на сайтах, минусы встречается в основном у новичков, потому что применение графических элементов на web-проекте может спугнуть читателя.
Причины:
Заливка некачественных в ужасном состоянии картинок;
Использование фотографий вообще не по теме;
Присутствие чересчур большого числа картинок, что придает лишний вес страничке и удлиняет ее загрузку (даже фон шаблона);
Отсутствие оптимизации, т.е. изображения атрибуты alt и title не имеют и «не заточены» под определенные ключевые запросы.
Роль атрибутов title и alt в SEO-оптимизации картинок
Как мы уже упоминали выше, использование изображений помогает сайту в его раскрутке и продвижении в поисковых системах. Помимо того, это дает дополнительный приток целевых посетителей из тех же поисковиков. А для этого, вам просто необходимо использовать пару простых, но в то же время важных атрибута – это атрибут title и атрибут alt для любых изображений, картинок, фотографий и другой графики. Суть этих атрибутов состоит в том, что бы с их помощью выжать тот максимум, который поспособствует в продвижении ресурса в поисковых системах. Поскольку, атрибутов только два, соответственно и ролей, которые они исполняют тоже две, и они отличаются друг от друга.
Несмотря на то, что это простой метод поднять позиции web-проекта в поисковиках, большинство web-мастеров в полном объеме их не используют, а то и вообще их игнорируют. Некоторые вообще их путают, и не осознают какая между ними разница. Также бывает, что данные атрибуты именуют тегами, а ведь это атрибуты тега img (от слова «image»), но ни как не отдельные теги, запомните это!
Сам же HTML-тег «img» используют для отображения на странице сайта картинок (изображений, фото) в графическом формате PNG, JPEG или GIF. Если нужно, то ту же картинку можно сделать ссылкой, для этого нужно заключить тег «img» в контейнер .
1. Атрибут ALT.
Этот атрибут входит в HTML-язык. Его предназначение состоит в том, чтобы описать какой-либо объект с целью подачи дополнительной информации об этом объекте (в нашем случае картинок). Т.е. атрибут alt для картинок передает ее описание для браузеров при отключенной графике. Если вы не пропишете этот атрибут, то посетитель увидит пустую иконку вместо желаемой картинки, если же прописать атрибут alt, то показывается его текст. Этот атрибут, кстати, сильнее всего оказывает влияние на ранжирование картинок ботами поисковых систем.
Как этот атрибут работает? Да очень просто: берете выбранную картинку, которую вы уже скачали себе на компьютер и заливаете на необходимую страничку вашего сайта в нужном месте. Затем находите HTML-код этой картинки и прописываете в нем следующее значение: alt=”Описываете кратко картинку и вписываете ключевые слова”. Описание нужно сделать как можно кратким (максимум парочка предложений) и вписывать в него много ключевиков также не нужно, поскольку, поисковые системы к этому относятся отрицательно, и это может негативно отразиться на вашем проекте.
Атрибут alt работает следующим образом: посетитель заходит к вам на сайт, видит картинку, но ее описание ему не доступно (если включена функция показа картинок в его браузере), но его видят поисковые боты, при индексации ресурса. Если же в браузере пользователя эта функция отключена, то на месте картинки он увидит текст (ваше описание), по которому читатель поймет, что это за изображение.
2. Атрибут TITLE
Этот атрибут title то же входит в HTML-язык. Его предназначение в принципе такое же, как и атрибута alt, но разница в том, что ваше описание будет видеть посетитель, если наведет курсор на выбранную картинку. Этот атрибут не оказывает влияния на раскрутку и продвижение сайта, но он может повлиять на поведенческий фактор, который влияет на ранжирование web-проекта. Пишем его таким образом: title=”Описываете картинку”. Вот и все. Добавим, что оптимизация изображения, атрибуты его, все это играет существенную роль в раскрутке сайтов в поисковиках.
Далее приведем примеры SEO-оптимизированных картинок с применением атрибутов title и alt
Вы видите образцы оптимизированных картинок с данными атрибутами:
Заполнение атрибутов title и alt пользователю значительно облегчено в CMS WordPress. При заливке изображения на сайт появляется специальный загрузчик и специальное окошко для оптимизации:
Заголовок (не путать с title) заполняется автоматически, а вот атрибут alt придется заполнить самостоятельно. Далее, непосредственно после вставки картинки на сайт, ее нужно отредактировать. Кликните по ней в визуальном редакторе, и вы попадете в окошко редактора:
Как видите, атрибут alt можно прописать и здесь, но он уже заполнен (это еще важно для картинки, которую вы будете использовать в качестве миниатюры). Вот именно здесь и заполняете атрибут title , прописывая в нем ключевые запросы, идентичные тем, что вы указываете в плагине: All In SEO Pack. После этого, сохраняете и все – ваша картинка оптимизирована.
В каком качестве необходимо использовать картинки на сайте
Заливать картинки на сайт нужно как можно в лучшем качестве, но необходимо следить, чтобы они не повлияли на скорость загрузки страницы. Поскольку до сих пор есть пользователи, у которых низкая скорость интернета, соответственно, если страничка будет долго загружаться, то человек обязательно уйдет с сайта и наврятли вернется!
Еще можно заметить на многих web-проектах такой нюанс, помимо применения большого по килобайтам (размеру) изображения, атрибуты title и alt тут, естественно, не используют, но применяют также огромный размер фона сайта. Если и вы хотите использовать картинку как фон сайта, то советуем выбрать его маленьким и однотонным, поскольку оно будет сглаживаться, и вы получите цельную картинку.
Помимо заливки на сайт качественных картинок, не забывайте и о расходе дискового пространства на хостинге и о скорости его работы. Чем меньше скорость, тем медленнее грузиться ваш ресурс. Поэтому, мы советуем перед использованием качественного изображения для страницы сайта определиться, где его применить и сколько картинок можно залить на страницу.
Так же, для уменьшения веса картинки можно использовать программу Фотошоп. В программе заходите в меню «Файл»→ «Сохранить для 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 изображение будет показано как пустое:
Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения.
Задать атрибут alt можно следующим образом:
В атрибуте alt следует писать не все ключевые слова сайта или страницы, а лишь те, которые действительно относятся к картинке. Это поможет роботу точнее найти картинку, а пользователю Яндекса - выбрать ее в результатах поиска и перейти на ваш сайт. Оставлять атрибут alt пустым нежелательно.
Если вы добавляете несколько похожих изображений (например, фотографии товара из интернет-магазина), то стоит задать уникальные атрибуты alt (вид спереди, вид сзади).
Текст атрибута title тега img
Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:
Задать атрибут title можно так:
Для каждой картинки стоит указать уникальный title . Оставлять атрибут title пустым нежелательно.
Другие тексты
Кроме значений атрибутов alt и title при поиске по картинкам используются следующие тексты:
тексты ссылок на картинки с других страниц и с других сайтов;
прилегающий к картинке текст - расположенный на странице в непосредственной близости к картинке;
тексты и заголовки коротких документов, обрамляющих одиночную картинку;
имена файлов и скриптов картинок, в том числе с учетом транслитерации и упрощенного подстрочного перевода.
Однако атрибуты alt и title являются наиболее универсальными, поэтому их стоит прописывать всегда.
Здравствуйте, уважаемые друзья. Сегодня, по просьбе одного из моих подписчиков, расскажу про тег (атрибут) ALT, который должен присутствовать в параметрах каждого изображения на сайте.
Отсутствие атрибута alt внешне никак не проявляется на самом изображении. Но, внутренне, в исходном коде – отсутствие тега alt является ошибкой. И поисковые роботы считают каждую такую ошибку. И такие, казалось бы, мелочи тормозят поисковое продвижение любого сайта.
И если, размещая изображения в статье, вы можете сразу указать желаемый альтернативный текст, то вот с изображениями (элементами) дизайна будет сложней. Бывает так, что именно у этих элементов дизайна отсутствует тег alt. И многие новички даже не знают о наличии этих ошибок у них на сайтах.
Зачем нужен атрибут alt
Всё дело в механизме загрузки страницы сайта браузером. Когда загружается страница, вначале загружается текст из атрибута alt, а уже после идёт смена текста на изображение. Если в браузере отключена загрузка изображений, то на месте изображения будет альтернативный текст (из атрибута alt).
Поисковые роботы видят страницу только в качестве исходного кода, и наличие тега alt говорит им о содержимом картинки. Кстати, даже наличие тега alt без текста уже будет принято поисковиком за признак хорошего тона. То есть наличие самого атрибута обязательно, а его значение необязательно.
Alt="значение"
Как проверить изображения на наличие атрибута alt
Самый простой и доступный каждому способ – это проверить исходный код страницы (валидация кода) на ошибки.
Для этого нужно открыть сервис проверки кода W3C и ввести url страницы.
После проверки исходного кода, указанной странице, на экране откроется отчёт о наличии и сведения об ошибках (если такие есть). И если на странице, хотя бы у одного изображения отсутствует тег alt, вы увидите вот такую ошибку:
Примечание: если ошибок много, советую использовать поиск CTRL+F для быстрого поиска нужной информации.
А вот ещё один способ, который позволит узнать об ошибках в исходном коде вашего сайта. Но, для использования этого инструмента нужно зарегистрироваться в кабинете веб-мастера Bing. И в этом самом кабинете есть инструмент «Средства анализа SEO» .
Где вы также вводите адрес страницы сайта для анализа и получаете отчёт. И если где-то отсутствует тег alt , вы это увидите.
Можно также посмотреть исходный код страницы, увидеть, где именно нужно искать. Для этого нужно перейти в закладку «Код страницы» и найти, где допущена ошибка. Сделать это легко, нужный код будет выделен жёлтым цветом.
Как найти нужный фрагмент исходного кода и добавить атрибут alt
Прежде всего, нужно внимательно посмотреть на данные, которые вы получили из средств анализа. Обратить внимание:
— на имя файла изображения,
— на название класса, блока в котором размещено изображение,
— на соседние элементы.
Все эти элементы помогут в дальнейшем с поиском файла, а в нём и нужного фрагмента исходного кода.
В качестве примера, посмотрите на размещённый выше скриншот. Код, который нам нужен, ничем не примечателен. Да, мы знаем, что это баннер на новую бесплатную книгу Азамата . Более того, мы знаем, что баннер расположен в сайтбаре. Но представим, что я не обратил на это внимание. Так что можно узнать из этого кода?
Прежде всего, мы знаем имя файла изображения. И неважно, что расположено изображение на другом сайте. Также мы видим, блок ДИВ с классом