#11-13 Alt Attribute / Атрибут Alt. Экспресс-правка

'#6. Тексты : texts';

'Express_ChapterController_actionView';

'#express_chapter_view';

<h2 class="mb-4">Что такое атрибут Alt</h2>
<p>Атрибут <code>alt</code> &ndash; это HTML-атрибут, который используется для указания альтернативного текста для изображений. Этот текст отображается в случаях, когда изображение не может быть загружено или просмотрено пользователем. Alt-текст является обязательным атрибутом для тега <code>&lt;img&gt;</code> и играет критически важную роль в доступности веб-сайтов и SEO-оптимизации.</p>
<h2 class="mb-4">Синтаксис и использование</h2>
<p>Атрибут <code>alt</code> добавляется непосредственно в тег изображения:</p>
<div class="bg-light p-3 mb-3"><code>&lt;img src="image.jpg" alt="Описание изображения"&gt;</code></div>
<p>Для XHTML синтаксис выглядит следующим образом:</p>
<div class="bg-light p-3 mb-3"><code>&lt;img src="image.jpg" alt="Описание изображения" /&gt;</code></div>
<h2 class="mb-4">Основные функции Alt-атрибута</h2>
<h3>Доступность веб-сайта</h3>
<p>Alt-текст имеет огромное значение для пользователей с нарушениями зрения, которые используют программы чтения с экрана (скринридеры). Эти программы озвучивают содержимое alt-атрибута вместо изображения, позволяя слепым и слабовидящим пользователям понять содержание и назначение изображения.</p>
<h3>Замещение изображений</h3>
<p>Когда изображение не может быть загружено по техническим причинам (медленное соединение, проблемы с сервером, неправильный путь к файлу), браузер отображает alt-текст вместо изображения. Это позволяет пользователям понять, что должно было находиться на этом месте.</p>
<h3>Текстовые браузеры</h3>
<p>Пользователи текстовых браузеров (таких как Lynx) видят только alt-текст вместо изображений, что делает этот атрибут критически важным для навигации по сайту.</p>
<h2 class="mb-4">Значение для SEO</h2>
<p>Атрибут <code>alt</code> играет важную роль в поисковой оптимизации:</p>
<ul class="mb-3">
<li><strong>Индексация изображений:</strong> Поисковые системы используют alt-текст для понимания содержания изображений и их индексации в поиске по картинкам</li>
<li><strong>Контекстная релевантность:</strong> Alt-текст помогает поисковым системам понять связь между изображением и содержанием страницы</li>
<li><strong>Дополнительный контент:</strong> Текст в alt-атрибуте читается поисковыми роботами как обычный текст страницы, увеличивая объем релевантного контента</li>
</ul>
<h2 class="mb-4">Правила написания эффективного Alt-текста</h2>
<h3>Основные принципы</h3>
<ul class="mb-3">
<li><strong>Краткость:</strong> Alt-текст должен быть кратким и информативным (обычно до 125 символов)</li>
<li><strong>Описание назначения:</strong> Описывайте не внешний вид изображения, а его назначение или смысл в контексте страницы</li>
<li><strong>Естественность:</strong> Используйте естественный язык, избегайте перечисления ключевых слов</li>
<li><strong>Уникальность:</strong> Каждое изображение должно иметь уникальный alt-текст</li>
</ul>
<h3>Примеры правильного использования</h3>
<div class="row mb-4">
<div class="col-md-6">
<h5>Хорошо:</h5>
<div class="bg-success bg-opacity-10 p-3"><code>&lt;img src="logo.png" alt="Логотип компании WebSolutions"&gt;</code><br><code>&lt;img src="chart.png" alt="График роста продаж за 2024 год"&gt;</code></div>
</div>
<div class="col-md-6">
<h5>Плохо:</h5>
<div class="bg-danger bg-opacity-10 p-3"><code>&lt;img src="logo.png" alt="Красивый логотип с синими буквами"&gt;</code><br><code>&lt;img src="chart.png" alt="Изображение график диаграмма продажи"&gt;</code></div>
</div>
</div>
<h2 class="mb-4">Декоративные изображения</h2>
<p>Для чисто декоративных изображений, которые не несут смысловой нагрузки, рекомендуется использовать пустой alt-атрибут:</p>
<div class="bg-light p-3 mb-3"><code>&lt;img src="decoration.png" alt=""&gt;</code></div>
<p>Это указывает скринридерам пропустить изображение, так как оно не содержит важной информации.</p>
<h2 class="mb-4">Распространенные ошибки</h2>
<ul class="mb-4">
<li><strong>Отсутствие alt-атрибута:</strong> Полное отсутствие атрибута создает проблемы доступности</li>
<li><strong>Дублирование названия файла:</strong> Использование имени файла вместо описательного текста</li>
<li><strong>Переспам ключевыми словами:</strong> Неестественное повторение ключевых слов в alt-тексте</li>
<li><strong>Слишком длинный текст:</strong> Чрезмерно подробные описания усложняют восприятие</li>
<li><strong>Использование фраз типа "изображение" или "картинка":</strong> Скринридеры уже сообщают, что это изображение</li>
</ul>
<h2 class="mb-4">Историческая справка</h2>
<p>Атрибут <code>alt</code> был впервые введен в HTML 1.2 в 1993 году для поддержки текстовых браузеров. В HTML 4.01 (1999 год) он стал обязательным для тегов <code>&lt;img&gt;</code> и <code>&lt;area&gt;</code>. Интересно, что Internet Explorer 7 и более ранние версии некорректно отображали alt-текст как всплывающие подсказки, что привело к путанице с атрибутом <code>title</code>. Эта проблема была исправлена в Internet Explorer 8.</p>
<h2 class="mb-4">Юридические аспекты</h2>
<p>Отсутствие alt-атрибутов может иметь серьезные юридические последствия. В разных странах были поданы иски против компаний за нарушение стандартов доступности. Например, в США отсутствие alt-атрибутов может рассматриваться как нарушение Закона об американцах с инвалидностью (ADA).</p>
<h2 class="mb-4">Проверка и аудит</h2>
<p>Для проверки качества alt-атрибутов на сайте можно использовать:</p>
<ul class="mb-3">
<li>Google Lighthouse для аудита доступности.</li>
<li>Валидаторы HTML от W3C.</li>
<li>Специализированные инструменты проверки доступности.</li>
<li>Расширения браузера для разработчиков.</li>
</ul>
<h2>6 лучших практик использования альтернативного текста</h2>
<p>Следуйте этим шести рекомендациям, чтобы повысить эффективность вашего альтернативного текста:</p>
<h3>1. Будьте описательными</h3>
<p>Альтернативный текст должен четко описывать изображение, предоставляя достаточно подробностей, чтобы пользователи поняли его содержание.&nbsp;</p>
<p>Избегайте включения в альтернативный текст следующего:</p>
<ul>
<li><strong>Такие фразы, как &laquo;Изображение&raquo; или &laquo;фотография&raquo;</strong>, являются избыточными. Исключением являются случаи, когда изображение представляет собой реальную фотографию (например, &laquo;Молодая женщина держит фотографию цветка&raquo;).&nbsp;</li>
<li><strong>Авторские права на изображения</strong>, как они должны быть указаны в подписи к изображению или в основном тексте.</li>
<li><strong>Информация, уже содержащаяся в подписи к изображению или основном тексте</strong>, чтобы избежать дублирования информации.</li>
<li><strong>Информация, которую необходимо знать всем пользователям</strong>, например, инструкции по приготовлению рецепта, сопровождаемые изображением готового блюда.</li>
</ul>
<h3>2. Будьте кратки</h3>
<p>Альтернативный текст должен быть лаконичным &ndash; в идеале менее 125 символов &ndash; чтобы пользователи и программы экранного доступа могли быстро его прочитать. Это особенно актуально, поскольку пользователи программ экранного доступа не могут приостановить показ альтернативного текста, чтобы перейти к другому контенту.</p>
<h3>3. Включите соответствующие ключевые слова</h3>
<p>Включите соответствующие ключевые слова в альтернативный текст, чтобы помочь поисковым системам ранжировать ваши изображения. Однако избегайте перенасыщения ключевыми словами, то есть вставки ключевых слов в альтернативный текст до тех пор, пока он не станет неестественным и трудным для чтения.</p>
<h3>4. Не используйте альтернативный текст для декоративных изображений.</h3>
<p>Не используйте альтернативный текст для декоративных изображений, которые только добавляют визуальный интерес и несут мало информации или функций &ndash; это сбивает пользователей с толку.</p>
<p>Используйте атрибут alt со значением null, чтобы указать программам чтения с экрана игнорировать декоративные изображения. Например:</p>
<p><code>&lt;img alt="" src="decorative-image.jpg"&gt;</code></p>
<p>Если исключить атрибут alt, программы чтения с экрана могут вместо этого считывать имя файла изображения. Это неидеально.</p>
<h3>5. Локализуйте альтернативный текст</h3>
<p>Локализуйте альтернативный текст в соответствии с культурным и языковым контекстом вашей аудитории . Это особенно важно для веб-сайтов, ориентированных на различные географические регионы.</p>
<p>Например, British Airways использует альтернативный текст изображения на английском языке для своего англоязычного сайта. И использует французский альтернативный текст изображения на своем франкоязычном сайте для пользователей из Франции.</p>
<p>Кроме того, при локализации альтернативного текста учитывайте различия в терминологии на одном языке.</p>
<p>Например, вид спорта, в котором две команды по 11 человек забивают голы бело-чёрным мячом в сетку, в американском английском называется &laquo;soccer&raquo;. А в британском &ndash; &laquo;football&raquo;.</p>
<p>Чтобы удовлетворить потребности обоих рынков, компания Nike использовала соответствующие термины в альтернативном тексте для домашних футболок чемпионата Бразилии по футболу 2024 года: в зависимости от региональных настроек альтернативный текст отображался как &laquo;soccer replica jersey&raquo; или &laquo;football replica jersey&raquo;.</p>
<h3>6. Регулярно проверяйте альтернативный текст</h3>
<p>Регулярно проверяйте свой альтернативный текст, чтобы выявить и предпринять меры для его улучшения и в конечном итоге помочь своим изображениям занять более высокие позиции в результатах поиска.&nbsp;</p>
<h2>Используйте ИИ для ускорения генерации альтернативного текста</h2>
<p>ИИ может значительно ускорить генерацию альтернативного текста, особенно когда вам нужно написать альтернативный текст для большого количества изображений.</p>
<p>Вот как написать альтернативный текст с помощью ИИ:</p>
<p>Загрузите изображение в инструмент для написания текстов на основе искусственного интеллекта, например, <strong>ChatGPT</strong> или <strong>Claude</strong>. Затем попросите инструмент предложить несколько вариантов альтернативного текста, которые точно описывают изображение и содержат ваши целевые ключевые слова, соблюдая при этом желаемое количество символов.</p>
<p>Например:</p>
<blockquote>
<p>&laquo;Напиши несколько вариантов альтернативного текста для этого изображения. Альтернативный текст должен описывать ключевые элементы изображения, содержать около 125 символов и включать следующие ключевые слова: [вставьте ключевые слова здесь]&raquo;.</p>
</blockquote>
<p>Проверьте предлагаемые инструментом варианты альтернативного текста на точность, релевантность и длину. Затем выберите понравившийся вариант, доработайте его и используйте.</p>
<p>Вот мои результаты, когда я запросил у ChatGPT альтернативный текст для изображения двойной радуги в поле:</p>
<ul>
<li>&laquo;Яркая двойная радуга пересекает облачное голубое небо над сочным зеленым полем с дикими травами на переднем плане&raquo;.</li>
<li>&laquo;Двойная радуга раскинулась в небе над широким, залитым солнцем полем зеленых культур и высоких трав под переменно-облачным небом&raquo;.</li>
<li>&laquo;Сияющая двойная радуга простирается над огромным зеленым полем, сквозь которое пробиваются редкие облака и мягкий солнечный свет&raquo;.</li>
<li>&laquo;Над залитым солнцем зеленым полем, окаймленным дикими травами и деревьями под драматичным облачным небом образуется двойная радуга&raquo;.</li>
<li>&laquo;Зеленое поле, залитое солнечным светом, с двойной радугой, изогнувшейся по небу с переменной облачностью после прошедшего ливня&raquo;.</li>
</ul>
<p>Второй вариант мне понравился больше всего своей объективностью и отсутствием драматизма. Но я посчитал, что описывать поле как широкое и залитое солнцем было бы излишним. А описывать посевы как зелёные &ndash; излишне.</p>
<p>Поэтому я отредактировал альтернативный текст следующим образом:</p>
<p>&laquo;Двойная радуга раскинулась в небе над полем посевов и высокими травами под переменно-облачным небом&raquo;.</p>
<h2 class="mb-4">Заключение</h2>
<p>Атрибут <code>alt</code> &ndash; это не просто техническое требование, а важный элемент создания инклюзивного и SEO-оптимизированного веб-сайта. Правильное использование alt-текста улучшает пользовательский опыт для всех категорий посетителей, повышает позиции сайта в поисковых системах и демонстрирует социальную ответственность владельцев сайта.</p>

Символов: 0 Слов: 0

Текст скопирован в буфер!

Текст вставлен из буфера!

VirtualityCMS

Ahrefs

Полное название	VirtualityCMS
Идентификатор ссылки (англ.)	vigbo-copy

Время чтения (мин.): 1

Слов: 93

Знаков: 1492

Описание

VirtualityCMS

Cистема управления контентом VirtualityCMS разработана индивидуальным предпринимателем в 2020-м году для создания интернет-магазинов, интеграции склада и автоматизации торгового цикла.

Обзор

Описание

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

Заключение

В целом, VirtualityCMS не рекомендуется к использованию.

Стоимость

Цены VirtualityCMS

Оплата разово от 15.500 до 135.000 рублей.

Цены КБ77

Услуга установки сайта на VirtualityCMS не осуществляется.

Полное название	Ahrefs: Комплексная платформа для SEO-анализа и оптимизации
Идентификатор ссылки (англ.)	ahrefs

Время чтения (мин.): 9

Слов: 1257

Знаков: 23827

Описание

Справочная информация: Ahrefs – одна из ведущих SaaS-платформ для поисковой оптимизации, предлагающая широкий спектр инструментов для анализа сайтов, исследования ключевых слов и конкурентного анализа.

Справочная информация: Ahrefs – одна из ведущих SaaS-платформ для поисковой оптимизации, предлагающая широкий спектр инструментов для анализа сайтов, исследования ключевых слов и конкурентного анализа.

Обзор компании и платформы

Ahrefs представляет собой комплексное решение для цифрового маркетинга, специализирующееся на инструментах поисковой оптимизации. Компания была основана в 2010 году украинским предпринимателем Дмитрием Герасименко и с тех пор превратилась в одного из лидеров индустрии SEO-аналитики.

Ключевые факты

Год основания: 2010
Штаб-квартира: Сингапур
Статус: Частная компания
Годовой доход: ~$66.4 млн (2021)
Оценочная стоимость: $600-700 млн

Технические показатели

Серверы: 1000+
Объем данных: 100+ петабайт
Индекс обратных ссылок: 14+ триллионов
Анализ страниц/день: 30+ млн
Обновления: 100,000 страниц/сек

Основные инструменты Ahrefs для SEO

1. Site Explorer – анализ конкурентов и сайтов

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

Возможности Site Explorer:

Анализ трафика и ключевых слов:

Оценка органического трафика
Топ страницы по трафику
Ранжирующиеся ключевые слова
Потерянные и новые ключевые слова
Анализ позиций в SERP

Анализ обратных ссылок:

Профиль обратных ссылок
Новые и потерянные ссылки
Анкорные тексты
Топ ссылающиеся домены
Качество и токсичность ссылок

2. Keywords Explorer – исследование ключевых слов

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

Важные метрики в Keywords Explorer:

Search Volume: Среднемесячное количество поисков
Keyword Difficulty (KD): Сложность продвижения по запросу
CPC: Средняя стоимость клика в рекламе

SERP Overview: Анализ топ-10 результатов
Parent Topic: Родительская тема для группировки
Traffic Potential: Потенциальный трафик

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

3. Content Explorer – анализ контента

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

Применение Content Explorer в SEO:

Контент-стратегия

• Поиск вирусного контента
• Анализ трендов
• Идеи для статей

Линкбилдинг

• Поиск prospects
• Анализ упоминаний
• Контакты с авторами

Конкурентный анализ

• Топ контент конкурентов
• Источники трафика
• Социальная активность

4. Rank Tracker – отслеживание позиций

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

5. Site Audit – технический аудит сайта

Site Audit проводит комплексную техническую проверку сайта, выявляя проблемы, которые могут негативно влиять на SEO-производительность. В 2024 году Ahrefs значительно усовершенствовала инструмент Site Audit, добавив новые возможности и улучшив точность диагностики.

Категория проблем	Примеры	Влияние на SEO
Технические ошибки	404 ошибки, редиректы, дублированный контент	Высокое
Производительность	Скорость загрузки, размер изображений	Среднее
Meta-данные	Title, description, заголовки	Среднее
Внутренние ссылки	Битые ссылки, структура перелинковки	Умеренное

Технологические особенности и AhrefsBot

Одним из ключевых технологических преимуществ Ahrefs является собственный веб-краулер AhrefsBot. Этот пошуковый робот является вторым по активности в мире после GoogleBot и ежедневно анализирует более 30 миллионов новых страниц.

Технические характеристики AhrefsBot

Скорость обработки: 100,000 страниц в секунду

Ежедневный анализ: 30+ миллионов новых страниц

Обновления индекса: В режиме реального времени

Размер индекса: 300+ миллиардов страниц

Исторические данные: 7+ лет

Географическое покрытие: Глобальное

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

Бесплатные инструменты Ahrefs

Несмотря на то, что основная платформа Ahrefs является платной, компания предоставляет ряд бесплатных инструментов, которые могут быть полезны для базового SEO-анализа:

Ahrefs Webmaster Tools

Бесплатный сервис с ограниченной функциональностью для аудита сайта и отслеживания обратных ссылок. За три недели после запуска в 2020 году зарегистрировалось более 60,000 пользователей.

Бесплатные SEO-инструменты

• Keyword Generator
• Backlink Checker
• Website Authority Checker
• Broken Link Checker
• SERP Checker

Интеграция с другими инструментами

Ahrefs предлагает различные способы интеграции своих данных с другими маркетинговыми инструментами и платформами:

API и автоматизация

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

Браузерные расширения

SEO Toolbar от Ahrefs представляет собой полноценный набор инструментов в одном SEO-расширении, предоставляющий инсайты для on-page анализа, исследования ключевых слов и анализа ссылок на любой веб-странице.

Обновления и развитие платформы в 2024-2025 годах

В 2024 году Ahrefs представила множество новых функций, включая AI-инструменты, изменения в Content анализе и Report Builder, а также значительные улучшения инструмента Site Audit. Компания активно инвестирует в улучшение визуализации данных и расширение возможностей для конкурентного анализа и разработки контент-стратегий.

Ключевые направления развития

AI и машинное обучение

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

Улучшенная визуализация

Более интуитивные дашборды и отчеты для лучшего понимания данных

Расширенная аналитика

Новые метрики и подходы к анализу в условиях изменяющихся алгоритмов поисковых систем

Сравнение с конкурентами

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

Критерий	Ahrefs	SEMrush	Moz
Размер индекса ссылок	14+ трлн (лидер)	Средний	Ограниченный
Исследование ключевых слов	Отличное	Отличное	Хорошее
Удобство интерфейса	Интуитивный	Сложный	Простой
Цена (начальный план)	$99/мес	$119/мес	$99/мес

Практические кейсы использования Ahrefs

Кейс 1: Анализ снижения трафика

Проблема:

Сайт потерял 40% органического трафика за последние 3 месяца.

Решение с Ahrefs:

Анализ в Site Explorer показал потерю ранжирования по ключевым запросам
Site Audit выявил технические проблемы с индексацией
Анализ обратных ссылок показал потерю качественных ссылок
Content Gap анализ помог найти упущенные возможности

Результат: Восстановление 85% потерянного трафика в течение 6 месяцев

Кейс 2: Запуск новой тематики

Задача:

Создать контент-стратегию для выхода на новый рынок.

Подход с Ahrefs:

Keywords Explorer для исследования семантического ядра
Content Explorer для анализа популярного контента
Site Explorer для изучения топ-конкурентов
SERP анализ для понимания интента пользователей

Итог: Создано 50+ статей, 200% рост органического трафика за год

Будущее поисковой системы Ahrefs

В 2019 году Дмитрий Герасименко анонсировал амбициозный проект – создание собственной поисковой системы, которая будет делиться 90% рекламного дохода с создателями контента. Этот проект направлен на создание более справедливой экосистемы для веб-мастеров и контент-создателей.

Особенности будущей поисковой системы Ahrefs

90% рекламного дохода передается создателям контента
Прозрачная система ранжирования
Фокус на качественном контенте
Использование собственной базы данных AhrefsBot

Заключение

Ahrefs представляет собой одну из наиболее комплексных и технологически продвинутых платформ для SEO-анализа на современном рынке. Благодаря мощной технологической базе, включающей собственный краулер AhrefsBot и огромные объемы данных, платформа предоставляет SEO-специалистам и маркетологам инструменты мирового класса для анализа, планирования и оптимизации цифрового присутствия.

Ключевые преимущества Ahrefs:

Крупнейший индекс обратных ссылок в индустрии
Высокая точность и актуальность данных
Интуитивно понятный интерфейс
Комплексный подход к SEO-анализу

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

Независимо от уровня экспертизы – от начинающего веб-мастера до опытного SE

Персонажи

Идея текста

Сюжет

План действий

Заметки

Дополнительные поля
Дополнительные поля отсутствуют

Ключевые факты

Технические показатели

Анализ трафика и ключевых слов:

Анализ обратных ссылок:

Контент-стратегия

Линкбилдинг

Конкурентный анализ

Ahrefs Webmaster Tools

Бесплатные SEO-инструменты

AI и машинное обучение

Улучшенная визуализация

Расширенная аналитика

Для начинающих SEO-специалистов

Для продвинутых пользователей

Alt Attribute / Атрибут Alt