Aller au contenu
titcrea

Facebook : og:image taille recommandé pour les images de partage

Messages recommandés

Avez-vous déjà partagé sur Facebook un lien vers une page Web ? Si oui, vous avez certainement remarqué que d'un site à l'autre, et même d'une page à l'autre sur un même site, les images accompagnant le lien ne sont pas toujours générées de la même façon.

Dans le plus simple des cas, Facebook affiche simplement un extrait de la page Web :

facebook-partage-no-image-titcrea.PNG

Il arrive également qu'une petite image soit affichée à gauche de l'extrait :

facebook-partage-small-image-titcrea.PNG

D'autres fois, Facebook affiche une image pleine largeur au-dessus de l'extrait. Beaucoup plus accrocheur :

facebook-partage-big-image-titcrea.PNG

Comment Facebook détermine-t-il l'image qui doit accompagner un lien ? À l'aide des balises Open Graph. Donc, si vous êtes le développeur ou l'administrateur d'un site Web, vous pouvez utiliser les balises Open Graph pour contrôler l'apparence des liens que les gens publient vers vos pages.

Balise og:image

L'image que Facebook affichera sera spécifiée à l'aide de la balise méta og:image.

<meta property="og:image" content="http://mondomaine.com/monimage.png"/>

Pour que Facebook utilise l'image spécifiée à cet endroit, il faut respecter les conditions suivantes :

  • L'image doit avoir au minimum 200 x 200 pixels
  • La taille préférable est de 1200 x 630 pixels
  • Une image de moins de 600 x 315 pixels s'affichera tout de même, mais elle sera affichée à gauche de l'extrait plutôt que de prendre tout l'espace disponible en-dessous.

Il arrive que lors de la publication d'un lien sur Facebook, aucune image ne soit affichée malgré la présence des balises Open Graph. La raison : Facebook doit avoir mis l'image en cache afin de connaître ses dimensions.

Il est possible de forcer le rafraîchissement du cache à l'aide du débogueur Facebook : https://developers.facebook.com/tools/debug/. Vous entrez l'URL de la page désirée dans cet outil et il vous montrera toute les informations qu'il a trouvée sur la page et ce, même si elle ne contient aucune balise Open Graph. Ceci rafraîchira au passage les informations mises en cache.

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant


  • Contenu similaire

    • Par titcrea

      Photo de profil :
      doit faire au moins 180 x 180 pixels. s’affiche à 160 x 160 pixels sur un ordinateur, à 140 x 140 pixels sur un smartphone et à 50 x 50 pixels sur la plupart des téléphones avec accès au web. sera recadrée pour former un carré. Photo de couverture :
      s’affiche à 828 pixels de large sur 315 pixels de haut sur un ordinateur, et à 640 pixels de large sur 360 pixels de haut sur un smartphone ; ne s’affiche pas sur les téléphones avec accès au web ; doit faire au moins 399 pixels de large sur 150 pixels de haut ; se charge plus rapidement sous la forme d’un fichier JPG sRGB de 851 pixels de large, 315 pixels de haut et moins de 100 Ko. Pour les photos de profil et de couverture comportant votre logo ou du texte, l’utilisation d’un fichier PNG peut offrir de meilleurs résultats.
    • Par titcrea

      Pour afficher ces photos sans compression en haute qualité sur Facebook, il y'a 4 règle à suivre :
      La taille : 720 px, 960 px, 2 048 px (largeur) Si vous utilisez une photo de 2 048 px, sélectionnez l’option Haute qualité lors de son envoie. Pour éviter toute compression lorsque vous téléchargez votre photo de couverture, utilisez un fichier de taille inférieure à 100 Ko. Enregistrez votre photo au format JPEG avec un profil couleur sRGB.
    • Par titcrea

      Vous pouvez réaliser en css des coins arrondis très facilement avec la propriété : border-radius sur différents éléments :
      exemple sur une div :
      div { border: 2px solid; border-radius: 25px; } ce cadre aura un bord de 2px et 4 coins arrondi de 25px.
      Vous pouvez également régler chaque coins un à un de la façon suivante :
      border-radius: 15px 50px 30px 5px;
      les valeurs seront toujours dans cet ordre : en haut a gauche, en haut a droite, en bas à gauche puis le dernier en bas à droite (on tourne dans le sens des aiguilles d'une montre)
      Cette propriété peut aussi s’écrire ainsi :
      border-top-left-radius: 15px; border-top-right-radius: 50px; border-bottom-right-radius: 30px; border-bottom-left-radius: 5px; ce qui indique que vous souhaitez ne faire qu'un seul coin arrondi vous pouvez également le réalisé !
      Exemple avec une image :
      Code html : <p> <img src="/votreimage.jpg" width="300" height="400" alt="" class="arrondie" /> </p> Code css : .arrondie { border-radius: 7px; }  
    • Par titcrea
      Vous connaissez certainement le positionnement classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte flexible.
      Flexbox possède quatre possibilités principales qui sont :
      Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non, Alignements et centrages horizontaux et verticaux, justifiés, répartis, Réorganisation des éléments indépendamment de l’ordre du flux (DOM), Gestion des espaces disponibles (fluidité). En pratique flexbox fonctionne ainsi :
      Un "flex-container" permettant de créer un contexte général d’affichage, Un ou plusieurs "flex-item" qui ne sont rien d’autre que les enfants directs du conteneur, quels qu’ils soient. Le "flex-container", qui définit le contexte global de modèle de boîte flexible, est tout simplement n’importe quel élément HTML doté de la déclaration display: flex; ou display: inline-flex;.
      Ses enfants deviennent alors automatiquement (inutile de leur déclarer quoi que ce soit) des éléments de type "flex-item" :
      .container { display: flex; } Un élément "flex-item" n’est plus considéré comme un “bloc” ou un “inline” classique (d’ailleurs les valeurs de display autre que none, et même certaines propriétés telles que float n’ont plus d’effet sur lui).

      Distribution et axe principal
      La distribution, c’est à dire le sens d’affichage horizontal ou vertical des éléments "flex-items" est définie par la propriété flex-direction dont les valeurs peuvent être :
      row (distribution horizontale, valeur par défaut) row-reverse (distribution horizontale inversée) column (distribution verticale) column-reverse (distribution verticale inversée) Cette propriété s’applique au "flex-container" et détermine l’axe principal du modèle de boîte flexible.
      .container { display: flex; flex-direction: column; }
      La propriété flex-wrap définit si le contenu sera distribué sur une seule ligne (ou colonne selon l’axe principal) ou sur plusieurs lignes. En clair, si les "flex-items" ont le droit de passer à la ligne ou non.
      Les valeurs de flex-wrap sont :
      nowrap (les éléments ne passent pas à la ligne, valeur par défaut) wrap (les éléments passent à la ligne dans le sens de lecture) wrap-reverse (les éléments passent à la ligne dans le sens inverse) À noter qu’il existe une propriété raccourcie flex-flow qui regroupe flex-direction et flex-wrap :
      /* affichage en ligne et passage à la ligne autorisé */ .container { flex-flow: row wrap; } Alignements
      Flexbox propose de gérer très finement les alignements et centrages, en différenciant les deux axes d’affichage de cette manière :
      L’alignement dans l’axe principal est traité via la propriété justify-content L’alignement dans l’axe secondaire est géré avec align-items Ces deux propriétés s’appliquent au "flex-container".
      Axe principal : justify-content
      Les alignements dans l’axe de lecture principal sont définis à l’aide de la propriété justify-content, dont les valeurs possibles sont :
      flex-start (éléments positionnés au début du sens de lecture, valeur par défaut) flex-end (éléments positionnés à la fin) center (position centrale) space-between (répartition “justifiée”) space-around (variante de répartition “justifiée”)
      Axe secondaire: align-items
      Dans l’axe secondaire, les alignements sont régis via la propriété align-items, dont les valeurs sont :
      flex-start (au début) flex-end (à la fin) center (au centre) baseline (généralement identique à flex-start) stretch (étirés dans l’espace disponible, valeur par défaut) /* éléments étirés (valeur par défaut) */ .container { flex-direction: column; align-items: stretch; } Traiter les cas particuliers : align-self
      La propriété align-self , permet de distinguer l’alignement d’un "flex-item" de ses frères. Les valeurs de cette propriété sont identiques à celles de align-items.
      /* seul le paragraphe sera à droite */ .container { align-items: stretch; } p { align-self: flex-end; }
      Ordonnancement
      L’une des fonctionnalités les plus avant-gardistes du modèle d’affichage Flexbox est de pouvoir réordonner à sa guise chacun des éléments indépendamment grâce à la propriété order.
      Les valeurs de order agissent telles des pondérations : les éléments dont la valeur est la plus forte se trouveront en bas de la pile.
      La propriété order s’applique aux "flex-items" et sa valeur initiale est 0.
      /* le premier de la liste s'affichera en bas de pile */ li:first-of-type { order: 1; }
      Flexibilité
      Cela ne devrait étonner personne, la notion de flexibilité constitue le fondement du module de positionnement Flexbox, et c’est là qu’intervient l’indispensable propriété flex.
      La propriété flex est un raccourci de trois propriétés, flex-grow, flex-shrink et flex-basis, qui s’appliquent aux "flex-items" et dont les fonctionnalités sont:
      flex-grow : capacité pour un élément à s’étirer dans l’espace restant, flex-shrink : capacité pour un élément à se contracter si nécessaire, flex-basis : taille initiale de l’élément avant que l’espace restant ne soit distribué. Par défaut, les valeurs de ces propriétés sont : flex-grow: 0, flex-shrink: 1 et flex-basis: auto.
      En clair, les flex-items n’occupent initialement que la taille minimale de leur contenu.
      Pour rendre un élément flexible, il suffit de lui attribuer une valeur de flex-grow (ou flex en raccourci) supérieure à zéro.
      Cet élément occupera alors l’espace restant au sein de son conteneur :
      /* .salade occupera l'espace restant */ .salade { flex: 1; } Plusieurs éléments peuvent être rendus flexibles et se répartir l’espace restant. L’espace disponible est alors tout simplement distribué entre les éléments flexibles.

      Bonus : 
      En guise de bonus, sachez que le modèle de boîte flexible dispose également de sérieux atouts lorsqu’il s’agit de dompter ces fichus flottants qui débordent tout le temps.
      Les éléments "flex-container" et "flex-item" construisent un Block Formatting Context (BFC), ou plus exactement un Flex Formatting Context dont les avantages sont similaires et décrits dans cet article. :
      un flottant ne déborde pas d’un "flex-container" ni d'un "flex-item",
      un "flex-container" ou un "flex-item" ne s’écoule pas autour d’un flottant (ils demeurent à côté),
      il n’y a pas de fusion de marges.

       
      Sources : alsacreations
    • Par titcrea

      Afin de forcer Facebook à mettre à jour les informations d'un lien partagé, rendez-vous dans leur Debugger, entrez l'adresse URL du contenu à partager, puis cliquez sur Déboguer :

      Sur la page suivante, cliquez sur "Fetch new information" ou "Scrape again", si vous avez déjà essayé de partager le contenu, mais qu'il n'était pas complet ! pour actualiser le cache de facebook :

      Vous pouvez désormais partager le lien, les informations ne seront plus obsolètes !

×