Что такое div в тематике seo

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа

Ну и представьте, насколько проще читать вместо

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

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег

, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Особенности: желателен заголовок внутри.

Типовые ошибки: путают с тегами и

Значение: побочный, косвенный для страницы контент.

Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.

Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.

Типовые ошибки: многие считают, что в может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

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

Особенности: этих элементов может быть несколько на странице.

Типовые ошибки: использовать только как шапку сайта.

Значение: основное, не повторяющееся на других страницах, содержание страницы.

Особенности: должен быть один на странице, исходя из определения.

Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

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

Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.

Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Заголовок всего документа и заголовки смысловых разделов. Теги:

Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.

Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

Получилось найти самый подходящий смысловой тег — использовать его.

Для потоковых контейнеров —

Можете дать имя разделу и вынести этот раздел на другой сайт? —

Можете дать имя разделу, но вынести на другой сайт не можете? —

Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —

Как точно не нужно делать

Не используйте семантические теги для украшательств. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

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

использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее.

Источник

HTML-теги, без которых в SEO никуда

Мы привыкли, что большинство манипуляций с HTML-кодом выполняет программист. Так и должно быть. Но это ни в коем случае не освобождает сеошника от необходимости знать базовые HTML-теги. Как минимум — для правильной постановки ТЗ, а как максимум — для понимания, как теги влияют на SEO.

Какие теги и атрибуты важны для продвижения, как их правильно оформлять и зачем они нужны? Мы прошлись по самым важным для сеошников и диджитал-маркетологов тегам и составили список, чтобы вы могли освежить свои знания или же разобраться в основах HTML с нуля.

База — коротко о важном

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

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

Простыми словами, если зайти на страницу сайта, вы увидите сверстанный текст, с разделами и подзаголовками, картинками и ссылками. Но для браузера и поисковых систем такая страница представляет собой просто строки HTML-кода с определенными элементами.

Мы уже затронули термины «элемент HTML» и «тег», но есть также метатеги и атрибуты. Вы легко можете запутаться, если не знаете, в чем разница.

Поэтому давайте разберем основные термины, которые мы будем часто использовать в этой статье.

Структура элемента HTML

HTML-код состоит из элементов, каждый из которых может быть тегом или метатегом. Если у него есть дополнительные характеристики, это атрибуты.

В данном случае это заголовок, который обозначается в коде с помощью открывающего тега

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

Метатег — это разновидность тега. С его помощью поисковики и браузеры получают техническую информацию о странице сайта — описание страницы, ключевые слова, кодировку документа, правила индексирования для поисковиков и другие. Все метатеги должны находиться в теге документа. Интересно, что description и keywords являются метатегами, а title — тегом.

Атрибут — дополнительная характеристика тега или метатега. Они представляют собой специальные слова, которые используются внутри начального тега для управления поведением элемента.

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

Чем теги отличаются от атрибутов

Многие не видят разницы между терминами «тег» и «атрибут». Но отличия есть. Давайте разбираться с терминологией.

Вот пример элемента HTML, в котором можно выделить три части:

открывает тег, «Добро пожаловать в мой блог о SEO» — это содержание тега, а

Элемент HTML в приведенном выше примере — это видимый заголовок на странице блога. Теперь давайте проведем различие.Если теги должны иметь начальный и конечный элементы для правильного функционирования, то атрибуты нет — они добавляются к элементам HTML как модификаторы, например:

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

Зачем теги поисковикам и юзерам

Что такое теги и атрибуты понятно, но зачем они нужны поисковым системам, браузерам и юзерам? Поисковики используют теги, чтобы получить информацию о содержимом страницы и включить ее в результаты поиска.

Прямое тому подтверждение — сниппет в выдаче, который обычно формируется с помощью тега title и метатега description. Но если заголовок и описание страницы будут составлены некорректно (не отвечают действительности, переспамлены ключами и т. д.), Google и Яндекс заменят их на более подходящие, взятые из разметки и содержания страницы.

В справках Search Console и Вебмастера указаны списки метатегов, которые поддерживает Google и Яндекс соответственно. Обязательно ознакомьтесь с ними, если хотите узнать больше о каждом HTML-теге.

Теги помогают браузеру считывать информацию о странице. Благодаря этому текст, картинки и ссылки на наших мониторах отображаются именно так, как указано в HTML-коде. Сложно представить, если бы нам приходилось «вылавливать» текст на сайте из кода.

Теперь, когда мы разобрались с основными понятиями HTML, давайте перейдем к самому интересному: тегам и атрибутам, которые важны для поисковой оптимизации.

3 основных HTML-тега

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

Тег указывает, что страница является веб-страницей

Тег — это самый первый тег, который вы должны добавить в код своей страницы. Он указывает поисковым системам, что данная страница — это веб-страница.

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

Вот как используют тег в коде:

Таким образом, браузер поймет, что страница создана на HTML. И у него точно не возникнет проблем с обработкой кода и верным отображением страницы.

Тег содержит метаданные страницы

Тег представляет самый первый раздел страницы и содержит информацию, которая не отображается напрямую на странице в браузере.

Важно: внутри тега размещаются одни из ключевых SEO-тегов.

Элемент находится между тегами и и служит контейнером для метаданных. Как правило, метаданные определяют заголовок документа, его набор символов, стили, скрипты и т. д.

Нет смысла показывать вам, как этот код будет выглядеть в действии, потому что нет никакого контекста. Поэтому вот пример того, как мы использовали тег script, чтобы добавить виджет HelpCrunch на наш сайт:

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