Mettre en forme du contenu enrichi sur un produit

Utilisez l'attribut contenu enrichi sur le produit [rich_product_content] pour rédiger des descriptions détaillées associant texte et contenus multimédias. Le contenu enrichi vous permet de mettre en avant les caractéristiques spéciales des produits ou des services. Vous pouvez le fournir à l'aide de différents encodages tels que JSON-LD, RDFa et les microdonnées.

Nous vous recommandons d'utiliser l'outil de test des données structurées de Google pour tester votre contenu enrichi et vérifier qu'il ne contient pas d'erreurs. L'outil de test peut être utilisé pour tous les exemples mentionnés dans cet article.

Cet article décrit les structures de données nécessaires pour différents contenus enrichis.

Remarque : l'API Manufacturer Center est désormais compatible avec l'attribut contenu enrichi sur le produit [rich_product_content]. Découvrez comment utiliser cette API.

Fonctionnement

Contenu enrichi

Le contenu enrichi comprend une séquence de blocs Showcase. Chaque bloc correspond soit à un ensemble de fonctionnalités Showcase, soit à une galerie multimédia. Les blocs sont affichés verticalement dans une seule colonne. Le contenu enrichi est spécifié avec un élément de type "Showcase".

Le type Showcase inclut le type CollectionPage
Propriété	Type attendu	Description
showcaseBlock	ShowcaseFeatureSet ou MediaGallery	Bloc de contenu enrichi. Le bloc doit correspondre soit à un ensemble de fonctionnalités Showcase, soit à une galerie multimédia.

Ensemble de fonctionnalités Showcase

Un ensemble de fonctionnalités Showcase est constitué d'un titre facultatif et d'une séquence de fonctionnalités. Les ensembles de fonctionnalités peuvent être affichés dans une ou plusieurs colonnes.

Le type ShowcaseFeatureSet inclut le type ItemList
Propriété	Type attendu	Description
layoutHint	Text	Optimisation facultative indiquant le nombre de colonnes à afficher. Les fonctionnalités s'affichent d'abord en lignes, puis en colonnes. Les valeurs suivantes sont acceptées : > LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4> L'optimisation de la mise en page est appliquée au mieux. Sur les petits écrans, il se peut que moins de colonnes s'affichent par rapport au nombre demandé.
headline	Text	Titre facultatif décrivant l'ensemble des fonctionnalités.
itemListElement	ShowcaseFeature	Une fonctionnalité Showcase appartenant à l'ensemble. Les fonctionnalités s'affichent d'abord en lignes, puis en colonnes.

Fonctionnalité Showcase

Une fonctionnalité Showcase comprend un titre, une description et une image facultative.

Le type ShowcaseFeature inclut le type ListItem
Propriété	Type attendu	Description
layoutHint	Text	Optimisation facultative indiquant où l'image doit être affichée par rapport au titre et à la description. Les valeurs suivantes sont acceptées : LayoutMediaLeft LayoutMediaRight LayoutMediaAbove LayoutMediaBelow L'optimisation de la mise en page est appliquée au mieux. Sur les petits écrans, l'image peut être affichée dans une position différente de celle demandée.
headline	Text	Titre de la fonctionnalité.
Description	Text	Description de la fonctionnalité.
image	URL ou ImageObject	Image facultative illustrant la fonctionnalité.

Galerie multimédia

Une galerie multimédia comprend un titre facultatif et une séquence d'images. Les images sont affichées dans une ou plusieurs colonnes.

Le type MediaGallery inclut le type CollectionPage
Propriété	Type attendu	Description
layoutHint	Text	Optimisation facultative indiquant le nombre de colonnes à afficher. Les images s'affichent d'abord en lignes, puis en colonnes. Les valeurs suivantes sont acceptées : LayoutColumns1 LayoutColumns2 LayoutColumns3 LayoutColumns4 L'optimisation de la mise en page est appliquée au mieux. Sur les petits écrans, il se peut que moins de colonnes s'affichent par rapport au nombre demandé.
headline	Text	Titre facultatif à afficher en haut de la galerie.
image	URL ou ImageObject	Image à afficher dans la galerie.

Remarque sur les espaces de noms

Les types Showcase, ShowcaseFeatureSet, ShowcaseFeature et MediaGallery, ainsi que les propriétés showcaseBlock et layoutHint sont des extensions de schéma définies à l'adresse http://schema.googleapis.com/. Tous les autres types et propriétés sont définis à l'adresse http://schema.org/.

Exemples

Format de contenu enrichi vide

Le contenu enrichi le plus simple est vide. Il s'agit du strict minimum nécessaire pour définir une instance de contenu enrichi.

Contenu enrichi vide

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>

Microdonnées

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

Fonctionnalité Showcase unique avec un titre et une description, mais sans image

Voici une instance de contenu enrichi ne comprenant qu'une seule fonctionnalité Showcase sans image.

	Une seule fonctionnalité Showcase avec les éléments suivants : Titre Description
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": "Découvrez le Google Pixel 3", "s:description": "Réussissez toutes vos photos, effectuez vos tâches quotidiennes à l'aide de l'Assistant Google, bénéficiez d'une journée complète d'autonomie, et bien plus encore." } ] } ] }
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="Découvrez le Google Pixel 3"></div> <div property="description" content="Réussissez toutes vos photos, effectuez vos tâches quotidiennes à l'aide de l'Assistant Google, bénéficiez d'une journée complète d'autonomie, et bien plus encore."></div> </div> </div> </div>
Microdonnées
><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="Découvrez le Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Réussissez toutes vos photos, effectuez vos tâches quotidiennes à l'aide de l'Assistant Google, bénéficiez d'une journée complète d'autonomie, et bien plus encore."></div> </div> </div> </div>

Fonctionnalité Showcase unique avec un titre, une description et une image

Vous pouvez ajouter une image à la fonctionnalité Showcase.

	Une seule fonctionnalité Showcase avec les éléments suivants : Titre Description Image
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 Lens", "s:description": "Recherchez ce que vous voyez avec Google Lens", "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 Lens"></div> <div property="description" content="Recherchez ce que vous voyez avec Google Lens"></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
Microdonnées
><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 Lens"></div> <div itemprop="http://schema.org/description" content="Recherchez ce que vous voyez avec Google Lens"></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

Fonctionnalité Showcase unique comprenant un titre, une description et une image avec des optimisations de mise en page

Les optimisations de mise en page vous aident à contrôler la position de l'image dans une fonctionnalité Showcase.

	Une seule fonctionnalité Showcase avec les éléments suivants : Titre Description Image Mise en page : image à gauche de l'autre contenu
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 Lens", "s:description": "Effectuez une recherche à partir de ce que vous voyez avec Google Lens : recherchez des vêtements et de la décoration d'intérieur, copiez et traduisez du texte, et identifiez des lieux emblématiques, des plantes et des animaux, le tout en temps réel depuis votre appareil photo.", "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 Lens"></div> <div property="description" content="Effectuez une recherche à partir de ce que vous voyez avec Google Lens : recherchez des vêtements et de la décoration d'intérieur, copiez et traduisez du texte, et identifiez des lieux emblématiques, des plantes et des animaux, le tout en temps réel depuis votre appareil photo."></div> <div property="image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>
Microdonnées
><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 Lens"></div> <div itemprop="http://schema.org/description" content="Effectuez une recherche à partir de ce que vous voyez avec Google Lens : recherchez des vêtements et de la décoration d'intérieur, copiez et traduisez du texte, et identifiez des lieux emblématiques, des plantes et des animaux, le tout en temps réel depuis votre appareil photo."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-lens.png"></div> </div> </div> </div>

Ensemble de fonctionnalités Showcase avec des optimisations permettant de modifier la mise en page

Les optimisations de mise en page peuvent vous aider à créer des mises en page attrayantes.

	Ensemble de fonctionnalités Showcase unique Quatre fonctionnalités Showcase La position des autres contenus multimédias dans les fonctionnalités crée un schéma en "zigzag".
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 Lens", "s:description": "Effectuez une recherche à partir de ce que vous voyez avec Google Lens : recherchez des vêtements et de la décoration d'intérieur, copiez et traduisez du texte, et identifiez des lieux emblématiques, des plantes et des animaux, le tout en temps réel depuis votre appareil photo.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Selfies de groupe", "s:description": "La double caméra frontale du Pixel 3 vous permet de prendre des selfies de groupe sans perche à selfie et sans avoir besoin de sauter. Vous pouvez également capturer l'arrière-plan de ces selfies sans avoir à pencher la tête.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaLeft", "s:headline": "Bien-être numérique", "s:description": "Déconnectez-vous de votre téléphone à tout moment et où que vous soyez afin de vous consacrer pleinement à votre famille et à vos amis. Programmez des minuteurs sur certaines applications et désactivez les notifications visuelles. Activez le mode Sommeil pour afficher l'écran en noir et blanc et profiter d'une bonne nuit de sommeil.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaRight", "s:headline": "Assistant Google", "s:description": "Vous envisagez de voyager ? L'Assistant Google peut vous aider à chercher les principales attractions de votre destination, à suivre l'évolution des prix des vols et à trouver celui qui vous convient, et à récupérer plus rapidement votre carte d'embarquement. Il suffit de lui demander ! Une fois sur place, l'Assistant Google peut également vous aider à trouver des restaurants, des événements locaux et des activités à proximité de votre hôtel.", "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 Lens"></div> <div property="description" content="Effectuez une recherche à partir de ce que vous voyez avec Google Lens : recherchez des vêtements et de la décoration d'intérieur, copiez et traduisez du texte, et identifiez des lieux emblématiques, des plantes et des animaux, le tout en temps réel depuis votre appareil photo."></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="Selfies de groupe"></div> <div property="description" content="La double caméra frontale du Pixel 3 vous permet de prendre des selfies de groupe sans perche à selfie et sans avoir besoin de sauter. Vous pouvez également capturer l'arrière-plan de ces selfies sans avoir à pencher la tête."></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="Bien-être numérique"></div> <div property="description" content="Déconnectez-vous de votre téléphone à tout moment et où que vous soyez afin de vous consacrer pleinement à votre famille et à vos amis. Programmez des minuteurs sur certaines applications et désactivez les notifications visuelles. Activez le mode Sommeil pour afficher l'écran en noir et blanc et profiter d'une bonne nuit de sommeil."></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="Assistant Google"></div> <div property="description" content="Vous envisagez de voyager ? L'Assistant Google peut vous aider à chercher les principales attractions de votre destination, à suivre l'évolution des prix des vols et à trouver celui qui vous convient, et à récupérer plus rapidement votre carte d'embarquement. Il suffit de lui demander ! Une fois sur place, l'Assistant Google peut également vous aider à trouver des restaurants, des événements dans les environs et des activités à proximité de votre hôtel."></div> <div property="image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>
Microdonnées
<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 Lens"></div> <div itemprop="http://schema.org/description" content="Effectuez une recherche à partir de ce que vous voyez avec Google Lens : recherchez des vêtements et de la décoration d'intérieur, copiez et traduisez du texte, et identifiez des lieux emblématiques, des plantes et des animaux, le tout en temps réel depuis votre appareil photo."></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="Selfies de groupe"></div> <div itemprop="http://schema.org/description" content="La double caméra frontale du Pixel 3 vous permet de prendre des selfies de groupe sans perche à selfie et sans avoir besoin de sauter. Vous pouvez également capturer l'arrière-plan de ces selfies sans avoir à pencher la tête."></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="Bien-être numérique"></div> <div itemprop="http://schema.org/description" content="Déconnectez-vous de votre téléphone à tout moment et où que vous soyez afin de vous consacrer pleinement à votre famille et à vos amis. Programmez des minuteurs sur certaines applications et désactivez les notifications visuelles. Activez le mode Sommeil pour afficher l'écran en noir et blanc et profiter d'une bonne nuit de sommeil."></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="Assistant Google"></div> <div itemprop="http://schema.org/description" content="Vous envisagez de voyager ? L'Assistant Google peut vous aider à chercher les principales attractions de votre destination, à suivre l'évolution des prix des vols et à trouver celui qui vous convient, et à récupérer plus rapidement votre carte d'embarquement. Il suffit de lui demander ! Une fois sur place, l'Assistant Google peut également vous aider à trouver des restaurants, des événements dans les environs et des activités à proximité de votre hôtel."></div> <div itemprop="http://schema.org/image" content="http://example.com/pixel3-google-assistant.png"></div> </div> </div> </div>

Galerie multimédia : image de bannière unique

De même, vous pouvez transformer des images en bannières à l'aide de galeries d'images.

	Une galerie multimédia : Une seule image de bannière
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>
Microdonnées
><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>

Trois blocs Showcase : fonctionnalité unique, ensemble de fonctionnalités Showcase, image de bannière unique

Vous pouvez concevoir des mises en page personnalisées en associant plusieurs blocs Showcase.

	Trois blocs Showcase : Ensemble de fonctionnalités Showcase avec une seule fonctionnalité Ensemble de fonctionnalités Showcase avec six fonctionnalités réparties dans une mise en page à trois colonnes Galerie multimédia avec une seule image de bannière
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": "Découvrez le Google Pixel 3", "s:description": "Réussissez toutes vos photos, effectuez vos tâches quotidiennes à l'aide de l'Assistant Google, bénéficiez d'une journée complète d'autonomie, et bien plus encore.", "s:image": "http://example.com/pixel3-main-image.png" } ] }, { "@type": "g:ShowcaseFeatureSet", "g:layoutHint": "LayoutColumns3", "s:headline": "Fonctionnalités", "s:itemListElement": [ { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Google Lens", "s:description": "Recherchez ce que vous voyez avec Google Lens.", "s:image": "http://example.com/pixel3-google-lens.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Selfies de groupe", "s:description": "Passez-vous de la perche à selfie avec la fonctionnalité Selfies de groupe.", "s:image": "http://example.com/pixel3-group-selfies.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Bien-être numérique", "s:description": "Éprouvez le plaisir de la déconnexion avec le Bien-être numérique.", "s:image": "http://example.com/pixel3-digital-wellbeing.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Assistant Google", "s:description": "Posez des questions et effectuez différentes tâches avec l'Assistant Google.", "s:image": "http://example.com/pixel3-google-assistant.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Mode Chut", "s:description": "Concentrez-vous sur l'essentiel grâce au mode Chut.", "s:image": "http://example.com/pixel3-shhh-gesture.png" }, { "@type": "g:ShowcaseFeature", "g:layoutHint": "LayoutMediaAbove", "s:headline": "Filtrage d'appels", "s:description": "Laissez l'Assistant répondre aux appels à votre place à l'aide de la fonctionnalité Filtrage d'appels.", "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="Découvrez le Google Pixel 3"></div> <div property="description" content="Réussissez toutes vos photos, effectuez vos tâches quotidiennes à l'aide de l'Assistant Google, bénéficiez d'une journée complète d'autonomie, et bien plus encore.""></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="Fonctionnalités"></div> <div property="itemListElement" typeof="g:ShowcaseFeature"> <div property="g:layoutHint" content="LayoutMediaAbove"></div> <div property="headline" content="Google Lens"></div> <div property="description" content="Recherchez ce que vous voyez avec Google Lens."></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="Selfies de groupe"></div> <div property="description" content="Passez-vous de la perche à selfie avec la fonctionnalité Selfies de groupe."></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="Bien-être numérique"></div> <div property="description" content="Éprouvez le plaisir de la déconnexion avec le Bien-être numérique."></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="Assistant Google"></div> <div property="description" content="Posez des questions et effectuez différentes tâches avec l'Assistant 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="Mode Chut"></div> <div property="description" content="Concentrez-vous sur l'essentiel avec le mode Chut."></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="Filtrage d'appels"></div> <div property="description" content="Laissez l'Assistant répondre aux appels à votre place à l'aide de la fonctionnalité Filtrage d'appels."></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>
Microdonnées
<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="Découvrez le Google Pixel 3"></div> <div itemprop="http://schema.org/description" content="Réussissez toutes vos photos, effectuez vos tâches quotidiennes à l'aide de l'Assistant Google, bénéficiez d'une journée complète d'autonomie, et bien plus encore."></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="Fonctionnalités"></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 Lens"></div> <div itemprop="http://schema.org/description" content="Recherchez ce que vous voyez avec Google Lens."></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="Selfies de groupe"></div> <div itemprop="http://schema.org/description" content="Passez-vous de la perche à selfie avec la fonctionnalité Selfies de groupe."></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="Bien-être numérique"></div> <div itemprop="http://schema.org/description" content="Éprouvez le plaisir de la déconnexion avec le Bien-être numérique."></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="Assistant Google"></div> <div itemprop="http://schema.org/description" content="Posez des questions et effectuez différentes tâches avec l'Assistant 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="Mode Chut"></div> <div itemprop="http://schema.org/description" content="Concentrez-vous sur l'essentiel avec le mode Chut."></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="Filtrage d'appels"></div> <div itemprop="http://schema.org/description" content="Laissez l'Assistant répondre aux appels à votre place à l'aide de la fonctionnalité Filtrage d'appels."></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>