Объяснение альтернативного атрибута WordPress: что такое замещающий текст изображения?
Опубликовано: 2021-01-19Все мы знаем, насколько важно использовать изображения на своих страницах и в статьях. Простые блоки текста становятся более живыми, вы привлекаете посетителей более наглядно и доставляете свое сообщение. Но при добавлении одного вы не можете не сосредоточиться на одной странно звучащей области. «Хм, альтернативный текст, что бы это было теперь», - задумываетесь вы. Конечно, это не может быть какое-то поле, случайно добавленное разработчиками WordPress - если оно есть, скорее всего, у него есть цель.
Альтернативные тексты - это атрибуты HTML, добавляемые к тегам изображений. Это короткие строки текста, которые WordPress показывает, если не может отобразить изображение. Альтернативные тексты улучшают SEO вашего изображения. Они также помогают как слабовидящим пользователям с программами чтения с экрана, так и поисковым системам понимать содержание изображения.
Альтернативные тексты также имеют несколько имен, используемых случайно, например, «тег alt», «текст alt» или «атрибут alt». Чтобы извлечь из этого максимальную пользу, я считаю, что лучше всего думать о тегах alt следующим образом: атрибут alt похож на «краткое изложение» длинного отчета. Он очень кратко и конкретно резюмирует то, что содержит изображение (то есть отчет).
Некоторые существующие платформы CMS и многие специально созданные веб-сайты требуют, чтобы вы добавляли эту часть вручную непосредственно в код каждой из ваших страниц. Однако таким счастливчикам, как мы, эта функция намного проще в WordPress.
Как альтернативные тексты изображений работают в WordPress?
Альтернативные тексты - не что-то новое. Они также не являются чем-то уникальным, что предлагает только WordPress. Фактически, это очень старая функциональность, относящаяся к первым дням Интернета в конце 20-го века.
С момента своего появления в 1995 году, когда был выпущен HTML 2.0, теги alt служили трем конкретным целям:
- Альтернативные теги появляются на вашей странице вместо изображения, если браузер по какой-либо причине не может загрузить изображения.
- Программы чтения с экрана читают вслух альтернативные тексты для людей, использующих визуальную помощь при просмотре веб-страниц.
- Боты поисковых систем, такие как Google, используют их, чтобы лучше понимать содержание изображения.
Следовательно, альтернативные тексты - это отличная функция доступности, и для их добавления не требуется много дополнительной работы.
Примеры альтернативных текстов изображений в WordPress
Теперь давайте посмотрим на несколько примеров альтернативных текстов. Я выделил хорошие и плохие примеры, чтобы вы могли точно понять, что вы хотите включить в свои альтернативные теги.
Пример хорошего альтернативного текста
Вот изображение, которое мы вставили в одно из наших сообщений в блоге. Как вы можете видеть ниже, цель изображения - показать, как именно читатель может достичь результата, описанного в статье.
Конечный результат созданного нами тега alt - «Хороший пример NAP на странице« Свяжитесь с нами ».
Поскольку изображение добавляет контекст и помогает пользователю в решении его проблемы, важно правильно отметить его и указать на это.
Пример плохого альтернативного текста
Между тем, вы также можете создавать альтернативные тексты, которые бесполезны. Предположим, что на том же изображении есть тег alt «NAP» или «Business NAP».
Этот альтернативный текст плох, потому что он никому не служит, а только отнимает время. Значит ли это, что никакой альтернативный текст лучше, чем какой-нибудь альтернативный текст? Хотя это спорно, мы считаем, что такие alt-теги бесполезны с точки зрения доступности для пользователей. Они также не добавляют никакого контекста для поисковых роботов Google. Даже в худшем случае, когда изображение не может быть отображено, пользователь все равно остается в замешательстве, потому что видит на странице просто случайное слово, а не краткую строку, которая дает им представление о том, что там должно быть.
Поэтому мы решили, что не стоит тратить время на создание плохих тегов alt. Вместо этого, когда мы решаем проверить наш сайт и сделать это, мы считаем, что гораздо лучше потратить время на создание полезных alt-тегов.
9 советов по написанию отличного замещающего текста изображения в WordPress
Теперь вы знаете, как работать с атрибутом alt для изображений в WordPress. Итак, давайте рассмотрим несколько советов и лучших практик, чтобы убедиться, что вы используете его правильно.
1. Альтернативный текст должен быть короче 125 символов.
Используйте альтернативные теги короче 125 символов. Нет никаких строгих правил относительно длины alt-тегов, поэтому используйте эту рекомендацию как практическое правило. Однако там, где это уместно, не стесняйтесь жертвовать этим общим правилом ради более наглядных текстов. Тем не менее обычно в этом нет необходимости.
Кроме того, это пример того, как выглядят 125 символов:
«Аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа
Это много текста! В подавляющем большинстве случаев вы можете вписать в него свои альтернативные тексты.
2. Либо пишите хорошие альтернативные теги, либо вообще не пишите
А как насчет более низкой маржи? Технически их нет (ну кроме 0, конечно). Из личного опыта, ленивого пути и написания всего одного-двух слов тоже не стоит тратить время. То есть, если вы не планируете писать хорошие альтернативные теги, они так же хороши, как если бы у вас их вообще не было.
3. Сохраняйте связанные альтернативные теги похожими, но уникальными
Совершенно приемлемо сделать ваши альтернативные теги похожими, но убедитесь, что они по-прежнему уникальны. Предположим, у вас есть изображения, объясняющие два последовательных шага в публикации с практическими рекомендациями. В этом случае дублирование частей неизбежно.
Однако здесь вы можете убедиться, что каждый альтернативный текст достаточно уникален, четко объясняя каждый шаг и отмечая его правильным номером.
Например: alt = «это первый шаг моего руководства по альтернативному тексту WordPress» против alt = «второй шаг в руководстве по альтернативным тегам WordPress»
4. Избегайте использования «изображения», если оно не имеет отношения к делу.
Как правило, вам не нужно писать «изображение» или «снимок экрана» в альтернативных текстах. Поисковые системы и программы чтения с экрана знают, что имеют дело с изображением, поэтому добавлять этот текст не нужно. Вместо этого можно лучше использовать оставшееся пространство.
Это, конечно, верно, если вы не хотите появляться в Google по этим запросам по ключевым словам. Если ваше целевое ключевое слово включает фразу, скажем, «снимок экрана», то добавление ее к изображению действительно поможет ему занять более высокое место в поиске Google.
Например, предположим, что вы слышите об утечке изображений электронной переписки политика в новостях. Естественно, вы можете искать что-то вроде «изображения просочившихся электронных писем [ВООБРАЖЕННОЕ ИМЯ ПОЛИТИКА]».
Здесь добавление фразы «изображения» в ваш альтернативный текст поможет вам появиться по этому поисковому запросу - хотя, конечно, само по себе это не гарантирует, что ваш сайт будет где-то в топе.
Точно так же предположим, что у вас есть сообщения, нацеленные на ключевые слова «вдохновение» для темы. В этом случае также допустимо использование таких фраз, как «вдохновляющие изображения [темы]».
5. Не используйте спам для ключевых слов в альтернативных текстах.
При написании тегов alt сохраняйте актуальность текста и избегайте рассылки спама по ключевым словам.
То есть, если ваше изображение демонстрирует собаку, не пишите альтернативный текст, похожий на «собаки собачий питомец щенок гончая лучший друг человека щенок породы собак». Вместо этого выберите что-то более информативное, добавляющее контекст.
Потенциально этот текст естественным образом объясняет изображение с учетом содержания и абзаца, который его окружает. Я покажу вам конкретные примеры в разделах ниже.
6. Добавление изображений в последнюю очередь помогает писать хорошие альтернативные тексты
Добавление изображений после того, как вы полностью подготовили свой пост в блоге, может гарантировать, что вы не пропустите какие-либо альтернативные теги и вам придется потратить дополнительное время на их исправление позже. Иногда вы даже можете редактировать альтернативный тег после того, как вставили изображение, только чтобы обнаружить, что оно не обновляется на странице.
Помните, что добавление изображений в WordPress лучше всего выполнять в качестве последнего шага при создании страниц и сообщений.
7. Используйте имя изображения в качестве альтернативного текста
Выбирая изображения, просто не забывайте называть их как-то очень релевантным тому, о чем вы пишете. Вместо использования пробелов просто используйте тире для разделения слов. При этом, как только вы загрузите изображение, вы можете просто скопировать имя, которое вы уже написали, и удалить тире. Это даст вам идеальный альтернативный тег, не теряя времени. Чтобы узнать, как именно я это делаю, прочитайте этот раздел в нашем руководстве по добавлению тегов alt в WordPress.
8. Большие альтернативные теги подробно описывают изображения.
При написании тегов alt важно быть описательным. Чем лучше вы описываете, что изображено на изображении, тем легче пользователям с ослабленным зрением понять, почему вы поместили на них изображение. То же самое и с поисковыми системами. Эта практика дает вам больше шансов, что Google покажет ваш сайт, когда кто-то ищет этот тип изображения. Это также происходит даже с более длинными и разными поисковыми запросами, чем тот, для которого вы оптимизировали - также известный как ключевые слова с длинным хвостом.
9. Поместите изображения дизайна вашего веб-сайта в CSS.
Если изображение создано исключительно из соображений дизайна, вы должны реализовать его в CSS стиля вашего веб-сайта. Это установит правильную структуру / иерархию кода сайта. Это также позволяет поисковым системам и программам чтения с экрана различать изображения, которые вносят вклад в контент, и изображения, которые используются исключительно в качестве элементов дизайна.
Следуя этой логике, вы узнали, что на самом деле все изображения должны иметь тег alt. Внедрение изображения в HTML означает, что изображение добавляет контекст на страницу - и позволяет добавлять замещающий текст. Между тем, реализация изображения в вашем CSS означает, что изображение не добавляет контекста, а скорее помогает визуализировать страницу - и, следовательно, у вас нет доступа к функциям добавления тега alt.
Заключительные слова
Для большинства веб-сайтов добавление альтернативных текстов не требует огромных временных затрат. Между тем, преимущества, которые они приносят, огромны. Вы делаете свой сайт более доступным - и потенциально можете быть вознаграждены за это от Google.
Лучший способ научиться писать альтернативные теги - это посмотреть на несколько примеров и попробовать сами. Чтобы узнать, как вы можете добавить или изменить альтернативный текст к изображению в WordPress, прочтите руководство по ссылке здесь.
Наконец, всегда сохраняйте изменения в WordPress и убедитесь, что теги alt видны. В противном случае из-за того, как это сделано, иногда WordPress не показывает ваши новые альтернативные тексты. Если вы сталкивались с этим раньше, прочтите это руководство о том, как исправить WordPress, не отображающий теги alt.