Если бы нас попросили придумать фразу с целью передать важность alt-текста, она звучала бы так: картинка без слов - словно костер без дров. Что же это за текст, и как он влияет на поисковую оптимизацию вашего сайта?
Alt-текстом называют краткое описание любого изображения. Термин произошел от словосочетания «альтернативный текст». Он не отображается на сайте и не виден посетителям, это вид мета-данных, скрытых от посторонних глаз. Но несмотря на то, что практически никто не читает alt-тексты, они очень важны по двум причинам:
Это полезный инструмент для SEO. Поисковые системы не умеют распознавать изображения и реагируют исключительно на слова. Добавляя к картинке alt-текст, вы делаете ее «заметной» для Яндекса или Google, и в результате ваш сайт начинает подниматься в результатах поиска.
Они делают сайт доступным. Люди с нарушениями зрения пользуются специальными программами для чтения, когда выходят в интернет. Эти программы, как и поисковики, не умеют распознавать картинки. Выручают alt-тексты. Они описывают изображение, и человеку, который плохо видит, все становится понятно.
Теперь, когда мы осознали важность alt-текста, давайте разберемся, каким он должен быть и о чем нужно помнить при его добавлении.
Не будьте многословны . Добавляя alt-текст, постарайтесь уложиться максимум в 15 слов.
Пишите понятно . Когда вы добавляете alt-текст, вы описываете картинку тому, кто ее не видит. Сделайте так, чтобы воображаемый читатель понял текст правильно и смог представить изображение по его описанию.
Учитывайте контекст . Alt-текст часто зависит от содержания и тематики ресурса. Представьте снимок счастливой парочки, готовящей обед. В блоге о еде у него будет одно значение, а на сайте знакомств - совершенно другое. Вот поэтому alt-тексты должны соответствовать контексту сайта и отдельно взятой страницы.
Не спамьте . Не добавляйте ключевые слова и мета-теги в поле для alt-текста даже если очень хочется. Вместо этого придумайте хорошее описание и аккуратно включите в него пару подходящих для продвижения слов.
Не уходите от сути . У вас не так много места, поэтому сделайте акцент на самом главном. Это могут быть люди, предметы, места, цвета, автор снимка или атмосфера. В общем, не разбрасывайтесь и отмечайте то, на что нужно обратить внимание.
В добавить alt-текст очень просто. Вот инструкция.
Для Wix-сайта:
Щелкните мышкой по изображению.
Нажмите на иконку «Настройки».
Добавьте alt-текст в поле «Тексты фото» - «Опишите картинку поисковикам».
Для блога на Wix:
Откройте новый или уже написанный пост в редакторе блога.
Если Вы хотите продавать баннер-место на своем WordPress-блоге, необязательно идти и регистрироваться на бирже баннерной рекламы , потому что этому сервису есть отличная замена — это плагин для показа баннеров на вашем блоге AdRotate.
Стоит отметить: удобен, потому что не нужно индивидуально договариваться с рекламодателями о размещении баннера, т.е. Вы в этом практически никакого участия не принимаете. Основная работа ложится на рекламодателя: он выбирает размер, баннер, ссылку с него и размещает на определенный срок (например на месяц) и за назначенную Вами цену (чем популярнее Ваш блог, тем больше цена), а Вы только получаете деньги за купленное рекламодателем баннер-место автоматически. Нужно только установить на блоге код для отображения объявления «купить рекламу» с логотипом :
1. Баннер будет висеть у Вас на блоге до тех пор, пока не кончится срок размещения баннера.
2. Нет ротации, т.е. возможности показывать другие баннеры в ротации с баннером рекламодателя.
При использовании плагина AdRotate таких проблем не будет! Но договариваться с рекламодателями, размещать баннеры и назначать сроки показа Вы будете сами.
Теперь перейдем к настройке плагина AdRotate.
Скачиваем и устанавливаем на наш WordPress-блог AdRotate и переходим к созданию рекламной ротации баннеров.
Плагин предназначен для вставки ротации нескольких рекламных баннеров. Каждая группа должна иметь баннеры одинаковых размеров, например в группе 1 будет ротация баннеров 468х60, а в группе 2 — 125х125.
После добавления нескольких баннеров в одну группу AdRotate начинает показывать их на сайте переменно: сначала будет показываться один баннер, а при переходе на другую страницу, или обновлении текщей страницы в браузере – уже другой и т. д., в зависимости от количества добавленных Вами баннеров в одну группу.
Как добавить баннер?
Ищите в админпанели AdRotate, заходите в пункт Manage Ads и кликаете на Add New , чтобы добавить в ротатор новый баннер.
В поле Title вводите название для себя, чтобы сориентироваться потом, если понадобится удалить, или отредактировать баннер.
В поле AdCode следует указать код вашего баннера, к примеру:
И не забудьте поставить галочку в поле Clicktracking и прописать url вашей спрятанной ссылки.
Для каждого баннера можно установить приоритет показа (Weight ), т.е. насколько больше(меньше) остальных будет показываться данный баннер. Приоритет от 2 до 10.
В пунктах Display From … Until можно указать период показа данного баннера. После этого в пункте Activate выбирайте Yes, this ad will be used , чтобы включить баннер. Это удобно, если на Вашем сайте кто-то купил рекламное место, допустим, на месяц.
Теперь нужно перейти в Manage Groups
, чтобы создать группу ротации ваших баннеров. Здесь указываем имя для группы баннеров, и затем выберите галочкой баннеры, которые будут входить в данную группу.
Жмем на Save
.
Чтобы добавить ротацию в пост, или на страницу, можно использовать шорткод.
>> Оптимизация картинок | Атрибуты ALT и TITLE для описания изображений
Как правильно оптимизировать картинки для сайта.
Приветствую Вас, уважаемый читатель моего сайта!
В данной статье, я хочу Вам рассказать о том, для чего используются картинки на сайтах, какую роль они играют для SEO-оптимизации. Рассмотрим важность использования атрибутов html кода alt и title, приведу примеры использования оптимизированных и не оптимизированных изображений, узнаете в каком качестве нужно использовать картинки, и как это сказывается на работе сайта.
Плюсы и минусы использования картинок на сайте:
Плюсы: Возможно, Вы заметили, если Вы заходили на множество сайтов в интернете с какой-то определенной целью, что там практически на каждом сайте присутствуют всевозможные картинки, изображения, фото и другие графические элементы. В каком месте они распологались и какую познавательную нагрузку они несли на данных сайтах или блогах.
Бывает часто такое, когда автор сайта при написании текста конкретной темы, хочет выразить свою мысль более точно и наглядно, чтобы человек, который зашел на данный сайт, получил всю необходимую информацию в полном объеме. Этот фактор сказывается в дальнейшем на его авторитетности в глазах посетителей и раскрутки сайта в поисковых системах, социальных сетях и т.д.
Народ, который находится в интернете и ищет нужную ему информацию (контент), будет знать, что на данном сайте есть кроме качественного и полезного текста еще и наглядное пособие в виде картинок, изображений и всевозможной графики.
И если Вы хотите чтобы Ваши картинки были незабываемые и красивые нужно использовать их по возможности в хорошем качестве.
Еще один положительный момент использования изображений на сайте - возможность использования оптимизации картинок под ключевой запрос определенной страницы сайта с целью улучшения продвижения данной страницы по продвигаемому ключевому запросу .
Плюс к этому, в поисковых системах есть поиск по картинкам, которые находятся на сайтах. И если ключевые слова прописаны к картинкам, то человек, которых ищет по данному запросу себе изображения, может, понравится Ваша картинка и он, возможно, захочет узнать, на каком сайте данное изображение находится и перейдет на Ваш сайт. В итоге Вы выиграете от этого, получив целевой трафик в виде посетителей на свой сайт.
Минусы: Минусов при использовании картинок на сайте может быть много особенно у новичков. Разберем все ошибки, который может допустить случайно или не знавши каждый, что приведет к тому, что использование графики на сайте может отпугнуть посетителя, который находится или пытается зайти на Ваш сайт.
А виной этому множество причин; халатное отношение к своей работе, использование некачественных и в ужасном состоянии изображений, использование их не по теме, наличие слишком большого количества изображений, которые придаю большой вес странице, и она грузится очень долго (в том числе и фон сайта), отсутствует оптимизация изображений под ключевые слова. Вот основные недостатки использования всевозможной графики на сайте.
Но этих минусов можно избежать, зная как их сделать положительными. Все это мы разберем далее в этой статье. Так что дочитайте ее до конца.
Атрибуты alt и title в SEO-оптимизации изображений:
Как я уже писал выше в данной статье, что использование картинок может помочь сайту в его продвижении в поисковых системах. Дать дополнительный приток целевой аудитории (посетителей) с поисковых систем. Для этого Вам нужно использовать два, но очень, нужных атрибута alt и title для любых картинок, изображений, фото и т.д. Суть данных атрибутов заключается в том, чтобы с их помощью выжать максимум, который поможет в продвижении сайта в поисковых системах. В нашем случае атрибутов два соответственно и функций которые они выполняют будут немного различаться.
Атрибут ALT : Данный атрибут входит в язык html. Назначение его заключается в описании какого-то объекта с целью дать дополнительную информацию о данном объекте (в нашем случае изображений). Как данный атрибут работает? Работает он очень просто: Вы берете нужную картинку, которая находится у Вас на жестком диске или носителе (флэшка) и вставляете на нужную страницу сайта в нужное место.
Потом Вы берете, находите код данной картинки и прописываете туда такое значение alt=" Описание данной картинки с использованием ключевых слов " . Но описание не нужно делать слишком большим (максимально пару предложений) и тулить туда много ключевых слов, так как поисковые системы этого не любят, что в итоге может сказаться на Вашем сайте.
Работает данный атрибут alt так, когда посетитель заходит на сайт, то он описание изображения не видит (если в его браузере включена функция показа изображения), но его видит поисковые роботы, когда индексирую сайт . Посетитель может увидеть данный текст, когда отключены в настройках браузера изображения и тогда на месте данного изображения появится текст, по которому посетитель сможет понять что это за картинка. Данный атрибут учитывается поисковыми системами, когда они индексируют Ваш сайт.
Атрибут TITLE: Данный атрибут title также входит в язык html. Назначение его такое же, как и атрибут alt, но с той разницей, что данное описание будет показываться пользователю сайта при наведении на картинку курсором. Данный атрибут не участвует в продвижении сайта, но он позволяет увеличивать поведенческий фактор, который также влияет на позицию сайта в поисковой системе. Пишется оно так title=" Описание картинки " . Поэтому оптимизация изображений играет тоже большую роль при продвижении сайта в поисковых системах.
Образец SEO-оптимизированной картинки с использованием атрибутов alt и title:
Сейчас Вы увидите образец оптимизированной картинки с использованием двух выше перечисленных атрибутов.
C атрибутом title (наведите на картинку курсором)
|
С атрибутом alt (без картинки) Обрацец кода данной картинки:
|
Без атрибута alt (без картинки)
Образец кода данной картинки:
|
title="Кот гимнаст"
>
В каком качестве нужно использовать картинки и изображения на сайте.
Использовать картинки и изображения на сайте конечно лучше в хорошем качестве, но так чтобы они не сильно влияли на загрузку сайта. Так как много людей в интернете пользуются интернетом при малых скоростях и если они не дождутся загрузки сайта, то они покинут данный сайт и больше сюда не вернутся, что в итоге скажется на посещаемости.
Также что я заметил, просматривая множество сайтов так это то, что помимо больших по размеру (килобайты) картинок на сайте используют большой размер фона в качестве картинки. Если уже Вы и надумали использовать в качестве фона изображение, то лучше его выбрать однотонным и маленьким так оно будет слаживаться и у Вас будет цельная картинка.
Также, при использовании качественных изображений, нужно учитывать и размер дискового пространства на Вашем хостинге и скорость работы сервера. Чем она ниже, тем медленней будет загружаться Ваш сайт. Поэтому перед тем как использовать изображения в хорошем качестве для сайта нужно знать, где их применить и в каком количестве.
На этом я данную статью заканчиваю. Я надеюсь, Вы теперь поняли, что такое оптимизация картинок , и какие атрибуты для этого использует оптимизация изображений.
Кстати если Вы не знаете, как уменьшить качество картинки то воспользуйтесь программой Фотошоп. Для этого заходите в меню "Файл" и там выбираете пункт "Сохранить для Web и устройств".
Если Вам понравилась данная статья то, пожалуйста, оставьте комментарий в низу данной статьи. Я очень буду Вам признателен.
Другие страницы сайта:
От автора: атрибут alt для картинок позволяет задать текст, который появится у пользователя, если у него отключен показ этих самых картинок. Но это далеко не все, что вы должны знать о нем. Давайте подробнее разберемся, на применять этот атрибут.
Вообще чтобы понимать, как он прописывается, нужно знать основы html, иметь хотя бы какое-то представление о том, как текст и изображения добавляются на веб-страницы. В частности, фото– это одинарный тег img, у которого есть всего один обязательный атрибут – src. Это путь к файлу.
Очевидно, что если ввести его некорректно, ничего вы на экране не увидите. Короче, для вывода картинки вам всего-то нужно в нужном месте html-кода писать это:
< img src = "путь к изображению" > |
С этим все должно быть понятно, но кроме src есть и другие атрибуты, которые можно прописать в img. Вот они уже необязательные, то есть без них можно обойтись. В частности, alt. Атрибут, который выводит так называемый альтернативный текст.
Почему альтернативный? Потому что он будет выведен на экран только в случае отключения графики в браузере пользователя. В таком случае должна же быть какая-та альтернатива? Во всяком случае, если вы вставите фотографию Эйфелевой башни в статью, то это здорово, но если вдруг найдется человек, который выключил показ картинок в своем браузере, он просто ничего не увидит в этом месте. Там будет просто крестик (или иконка), который указывает на то, что в этом месте должно быть изображение. Например, на этом изображении можно увидеть карту мира:
Но если у человека выключен показ графики, он этого не увидит. Если же прописать alt, то рядом с крестиком будет поясняющий текст. В таком случае человек будет хотя бы примерно представлять, что на ней находится. Также я подозреваю, что речевые браузеры каким-то образом могут читать содержимое этого атрибута.
Влияние alt в SEO
Ох, сколько споров на СЕО-форумах я видел о том, влияет ли заполнение атрибута на улучшение ранжирования сайта и его отдельных статей в поиске. Можно с уверенностью сказать, что сегодня все осталось по-прежнему. Кто-то считает, что заполнение alt помогает в поисковой оптмизации, кто-то – что абсолютно никак это не влияет.
Я бы сказал, что оба мнения можно оспорить, а лучше выбрать что-то среднее. То есть не утверждать, что это дает прям существенный результат, но в то же время не думать, что абсолютно никакого толку от этого нет.
Знаете, заполнение alt я бы сравнил с кроссбраузерной версткой (если кто понимает, о чем речь). Это когда сайт адаптируется под все популярные браузеры. Если у самых важных картинок на вашем сайте вы будете заполнять этот атрибут, вы сделаете свой проект хотя бы на чуть-чуть, но лучше. Также вы сделаете свой проект немного доступнее для людей.
Конечно, сегодня людей, которые сидят в браузерах с отключенными картинками, все меньше и меньше. Я бы сказал, что их совсем мизер. Но если вы перфекционист и хотите идеализировать свой проект – пожалуйста, заполняйте этот атрибут, кто вам мешает?
Как заполнять alt?
А вот это самое важное, на мой взгляд. Если вы читали мои прошлые статьи по СЕО, то наверняка уже там не раз слышали, что поисковики любят естественность. Соответственно, идеальным заполнением атрибута будет максимально точное и короткое описание картинки. Как правило, 30-100 символов достаточно. При этом максимальная длина должна быть примерно 250 символов. Но зачем вам так подробно описывать изображение?
При этом вы должны постараться написать в атрибуте такой текст, чтобы при его чтении можно было мысленно представить себе картинку, даже если вы ее не видите. Многие оптимизаторы советуют в первую картинку в публикации прописать alt, в котором будет ключевая фраза.
Тут нужно понимать, что поисковики стали умнее. Если вы вставили какую-то левую картинку и в наглую прописали туда ключ, положительного результата ждать не стоит. Я не говорю, что поисковик вас накажет, но эффекта как такового не будет.
Мало того, если во все картинки напихать побольше ключей и делать так с каждой страницей вашего сайта, тогда наказание отхватит как раз очень даже реально. В таком случае это дело времени.
Как же быть? Если вы и вставляете какую-то ключевую фразу в alt, добавляйте ее только в описание одной картинки на статью. Также не стоит любой ценой пытаться добавить фразу в ее точном вхождении. Запрос может быть вставлен с разбавлением.
Ну а самое главное, это постараться писать alt так, чтобы было максимально естественно, как будто вы случайно употребили там ключ. Для этого описание, возможно, придется сделать чуть больше, но это только для одной картинки, куда вы будете вставлять ключ.
Собственно, для остальных изображений, если их несколько в статье, можно заполнять alt, а можно и нет. Это ваше личное решение. Вообще важно относится к заполнению этого атрибута без всяких лишний ожиданий, будто вы грамотно заполните и завтра окажетесь в топе. Эффекта может и не быть, либо он будет минимальным, но главное тут, что вы все сделали качественно.
Итак, давайте подытожим основное по заполнение alt:
Нужно максимально просто и коротко описать картинку
Если вы и вставляете ключевую фразу, делайте это всего 1 раз и так, чтобы выглядело естественно
Для остальных картинок заполнение alt по вашему личному желанию
Опять же, не стоит думать, что это какое-то руководство к действию. Это всего лишь рекомендации. Каждый веб-мастер делает по-своему. Кто-то вообще никогда не заполняет alt ни у одной картинки, кто-то делает как тут рекомендовано, а кто-то спамит ключами.
Из этих трех вариантов оптимальными являются первый и второй. То есть тут есть 2 решения: либо вообще никогда не трогать alt, либо заполнять его максимально естественно.
Заполнять alt или нет? Зависит от сайта
Например, вы ведете личный блог. Ну и зачем вам сдался этот alt? Скорее всего, вам картинки нужны будут чисто для разбавления текста, но никак не для привлечения клиентов. Другое дело – коммерческий сайт. Например, интернет-магазин. Тут картинки играют огромную роль, потому что люди чаще всего покупают то, что больше всего нравится их глазу.
Соответственно, для каждого товара в интернет-магазине разумно прописать alt. Давайте как раз разберем на примере, как сделать это грамотно. Допустим, у нас есть товар – ноутбук ASUS G560 (не ищите в поиске, название я выдумал). Естественно, есть фото этого ноутбука. Как прописать для нее альтернативный текст? Вот варианты:
“Фотография”, 1, “ыыавпв” и прочее – это все варианты, которые никак не годятся. По такому описанию абсолютно непонятно, о каком товаре речь. Текст “фотография” или “картинка” (так часто подписывают фото) вообще самый забавный, ведь люди и так понимают, что это не видео. Это все равно что на слона повесить табличку, где написать, что он слон.
“Крутой красный ноутбук для игр” – это неплохое описание, если ноутбук действительно является игровым. Но если вы целитесь на трафик с картинок, то такое описание не является самым оптимальным, так как подобную фразу я в поиске набирает 0 человек. Люди чаще набирают названия конкретных моделей или хотя бы производителя.
“Ноутбук” – описание, которое можно охарактеризовать так: лучше, чем ничего. Но тоже не оптимально, так как нет конкретики. Не будете же вы каждый товар подписывать так? Описание должно быть уникальным для каждого отдельного ноутбука.
“Ноутбук ASUS G560” – оптимальный вариант, есть конкретное описание. Возможно, если товар присутствует в разных цветах, можно дописать и цвет, а также слова, которые часто используют при описании ноутбуков: для офиса, мощный, игровой и т.д.
“Ноутбук ASUS G560, купить в Москве с доставкой, отзывы” – похоже на спам, правда? Это самый плохой вариант из всех.
Итог
Особо тут больше говорить не о чем. Оптимизация картинок alt атрибутом, это то, что может помочь вам улучшить свой сайт и получить небольшой трафик с поиска по изображениям. Это дело для перфекционистов, потому что вполне можно обойтись и без этого. И конечно, стоит учитывать, какой у вас сайт. Если коммерческий, то подписывать изображения желательно, а если вы ведете какой-нибудь блог или информационный сайт, то можно на это вообще забить.