Лента новостей

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

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

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

Инвестиции в недвижимость Европы: тенденции 2017 года
Для инвесторов: обзор ключевых рынков европейской недвижимости в 2017 году. Недвижимость в Германии Доля недвижимости Германии в ВВП страны сегодня составляет 9,8%. Недвижимость в Германии отличалась

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

«Недвижимость» / Госкорпорации отказано в эффективности
По результатам проверки Счетной палатой деятельности Фонда содействия реформированию жилищно-коммунального хозяйства ( Фонд ЖКХ), площадь аварийного жилья в стране выросла на 1,6 млн. квадратных метров

Лизинг недвижимости
Обычно компании берут аванс - 10-20 % со ставкой удорожания 6-8 %, иногда 10-12% в год на срок от 2 до 10 лет, предлагая различные варианты графиков лизинговых платежей. занимаются примерно десяток компаний

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

Коммерческие помещения | Жилье, недвижимость > Коммерческие помещения | Киев | SLANET
class="top_line"> id="topnav"> class="subcolumns" id="logonav"> id="nav demo" class="hlist"> id="topnav"> id="header_tab"> id="content"> class="c75l"> class="c25r"> class="subcolumns"> class="c75l">

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

Как использовать семантический 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. Ваши вопросы помогут мне определить темы, которые мне придется рассмотреть в первую очередь!

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

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