💻 ТОП-5 ошибок при верстке информационного сайта
#НачинающемуВебмастеру #полезно@puzatru
Сегодня поговорим о недочетах верстки, которые влияет на валидность информационного сайта. Валидностью (или валидацией) называют соответствие кода сайта стандартам HTML. Другими словами, код должен быть чистым и структурированным, чтобы:
1) сайт отображался без ошибок во всех браузерах (в том числе и мобильных),
2) не тормозилась загрузка страниц (проверить можно здесь developers.google.com/speed/pagespeed/insights).
3) поисковые боты легко обрабатывали алгоритм, что будет плюсом для ранжирования сайта.
Какие ошибки в верстке первого сайта встречаются чаще всего?
⛔Ошибка №1. Отсутствие хлебных крошек (Breadcrumb)
Микроразметка Breadcrumb влияет не только на индексацию сайта, но и на вид сниппета в выдаче. При составлении кода хлебных крошек нужно соблюдать иерархию, то есть сначала в коде идёт страница 1 уровня (главная), 2 уровня (рубрика), 3 уровня (подрубрика).
Вот так выглядит кусок кода с одним элементом цепочки хлебных крошек.
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="адрес страницы 1го уровня (например, главная)" itemprop="url">
<span itemprop="title">название страницы</span>
</a>
</div>
Проверить, есть ли ошибки в хлебных крошках, можно с помощью сервиса от Google: search.google.com/structured-data/testing-tool
⛔Ошибка №2. В коде есть циклические ссылки.
Например, при верстке главной страницы не убрана ссылка с логотипа на главную страницу. Другими словами, не должно быть страниц, которые ссылаются сами на себя.
⛔Ошибка №3. Нет семантических тегов разметки.
К таким тегам относятся: <header> — для шапки сайта, <nav> — для меню , <footer> — задаёт подвал сайта, <article> — отмечает новость, статью в блоге и т.д, то есть любой самодостаточный элемент страницы, <aside> — выделяет сноски или цитаты.
Эти теги относятся к стандарту HTML5, поэтому когда они есть, ваш сайт, образно говоря, общается с поисковыми системами на современном сленге, а не на каком-то древнем наречии. Поисковики это ценят.
⛔Ошибка №4. Теги заголовков встречаются в логотипе, меню и т.д.
Тэг <h1>, <h2> и т.д. несут в себе семантическую нагрузку, и их не должно быть в блоках логотипа или меню. Теги заголовков оставляем только на страницах отдельных публикаций или на главной странице, если там есть блок с текстом. В противном случае они будут сбивать поисковик с толку и не принесут никакой пользы сайту.
⛔Ошибка №5. Пустое свойство атрибута alt
Частая ошибка: само свойство alt у картинки есть, но оно пустое. Прописывать атрибут alt обязательно, так как он задает изображению альтернативный текст. Если по каким-то причинам картинка не загрузится в браузере пользователя, он прочитает текст и поймёт, в чем суть изображения.
P.S.
Код не обязан быть полностью идеальным, потому как браузеры сейчас довольно хорошо справляются с невалидным кодом. Но если запустить код, то может накопиться критическая масса ошибок, которая скажется на ранжировании сайта.
👇Ставьте лайк, если материал был полезен!
