Populaire cette semaine

openGraphMetaData [server version]

StatutGadget TypeDefault Gadget VersionLayouts VersionUpdate Version
Invisible
Common
1
2
1
2
3
Révision 1.3.0

Présentation de l'inclusion

Facebook - Open Graph Protocol [openGraphMetaData]
L'inclusion commune openGraphMetaData est une inclusion contenant le balisage spécifique à l'OpenGraph Protocol.

Le protocole Open Graph est un ensemble de balises qui permet à un webmaster de fournir aux réseaux sociaux (Facebook, LinkedIn,...) des informations détaillées à propos des pages à partager. Les moteurs de recherches utilisent également ce protocole pour mieux comprendre le contenu d'une page web. A l'origine créé par Facebook, le protocole OpenGraph est désormais géré par l'OpenWeb Foundation.
Sur Blogger, l'OpenGraph est fourni par défaut depuis 2016 et reprend les principales balises.
  • og:title - Le titre de la page courante.
  • og:url - L'url canonique de la page courante.
  • og:description - La description de la page courante.
  • og:image - Les urls des images de la page courante (Ratio : 1200px/630px).
    • Liste d'urls des images dans les index/archives (Uniquement dans les Layouts Version 3)
    • L'url de l'image principale du post dans les articles et pages autonomes (Layouts Version 1 2 et 3)


Le code de l'inclusion

Vous pouvez chercher autant que vous voulez, ni le code de l'inclusion, ni l'appel ne figure dans votre thème. L'inclusion openGraphMetaData est une inclusion commune hébergée par Blogger et intégrée directement dans l'inclusion all-head-content. Le code complet n'est pas imprimé directement dans les thèmes.

<b:includable id='openGraphMetaData'>
  <b:comment render='false'>Metadata for Open Graph protocol. See http://ogp.me/.</b:comment>
  <meta expr:content='data:blog.url.canonical' property='og:url'/>
  <meta expr:content='data:view.title.escaped' property='og:title'/>
  <meta expr:content='data:view.description.escaped' property='og:description'/>
  <b:if cond='data:view.featuredImage'>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
  <b:elseif cond='data:widgets'/>
    <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
      <meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
    </b:loop>
  <b:elseif cond='data:blog.postImageUrl'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
  </b:if>
</b:includable>


Utiliser un balisage personnalisé

Le fait que l'inclusion soit gérée séparément de l'inclusion all-head-content, vous offre la possibilité de la personnaliser, voire même de la modifier complètement grâce au marquage commun.

Si vous utilisez un Layouts Version 3, recherchez la balise de marquage commun:

<b:defaultmarkup type='Common'>

Si vous utilisez un template de la génération précédente ou autre, ajoutez ce balisage à la fin de votre thème, juste avant la balise </body>.

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>

  </b:defaultmarkup>
</b:defaultmarkups>


A présent, il vous suffit d'ajouter le code de l'inclusion à l'intérieur du marquage commun :

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>

    <b:includable id='openGraphMetaData'>

      <b:include name='super.openGraphMetaData'/>

      <!-- AJOUTEZ VOS BALISES OPENGRAPH PERSONNALISÉES ICI -->

    </b:includable>

  </b:defaultmarkup>
</b:defaultmarkups>

Pour ajouter vos balises personnalisées, référez-vous au site web officiel : http://ogp.me/.

Posts les plus consultés de ce blog

Ajouter des boutons à la barre de partage Blogger