Résultat obtenu sur WooRank

Résultat sur WooRank

Sécurité et performance

Résultats du rapport de sécurité de la page web sur securityheaders.com

Les en-têtes de sécurité ont été correctement configurées sur le site web de la ferme d'Huboeuf.

Résultats du test de performance de la page web sur webpagetest.org

Les résultats du test de performance attestent de la qualité de l'environnement serveur. Un sérieux avertissement est cependant affiché car les images hébergées sur YouTube n'utilisent pas d'images JPEG progressives.

Implémentation publiée par Gilles Bailleux le 12/12/2021 à 11:55

Le type de schéma VideoObject ajoute des données structurées à une page web qui propose de visionner une séquence vidéo. Ces données structurées sont rassemblées dans une galerie qui présente toutes les séquences vidéo de votre site web. Lors d'une requête, les résultats de recherche affichent un carrousel qui permet de faire défiler les séquences vidéo. Les séquences vidéo hébergées sur YouTube sont préchargées afin de permettre aux internautes de visionner un extrait.

Page sur dhuboeuf.be

Tour des vaches avec Arnaud Collard

Voir la page

Validation par Google

3 éléments validés par Google

Vérification des résultats

Validation par Schema.org

3 éléments validés par Schema.org

Vérification des résultats

Pour aider Google à interpréter les pages de votre galerie vidéo, ajoutez les propriétés ItemList suivantes en plus des propriétés VideoObject. Pour plus d'informations sur les carrousels, consultez la section Carrousel.

Un seul fichier source pour de multiples affichages et un carrousel

Que faire maintenant que le fichier source de votre séquence vidéo est prêt ? Ce fichier est d'abord posté sur Twitter, Facebook et LinkedIn avec un court texte. Ce même fichier est ensuite chargé sur YouTube afin d'obtenir toutes les informations utiles pour insérer la séquence vidéo dans votre page web. Des métadonnées structurées et des types de schéma sont finalement implémentés dans la page web.

Si vous prenez la décision de partager directement cette page web sur les réseaux sociaux, vous observerez que cette publication rencontre moins de succès que la précédente : les internautes préfèrent visionner la séquence vidéo directement dans l'interface des réseaux sociaux et non pas dans une nouvelle page web. Il est donc préférable de poster plusieurs publications avant de partager cette page web avec un texte qui résume bien le contenu de la séquence vidéo. Le texte complet de la page web servira à élaborer les types de schémas implémentés dans un script. Celui qui est présenté ci-dessous comporte des propriétés qui ne sont ni requises ni recommandées par Google mais qui, à mon estime, présentent un intérêt pour le référencement naturel.

L'ultime étape est l'implémentation du type de schéma ItemList dans la galerie vidéo, en sélectionnant dans chaque séquence vidéo les propriétés utiles à la création d'un carrousel. Il est indispensable de veiller à ce que chaque séquence vidéo ait été indexée et reconnue comme amélioration dans la Google Search Console avant de demander l'indexation de la galerie vidéo qui permettra l'affichage du carrousel.

Documentation

Le type de schéma VideoObject est doublement documenté :

  1. Définition complète sur Schema.org
  2. Schéma de balisage d'une vidéo sur Google Search Central

Implémentation

Pour que le contenu de la page puisse être affiché sous forme d'extrait enrichi, Google Search Central requiert quatre propriétés obligatoires :

  • description
  • Première phrase du texte.
  • name
  • Nom de la séquence vidéo.
  • thumbnailUrl
    URL de la vignette.
  • uploadDate
    Date au format ISO 8601 à laquelle la séquence vidéo a été chargée sur YouTube, ici 2021-09-26T21:01:59+0200. Problème : votre interface YouTube Studio vous communique une date bien trop imprécise (le jour de chargement). Il existe heureusement l'extension Chrome YouTube Upload Time qui fournit toutes les informations utiles pour implémenter la date précise au format ISO 8601.

Google Search Central mentionne également huit propriétés recommandées :

  • contentUrl
  • Aucune donnée car il n'y a pas d'URL vers le fichier source de la séquence vidéo.
  • duration
  • Durée de la séquence vidéo au format ISO 8601, ici PT3M35S pour 3 minutes et 35 secondes.
  • embedUrl
  • URL communiquée par YouTube Studio au terme du chargement de la séquence vidéo, ici https://youtu.be/-KdRu7eUDN4.
  • expires
  • Aucune donnée car la séquence vidéo n'a pas de date d'expiration.
  • hasPart
  • Aucune donnée car la séquence vidéo n'a pas de segment implémenté.
  • interactionStatistic
  • Aucune donnée car les statistiques de visionnage de la séquence vidéo n'ont pas été implémentées.
  • publication
  • Aucune donnée car aucun événement n'est associé à la séquence vidéo.
  • regionsAllowed
  • Aucune donnée car il n'y a aucune restriction géographique pour la séquence vidéo.

Types de schémas additionnels

Deux autres types de schémas sont implémentés afin d'optimiser le référencement naturel de la séquence vidéo et d'agir sur l'affichage de la page dans les résultats de recherche :

  • BreadcrumbList
  • Ce type de schéma est systématiquement implémenté sur toutes les pages web du site.
  • ImageObject
  • Le référencement naturel commence par les images, ce qui rend ce type de schéma tout aussi indispensable que le précédent.

Script implémenté dans la page

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@graph": [
      {
          "@type": "VideoObject",
          "@id": "https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont#main-content",
          "url": "https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont",
          "name": "Tour des vaches avec Arnaud Collard",
          "headline": "Parfaite illustration du bien-être animal",
          "description": "En ce jour de septembre 2021, Arnaud Collard effectue le tour quotidien des vaches pour voir si les veaux et leur mère vont bien.",
          "embedUrl": "https://youtu.be/-KdRu7eUDN4",
          "image": [
            "https://dhuboeuf.be/images/schema.org/1x1/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-720x720.jpg",
            "https://dhuboeuf.be/images/schema.org/4x3/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-960x720.jpg",
            "https://dhuboeuf.be/images/schema.org/16x9/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-1280x720.jpg"
           ],
          "thumbnailUrl": "https://dhuboeuf.be/images/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-250x250.jpg",
          "videoQuality": "hd",
          "width": {
              "@type": "QuantitativeValue",
              "unitCode": "E37",
              "value": "1280"
          },
          "height": {
              "@type": "QuantitativeValue",
              "unitCode": "E37",
              "value": "720"
          },
          "publisher": {
            "@type": "Organization",
            "name": "Ferme d'Huboeuf",
            "alternateName": "D'Huboeuf",
            "logo": {
              "@type": "ImageObject",
              "url": "https://dhuboeuf.be/images/logo-ferme-bio-familiale-dhuboeuf-famille-collard-exploitation-viandeuse-oeuf-boeuf-colis-viande-la-roche-en-ardenne-agriculture-bien-etre-animal-250x250.jpg",
              "width": {
                  "@type": "QuantitativeValue",
                  "unitCode": "E37",
                  "value": "250"
              },
              "height": {
                  "@type": "QuantitativeValue",
                  "unitCode": "E37",
                  "value": "250"
              }
            }
          },
          "author": {
              "@type": "Person",
              "givenName": "Arnaud",
              "familyName": "Collard",
              "url": "https://dhuboeuf.be/fr/ferme-dhuboeuf/equipe/arnaud-collard"
          },
          "datePublished": "2021-09-26T21:16:01+0200",
          "dateModified": "2021-10-26T18:21:35+0200",
          "uploadDate": "2021-09-26T21:01:59+0200",
          "duration": "PT3M35S",
          "playerType": "HTML5",
          "sameAs": [
           "https://www.facebook.com/dhuboeuf",
           "https://twitter.com/dhuboeuf",
           "https://www.youtube.com/channel/UCXExVaOvyOo8e2x1es9FSxg",
           "https://www.instagram.com/dhuboeuf",
           "https://www.tiktok.com/@dhuboeuf",
           "https://www.linkedin.com/company/dhuboeuf",
           "https://www.pinterest.com/dhuboeuf"
           ]
      },
      {
          "@type": "ImageObject",
          "contentUrl": "https://dhuboeuf.be/images/schema.org/16x9/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-1280x720.jpg",
          "license": "https://creativecommons.org/licenses/by-nc-nd/4.0",
          "acquireLicensePage": "https://dhuboeuf.be/fr/a-votre-service/contact",
          "representativeOfPage": "true",
          "author": {
              "@type": "Person",
              "givenName": "Arnaud",
              "familyName": "Collard",
              "@id": "https://dhuboeuf.be/fr/ferme-dhuboeuf/equipe/arnaud-collard"
          },
          "contentLocation": {
              "@type": "Place",
              "name": "Hubermont",
              "description": "Village situé à La Roche-en-Ardenne en Ardenne belge"
          },
          "description": "Parfaite illustration du bien-être animal",
          "name": "Tour des vaches avec Arnaud Collard",
          "height": "720",
          "width": "1280",
          "thumbnail": {
              "@type": "ImageObject",
              "contentUrl": "https://dhuboeuf.be/images/ferme-dhuboeuf-exploitation-viandeuse-famille-collard-hubermont-ortho-la-roche-en-ardenne-250x250.jpg",
              "height": "250",
              "width": "250"
          }
      },
      {
          "@type": "BreadcrumbList",
          "name": "Fil d'Ariane des séquences vidéo de la ferme d'Huboeuf",
          "description": "Accès à toutes les séquences vidéo de la ferme d'Huboeuf",
          "itemListOrder": "https://schema.org/ItemListOrderAscending",
          "numberOfItems": 4,
          "itemListElement": [
          {
              "@type": "ListItem",
              "position": 1,
              "item": {
                "@id": "https://dhuboeuf.be/fr",
                "name": "Bienvenue",
                "image": "https://dhuboeuf.be/images/bienvenue-ardenne-belge-viande-boeuf-oeuf-label-bio-ferme-dhuboeuf-exploitation-viandeuse-famille-collard-hubermont-ortho-la-roche-en-ardenne-circuit-court-250x250.jpg"
                }
          },
          {
              "@type": "ListItem",
              "position": 2,
              "item": {
                "@id": "https://dhuboeuf.be/fr/ferme-dhuboeuf",
                "name": "Ferme d'Huboeuf",
                "image": "https://dhuboeuf.be/images/ferme-dhuboeuf-exploitation-viandeuse-famille-collard-hubermont-ortho-la-roche-en-ardenne-250x250.jpg"
                }
          },
          {
              "@type": "ListItem",
              "position": 3,
              "item": {
                "@id": "https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video",
                "name": "Séquences vidéo",
                "image": "https://dhuboeuf.be/images/video-exploitation-viandeuse-ferme-dhuboeuf-viande-boeuf-belge-label-bio-pur-produit-terroir-ardennais-rochois-hubermont-ortho-la-roche-en-ardenne-250x250.jpg"
                }
          },
          {
              "@type": "ListItem",
              "position": 4,
              "item": {
                "@id": "https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont",
                "name": "Tour des vaches avec Arnaud Collard",
                "image": "https://dhuboeuf.be/images/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-250x250.jpg"
                }
          }
          ]
      }
    ]
}
</script>

 

Métadonnées structurées

Les balises Meta et balises intégrées acceptées par Google sont complétées par des métadonnées structurées destinées aux réseaux sociaux. Ces métadonnées contiennent des informations qui n'apparaissent pas sur la page consultée mais uniquement lors d'un partage sur les réseaux sociaux.

Balises Open Graph

La balise <meta property="og:type" content="video.movie" /> indique que la page se réfère au type Video du protocole Open Graph. Des balises additionnelles sont intégrées afin d'enrichir le contenu :

<meta property="og:site_name" content="dhuboeuf.be" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont" />
<meta property="og:title" content="Tour des vaches à Hubermont" />
<meta property="og:description" content="Arnaud Collard inspecte quotidiennement les vaches, veaux et taureaux de la ferme d&#039;Huboeuf à Hubermont." />
<meta property="og:image" content="https://dhuboeuf.be/images/opengraph/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-1200x630.jpg" />
<meta property="og:video" content="https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont" />
<meta property="og:image:url" content="https://dhuboeuf.be/images/opengraph/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-1200x630.jpg" />
<meta property="og:image:secure_url" content="https://dhuboeuf.be/images/opengraph/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-1200x630.jpg" />
<meta property="og:video:secure_url" content="https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:image:width" content="1200" />
<meta property="og:video:width" content="1920" />
<meta property="og:image:height" content="630" />
<meta property="og:video:height" content="1080" />
<meta property="og:updated_time" content="2021-10-26T18:21:35+0200" />
<meta property="og:video:duration" content="215" />
<meta property="og:image:alt" content="Tour des vaches avec Arnaud Collard sur les terres de la ferme d&#039;Huboeuf à Hubermont" />
<meta property="og:see_also" content="https://www.facebook.com/dhuboeuf" />
<meta property="og:street_address" content="Hubermont, 25A" />
<meta property="og:locality" content="La Roche-en-Ardenne" />
<meta property="og:region" content="WLX" />
<meta property="og:postal_code" content="6983" />
<meta property="og:country_name" content="BE" />
<meta property="og:phone_number" content="+32-498-262-421" />

Twitter card

Les Twitter cards permettent de contrôler l'affichage de la page sur Twitter en ajoutant des balises spécifiques :

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@dhuboeuf" />
<meta name="twitter:description" content="Arnaud Collard présente les Blondes d&#039;Aquitaine, une race bovine provenant du Sud Ouest de la France." />
<meta name="twitter:title" content="Tour des vaches à Hubermont avec Arnaud Collard" />
<meta name="twitter:site:id" content="1385522844562608130" />
<meta name="twitter:creator" content="@dhuboeuf" />
<meta name="twitter:creator:id" content="1385522844562608130" />
<meta name="twitter:dnt" content="on" />
<meta name="twitter:url" content="https://dhuboeuf.be/fr/ferme-dhuboeuf/sequences-video/tour-des-vaches-avec-arnaud-collard-sur-les-terres-de-la-ferme-dhuboeuf-a-hubermont" />
<meta name="twitter:image:alt" content="Arnaud Collard effectue le tour quotidien des vaches pour voir si les veaux et leur mère vont bien" />
<meta name="twitter:image:height" content="675" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image" content="https://dhuboeuf.be/images/twitter/210926-tour-des-vaches-arnaud-collard-terres-ferme-dhuboeuf-hubermont-1200x675.jpg" />

 

Affichage sur Google

Image
Affichage d'un carrousel de séquences vidéo dans les résultats de recherche

Le carrousel utilise les propriétés implémentées dans le type de schéma ItemList qui est présent dans la galerie vidéo. Le tracteur rouge qui figure dans l'image ci-dessus est un aperçu, c'est-à-dire un extrait de la séquence vidéo qui démarre au survol du titre. L'expérience utilisateur est encore plus enrichissante dans les résultats de recherche sur mobile.

Affichage sur Bing

Image
Affichage d'une requête sur bing.com

A ce jour, Bing ne propose pas de carrousel de séquences vidéo dans ses résultats de recherche. Il n'est donc pas possible d'obtenir le résultat affiché sur Google.

Bing identifie sans peine la galerie vidéo et propose, comme Google, la fiche d'établissement de la ferme d'Huboeuf en regard des résultats de recherche. Les données de la propriété embedUrl sont utilisées pour afficher les résultats de recherche dans la rubrique "Vidéos".

Conclusion

Les données structurées présentes dans le code de la séquence vidéo et la configuration de l'environnement serveur permettent d'obtenir une note de 83/100 après Audit SEO & analyse de site web par WooRank. Les points additionnels résultent d'un partage efficace sur les réseaux sociaux, d'un travail sur l'accessibilité de la page web et de la configuration du caching.

Extrait enrichi sur Google

Les instructions de Google Search Central étant respectées lors des implémentations des types de schémas, l'extrait enrichi sur Google améliore l'expérience utilisateur de manière significative. C'est surtout dans les résultats de recherche sur mobile que les fonctionnalités du carrousel sont les plus marquantes.

Communication institutionnelle

Ce carrousel professionnalise la communication institutionnelle et fait clairement partie des fonctionnalités nice to have d'un projet qui prévoit de permettre aux internautes de visionner des séquences vidéo. Cette fonctionnalité est un must have dès lors que le projet offre une attention particulière en matière de référencement naturel.

Travail récompensé

Il faut valider chaque séquence vidéo dans la Google Search Console, attendre leur reconnaissance comme amélioration et implémenter le type de schéma dans la galerie vidéo avant d'obtenir le carrousel sur Google. C'est donc l'aboutissement d'un travail rigoureux, à toutes les étapes de l'élaboration de cette fonctionnalité, qui est ici récompensé.

Types de schémas utilisés dans cette implémentation