Практическая работа "Внедрение микроразметки в html-код" МДК 09.02 Оптимизация веб-приложений

Практическая работа «Внедрение микроразметки вhtml-код»

по дисциплине МДК 09.02 Оптимизация веб-приложений

специальность 09.02.07 «Информационные системы и программирование»

Цель работы: научиться добавлять в свой html-код микроразметку

Любая разметка Schema.org проводится в два этапа:

1 этап

Описание определенного типа оборачивают в контейнер, в котором указывается схема разметки:

<div itemscope itemtype="http://schema.org/Organization" >

...

</div>

itemscope — это глобальный логический атрибут, определяющий область действия микроданных, заданных атрибутом itemtype. 

itemtype - указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных.

2 этап

Размечают отдельные свойства сущности с указанием на конкретное свойство схемы:

<span itemprop="streetAddress">Нижегородская,6</span>

Пример:
Документ без разметки

<div>

<span>Uplab</span>

Контакты:

<div>

Адрес: Нижегородская, 6 стр.2,

428018,

Чебоксары,

</div>

Телефон: +7 499 955–50–30

Электронная почта: info@uplab.ru

</div>

Документ с разметкой Schema.org

<divitemscopeitemtype="http://schema.org/Organization">

<spanitemprop="name">Uplab</span>

Контакты:

<divitemprop="address"itemscopeitemtype="http://schema.org/PostalAddress">

Адрес:

<spanitemprop="streetAddress">Адрес:Нижегородская, 6 стр.2</span>

<spanitemprop="postalCode"> 428018</span>

<spanitemprop="addressLocality">Чебоксары</span>,

</div>

Телефон:<spanitemprop="telephone">+7 499 955–50–30 </span>,

Электронная почта: <spanitemprop="email">info@uplab.ru</span>

</div>

Вариант 1

Задание 1.Добавить микроразметку в уже существующую разметку, представленную ниже, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/goods-prices.html

После добавления микроразметки, необходмо проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

<section>

<h1>Беспроводныенаушники Xiaomi Redmi Buds Essential</h1>

<div>

Хороший звук, удобство ношения, легкость подключения

</div>

<img src="image.jpg" alt=" Беспроводные наушники XiaomiRedmiBudsEssential">

<article>

Цена: 1058 RUB

</article>

</section>

Задание 2. Создатьhtml верстку секции «о компании»:

• Название компании: ООО «Твой кондитер»

• URL сайта: www.konditer.ru

• Адрес:Россия, г. Кондитерский, ул. Сахарная, дом 7

• Телефон: 8 (800) 500-50-50

• Email:konditer@mail.ru

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/address-organization.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Задание 3. Создатьhtml верстку секции данные о программеPhotoshop

• Описание:Многофункциональный растровый графический редактор, разрабатываемый и распространяемый компанией Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты.

• Размер:3,1 Гбайт

• Стоимость: 2000 RUB/месяц

• Операционная система:Windows 10, 11; macOS Ventura 13.5.1

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/software.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Вариант 2

Задание 1.Добавить микроразметку в уже существующую разметку, представленную ниже, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/goods-prices.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

<section>

<h1>Смартфон Apple iPhone 15 Pro Max 1 ТБ</h1>

<div>

Phone 15 Pro Max с большим 6,7-дюймовым экраном весит на 8% меньше, чем прошлогодний iPhone 14 Pro Max.

</div>

<img src="image.jpg" alt="Смартфон Apple iPhone 15 Pro Max 1 ТБ">

<article>

Ценаот 195 970 RUB

</article>

</section>

Задание 2. Создатьhtml верстку секции «о компании»:

• Название компании: ООО «Строймастер»

• URL сайта: www.stroy-master.ru

• Адрес:Россия, г. Строительный, ул. Бетонная, дом 11

• Телефон: 8 (900) 700-70-70

• Email:story-master@mail.ru

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/address-organization.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Задание 3. Создатьhtml верстку секции рецепта овсяной каши на молоке

• Название:Овсяная каша на молоке

• Ингредиенты:

  • Хлопья овсяные - 1 стакан

  • Молоко - 3 стакана

  • Масло сливочное - 1 ст. ложка

• Инструкция:

  • Вскипятить молоко

  • В кипящее молоко всыпать овсяные хлопья

  • Помешивая, варить кашу на небольшом огне до загустения (5-10 минут). Затем добавить соль и масло.

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/recipe.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/