School PHP

Урок 16: Микроразметка, словари, микроданные, микроформат и RDFa

План:

  • Микроразметка и словари
  • Синтаксис микроразметки
  • Словари для микроразметок
  • Практика применения микроразметок
Доступ к видео-уроку, а так же к домашним заданиям и дополнительному материалу откроется после оплаты за урок или курс.

Описание:

Микроразметка - очень простая вещь для понимания. Представьте, у Вас есть страница продажи игрушки. В ней выставлена миниатюрная фигурка Бетмана, а так же видео-презентация о возможностях игрушки. А теперь представьте, что Вы - поисковая машина и зайдя на страницу Вы увидели "Бэтман", "купить", "видео". Первое впечатление, что Вы сейчас находитесь на странице фильма, который можно приобрести. Конечно можно добавить дополнительные заголовки выше и ниже на подобии "игрушки, купить", что благоприятно скажется на понимание сайта. С другой стороны в описании игрушки Вы можете написать, что игрушка сделана по мотивам фильма о Бетмане. И снова же, путаница, то ли связать Бетмана с текстом "игрушки", то ли с "фильм". И вот для решения таких проблем придумана была микроразметка, то есть определённый код, который уточняет тематику данного контента. Можно указать тему всей страницы, а можно только лишь блока.

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

Микроразметка делится на словарь и синтаксис:


словарь - представляет из себя объект, содержащий ключ=значение. Представляем, что у нас есть блок. Мы говорим о том, что этот блок относится к группе "человек", значит пишем type=Person, дальше внутри этого блока выделяем возраст дивом и пишем: age=18, то есть указываем, что ему 18 лет. Не обращая внимания на синтаксис и разбирая только словарь можно схематически обозначить:
<тип=товар>
    <заголовок=Бетмен>
    <описание=игрушка>
    <цена=100$>
</>

Глядя на эту структуру поисковик легкой поймет, что мы продаём товар с названием Бетмен.

Синтаксис - способ оформления словаря. В виду того, что синтаксисов много, то часть из них прописывают слова в атрибутах к тегам, а часть в JavaScript объекте. Вот простой пример:
<div itemscope itemtype="http://schema.org/Product">
    <h1 itemprop="name">Игрушка Batman</h1>
    <img src="1.jpg" itemprop="image">
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price" content="1000.00">1,000.00</span>
        <span itemprop="priceCurrency" content="USD">$</span>
    </div>
</div>

В данном примере хотелось бы акцентировать внимание на то, что внутри объекта Product создан объект "Предложение", которое относится к продукту. Мы указали картинку, которая является частью данной игрушки, по аналогии можно указать и видео и описание, и многое другое.
Войти | Регистрация