топ 100 тегов html

Какие HTML-элементы более востребованы: анализ 8 млн страниц с позиции SEO

Когда долго занимаешься SEO, многие вещи становятся банальными. Прописать title, description, alt для изображений — что может быть очевидней? Но на практике оказывается, что на многих сайтах не реализованы даже такие простые рекомендации Яндекса и Google.

Приводим результаты большого исследования использования различных HTML-элементов на страницах сайтов. Какие элементы HTML используются чаще всего? Заполняют ли вебмастера мета-теги и какие именно? Что там с микроразметкой? Спойлер: всё далеко не идеально.

Исследование HTML-элементов провели специалисты из AdvancedWebRanking. Проанализировали 8 млн страниц из ТОП-20 Google по 30 млн поисковых запросов. Оригинал исследования — здесь. Развернутый анализ с уточненными данными — в статье Catalin Rosu для MOZ.

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

Метатеги, которые понимает Google

В этом разделе разберем метатеги, перечисленные в списке Search Console Help. Эти теги распознает Google-бот при сканировании страниц.

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

Содержимое description обычно учитывается Google при формировании сниппетов в результатах поиска (а вот Яндекс чаще формирует сниппеты на свое усмотрение).

Исследование показало, что на 54,9% сайтов есть заполненный description. На 4,7% сайтов метатег прописан, но атрибут content не заполнен (то есть тег пустой). И на 0,2% сайтов тег прописан вообще без атрибута content.

Title технически не является метатегом, но поскольку его прописывают в разделе и он передает информацию о содержимом страницы, то его тоже называют метатегом — по аналогии с description.

С точки зрения SEO title критически важен. Именно содержимое title выводится в результатах поисковой выдачи Google и Яндекса как заголовок сниппета. Поисковые системы обращают внимание на title при определении релевантности страницы.

Несмотря на важность title, он заполнен на 78,3% страниц. Интересно, что только на 5,6% страниц, на которых прописан title, содержимое title полностью дублирует h1. То есть большинство сайтов все-таки делают h1 и title разными, что правильно с точки зрения SEO.

Что касается длины title, то считается, что она должна составлять не более 60 символов — примерно столько выводится в заголовках сниппетов. Более длинный title делать можно, но самую важную информацию тогда нужно разместить в первых 50-60 символах.

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

Техническая оптимизация — это длительная и скрупулезная работа. Если у вас нет на это времени, автоматизируйте процесс. В SEO-модуле платформы PromoPult вы можете устранить ошибки на сайте, повысить уровень его оптимизации, юзабилити и конверсионности. Система проведет аудит вашего сайта по более чем 60 направлениям, сформирует план работ по чек-листу и рассчитает оптимальный бюджет. От вас — только утверждение бюджета, доступы к сайту и приемка работ. По сути, для вас все происходит «в фоне».

Метатег robots сообщает поисковым роботам, можно ли индексировать и переходить по ссылкам на странице. Метатег googlebot определяет правила сканирования только для робота Google (для Яндекса — yandexbot).

В отличие от директив disallow в robots.txt, правила в метатеге robots считаются более надежным способом запретить индексацию отдельных страниц.

Метатег robots встречается на 19,7% сайтов, googlebot — на 1,7%. То есть на большинстве страниц правила сканирования задаются с помощью robots.txt, X-robots-tag или не задаются вообще.

Самый популярный метатег robots — со значениями «index,follow». Он разрешает индексацию страницы и переход по ссылкам. ТОП-5 метатегов robots — на гистограмме.

Этот метатег сообщает браузеру, как отображать страницу на мобильном устройстве. Наличие viewport указывает Google, что страница оптимизирована для мобильных устройств. Этот метатег есть на 62,4% страниц. То есть 37,6% страниц не оптимизированы под мобайл.

В контексте перехода с июля 2019 года на Mobile-First индексацию оптимизация для мобильных очень важна. И речь не только о метатеге viewport, но и улучшении мобильного юзабилити, и скорости загрузки страниц. Мы проводили исследования на эти темы, и пока ситуация далека от идеала.

Вот эти исследования:

Атрибут charset указывает кодировку документа (обычно это UTF-8) в HTML 5. С помощью данного метатега кодировка задана на 48,8% площадок.

Этот метатег отправляет пользователя на другой URL и используется в качестве простого способа редиректа. Обратите внимание, что он поддерживается не всеми браузерами и может вводить пользователей в заблуждение.

W3C не рекомендует использовать редиректы с помощью метатегов. Лучший вариант — 301 редиректы. Неудивительно, что только на 0,1% сайтов используется метатег refresh. Вероятно, это страницы на устаревших конструкторах, где нет доступа к управлению на уровне сервера и возможности настроить 301 редиректы в админпанели.

Этот метатег помечает страницу как содержащую контент для взрослых. Такая страница не показывается при использовании Безопасного поиска.

Google рекомендует использовать такие метатеги для adult-контента:

Эти метатеги есть на 1,7% страниц.

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

В результатах поиска Google иногда отображается поле поиска по вашему сайту. Метатег nositelinkssearchbox говорит Google, что показывать это поле не нужно.

Сложно представить ситуацию, при которой стоит давать Google такую рекомендацию. Поэтому нет ничего удивительного в низкой востребованности данного метатега.

Один из способов подтверждения прав на сайт в Google Search Console — с помощью данного метатега. Он размещен на 16,6% проанализированных площадок.

Еще один специфический метатег. Он сообщает Google, чтобы он не предлагал переводить страницу, если язык пользователя отличается от языка страницы. Этот тег использует всего на 0,1% сайтов.

Структурированные данные (JSON-LD)

Структурированные данные — это стандартизированный формат для предоставления информации о странице и классификации ее содержимого.

Структурированные данные описывают с помощью Microdata, RDFa или JSON-LD. Google понимает все эти форматы, но рекомендует использовать именно JSON-LD (в поиске Яндекса пока этот формат не поддерживается).

Разметка данных (вне зависимости от их типа) с помощью JSON-LD есть на 34,1% сайтов. Чаще всего JSON-LD используют для разметки поиска по сайту. Благодаря этому в результатах Google-поиска может показываться дополнительная строка поиска по сайту в сниппете. Также популярна разметка социальных профилей, логотипа, данных локального бизнеса.

Больше о том, что такое JSON-LD, читайте здесь. О быстрой настройке микроразметки разными способами мы тоже писали.

Атрибут rel=»canonical»

Этот атрибут сообщает поисковику, что страница, на которой он размещен, является приоритетной для индексации. Используется для борьбы с дублирующимися страницами, которые появляются по разным причинам (версии для печати, страницы пагинации, страницы с динамическими параметрами и проч.). Встречается на 40% страниц.

meta name=»keywords»

Уже прошло 10 лет, как Google объявил, что не учитывает метатег keywords при ранжировании страниц. Тем не менее он заполнен на 32,2% страниц. На 3,2% страниц метатег прописан, но имеет пустые значения.

Интересно, что Яндекс может учитывать метатег keywords при определении соответствия страниц поисковым запросам. Но сейчас его чаще всего не заполняют.

Заголовки h1-h6

Заголовки h1-h6 позволяют структурировать документ. Поэтому они важны для SEO. Несмотря на это, заголовки h1 встречаются только на 59,6% страниц, h2 — на 58,9%, h3 — на 49,6%.

После сбора информации по всем заголовкам оказалось, что по частоте использования самый популярный — h3 (42% от общего количества заголовков).

Интересно, что в результате исследования обнаружено 23116 заголовков h7 и даже 7276 заголовков h8. Насколько оправдано их использование — вопрос, ведь даже h5-h6 мало кто прописывает.

Атрибут alt

Для SEO атрибут alt важен, поскольку по нему поисковики понимают, о чем изображение. Это позволяет занять хорошие позиции в поиске по картинкам и привлечь дополнительный трафик. Но по факту alt заполнен лишь у 11,9% изображений. В 6,4% случаев alt прописан, но с пустым значением.

О приемах оптимизации изображений для поиска читайте в нашем блоге.

Определение языка

Для указания общего языка страницы (документа) или отдельных слов в контенте в HTML-разметке используется атрибут lang=»*». Этот атрибут присутствует на 65% проанализированных страниц.

Для указания альтернативных языковых версий используется атрибут hreflang=»*». Google рекомендует именно hreflang для обозначения локализованных версий страниц. Аналогичную рекомендацию дает Яндекс. Этот атрибут обнаружен на 21,6% страниц.

Google Tag Manager

Google Tag Manager — это система управления тегами, которая позволяет добавлять/обновлять коды отслеживания и другие фрагменты кода (теги) на сайт или в мобильное приложение.

В результате анализа сайтов выявлено, что фрагмент *googletagmanager.com/gtm.js есть всего на 4,3% страниц.

Атрибут rel=»nofollow»

Если Google видит ссылку с атрибутом rel=»nofollow», то он по ней не переходит и не передает ссылочный вес. Обычно этот атрибут используют в ссылках на ненадежные источники и в рекламном контенте.

В результате анализа 8 млн страниц выявлено 12,8 млн ссылок с атрибутом rel=»nofollow». То есть в среднем это 1,6 nofollow-ссылки на страницу.

В сентябре 2019 года Google объявил, что помимо атрибута rel=»nofollow» будет распознавать еще два атрибута:

В остальных случаях, когда вы не хотите передавать вес странице, по-прежнему используется rel=»nofollow».

Новые атрибуты вебмастера понемногу начали использовать: спустя две недели после новости обнаружено 278 sponsored-ссылок и 123 ugc-ссылки.

Яндекс пока каких-то новшеств в отношении rel=»nofollow» не вводил.

Facebook Open Graph

Разметка (протокол) Open Graph позволяет контенту, которым вы делитесь в социальных сетях, выглядеть так, как нужно именно вам. Протокол разработан для Facebook, но его также поддерживает ВКонтакте, Pinterest, Twitter, LinkedIn, Telegram, WhatsApp, Viber и др.

Чаще всего встречаются такие теги:

Примерно в 2 раза реже встречаются теги og:description (описание страницы) и og:locale (локализация сайта — язык).

Ссылки на соцсети

Анализ ссылок на соцсети показал, что самая популярная соцсеть — Facebook. На нее ссылается 77,3% страниц. На втором месте — Twitter (65,2%). Но надо понимать, что это западное исследование. Естественно, в России ситуация другая.

Интересно, что на Google+ до сих пор ссылается 12,7% страниц — несмотря на то, что эту соцсеть закрыли в апреле 2019 года. Вероятно, это просто инерция.

rel=»prev»/»next»

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

Теперь вместо атрибутов rel=»prev»/»next» Google рекомендует помещать контент на одну страницу, а не разбивать ее на несколько страниц.

В результате исследования выявлено, что атрибут rel=»prev» используется на 0,3% страниц, rel=»next» — на 3% страниц.

Подытожим: все еще есть над чем работать

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

Почему вебмастера редко прописывают alt для изображений? Почему заголовки h1 есть только на 60% страниц? Почему title и description заполняют далеко не все? Почему не спешат внедрять микроразметку JSON-LD? А ведь это базовое SEO…

Хочется сказать, что все это неважно — все-таки анализировались страницы из ТОП-20 Google. То есть Google считает их в общей массе авторитетными — даже без «альтов».

Но не забываем, что SEO — это комплекс факторов. Мы рассмотрели лишь малый технический аспект. Даже если взять только оптимизацию сайта, то там более 60 разных работ. А еще ссылки, упоминания, локализация, поведенческие факторы…

Так что от «подкрутки» базового технического SEO ваш сайт точно не пострадает. А если учесть, что на других площадках не все так хорошо, то рост более чем реален.

Источник

Супершпаргалка по верстке для новичков: все основные HTML-теги

Полное руководство для блогеров и начинающих верстальщиков. Разберем все самые необходимые HTML-теги и примеры их использования.

HTML-теги для форматирования текста

Заголовки

Заголовки подчеркивают особую важность заключенного в них текста. Вы можете использовать теги от

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

Выравнивание заголовков

Заголовки можно выравнивать на странице, но для этого потребуется щепотка CSS:

Абзацы

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

Выравнивание абзацев

Все работает точно так же, как для заголовков:

Разрыв строки

Вместо абзацев можно использовать разрыв строки. Это позволит перенести текст на новую строку в рамках одного параграфа.

Жирный текст

Установит жирное начертание:

Важный жирный текст

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

Курсивный текст

Устанавливает курсивное начертание:

Курсивный текст с особой важностью

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

Подчеркнутый текст

Перечеркнутый текст

Добавляет эффект перечеркивания:

Семейство шрифта

Можно изменить шрифт текста с помощью CSS. Используйте безопасные шрифты или подключите Google fonts.

Размер шрифта

Цвет шрифта

Установите для текста любой HEX-цвет по вашему выбору.

Выделенный текст

Выделите фрагмент текста с помощью CSS и фонового цвета:

Цитата

Полезно для выделения цитат и важных фрагментов текста.

HTML-теги для ссылок

Обычные текстовые ссылки

Гиперссылкой можно сделать слово или целый фрагмент текста. Замените текст http://www.yourlink.com на нужный вам адрес:

Открытие в новой вкладке

Используется для открытия гиперссылки в новой вкладке браузера, а не на текущей странице:

Ссылка на email-адрес

Открывает почтовую программу на компьютере пользователя для отправки письма по указанному адресу:

Ссылка на email с указанием темы письма

Полезно, если вы хотите установить для письма клиента конкретную тему. Вместо пробелов используйте %20 :

Ссылка-якорь

Позволяет при клике «перепрыгнуть» на определенное место на странице. Ссылка-якорь состоит из двух частей. Первая – непосредственно конечная точка прыжка. Например, это может быть начало поста. Значение атрибута name должно быть уникальным в рамках страницы:

Вторая – ссылка, клик по которой отправит пользователя в нужное место документа:

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

Фоновый цвет страницы

Смените фон для всей страницы с помощью следующего кода с любым HEX-значением цвета.

Повторяющееся фоновое изображение

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

Неповторяющееся фоновое изображение

Чтобы изображение отображалось на фоне всего один раз, используйте следующий код:

Неповторяющееся фоновое изображение сверху в центре

Установите фоновую картинку вверху страницы:

Вертикально повторяющееся фоновое изображение сверху в центре

Картинка отобразится наверху страницы и будет вертикально повторяться:

Не забудьте заменить URL-адрес изображения.

Списки

Нумерованный список

Создание упорядоченного списка элементов:

Маркированный список с буллитами

Буллиты заменяют собой цифры:

Маркированный список с другими маркерами

Маркированный список с пользовательскими маркерами

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

Специальные символы HTML

Большую таблицу HTML-символов вы можете найти здесь.

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

Источник

HTML-теги и атрибуты, о которых вы, возможно, не знали

Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.

address

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

audio

Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.

video

Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.

Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:

blockquote и cite

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

Тег code используется для определения части компьютерного кода:

Для форматирования блока кода code часто используется совместно с тегом pre :

datalist

Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.

Свойство options объекта Datalist возвращает коллекцию всех элементов списка.

Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.

details

По умолчанию details находится в закрытом состоянии.

Внутри details могут размещаться любые теги.

Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).

dialog

Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.

По умолчанию dialog находится в неактивном состоянии.

figure

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

Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.

meter

Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).

Этот тег не должен использоваться в качестве индикатора прогресса.

Так можно записать уровень заряда батареи вашего устройства в значение meter :

progress

Тег progress определяет процесс выполнения задачи.

Этот тег не должен использоваться для определения меры чего-либо.

Так можно реализовать десятисекундный таймер:

output

Тег output используется для представления результата вычислений.

picture

Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).

Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.

template

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

Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).

Тег time определяет конкретное время (или дату и время).

Атрибут datetime используется для представления времени в машиночитаемом формате.

noscript

Другие теги в форме шпаргалок

Семантическое «секционирование» страницы

Стилизация текста

Форма

Поля для ввода данных

Пример валидации адреса электронной почты и пароля:

Таблица

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

Послесловие

Наши виртуалки можно использовать для разработки веб-сайтов.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник

Основные html теги

Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.

Как в любом языке, да и в жизни здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.

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

HTML язык — это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.

Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».

Сначала определимся с тем, что такое тег. Тег — это ячейка самого языка html, из которого он в общем то и строится. По тегам браузеры понимают, как отобразить текст, куда вставить картинки. Теги — это и есть сами элементы разметки.

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

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

Источник