Populaire
ThéorieFiches techniquesInclusions universelles

Balises de l'entête HTML des thèmes [all-head-content]

L'inclusion all-head-content
C'est une toute petite ligne de code dans votre modèle qui joue l'un des rôles les plus importants permettant le bon fonctionnement de votre blog.
Décryptage de cette inclusion hébergée du côté des serveurs de Blogger.

Présentation de l'inclusion

L'inclusion all-head-content est une inclusion externe.
C'est-à-dire, que Blogger intégre dans le fichier XML de tous les thèmes officiels, un appel de l'inclusion dont le code XML complet n'est pas mis à la disposition de l'utilisateur.
Elle est gérée par Blogger afin de vous épargner certaines lourdes tâches. Dans le code XML de votre modèle, l'appel se situe quelque part entre <head> et </head>, généralement, à proximité de la balise <title>.

XML
<b:include data='blog' name='all-head-content'/>

Ci-dessous, vous trouverez ce qu'elle contient et pour chaque fonctionnalité, une alternative avec les données Blogger, dans le cas où vous ne souhaitez pas utiliser cette inclusion.

Attention toutefois, une connaissance parfaite des fonctionnalités tierces de Blogger est primordiale !


Norme Unicode

La norme Unicode permet d’indiquer le type de document et son encodage aux serveurs web afin que les pages contenant cette mention s'affichent correctement sur votre écran. La norme utilisée par Blogger est UTF-8.

En savoir plus : UTF-8 Wikipedia

Rendu HTML
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

XML
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>


Meta Theme Color

Disponibles uniquement dans les Templates V3, ces balises définissent la couleur du thème à utiliser sur les navigateurs mobiles (Chrome, Firefox OS et Opera) et la couleur des boutons "Précédent" et "Suivant" dans la fenêtre de navigation du site épinglé sur Windows.
La couleur sélectionnée correspond à la couleur de l'arrière-plan du thème.

Rendu HTML
<!-- Chrome, Firefox OS and Opera -->
<meta content='#ffffff' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#ffffff' name='msapplication-navbutton-color'/>

XML
<b:if cond='data:widgets'>
  <b:comment>Chrome, Firefox OS and Opera</b:comment>
  <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
  <b:comment>Windows Phone</b:comment>
  <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
</b:if>


Script de latence

Le contenu des scripts de latence est variable en fonction des thèmes.

XML
<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>


Meta Generator

Ce balisage permet à Blogger d'effectuer des statistiques en rapport avec les blogs en ligne.

Rendu HTML
<meta content='blogger' name='generator'/>


Favicon

Le Favicon est une petite image au format .ico stockée à la racine de votre blog et qui est utilisé par les navigateurs et certains services web [En savoir plus].

Rendu HTML
<link href='http://BLOG_NAME.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>

XML
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>


Contenu réservé aux adultes

Le balisage meta rating détermine le contenu du blog.
La mention indique quel type de visiteurs y a accès. Par défaut : Adult.

Rendu HTML
<meta content='adult' name='rating'/>

XML
<b:if cond='data:blog.adultContent'>
  <meta content='adult' name='rating'/>
</b:if>


URL canonique

Une url canonique correspond à la version préférée d'un ensemble d'URLs au contenu similaire.

En savoir plus :

Rendu HTML
<link href='page_url' rel='canonical'/>

XML
<link expr:href='data:blog.url.canonical' rel='canonical'/>


Syndication

Un balisage renseigne le navigateur et certains services web, les URLs des flux disponibles du blog.

En savoir plus :

Rendu HTML
<link title='TITRE_FLUX' href='URL_FLUX' rel='alternate' type='application/atom+xml'/>

XML
<data:blog.feedLinks/>

L'étiquette data:blog.feedLinks génère la liste des principaux flux disponibles du blog. Le contenu varie en fonction des types de page et des paramètres réglés dans l'interface.

OpenID

OpenID est une norme ouverte qui permet aux utilisateurs des services OpenID de se connecter à un site compatible avec OpenID à l'aide d'informations de connexion uniques.

Rendu HTML
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://blog_name.blogspot.com/' rel='openid.delegate'/>

XML
<data:blog.openIdOpTag/>


Administrateur unique

Si vous êtes l'unique administrateur et si votre blog est relié à votre profil Google+, ce balisage sera effectif (et repris dans les moteurs de recherche).

En savoir plus :
Rendu HTML
<link href='https://plus.google.com/ID_PROFIL_GPLUS' rel='me'/>
<link href='https://plus.google.com/ID_PROFIL_GPLUS' rel='publisher'/>

XML
<data:blog.meTag/>
<b:if cond='data:blog.googleProfileUrl'>
  <link expr:href='data:blog.googleProfileUrl' rel='publisher'/>
</b:if>


OpenGraph Facebook

L'openGraph Facebook est intégré dans la balise depuis 2016 via l'inclusion openGraphMetaData.
Sont repris, les tags og.url (url canonique de la page courante), og.title (titre de la page courante), og.description (description de la page courante) et og:image (l'url de l'image de l'article ou de la page autonome).

Rendu HTML
<meta content='CANONICAL_URL' property='og:url' />
<meta content='TITLE' property='og:title'/>
<meta content='DESCRIPTION' property='og:description'/>
<meta content='IMAGE_URL' property='og:image' />

XML
<b:include name='openGraphMetaData'/>


Meta description

Mentionne une description au blog et aux articles pour les moteurs de recherche.

En savoir plus :
Rendu HTML
<meta content='DESCRIPTION' name='description'/>

XML
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>


Ajustement CSS Internet Explorer

Hack pour les malheureux utilisateurs d'Internet Explorer.

Rendu HTML
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/579771828-ieretrofit.js"></script>
<![endif]-->
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->

XML
<data:blog.ieCssRetrofitLinks/>
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->


Reconstitution XML complète

En résumé, si vous avez tenté de reproduire l'inclusion complète, vous devriez obtenir un code qui ressemble à ceci :

Reconstitution XML


Certes, le code est plus long que la simple balise all-head-content, mais ça vous donne l'avantage de personnaliser votre entête comme bon vous semble.
Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
DéveloppementsMulti-versions
Populaire
DéveloppementsMulti-versions
Twitter : Bouton Tweeter [Tweeter button]
Populaire
DéveloppementsMulti-versions
Facebook : Boîte de commentaires [Comments Box]
Populaire
DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire