Прозрачный h1 заголовок, является ли нарушением?

Question

[godsplane]

Если сделать так

<h1>
<span>TItile</span>
<img src="logo">
</h1>

И скрывать/уменьшить прозрачность span до 0, чтобы его не было видно, будут ли учитывать поисковые роботы этот текст?
Просто на логотипе есть текст, который отражает суть страницы, но его больше нигде не выделить h1, можно ли делать так?

Comments

[Ankhena]

Почитайте про доступное скрытие и паттерн visually-hidden

Но вряд ли это элемент логотипа, разумнее его перенести в main.

Посмотрела сайт.
Оберните основное содержимое страницы в main и напишите ему h1.

<h1 class="visually-hidden">Прокат автомобилей</h1>

Вариантов стилей для visually-hidden несколько, погуглите какой больше понравится.
Мне нравится так

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0)
}

Answer 1

[Антон Пархоменко]

Так делать вообще не стоит. Словите бан. Лучше и эффективней прописать alt= и title= для изображения.

Comments

[godsplane]

Но мне нужен именно h1 тег на странице

[Антон Пархоменко]

godsplane, В таком случае лучше сделать text-indent: -9999px для H1. Или же сделать display:none.

[Ankhena]

Антон Пархоменко, display:none, font-size 0 и нулевая прозрачность НЕ являются доступным скрытием.

Answer 2

[Арсений Матыцин]

Посмотри семантику HTML и выбери тег, который отвечает твоим требованиям.

Как по мне хорошо иллюстрирует смысловую нагрузку (семантику) — nav, с его помощью можно разместить навигационный блок (не обязательно меню сайта) в подвале сайта. Он будет присутствовать на каждой странице.

К изображению же стоит применить ALT для корректной отработки. А если необходимо добавить в видимость клиента — используй аттрибут title.

Дальше, если ты оборачиваешь логотип в h1, то делаешь себе очень плохо, так как исключаешь возможность использования данного тега (основного заголовка по делу), есть нюансы, можно комментарии оборачивать в h1, но это уже читать надо, как правильно делать. Да, на сайте W3C. Т.е. на данный момент ты подложил себе свинью.

А вообще изменять размер (сохраняя читаемость) для h1 можно. И для span-a внутри него. Но не стоит так делать, основной посыл должен быть «обычным»

Если же тебе нужно описание картинки, то есть замечательный тег figure.

Comments

[godsplane]

Я имею ввиду что сам текст на логотипе, который обозначает основной посыл это картинка.
prokat74.ru вот можете зайти и посмотреть что я имею ввиду. Сейчас h1 далеко снизу.

[Ankhena]

Например nav, с его помощью можно разместить адрес в подвале сайта. Он будет присутствовать на каждой странице.

Что??

[Арсений Матыцин]

Ankhena, https://www.w3.org/TR/2011/WD-html5-author-2011080...
Но соглашусь, звучит так, будто я предлагаю использовать его вместо address. Сейчас поправлю.

[Арсений Матыцин]

godsplane, картинке дай альт, который соответсвует содержанию, скажем «лого проката авто такого-то», а H1 должен быть «Прокат автомобилей в Челябинске» (он же им и является, я глянул) и этого достаточно.

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

А вообще да, в нормальном дизайне, H1 это то, что должно быть где-то сверху, сохраняя иерархию, но когда приходит в твою жизнь SEO, он ломает эти представления.

Повторюсь, просто дай alt картинке и не мучайся. Понятное дело, есть такие штуки, как переключаемое содержимое, или spoiler-ы (details), глядя на которые может и возникнет желание наэтосамое систему, но зачем?

К слову я в принципе рекомендую посмотреть справку яндекса (тут в тексте есть ссылка) и google (ищи сам). Многие такие моменты достаточно подробно рассмотрены.

[Ankhena]

Арсений Матыцин, nav это всё таки основная навигация.
А в футере скорее всего дублирующая и/или с некритичными ссылками.

[Арсений Матыцин]

Ankhena
Да, самый оптимальный подход — основная навигация. Но вообще это просто навигационный блок. Можно основную навигацию вообще не оборачивать, но она будет иметь большой вес из-за количества повторений и переходов. Поисковики ловят такие штуки, как поведенческие факторы. При этом они будут преобладать (поведенческие факторы) при формировании сниппета с быстрыми ссылками над основной навигацией, что бы мы ни делали).

Я говорил, говорю и буду говорить: делай все возможное, чтобы роботы правильно разбирали твой сайт (всегда акцентирую внимание, что не приложение с паролем), а потом молись.

Как по мне, вся эта классово верная семантическая верстка от лукавого (я совсем не агитирую не использовать ее, наоборот), ибо вот Open Graph работает. Инфа сотка, а вот помогут ли в действительности твои старания считать сайт? Да хз, робот и так придет возьмет свое. Главное не мешай, это уж точно. Впрочем ладно, что-то я в философию ушел. Спасибо за внимание.

[Ankhena]

Арсений Матыцин, роботы это безумно важно.
Но я про людей и доступность.

Answer 3

[Ринат Хайсман]

Да, за это Яндекс исключает из индекса, читайте официальную справку поисковой системы, там все ответы:
https://yandex.ru/support/webmaster/threats/hidden...