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
      Pour nettoyer son compte Facebook afin d'être à l'abris de tout piratage ou spam non intentionnel, il vous faut :
      1 : Le mot de passe :
      Changer votre mot de passe actuel pour un plus sécurisé !
      Et ne le transmettre à personne ! Nous insistons sur le personne ! ni votre frère, ni votre sœur, ni votre copain/copine ! chacun à son propre compte et n'a pas besoin du compte de l'autre peu importe la raison. Car, la 1ère raison d'un soi disant piratage Facebook aujourd'hui est à 80% du temps, juste quelqu'un qui connais votre mot de passe car vous lui avez transmit !
      Optez pour un mot de passe complexe composé de majuscules, minuscules, chiffres et caractères spéciaux ! Exemple : MONchien2048(()). 
      Pour ce faire rendez vous en haut à droite de Facebook et cliquer sur la petite flèche (voir capture ci-dessous), puis cliquer sur paramètres

      Cliquer ensuite sur Sécurité et connexion et le bouton modifier en face de changer le mot de passe (voir ci dessous)

      2 : les applications connectés :
      Nous connectons des applications tierces quasiment en continue sur Facebook, pour des services externes ou des jeux en interne (quizz, concours, ect...), le problème qui se pose aujourd'hui est que nombre de ces applications sont créer pour spammer dans l'avenir !
      Exemple : aujourd'hui, je créer une application qui fais le buzz pour savoir à combien de % vous êtes un ange ou un démon ! Ca parait inoffensif sur le moment, un simple jeux pour rigoler ! et tout le monde lie son compte Facebook à cette application pour participer !
      Par contre très peu vont comprendre qu'au moment ou ils acceptent que l'application accède à leur compte, elle pourra récupérer toutes leur informations (email, téléphone, adresse, ect...) et pour certaines poster en leur nom ! C'est la que ca deviens problématique ! et qu'on se retrouve sans le vouloir, en train de poster des "génial", "super offre" sur une pub d'arnaque qui propose un iphone dernier modèle à 1€ ... car l'auteur de la fameuse application à décider quelques mois après de changer son application de quizz en page marketing d'arnaque !
      Pour éviter ce genre de désagrément, il est bon de faire le ménage de temps en temps dans les applications liés à votre compte Facebook, pour ce faire rendez vous au même endroit vue plus haut et aller cette fois ci dans : Applications.

      C'est ici que vous retrouverez tous les applications ou services tierces qui sont lié à votre compte Facebook ! Jeux, quizz, inscription à des sites par Facebook ect... et qui possèdent des droits sur vos informations ou sur votre compte Facebook !
      Il vous suffit de passer votre souris sur l'une d'elle, pour voir 2 boutons apparaitre :
      un crayon pour éditer les droits de l'application en question une croix pour supprimer définitivement l'accès à vote compte Nous vous conseillons si vous ne savez pas trop ce que vous faite de tout effacer ! Oui même si c'est long ! Cela n'aura aucune incidence réel sur vos services important que vous pourriez utilisés, il vous suffira de vous reconnecter depuis votre application pour réactiver l'accès le cas échéant. Mais au moins, vous vous serez débarrasser de tout risque potentiel envers votre compte Facebook !
      Voila, après ces deux manipulations votre compte est déjà beaucoup plus sur et à l'abris des spams.
       
    • Par titcrea

      Photo de profil Facebook :
      doit faire au moins 180 x 180 pixels en PNG. 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é et un rond. Photo de couverture Facebook :
      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.
      Photo de partage Facebook :
      1200 x 630 pixel en JPG sRGB Titcrea vous propose également de créer vos miniature sur mesure : faire une demande de création
    • Par titcrea

      Utiliser l’attribut « hreflang » pour afficher l’URL qui correspond à une langue ou à une région
      De nombreux sites Web sont destinés à une audience internationale et comportent du contenu traduit dans plusieurs langues ou qui cible les internautes d’une région spécifique.
      Nous utilisons les attributs rel="alternate" hreflang="x" pour afficher l’URL qui correspond à la langue ou à la région de l’internaute dans les résultats de recherche google.
      Si votre URL est disponible dans plusieurs langues, chaque page doit identifier les différentes versions de langue, y compris la sienne.
      Par exemple, si votre site propose du contenu en français, en anglais et en espagnol, chaque versions doivent contenir un lien semblable qui renvoie l’une vers l’autre, et vers le site d’origine.
      Dans notre exemple, nous devrons donc déclarer les 3 langues :
      <link rel="alternate" href="http://example.com/es" hreflang="es"/> <link rel="alternate" href="http://example.com/en" hreflang="en"/> <link rel="alternate" href="http://example.com/" hreflang="fr"/> <link rel="alternate" href="http://example.com/" hreflang="x-default"/> Vous pouvez également affiné les langue par régions ! Exemple : fr-be : français pour la Belgique.
      Vous pouvez utiliser d’autres principes de redirections, comme les sous-domaines ! Exemple : http://fr.example.com/
      Valeurs acceptées pour les langues :
      La valeur de l’attribut hreflang permet d’indiquer la langue (au format ISO 639-1), ainsi que la région (facultatif, au format ISO 3166-1 Alpha 2)
      Intégration :
      Tous ces balises hreflang sont à ajouter dans votre balise <head>…</head> de votre site internet et donc apparaître dans toutes vos pages.
      Dans le cas d’un site à langue unique, une simple balise hreflang suffit pour indiquer a google la langue de votre site :
      <link rel= »alternate » href= »http://example.com/ » hreflang= »fr »/> (exemple pour un site français).
    • Par titcrea

      Pour arrondir les coins d’un élément en CSS 3, il vous suffit d’utiliser la propriété : border-radius.
      Border-radius en CSS 3 fonctionne de cette façon :

      border-radius: 25px; Arrondis les 4 coins de manière égale !
      --------------------------------------

      border-radius: 50px 20px; Arrondis les deux coins : haut, gauche et bas droit de 50px ! puis les deux autre : haut droit et bas gauche de 20px !
      --------------------------------------

      border-radius: 50px 20px 10px 30px; Arrondis les coins dans le sens des aiguilles d’une monte : haut gauche : 50 px, haut droite : 20px, bas droite : 10px et bas gauche : 30px !
      Vous pouvez également calculer vos coins arrondis avec border-radius en CSS 3 avec des pourcentages
    • 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; }  
×

Information importante

En utilisant ce site, vous acceptez nos Conditions d’utilisation.