Семантическая верстка

Ноутбук с Html кодом на экране

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

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

Это упростить работу поисковым роботам и позволит лучше сканировать страницы вашего сайта, а значит выше поднимать в поисковой выдаче. А пользователи будут получать более качественный и структурированный контент, который легче воспринимается.

Пример разметки страницы HTML-тегами
Пример не правильной и правильной разметки страницы

Зачем она нужна

Есть две основные задачи:

  1. Улучшение индексации роботами.
    Когда поисковый робот видит семантические html-теги, он точно понимает за что отвечает содержимое тега. Поэтому выбирая между двумя сайтами одной тематики, предпочтение в выдаче будет отдано сайту с семантической разметкой
  2. Повышение доступности сайта.
    Удобство сайта — один из ключевых параметров, которые также учитываются поисковыми системами. Удобным сайт должен быть и для людей с нарушением/потерей зрения. Пользователи с такими особенностями используют специальные программы — скринридеры. Эти программы которые “читают” и озвучивают содержимое страницы при наведении мыши или при помощи пальца. Чем лучше семантическая HTML разметка сайт, тем понятнее программа будет описывать блок и его содержимое для пользователя

Влияние на сео

Влияние семантической верстки на сео сайта:

  • Облегчает верстку адаптивного дизайна
  • Облегчает внедрение микроразметки Schema.org
  • Чистый, оптимизированный код способствует быстрой загрузке страницы, что положительно влияет на лояльность поисковых систем
  • Google использует семантические теги для определения релевантности содержимого, что влияет на ранжирование страниц в SERP

Основные семантические теги

<header> — определяет содержание, которое следует рассматривать как вводную информацию страницы или раздела.

<nav> — используется для ссылок навигации. Его можно расположить внутри тега <header>, но вторичные теги <nav> для навигации также часто используются в других частях страницы, например в сайдбаре.

<main> — содержит основное содержание (также называемое телом) страницы. На странице должен присутствовать только один тег.

<article> — независимая, отделяемая смысловая единица, например комментарий, твит, статья, пост и т.д.

<section> — это способ группировки близкого контента по схожей теме.

<aside> — определяет менее важное содержание. Его часто используют для сайдбаров

<footer> — используется в нижней части страницы (подвале). Обычно включает контактную информацию, авторские права и некоторую навигацию
по сайту
.

<h1> — Тег H1 обозначает заголовок верхнего уровня. Обычно на странице есть только один заголовок H1.

<h2> до <h6> — Подзаголовки разных уровней важности. На одной странице может быть несколько заголовков одного уровня.

<p> — Отдельный параграф текста.

<a> — Используется для создания гиперссылок с одной страницы на другую.

<ol> — Список элементов, отображаемых в определенном порядке, начиная с маркеров. Тег <li> (элемент списка) содержит один элемент списка.

<ul> — Список элементов, которым необязательно следовать определенному порядку, начиная с маркеров. Тег <li> (элемент списка) содержит один
элемент списка.

<q> / <blockquote> — Цитата текста. Используйте <blockquote> для длинных многострочных цитат и <q> для коротких встроенных цитат.

<em> — Используется для текста, который нужно выделить.

<strong> — Используется для текста, который нужно особенно выделить.

<code> — Блок компьютерного кода.

Консультация

Оставьте заявку на консультацию

    О проекте

    Расскажите о проекте, чтобы я мог подготовить предварительное предложение

      Написать в телеграм