Как использовать семантический HTML для структурирования вашей веб-страницы

  1. примеров
  2. Почему я должен использовать семантический HTML5?
  3. Как выглядит структурный семантический HTML5?
  4. Примеры семантического HTML5
  5. Более сложные примеры
  6. Помимо связанных с основным содержанием
  7. Помимо не связанных с основным содержанием
  8. Финальная версия
  9. Практический совет
  10. Вложенные элементы
  11. Что не делать
  12. Что теперь делать?
  13. связь
  14. правдоподобие
  15. заключение

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

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

примеров

Несемантические / общие теги:

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

Вот некоторые семантические теги:

Вот некоторые семантические теги:

Эти элементы четко определяют роль контента, который они охватывают.

Почему я должен использовать семантический HTML5?

Для пользователей обычно легко сразу определить различные области веб-страницы. Заголовки, меню и (мы надеемся) основное содержание сразу становятся очевидными и очевидными. Но боты поисковых систем («сканеры») сильно страдают зрением. Для них визуальные подсказки практически невозможно понять. Им нужна твоя помощь.

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

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

Использование семантического HTML5 как такового не повлияет на производительность SEO (извините!). Как вы знаете, успех вашей стратегии SEO зависит от огромного количества мелких деталей. HTML5 и одна из тех маленьких деталей. Это может помочь Google и Bing лучше понять ваш контент и внести свой вклад в ваши усилия по SEO.

Расширяя наше видение, мы можем сказать, что SEO будет развиваться в течение следующих нескольких лет. Явная и последовательная связь с этими машинами станет важной для вашей стратегии SEO / AEO (Answer Engine Optimization).

Как выглядит структурный семантический HTML5?

Вот несколько примеров семантических тегов HTML: <nav> <footer> <section>.

Существует много других семантических тегов HTML5, которые можно использовать (например, <blockquote> и <em>). В этой статье я остановлюсь на семантических тегах HTML5, которые вам понадобятся для описания структуры вашей страницы (структурные теги HTML5):

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

Следующие теги HTML5 можно использовать вместо тегов <div> для разделения содержимого вашей страницы на различные области с определенными ролями. Как вы можете себе представить, такие машины, как Google и Bing, любят это.

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

NB. Поскольку эти теги ведут себя точно так же, как теги <div>, они могут просто заменить существующий тег <div>, не влияя на (визуальный) макет. Зачастую настройка семантического HTML5 может быть такой простой, как поиск правильной пары <div> и </ div> и ее замена.

Примеры семантического HTML5

Вот очень простой пример структурного семантического HTML5 с наиболее важными элементами (header, Footer, Nav и Main):

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

Лучше иметь супер простую и 100% правильную реализацию, чем сложную и неправильную реализацию.

Простая и правильная реализация - это уже большой шаг вперед в общении с Google и Bing. Не будь слишком амбициозным. Если вы не сделаете все правильно, вы можете сделать интерпретацию своих страниц более сложной для машин!

Более сложные примеры

Вот более сложный пример с разделами и статьями:

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

Визуальный макет (оранжевые блоки) не используется для определения семантических областей страницы

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

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

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

Помимо связанных с основным содержанием

Помимо связанных с основным содержанием

Мы добавили два элемента контента, непосредственно связанных с основной статьей. Используя <aside>, мы указываем, что связанный контент является необязательным. Содержимое родительской статьи можно читать и интерпретировать, не отображая <в сторону>.

Помимо не связанных с основным содержанием

Помимо не связанных с основным содержанием

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

Этого достаточно для большинства потребностей.

Примечание. <Aside> не обязательно является столбцом рядом с основным содержимым. Это может также использоваться для областей ниже или выше основного содержания.

Финальная версия

Финальная версия

Практический совет

Раздел или статья?

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

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

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

Вложенные элементы

Каждая часть может содержать другие элементы. Например, статья может иметь свои собственные <header>, <footer>, <h1> и даже <nav> (хорошим примером являются якоря). Я не привел иллюстрацию этой продвинутой вложенности HTML5, потому что я сосредоточился на SEO и, с точки зрения SEO, нет никакой реальной выгоды продвигать логику семантического HTML5 до такой степени ,

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

Что не делать

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

Этот (на удивление распространенный) пример дублирует визуальный HTML. Хуже, чем бесполезный, это говорит поисковым системам, что страница содержит 4 разные темы, а не только одну тему и 3 подтемы. Предоставление вводящей в заблуждение информации машинам негативно повлияет на интерпретацию вашей страницы.

Что теперь делать?

Реализация структурной семантической разметки HTML5 на ваших страницах улучшит ваше общение с Google и Bing. Они оба хотят понять ваш контент. Они хотят, чтобы вы сообщали им ясно на их языке и информировали их. Сделай это!

связь

Связь с машинами является одним из двух столпов долгосрочной стратегии SEO, которая позволит вам преуспеть в мире «двигателей реагирования». Есть много вещей, которые вы можете сделать, чтобы улучшить общение. Семантический HTML5 является одним из них. Структурированная разметка Schema.org - это другое. Discover моя предыдущая статья чтобы узнать больше.

правдоподобие

Вторым столпом долгосрочной стратегии SEO является онлайн доверие. Есть также много вещей, которые вы можете сделать, чтобы улучшить свой авторитет.

Коммуникация + доверие = выигрышная стратегия

заключение

Роли, важность и иерархия содержимого веб-страницы - это то, что люди интуитивно понимают из макета. Правильно используя семантические теги HTML5 вместо <div>, вы упрощаете обработку ваших страниц на машинах.

Я буду продолжать регулярно писать в блоге SEMrush и делиться своими методами улучшения SEO в Google и Bing.

Не стесняйтесь делиться своими мыслями в комментариях ниже, и не стесняйтесь оставлять свои вопросы о коммуникации и авторитете в SEO. Ваши вопросы помогут мне определить темы, которые мне придется рассмотреть в первую очередь!

Ваши вопросы помогут мне определить темы, которые мне придется рассмотреть в первую очередь

Похожие

Не шутка!
Что это было ? Это деньги или единица измерения? Что не собирается отпускать того, кто тебя не отпускает? На самом деле, нет слова для нашего слова. Стоит в словарях и в словаре иностранных слов; но он используется только в резкой форме: «не пускай одну хоту »; чаще с рядом тренеров: «не шутка ». Вместо его доклада мы находим такие описания: «Он настаивает на своей позиции, что он не желает идти ни на какие уступки»; или, в
Почему SEO
... не ван Элеут, мне 24 года, я родился и вырос в Бреде. Два месяца назад я обратился к SEO Online Marketing с вопросом, могу ли я приехать и устроиться на работу с идеей стать специалистом по профессии онлайн-маркетинга. После указания, что я прошел необходимые курсы, мы согласились, что это будет крутой вызов. Таким образом, мне была предоставлена ​​возможность получить опыт работы здесь в будущем в онлайн-маркетинге! Я начал здесь с раздела SEO или поисковой оптимизации. Причина, по
15 важных факторов успеха Google SEO
... что не существует единого «правильного» способа разработки и организации страницы, несколько руководящих принципов в значительной степени помогают донести ваше сообщение и оценить его. Очистить навигацию Видное основное содержание - обычно выше сгиба Полезный дополнительный контент Чистый UX и дизайн Неагрессивная реклама Разборчивый текст (не менее 16 пикселей)
Как использовать настройки темы Lapax?
Для пользователей интернет-магазина они должны быть знакомы с шаблоном / темой WordPress Lapax, созданным OkeTheme.com, дружественным и удобным видом, который делает эту тему очень подходящей для тех из вас, кто хочет создать интернет-магазин. Как поясняется в описании на веб-сайте OkeTheme, « Lapax Theme» представляет собой шаблон WordPress, основанный на индонезийских интернет-магазинах, который оснащен множеством лучших функций, которые, безусловно, помогут вам в дальнейшем управлять
Как использовать SEO от Yoast
SEO от Yoast, пожалуй, лучший инструмент для простой и оптимизации новых страниц и постов. Короче говоря, Yoast - это помощник, который говорит вам, что делать / изменять в заголовке, заголовке, содержимом, изображении и т. Д., Чтобы обеспечить оптимальную возможность поиска страницы в Интернете. Так как начать? Если вы еще не установили Yaost, мы можем начать там: Перейдите в Расширения> добавить новый> поиск "seo by yoast"> установить> активы.
Купить Apple iPod Touch 2015 - Должен или не должен?
Apple только что «установила» iPod Touch 2015, имеет то же аппаратное обеспечение, что и iPhone 6. Этот новый iPod быстрее и имеет лучшую камеру. Мы часто называем iPod «карманными iPad», и это до сих пор верно. У него такое же mp3-приложение, такой же способ доступа к Apple App Store, и оно дает вам возможность
Примеры SEM | Электронный маркетинг и связь
... незаменимым инструментом, который позволяет нам достичь нашей целевой аудитории с доступная стоимость. Это делается очень простым способом с помощью платформы AddWords, которая учитывает потребности пользователей Google, ищущих ряд терминов, продуктов или услуг, которые в них нуждаются. В основном это делается с клиентом, который предлагает свои услуги и те же продукты, так что затем тот пользователь, который просматривает Google, нажимает на сервис, предлагаемый клиентом, и
Лучшие SEO агентства для позиционирования себя
... чтобы люди знали, что вы существуете, очень важно появляться в Интернете. Если потенциальный клиент ищет вашу компанию, а она не появляется в первых результатах поиска Google, вам будет очень сложно получить доступ к вашим продуктам или услугам. Поэтому важно обратить пристальное внимание на ваши стратегии позиционирования и работать с лучшими агентствами SEO, чтобы ваши потенциальные клиенты могли найти вас. Если есть важная причина для вас
HTML объяснил просто и понятно
Что такое HTML? По определению, HTML - это согласованный текстовый язык разметки. Он состоит из простых элементов разметки, так называемых «тегов», а также пустых элементов, таких как <br>. HTML расшифровывается как «Язык разметки гипертекста». Это позволяет браузерам интерпретировать и отображать, а также создавать ссылки на веб-сайты. Кто изобрел HTML? HTML был
Что такое Колибри Google, а что нет?
... семантический поиск и понимание запроса пользователя является частью уравнения, но люди в индустрии SEO пытаются понять, какой тип ключевых слов люди ищут, а я просто не понимаю. Если вы думаете, что Колибри о ключевых словах, вы упускаете суть. Этот новый алгоритм поиска стремится понять контекст поиска независимо от того, какие ключевые слова используются. Будь то просто название спортивной команды или вопрос: «Сколько времени занимает нога аиста?», Алгоритм Hummingbird даст
Как написать скрытый семантический контент SEO (LSI)
Если вы все еще думаете, что SEO это все о ключевых словах и плотности, то это может быть причиной, почему вы все еще не # 1 в результатах поиска Google , Хотя поисковые системы сегодня, безусловно, примут во внимание ключевые слова, они намного умнее, чем сегодня.

Комментарии

Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений?
Что вы думаете о том, как узнать, как установить, как настроить и как использовать Yoast SEO для оптимизации ваших сообщений? Обязательно прокомментируйте ниже и ознакомьтесь с содержанием, которое мы подготовили для вас! Нужно оптимизировать ваш сайт для SEO? Познакомьтесь с Oblige - агентство Создание сайта и Цифровой маркетинг , Другие
Что же теперь делать (помимо того, что вы наслаждаетесь качеством владельца веб-сайта, указанного в поле для ответов)?
Что же теперь делать (помимо того, что вы наслаждаетесь качеством владельца веб-сайта, указанного в поле для ответов)? Отслеживайте движение и наслаждайтесь поездкой. Мы все еще анализируем ситуацию с этим сайтом, и, поскольку мы собираем достаточно ценной информации, мы сообщим вам о том, что произошло с истекшим сроком действия нашего упомянутого сайта для ответов в окне «Ящик для ответов».
Если вы достигаете целей KPI и / или ROI, почему бы не инвестировать немного больше средств в бюджет и не использовать как можно большую часть этой доли рынка?
Если вы достигаете целей KPI и / или ROI, почему бы не инвестировать немного больше средств в бюджет и не использовать как можно большую часть этой доли рынка? Какие инструменты доступны? Информация об аукционе через кампанию AdWords В AdWords вы можете просмотреть информацию об аукционе, чтобы определить, какие
Почему же тогда Google допустимо делать то, что они говорят всем остальным, не делать?
Почему же тогда Google допустимо делать то, что они говорят всем остальным, не делать? Посмотрите на приведенный ниже пример. Я набрал «поисковый маркетинг» в строке поиска, и вот результаты, которые мне дали:
Если Google видит, что вы часто обсуждаете определенное местоположение, почему они не наградят вас более высоким рейтингом, чем конкуренты, которые этого не делают?
Если Google видит, что вы часто обсуждаете определенное местоположение, почему они не наградят вас более высоким рейтингом, чем конкуренты, которые этого не делают? Действие: создайте список публикаций в блоге, которые могут заинтересовать ваших локальных клиентов. Напишите и опубликуйте контент на своем веб-сайте и поделитесь им с местными авторитетами, чтобы донести свою мысль. Что ожидать Теперь, когда вы создали локальную SEO-стратегию для
Я должен сказать, что для американцев было немного смешно иметь в плей-офф двух игроков, чьи имена произносится как «Ты» и «Итак», что приводит к таким обменам, как «Где ты, Роджер?
Я должен сказать, что для американцев было немного смешно иметь в плей-офф двух игроков, чьи имена произносится как «Ты» и «Итак», что приводит к таким обменам, как «Где ты, Роджер?» Первым корейским игроком, который попытался отличиться от стаи, думая о том, как назвать себя, была Берди Ким, которая выиграла Открытый Женский чемпионат США 2006 года. К сожалению, Берди не дал нам никакой причины с ее игрой, чтобы помнить ее - она ​​даже не сделала сокращение с 2009 года.
Более 80% клиентов никогда не переходят на страницу 2 поиска, поэтому как вы можете убедиться, что клиенты довольны и продолжают совершать покупки на Amazon?
Более 80% клиентов никогда не переходят на страницу 2 поиска, поэтому как вы можете убедиться, что клиенты довольны и продолжают совершать покупки на Amazon? Предоставляя соответствующие продукты, которые имеют высокую возможность конвертации в покупки. Более простая интерпретация: показать клиентам продукты, которые они хотят купить. Это зависит от того, какие ключевые слова ищут клиенты, коэффициенты конверсии, сопутствующие товары, недавняя история продаж, цены, акции и многое другое.
Тайна в том, что Торокай может сделать с великими делами, и также интересно, что если он был таким гением, то почему Будахази оставил свои вещи такими неуклюжими, что мог пойти против него?
Тайна в том, что Торокай может сделать с великими делами, и также интересно, что если он был таким гением, то почему Будахази оставил свои вещи такими неуклюжими, что мог пойти против него? И как он попал на мост, если его там не было? http://mandiner.blog.hu/2010/09/02/az_ember_aki_ott_se_volt_2?utm_source=bloghu_megosztas&utm_medium=facebook_share&utm_campaign=blhshare
5. «Почему я не могу просто использовать div, как раньше?
5. «Почему я не могу просто использовать div, как раньше?» «Какой смысл использовать эти теги, когда они делают то же самое, что и div?». Вот вопросы, на которые я собираюсь ответить для вас. Я также постараюсь помочь вам понять правильное использование этих новых элементов секционирования. Начнем с перечисления новых элементов секционирования: <Заголовок> <Нав> <Раздел> <Статья> <В сторону>
Ну, так как же то, что (я) никогда не случается, что я делаю?
Ну, так как же то, что (я) никогда не случается, что я делаю? Сменить работу? Иногда я на самом деле делал бы это, да, но в целом, если я не соберусь с головой перед тем, как быть раздавленным под ногами Голдрейка, я все еще могу быть достаточно блестящим, чтобы начать делать хорошую проверку SEO текущей ситуации, чтобы понять не только выполнимость вещи, но также и уровень настройки работы, чтобы при необходимости преуспеть, чтобы исправить предыдущий
Могут ли эти журналисты представить, что их читатели, слушатели или зрители настолько глупы, что не понимают, что значит открывать брак с однополыми парами?
Могут ли эти журналисты представить, что их читатели, слушатели или зрители настолько глупы, что не понимают, что значит открывать брак с однополыми парами? На самом деле ответ может быть о печальной банальности, которая показывает влияние технологий на политические дебаты. Это только одна интерпретация среди других, но мы не находим более удовлетворительного объяснения вездесущности выражения «однополые браки» в СМИ: Учитывая тот вес, который взяли на себя Google и

Как выглядит структурный семантический HTML5?
Почему я должен использовать семантический HTML5?
Как выглядит структурный семантический HTML5?
Что теперь делать?
Что это было ?
Это деньги или единица измерения?
Что не собирается отпускать того, кто тебя не отпускает?
Так как начать?
Купить Apple iPod Touch 2015 - Должен или не должен?
Кто изобрел HTML?