Вопрос или проблема
Клиент хочет, чтобы версия их минималистского логотипа заменяла аббревиатуру названия компании каждый раз, когда она появляется в заголовках.
Например, если в заголовке написано “Вы можете сделать это с [название компании]”. То [название компании] будет на месте, но наложено их логотипом.
Я думаю сделать что-то вроде этого:
<style>
h1 span {
position: relative;
width: 150px;
display: inline-block;
}
h1 span:before {
content:"";
position: absolute;
height: 40px;
width: 150px;
background-color:red;
background-image: url(https://placehold.co/150x40);
bottom: 0;
}
</style>
<h1>
Это H1 заголовок. Этот <span>Логотип</span> внутри H1.
</h1>
Вы можете увидеть это в живую здесь: https://jsfiddle.net/daneloctober/pomuygcq/
Это допустимо? Я имею в виду, не получат ли они штраф за это?
Ответ или решение
Подмена части заголовка H1 изображением с помощью псевдоэлемента: стоит ли это делать?
Вопрос о том, можно ли заменить часть заголовка H1 изображением через псевдоэлемент, требует детального рассмотрения как с точки зрения функциональности, так и с точки зрения SEO.
1. Технический аспект
Ваше предложение, имеющее следующий стиль:
h1 span {
position: relative;
width: 150px;
display: inline-block;
}
h1 span:before {
content: "";
position: absolute;
height: 40px;
width: 150px;
background-color: red;
background-image: url(https://placehold.co/150x40);
bottom: 0;
}стоит рассмотреть с точки зрения его визуального оформления. Данный код создает визуальный эффект наложения логотипа на текст, который создаёт видимость, что логотип заменяет текст.
2. SEO-значение
Теперь к важнейшему аспекту — SEO. Заголовки, такие как H1, имеют критическое значение для поисковых систем. Они должны содержать релевантные ключевые слова и давать четкое представление о содержании страницы. Замена текста заголовка на изображение может привести к следующим проблемам:
-
Потеря контекста: Поисковые системы не "видят" изображение, как это делает человек. Если ваше изображение не содержит альтернативного текста, поисковая система не сможет понять его содержание.
-
Альтернативный текст: Если вы решите использовать изображение, вам будет необходимо прописать атрибут
alt. Это поможет поисковым системам идентифицировать содержание изображения, но имейте в виду, что весь текст заголовка останется непонятным для роботов. -
Потенциальные штрафы: Хотя конкретно за этот прием поисковые системы могут не наказывать, использование изображений вместо текста в заголовках может быть расценено как обман пользователей, если не будет должным образом задокументировано.
3. Альтернативное решение
Вместо использования псевдоэлементов, которые могут вызвать сложности как с SEO, так и с доступностью, можно рассмотреть использование HTML для упрощения задачи, сохраняя при этом нужный контекст. Например:
<h1>
This an H1 heading. <span class="logo">[Logo]</span> is inside the H1.
</h1>Где .logo — это класс, который вы будете применять к вашему изображению, если хотите, чтобы оно отображалось слишком большой масштаб. При этом текст остаётся видимым и доступным для поисковых систем.
Заключение
Таким образом, хотя ваш подход к замене текста заголовка H1 изображением через псевдоэлемент и может выглядеть привлекательно с точки зрения визуального оформления, он имеет серьезные недостатки с точки зрения SEO и доступности. Лучше придерживаться практик, которые помогают сохранить видимость для поисковых систем и предоставить пользователям доступный контент.