Як форматувати розширені дані про товар

За допомогою атрибута розширених даних про товар [rich_product_content] ви можете створювати докладніші описи товарів або послуг із використанням тексту та медіафайлів. Для розширених даних можна використовувати різні кодування, зокрема JSON-LD та RDFa, а також мікродані.

Щоб перевірити розширені дані та виявити можливі помилки, радимо скористатись інструментом тестування структурованих даних Google. Роботу цього інструмента можна протестувати на наведених у цій статті прикладах.

У цій статті описано структури для різних варіантів розширених даних.

Примітка. Manufacturer Center API тепер підтримує атрибут розширених даних про товар [rich_product_content]. Дізнайтесь, як почати роботу з Manufacturer Center API.

Як це працює

Розширені дані про товар

Розширені дані про товар складаються з послідовності блоків, кожен із яких – це перелік особливостей або медіагалерея. Блоки відображаються вертикально в одному стовпці. Розширені дані про товар указуються за допомогою елемента типу Showcase.

Тип Showcase є розширенням для типу CollectionPage
Властивість	Очікуваний тип	Опис
showcaseBlock	ShowcaseFeatureSet або MediaGallery	Блок розширених даних про товар. Це має бути перелік особливостей або медіагалерея.

Перелік особливостей

Перелік особливостей складається із заголовка (необов’язково) і послідовності особливостей. Особливості можуть відображатися в одному або кількох стовпцях.

Тип ShowcaseFeatureSet є розширенням для типу ItemList
Властивість	Очікуваний тип	Опис
layoutHint	Text	Підказка про кількість стовпців, необхідних для відображення (необов’язково). Особливості спершу відображаються в рядках, а потім – у стовпцях. Підтримувані значення: > LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4> Указане значення застосовується, наскільки це можливо. На невеликих екранах може показуватися менше стовпців, ніж указано.
headline	Text	Заголовок з описом переліку особливостей (необов’язково).
itemListElement	ShowcaseFeature	Особливість із переліку. Особливості спершу відображаються в рядках, а потім – у стовпцях.

Особливість

Особливість складається із заголовка, опису й зображення (необов’язково).

Тип ShowcaseFeature є розширенням для типу ListItem
Властивість	Очікуваний тип	Опис
layoutHint	Text	Коректив розміщення зображення відносно заголовка й опису (необов’язково). Підтримувані значення: LayoutMediaLeft LayoutMediaRight LayoutMediaAbove LayoutMediaBelow Указане значення застосовується, наскільки це можливо. На невеликих екранах зображення може відображатись в іншому місці.
headline	Text	Заголовок для особливості.
description	Text	Опис особливості.
image	URL або ImageObject	Зображення особливості (необов’язково).

Медіагалерея

Медіагалерея складається із заголовка (необов’язково) і послідовності зображень. Зображення показуються в одному або кількох стовпцях.

Тип MediaGallery є розширенням для типу CollectionPage
Властивість	Очікуваний тип	Опис
layoutHint	Text	Підказка про кількість стовпців, необхідних для відображення (необов’язково). Зображення спершу показуються в рядках, а потім – у стовпцях. Підтримувані значення: LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4 Указане значення застосовується, наскільки це можливо. На невеликих екранах може показуватися менше стовпців, ніж указано.
headline	Text	Заголовок, який відображатиметься вгорі галереї (необов’язково).
image	URL або ImageObject	Зображення, яке відображатиметься в галереї.

Примітка щодо просторів імен

Типи Showcase, ShowcaseFeatureSet, ShowcaseFeature, MediaGallery, а також властивості showcaseBlock і layoutHint — це розширення схеми, визначені на сторінці http://schema.googleapis.com/. Усі інші типи й властивості можна знайти на сторінці http://schema.org/.

Приклади

Формат порожнього блока розширених даних

Найпростішим є формат порожнього блока. Нижче наведено зразок формату з найменшою кількістю даних.

Порожній блок розширених даних

JSON-LD

>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase" }

RDFa

<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/"> <div typeof="g:Showcase"> </div> </div>

Мікродані

<div itemscope itemtype="http://schema.googleapis.com/Showcase"> </div>

Вітрина одної особливості, яка містить заголовок і опис, але не має зображення

Нижче наведено зразок блока розширених даних, який включає одну особливість без зображення.

	Вітрина одної особливості, що містить: заголовок; опис.
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "s:headline": "Новий смартфон Google Pixel 3", "s:description": "Робіть бездоганні знімки, виконуйте завдання за допомогою Google Асистента й користуйтеся пристроєм, не турбуючись про рівень заряду." } ] } ] }
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="headline" content="Новий смартфон Google Pixel 3"></div> <div property="description" content="Робіть бездоганні знімки, виконуйте завдання за допомогою Google Асистента й користуйтеся пристроєм, не турбуючись про рівень заряду."></div> </div> </div> </div>
Мікродані
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.org/headline" content="Новий смартфон Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Робіть бездоганні знімки, виконуйте завдання за допомогою Google Асистента й користуйтеся пристроєм, не турбуючись про рівень заряду."></div> </div> </div> </div>

Вітрина одної особливості, яка містить заголовок, опис і зображення

До вітрини з особливістю можна додати зображення.

	Вітрина одної особливості, що містить: заголовок; опис; зображення.
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "s:headline": "Google Об’єктив", "s:description": "Знаходьте інформацію про все навколо за допомогою Google Об’єктива", "s:image": "http://example.com/pixel3-google-lens.png" } ] } ] }
RDFa
><div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="headline" content="Google Об’єктив"></div> <div property="description" content="Знаходьте інформацію про все навколо за допомогою Google Об’єктива"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
Мікродані
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.org/headline" content="Google Об’єктив"></div> <div itemprop="http://schema.org/description" content="Знаходьте інформацію про все навколо за допомогою Google Об’єктива"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

Вітрина одної оособливості, яка містить заголовок, опис, зображення та корективи макета

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

	Вітрина одної особливості, що містить: заголовок; опис; зображення; макет (зображення ліворуч від іншого вмісту).
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Google Об’єктив", "s:description": "Шукайте інформацію про цікаві вам товари, перекладайте тексти, визначайте пам’ятки, рослини та тварин. Завдяки Google Об’єктиву все це можна робити в реальному часі — потрібна лише ваша камера.", "s:image": "http://example.com/pixel3-google-lens.png" } ] } ] }
RDFa
><div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint " content="LayoutMediaLeft"></div> <div property="headline" content="Google Об’єктив"></div> <div property="description" content="Шукайте інформацію про цікаві вам товари, перекладайте тексти, визначайте пам’ятки, рослини та тварин. Завдяки Google Об’єктиву все це можна робити в реальному часі — потрібна лише ваша камера."></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
Мікродані
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div> <div itemprop="http://schema.org/headline" content="Google Об’єктив"></div> <div itemprop="http://schema.org/description" content="Шукайте інформацію про цікаві вам товари, перекладайте тексти, визначайте пам’ятки, рослини та тварин. Завдяки Google Об’єктиву все це можна робити в реальному часі — потрібна лише ваша камера."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

Вітрина з переліком особливостей і корективами макета

Корективи допомагають створювати привабливі макети.

	Одна вітрина з переліком особливостей, що містить: 4 особливості; блоки, розміщені зигзагом.
JSON-LD
>{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns1", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Google Об’єктив", "s:description": "Шукайте інформацію про цікаві вам товари, перекладайте тексти, визначайте пам’ятки, рослини та тварин. Завдяки Google Об’єктиву все це можна робити в реальному часі — потрібна лише ваша камера.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Групові селфі", "s:description": "З подвійною фронтальною камерою Pixel 3 можна зробити груповий знімок без палки для селфі або сторонньої допомоги. Налаштуйте кут зйомки, щоб захопити в кадр усю компанію.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Цифровий добробут", "s:description": "Відволікайтеся від телефона, щоб проводити більше часу з рідними та друзями. Налаштуйте таймери додатків і вимкніть візуальні сповіщення. Увімкніть режим "Відпочинок", щоб затемнити екран і приготуватися до сну.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Google Асистент", "s:description": "Плануєте подорож? Попросіть Google Асистента знайти цікаві місця, підібрати рейси й відстежувати ціни на них або показати посадковий талон. Після прибуття Google Асистент знайде для вас ресторани, місцеві події та розваги поблизу готелю.", "s:image": "http://example.com/pixel3-google-assistant.png" } ] } ] }
RDFa
><div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaLeft"></div> <div property="headline" content="Google Об’єктив"></div> <div property="description" content="Шукайте інформацію про цікаві вам товари, перекладайте тексти, визначайте пам’ятки, рослини та тварин. Завдяки Google Об’єктиву все це можна робити в реальному часі — потрібна лише ваша камера."></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaRight"></div> <div property="headline" content="Групові селфі"></div> <div property="description" content="З подвійною фронтальною камерою Pixel 3 можна зробити груповий знімок без палки для селфі або сторонньої допомоги. Налаштуйте кут зйомки, щоб захопити в кадр усю компанію."></div> <div property="image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaLeft"></div> <div property="headline" content="Цифровий добробут"></div> <div property="description" content="Відволікайтеся від телефона, щоб проводити більше часу з рідними та друзями. Налаштуйте таймери додатків і вимкніть візуальні сповіщення. Увімкніть режим "Відпочинок", щоб затемнити екран і приготуватися до сну."></div> <div property="image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaRight"></div> <div property="headline" content="Google Асистент"></div> <div property="description" content="Плануєте подорож? Попросіть Google Асистента знайти цікаві місця, підібрати рейси й відстежувати ціни на них або показати посадковий талон. Після прибуття Google Асистент знайде для вас ресторани, місцеві події та розваги поблизу готелю."></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>
Мікродані
<div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div> <div itemprop="http://schema.org/headline" content="Google Об’єктив"></div> <div itemprop="http://schema.org/description" content="Шукайте інформацію про цікаві вам товари, перекладайте тексти, визначайте пам’ятки, рослини та тварин. Завдяки Google Об’єктиву все це можна робити в реальному часі — потрібна лише ваша камера."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaRight"></div> <div itemprop="http://schema.org/headline" content="Групові селфі"></div> <div itemprop="http://schema.org/description" content="З подвійною фронтальною камерою Pixel 3 можна зробити груповий знімок без палки для селфі або сторонньої допомоги. Налаштуйте кут зйомки, щоб захопити в кадр усю компанію."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaLeft"></div> <div itemprop="http://schema.org/headline" content="Цифровий добробут"></div> <div itemprop="http://schema.org/description" content="Відволікайтеся від телефона, щоб проводити більше часу з рідними та друзями. Налаштуйте таймери додатків і вимкніть візуальні сповіщення. Увімкніть режим "Відпочинок", щоб затемнити екран і приготуватися до сну."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaRight"></div> <div itemprop="http://schema.org/headline" content="Google Асистент"></div> <div itemprop="http://schema.org/description" content="Плануєте подорож? Попросіть Google Асистента знайти цікаві місця, підібрати рейси й відстежувати ціни на них або показати посадковий талон. Після прибуття Google Асистент знайде для вас ресторани, місцеві події та розваги поблизу готелю."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>

Медіагалерея: одне зображення банера

Використовуйте галереї зображень, щоб перетворювати зображення на банери.

	Медіагалерея: одне зображення банера
JSON-LD
{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:MediaGallery", "g:layoutHint": "LayoutColumns1", "s:image": [ "http://example.com/pixel3-pink-fruitpop-banner.png" ] } ] }
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:MediaGallery"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>
Мікродані
><div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/MediaGallery"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>

Три блоки вітрини: вітрина одної особливості, вітрина з переліком особливостей і одне зображення банера

Комбінуйте блоки вітрин, щоб створювати власні макети.

	Три блоки вітрини: вітрина одної особливості; вітрина з переліком 6 особливостей у макеті з 3 стовпцями; медіагалерея з одним зображенням банера.
JSON-LD
{ "@context": { "s": "http://schema.org/", "g": "http://schema.googleapis.com/" }, "@type": "g:Showcase", "g:showcaseBlock": [ { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns1", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaBelow", "s:headline": "Новий смартфон Google Pixel 3", "s:description": "Робіть бездоганні знімки, виконуйте завдання за допомогою Google Асистента й користуйтеся пристроєм, не турбуючись про рівень заряду.", "s:image": "http://example.com/pixel3-main-image.png" } ] }, { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns3", "s:headline": "Особливості", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google Об’єктив", "s:description": "Знаходьте інформацію про все навколо за допомогою Google Об’єктива.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Групові селфі", "s:description": "Робіть групові знімки без палки для селфі.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Цифровий добробут", "s:description": "Відволікайтеся від телефона завдяки ініціативі "Цифровий добробут".", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google Асистент", "s:description": "Користуйтеся Google Асистентом, щоб планувати свій день і отримувати відповіді на запитання.", "s:image": "http://example.com/pixel3-google-assistant.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Режим "Тсс", "s:description": "Увімкніть режим "Тсс", щоб не відволікатися від важливого.", "s:image": "http://example.com/pixel3-shhh-gesture.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Фільтр дзвінків", "s:description": "Доручіть Асистенту відповідати на дзвінки за вас, увімкнувши функцію "Фільтр дзвінків".", "s:image": "http://example.com/pixel3-call-screen.png" } ] }, { "@type": "g:MediaGallery", "g:layoutHint": "LayoutColumns1", "s:image": [ "http://example.com/pixel3-pink-fruitpop-banner.png" ] } ] }
RDFa
<div vocab="http://schema.org/" prefix="g: http://schema.googleapis.com/" typeof="g:Showcase"> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaBelow"></div> <div property="headline" content="Новий смартфон Google Pixel 3"></div> <div property="description" content="Робіть бездоганні знімки, виконуйте завдання за допомогою Google Асистента й користуйтеся пристроєм, не турбуючись про рівень заряду."></div> <div property="image" content="http://example.com/pixel3-main-image.png"></div> </div> </div> <div property="g:showcaseBlock" typeof="g:ShowcaseFeatureSet"> <div property="g:layoutHint" content="LayoutColumns3"></div> <div property="headline" content="Особливості"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google Об’єктив"></div> <div property="description" content="Знаходьте інформацію про все навколо за допомогою Google Об’єктива."></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Групові селфі"></div> <div property="description" content="Робіть групові знімки без палки для селфі."></div> <div property="image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Цифровий добробут"></div> <div property="description" content="Відволікайтеся від телефона завдяки ініціативі "Цифровий добробут"."></div> <div property="image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google Асистент"></div> <div property="description" content="Користуйтеся Google Асистентом, щоб планувати свій день і отримувати відповіді на запитання."></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Режим "Тсс"></div> <div property="description" content="Увімкніть режим "Тсс", щоб не відволікатися від важливого."></div> <div property="image" content="http://example.com/pixel3-shhh-gesture.png"></div> </div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Фільтр дзвінків"></div> <div property="description" content="Доручіть Асистенту відповідати на дзвінки за вас, увімкнувши функцію "Фільтр дзвінків"."></div> <div property="image" content="http://example.com/pixel3-call-screen.png"></div> </div> </div> <div property="g:showcaseBlock" typeof="g:MediaGallery"> <div property="g:layoutHint" content="LayoutColumns1"></div> <div property="image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>
Мікродані
<div itemscope itemtype="http://schema.googleapis.com/Showcase"> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaBelow"></div> <div itemprop="http://schema.org/headline" content="Новий смартфон Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Робіть бездоганні знімки, виконуйте завдання за допомогою Google Асистента й користуйтеся пристроєм, не турбуючись про рівень заряду."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-main-image.png"></div> </div> </div> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeatureSet"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns3"></div> <div itemprop="http://schema.org/headline" content="Особливості"></div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Google Об’єктив"></div> <div itemprop="http://schema.org/description" content="Знаходьте інформацію про все навколо за допомогою Google Об’єктива."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Групові селфі"></div> <div itemprop="http://schema.org/description" content="Робіть групові знімки без палки для селфі."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-group-selfies.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Цифровий добробут"></div> <div itemprop="http://schema.org/description" content="Відволікайтеся від телефона завдяки ініціативі "Цифровий добробут"."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-digital-wellbeing.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Google Асистент"></div> <div itemprop="http://schema.org/description" content="Користуйтеся Google Асистентом, щоб планувати свій день і отримувати відповіді на запитання."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Режим "Тсс"></div> <div itemprop="http://schema.org/description" content="Увімкніть режим "Тсс", щоб не відволікатися від важливого."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-shhh-gesture.png"></div> </div> <div itemprop="http://schema.org/itemListElement" itemscope itemtype="http://schema.googleapis.com/ShowcaseFeature"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutMediaAbove"></div> <div itemprop="http://schema.org/headline" content="Фільтр дзвінків"></div> <div itemprop="http://schema.org/description" content="Доручіть Асистенту відповідати на дзвінки за вас, увімкнувши функцію "Фільтр дзвінків"."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-call-screen.png"></div> </div> </div> <div itemprop="http://schema.googleapis.com/showcaseBlock" itemscope itemtype="http://schema.googleapis.com/MediaGallery"> <div itemprop="http://schema.googleapis.com/layoutHint" content="LayoutColumns1"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-pink-fruitpop-banner.png"></div> </div> </div>