SEO / Семантическая верстка

Код, облегчающий жизнь поисковикам и инвалидам

Виды семантической верстки

  • Атрибут alt + нормальные названия у картинок
  • Нормальные ссылки, а не "тут", "вот"
  • Семантические теги - обеспечивают доступность
  • Schema.org - стандарт для описания сущностей в виде html-атрибутов
  • JSON-LD - описание стандарта Schema.org в виде json
  • Микроформаты (hCard, hRecipe) - альтернатива Schema.org
  • OpenGraph - метаданные, отображаемые при публикации в соц-сетях / почте

Schema.org

  • Добавляя itemscope, мы тем самым обозначаем, что HTML-код, содержащийся в блоке <div>...</div>, описывает некоторую сущность.
  • Пока мы только объявили, что речь идет о какой-то сущности, но не сообщили, что это за сущность. Чтобы указать тип сущности, добавим атрибут itemtype сразу после itemscope.
  • Чтобы отметить свойства сущности, используется атрибут itemprop. Например, чтобы указать режиссера фильма, добавим атрибут itemprop="director" к HTML-тегу, содержащему режиссера.
  • Иногда значение свойства может само являться сущностью, с собственным набором свойств. Чтобы указать, что значение свойства представляет собой сущность, необходимо добавить атрибут itemscope сразу после соответствующего itemprop.

Ссылочки