Fiches techniquesInclusions [Version serveur]

Balises de l'entête HTML des modèles [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 modèles 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

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

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


Script de latence

Le script de latence est indispensable pour le bon fonctionnement de certains modules du blog.

XML brut
<script type="text/javascript">
(function() { var b=window,f="chrome",g="tick",k="jstiming";(function(){function d(a){this.t={};this.tick=function(a,d,c){var e=void 0!=c?c:(new Date).getTime();this.t[a]=[e,d];if(void 0==c)try{b.console.timeStamp("CSI/"+a)}catch(h){}};this[g]("start",null,a)}var a;b.performance&&(a=b.performance.timing);var n=a?new d(a.responseStart):new d;b.jstiming={Timer:d,load:n};if(a){var c=a.navigationStart,h=a.responseStart;0<c&&h>=c&&(b[k].srt=h-c)}if(a){var e=b[k].load;0<c&&h>=c&&(e[g]("_wtsrt",void 0,c),e[g]("wtsrt_","_wtsrt",h),e[g]("tbsd_","wtsrt_"))}try{a=null,
b[f]&&b[f].csi&&(a=Math.floor(b[f].csi().pageT),e&&0<c&&(e[g]("_tbnd",void 0,b[f].csi().startE),e[g]("tbnd_","_tbnd",c))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null==a&&b.external&&(a=b.external.pageT,e&&0<c&&(e[g]("_tbnd",void 0,b.external.startE),e[g]("tbnd_","_tbnd",c))),a&&(b[k].pt=a)}catch(p){}})();b.tickAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[k].load[g]("aft")};var l=!1;function m(){l||(l=!0,b[k].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListener("scroll",m,!1):b.attachEvent("onscroll",m);
 })();
</script>

XML avec étiquettes
<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>


Meta Generator

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

XML brut
<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].

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

XML avec étiquettes
<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.

XML brut
<meta content='adult' name='rating'/>

XML avec étiquettes
<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'url au contenu similaire.

En savoir plus :

XML brut
<link href='page_url' rel='canonical'/>

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


Syndication

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

En savoir plus :

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

XML avec étiquettes
<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.

En savoir plus :

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

XML avec étiquettes
<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 :
XML brut
<link href='https://plus.google.com/ID_PROFIL_GPLUS' rel='me'/>
<link href='https://plus.google.com/ID_PROFIL_GPLUS' rel='publisher'/>

XML avec étiquettes
<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.
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).

Les tags og.url, og.title et og.description sont disponibles sur toutes les pages. Tandis que le tag og.image est affiché uniquement sur les pages des articles et les pages autonomes, si celles-ci contiennent une image.

XML brut
<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' />

L'inclusion all-head-content redimensionne automatiquement l'image à la norme exigée par Facebook : 1200/630.

XML avec étiquettes
<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.isResizable'>
  <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
</b:if>


Meta description

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

En savoir plus :
XML brut
<meta content='DESCRIPTION' name='description'/>

XML avec étiquettes
<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.

XML brut
<!--[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 avec étiquettes
<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.
Dernière modification :

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les arrière-plans [background]
Populaire