- Что такое семантический HTML5? Если вы немного знакомы с HTML, вы будете знать, что HTML-теги (в...
- На что это похоже?
- Примеры семантического HTML5
- Более сложные примеры
- Связанные в сторону
- Косвенно связанный в сторону
- Наша окончательная версия
- Полезные советы
- Вложенные элементы
- Чего не делать
- Следующие шаги?
- связь
- правдоподобие
- Коммуникация + Достоверность
- В заключение: напоминание о хорошей семантической разметке HTML5 для SEO
Что такое семантический HTML5?
Если вы немного знакомы с HTML, вы будете знать, что HTML-теги (в основном) используются для форматирования контента - эти теги говорят браузеру, как отображать контент на странице. Они не дают никаких указаний относительно того, какой тип контента они содержат или какую роль этот контент играет на странице.
Семантический HTML5 устраняет этот недостаток, определяя конкретные теги, чтобы четко указать, какую роль играет контент, содержащийся в этих тегах. Эта явная информация помогает роботам / сканерам, таким как Google и Bing, лучше понять, какой контент важен, какой является вспомогательным, для навигации и т. Д. Добавляя семантические теги HTML на свои страницы, вы предоставляете дополнительную информацию, которая помогает Google и Bing понять роли и относительную важность различных частей вашей страницы.
Примеры
теги div и span. Несемантический / универсальный.
Это примеры несемантических элементов HTML. Они служат только в качестве держателей, чтобы передать браузеру, как должен отображаться контент. Они не дают никакой информации о роли контента, который они содержат на странице.
Примеры семантических тегов.
Это семантические элементы. Они четко определяют роль контента, который они содержат.
Зачем мне это использовать?
Для зрячих пользователей обычно легко сразу определить различные части веб-страницы. Заголовки, меню и (мы надеемся) основное содержание сразу же становятся видимыми. Теперь представь, что ты слепой.
Боты (пауки) Google и Бинга серьезно страдают зрением, если не слепы. Для них визуальные подсказки феноменально трудно увидеть и понять.
Им нужна твоя помощь. Если вы можете успешно сообщить Google и Bing, какая часть страницы является верхним колонтитулом, какой нижний колонтитул и какой для навигации, они будут вам благодарны. Самое главное, сообщая им, какой контент является наиболее важным, вы даете им четкую инструкцию для определения приоритетов этого контента.
Вот наша страница.
Само по себе использование семантического HTML5 не изменит вашу производительность SEO (извините!). Как вы знаете, успешный SEO - это совокупность множества мелких деталей. Это одна из тех мелких деталей, которые улучшат понимание Google и Bing (и уверенность в их понимании) вашего контента и помогут вашим усилиям по SEO.
Заглядывая дальше, по мере развития SEO в ближайшие годы, явное и последовательное общение с этими машинами станет одним из двух краеугольных камней вашей стратегии SEO / AEO (см. Ниже).
На что это похоже?
Примеры семантических тегов HTML включают в себя <nav>, <footer> и <section>. Существует много других семантических тегов HTML5, которые можно использовать (например, <blockquote> и <em>), но в этой статье я рассматриваю только те семантические теги HTML, которые вам понадобятся для разделения содержимого страницы на основные части.
Следующие теги HTML5 можно использовать вместо тегов <div>, чтобы разбить содержимое вашей страницы на идентифицированные части, каждая из которых выполняет определенную роль. Как вы можете себе представить, машины типа Google и Bing любят это.
Семантические теги HTML5 мы будем использовать в этой статье.
Такое четкое разграничение и явное присвоение ролей каждой части контента делает страницу намного понятнее и ее легче правильно индексировать для Google и Bing.
NB. Поскольку все эти теги ведут себя точно так же, как теги <div>, они могут просто заменить существующие элементы <div> на странице, не влияя на макет. Во многих случаях реализовать семантический HTML5 может быть так же просто, как найти правильную пару <div> и </ div> и заменить их.
Примеры семантического HTML5
Супер простой семантический пример HTML5:
Здесь мы просто определили, какую роль играет каждая часть страницы. Когда вы начинаете применять HTML5, это безопасное место для начала - header, nav, main, footer.
Супер простой пример с наиболее важными элементами: заголовок, нижний колонтитул, навигация и основной.
Лучше иметь супер простую реализацию, которая является на 100% правильной, чем сложную реализацию, которая является неправильной.
Неточная реализация посылает противоречивые и сбивающие с толку сигналы, которые ухудшают, а не улучшают ситуацию.
Простая и правильная реализация - это уже большой шаг вперед в общении с Google и Bing. Не будь слишком амбициозным; поймите неправильно, и вы сможете создать больше проблем, чем решите!
Более сложные примеры
Используя разделы и статьи:
Здесь мы создали иерархию в нашем основном контенте. Существует всеобъемлющая статья, которая идентифицирует центральный контент в основном теге. Это дает обзор темы этой части страницы. В этой статье у нас есть несколько подтем, которые развивают основную тему, определяемую вложенными разделами.
Обратите внимание, что дизайн (оранжевые блоки) не используется для определения семантических областей страницы.
Обратите внимание, что дизайн (оранжевые блоки) не используется для определения семантических областей страницы. Выглядит немного запутанно, но хорошо показывает, что разметка HTML и семантика HTML5 играют разные роли.
В реальном мире семантическая разметка часто следует макету больше, чем этот пример. Общее правило: раздел является частью чего-то другого. Статья - это своя вещь.
Также обратите внимание, что здесь я добавил раздел навигации в нижний колонтитул. По логике, как и в заголовке, нижний колонтитул содержит элементы навигации.
Связанные в сторону
Здесь мы добавили две части непосредственно связанного контента к основной статье контента. Используя в стороне, мы указываем, что связанный контент (в стороне) является необязательным. Основной раздел контента может быть показан без сторон и все еще понятен.
Косвенно связанный в сторону
Примечание : боковая панель не обязательно должна быть боковой панелью рядом с основным контентом. Его также можно использовать для блоков ниже основного содержимого, содержащих заголовок, текст и ссылку на другую страницу
Здесь мы определили некоторый косвенно связанный контент со страницей вне основной статьи контента. Здесь мы указываем, что содержание в стороне не имеет прямого отношения к основной статье.
Этого достаточно для большинства потребностей.
Наша окончательная версия
Это очень хорошо!
Полезные советы
Раздел против статьи
Существует много дискуссий по этому поводу. Не существует фиксированного правила в отношении разделов и статей, и их реализация довольно гибкая. Они более или менее одинаковы и могут использоваться взаимозаменяемо большую часть времени. Просто будьте уверены, чтобы быть логичным и последовательным.
Личный совет: я обнаружил, что вложение разделов внутри статьи содержимого логично как для машины, так и для человека (HTML-код будет легче читать для разработчика).
Вложенные элементы
Элементы могут вкладывать другие элементы. Например, статья может иметь свои собственные <header>, <footer>, <h1> (как видно выше) и даже <nav> (якорные ссылки, хороший пример). Я не привел иллюстрацию этого «супер вложенности», и для этого есть причина: это блог SEO, и с точки зрения SEO, нет никакой реальной выгоды от продвижения логики семантического HTML5 до сих пор.
Как уже упоминалось выше, для целей SEO вы должны сконцентрироваться на создании надежной, простой структуры.
Чего не делать
Просто предупреждение - я видел много сайтов, использующих визуальный дизайн в качестве руководства для своей реализации HTML5. Как видно выше, это не то, для чего предназначен семантический HTML5.
Семантический HTML5 не для дизайна.
Этот (удивительно типичный) пример просто дублирует визуальный макет. Хуже, чем бессмысленно, это указывает на то, что страница содержит 4 разные темы, а не одну тему и 3 подтемы. Явное предоставление вводящей в заблуждение информации машинам отрицательно скажется на ее понимании.
Следующие шаги?
Подробнее об этом Семантический HTML5 для авторов контента - Essential Guide Post Джейсон Барнард Эпическая серия #SEOisAEO: семантический HTML5, IA и доступность - так много упущенных возможностей. Вебинар записан 02 октября 2018 года. На странице SEO контрольный список: блог для людей и поисковых систем Post Елена Терентьева Реализация семантического HTML5 на ваших страницах улучшит ваше общение с Google и Bing. Они оба хотят понять, о чем ваш сайт. Они оба хотят, чтобы вы четко общались на их языке, и оба хотят, чтобы вы их обучали. Сделай это.
связь
Связь с машинами (HTML5 играет важную роль) является одним из двух столпов долгосрочной стратегии SEO, которая преуспеет в мире, где нам нужно будет оптимизировать работу с автоответчиками. Есть много вещей, которые вы можете сделать, чтобы улучшить общение. Семантический HTML5 один. Схема структурированной разметки это другое. Вот статья об этом ,
правдоподобие
Вторым столпом является доверие. Есть также очень много вещей, которые вы можете сделать, чтобы улучшить свой авторитет.
Коммуникация + доверие = выигрышная стратегия.
Коммуникация + Достоверность
Все SEO (и AEO) сводятся к общению и доверию. Я буду продолжать регулярно писать здесь на SEMrush о методах улучшения вашего общения и вашего доверия к Google и Bing (кстати, Bing собирается сделать большое возвращение).
Пожалуйста, поделитесь своими мыслями об этой статье в разделе комментариев ниже, но также не стесняйтесь оставлять свои вопросы о коммуникации и авторитете в SEO; Ваши вопросы помогут определить приоритеты того, о чем я должен писать.
В заключение: напоминание о хорошей семантической разметке HTML5 для SEO
Структура, важность, роли и иерархия - это вещи, которые люди часто инстинктивно понимают из дизайна / макета. Правильное использование правильных семантических тегов HTML вместо тега <div> просто упрощает это понимание для машин.
На что это похоже?
Зачем мне это использовать?
На что это похоже?
Следующие шаги?
