Thèmes V2 : balises HN corrigées avec l'Add-on HTag V2
Si vous avez lu mes articles sur l'importance des balises HN et sur la très imparfaite manière avec laquelle Blogger les gère, vous savez pourquoi vous êtes ici, sinon prenez le temps de le faire.
Vous trouverez donc dans cet article les explications concernant les effets positifs de l'Add-on HTag V2 sur le balisage HN des thèmes Blogger de version 2, ses limites et une procédure d'installation.
Attention, pour les thèmes version 3 utilisez l'Add-on HTag V3 !
Comment l'Add-on HTag V2 corrige les balises HN de Blogger
L'Add-on HTag résout les principaux problèmes de balisage Hn de Blogger en collant au plus près de la logique des pages affichées et en évitant le risque de sauts hiérarchiques. Il respecte en très grande partie le style déjà en place du blog, ainsi que ses futures modifications.
Balises HN de la page d'accueil
Voici l'analyse comparative de la page d'accueil d'un blog de test ayant un thème de version 2 :
Les dates n'ont plus aucun balisage HN et n'apparaissent donc plus en H2.
Une balise H2 'Derniers articles' apparaît afin d'introduire la liste des titres des articles (toujours balisés H3) affichée dans la page d'accueil.
Remarque : ce n'est pas l'Add-on HTag qui fait disparaître le balisage inopportun du contenu de l'article 1, mais l'ajout manuel d'un marqueur d'expansion dans l'article qui s'avère indispensable (voir chapitre 'Limites de l'Add-on HTag V2).
Balises HN des articles
Voici maintenant l'analyse comparative d'un article du même blog bénéficiant de l'Add-on HTag V2 :
Le titre du blog n'apparaît plus dans le balisage HN, car dans le cadre de l'affichage d'un article ce n'est plus l'élément principal, et à vrai dire on ne sait plus quoi en faire !
Le plus important est le titre de l'article qui se retrouve bien en H1. De cette façon la logique du contenu de la page est respectée. Ce transfert impose la suppression des titres des gadgets 'Rechercher dans ce blog' et 'Pages' qui ne font logiquement pas partie du contenu de l'article affiché.
Il s'accompagne aussi du passage du titre des commentaires de H4 en H2, ce qui permet d'éviter un saut hiérarchique dans le cas d'un article dont le contenu n'aurait aucun titre.
Limites de l'Add-on HTag V2
- L'Add-on HTag V2 ne fonctionne qu'avec les thèmes officiels Blogger de version 2. Pour les versions 3, utilisez l'Add-on HTag V3.
- Il ne fonctionne pas avec le thème Dynamic Views qui semble être complètement contrôlé par Blogger et ne génère aucune balise de titre.
- Si dans les 'Paramètres pour mobiles' vous avez choisi 'Mobile', le thème 'Personnalisé' doit être sélectionné pour que l'Add-on HTag soit actif. Toutes les autres options mobiles sont directement contrôlées par Blogger sans tenir compte d'aucune personnalisation et donc de l'Add-on HTag.
- En affichage de page d'article, le style du titre de l'article risque d'être modifié à cause du passage de sa balise de H3 en H1. D'après les tests, c'est surtout le cas du thème Travel.
- L'Add-on HTag ne corrige pas les erreurs que vous auriez pu commettre dans la mise en page de vos articles qui reste sous votre contrôle :
A ce titre, avec ou sans l'Add-on HTag, ayez bien conscience des conséquences en termes de balisage HN quand vous affectez titres, sous-titres etc.
D'autre part, la présence d'un marqueur d'expansion dans chaque article garantit que son contenu et donc son balisage ne viennent perturber celui de la page d'accueil. - L'Add-on HTag V2 a été testé sur un blog de test avec l'ensemble des thèmes officiels version 2, c'est-à-dire Simple, Picture Window, Awesome, Watermark, Ethereal et Travel .
Malgré ce, je ne peux donner aucune garantie de bon fonctionnement, encore moins avec des thèmes non officiels ou personnalisés.
Cependant, en cas de problème j'essaierai de vous aider dans la mesure de mon possible.
Installation de l'Add-on HTag V2
Mise en garde
Attention : l'installation standard de l'Add-on HTag V2 va écraser les modifications antérieures qui pourraient exister dans les gadgets Header1, BlogSearch1, PageList1 et Blog1, sans toutefois modifier le CSS (style du thème).
Il est possible de faire une installation plus fine qui les respecte, mais cela réclame un niveau certain de compétences (voir en bas d'article le chapitre 'Installation pas à pas de l'Add-on HTag V2').
Ne faites l'installation standard que si vous savez comment récupérer les éventuelles modifications antérieures sans engendrer de conflits. Par exemple, si l'Add-on TOC+ est déjà installé, il va visuellement disparaître et il faudra reprendre son installation au stade de l'intégration des appels aux inclusions.
Par contre l'Add-on SEO ne sera pas impacté par l'installation de l'Add-on HTag V2.
Ajouts au CSS pour installations 'standard' et 'pas à pas'
Important : avant tout, faites une sauvegarde du thème de votre blog.
Le CSS d'un thème Blogger définit le style d'affichage du blog. Les opérations suivantes ajoutent des définitions de classes nécessaires à l'Add-on HTag pour simuler une apparence identique à celle d'origine et s'adapter automatiquement à de futures personnalisations.
Suivant le thème, vous ne trouverez pas toujours le terme à rechercher. A l'inverse, certains termes apparaitront de nombreuses fois. Tout ceci est normal, cette procédure d'installation englobant tous les thèmes de version 2, elle doit prendre en compte tous les cas de figures.
Les modifications de ce chapitre concernent uniquement le CSS. Vous pourrez parfois trouver le terme à traiter dans le code XML mais n'y touchez pas.
2. Pour chaque occurrence de h1 :
- Copiez (Ctrl+C) l'ensemble auquel il appartient, limité par des virgules, un début de ligne ou une accolade ouverte (voir les exemples ci-dessous).
- Collez cette copie (Ctrl+V) dans la même ligne, en ajoutant une virgule au début et en remplaçant h1 par .h1 dans la copie.
- Ignorez les lignes commençant par <Group description.
- Par exemple, s'il apparaît dans cette ligne :
.Header h1 a {
L'ensemble auquel il appartient est limité par un début de ligne à gauche et par { à droite.
On doit donc ajouter à cette ligne tout l'ensemble :
, .Header .h1 a
mais avec une virgule au début, et le terme h1 transformé en .h1
Cette ligne va ainsi devenir :
.Header h1 a , .Header .h1 a { - Vérifiez que vous avez traité toutes les occurrences de h1
3. Répétez le processus pour les termes suivants, toujours en ignorant les lignes qui commencent par <Group description (regardez d'autres exemples en 4) :
- h2 devient .h2
- h3 devient .h3
- h4 devient .h4
- .mobile .main-inner .widget h2 + div, ==> .mobile .main-inner .widget h2 + div , .mobile .main-inner .widget .h2 + div,
- div.widget > h2,
div.widget h2.title {
==>
div.widget > h2 , div.widget > .h2,
div.widget h2.title , div.widget .h2.title { - h3.post-title, h4 { ==> h3.post-title , .h3.post-title , h4 {
- .mobile h3.post-title { ==> .mobile h3.post-title , .mobile .h3.post-title {
- #comments h4, ==> #comments h4, #comments .h4,
Installation standard : introduction des inclusions
- Recherchez </b:defaultmarkups>
Avec un thème officiel V2 non modifié, vous ne devriez pas trouver cette balise. - Si c'est bien le cas, recherchez </head> et juste avant cette balise introduisez les 2 balises defaultmarkups ci-dessous :
<b:defaultmarkups>
</b:defaultmarkups> - Entre les 2 balises b:defaultmarkups que vous venez d'ajouter, introduisez le code ci-dessous :
<!-- Add-on HTag V2 par https://blogger-optimisation-seo.blogspot.com/ --> <b:defaultmarkup type='Header'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <!-- Add-on HTag V2 --> <!-- <h1 style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> --> <b:if cond='data:view.isSingleItem'> <div class='h1' style='background: transparent; border-width: 0px; margin-bottom: 10px;'> <b:include name='title'/> </div> <b:else/> <h1 style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </b:if> </div> <b:include name='description'/> </div> <b:else/> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <!-- Add-on HTag V2 --> <!-- <h1 style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> --> <b:if cond='data:view.isSingleItem'> <div class='h1' style='background: transparent; border-width: 0px; margin-bottom: 10px;'> <b:include name='title'/> </div> <b:else/> <h1 style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </b:if> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <!-- Add-on HTag V2 --> <!-- <h1 style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> --> <b:if cond='data:view.isSingleItem'> <div class='h1' style='background: transparent; border-width: 0px; margin-bottom: 10px;'> <b:include name='title'/> </div> <b:else/> <h1 style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </b:if> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='title'> <!-- Add-on HTag V2 --> <!-- <b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'> --> <b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a' style='text-decoration:none;'> <data:title/> </b:tag> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='BlogSearch'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <!-- Add-on HTag V2 --> <!-- <h2 class='title'><data:title/></h2> --> <b:if cond='not data:view.isSingleItem'> <h2 class='title'><data:title/></h2> <b:else/> <div class='h2 title'><data:title/></div> </b:if> </b:if> <div class='widget-content'> <div expr:id='data:widget.instanceId + "_form"'> <form class='gsc-search-box' expr:action='data:blog.searchUrl'> <b:attr cond='not data:view.isPreview' name='target' value='_top'/> <table cellpadding='0' cellspacing='0' class='gsc-search-box'> <tbody> <tr> <td class='gsc-input'> <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='search' type='text'/> </td> <td class='gsc-search-button'> <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/> </td> </tr> </tbody> </table> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='PageList'> <b:includable id='main'> <!-- Add-on HTag V2 --> <!-- <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> --> <b:if cond='not data:view.isSingleItem'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> </b:if> <div class='widget-content'> <b:if cond='data:mobile'> <select expr:id='data:widget.instanceId + "_select"'> <b:if cond='data:showPlaceholder'> <option disabled='disabled' hidden='hidden' value=''> <b:attr cond='!data:hasCurrentPage' name='selected' value='selected'/> <b:message name='messages.moveToPage'/> </option> </b:if> <b:loop values='data:links' var='link'> <option expr:value='data:link.href'> <b:attr cond='data:link.isCurrentPage' name='selected' value='selected'/> <data:link.title/> </option> </b:loop> </select> <span class='pagelist-arrow'>&#9660;</span> <b:else/> <ul> <b:loop values='data:links' var='link'> <li> <b:class cond='data:link.isCurrentPage' name='selected'/> <a expr:href='data:link.href'><data:link.title/></a> </li> </b:loop> </ul> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='Blog'> <b:includable id='main' var='top'> <!-- Add-on HTag V2 --> <b:if cond='not data:view.isSingleItem'><h2 style='display:none;'><data:messages.latestPosts/></h2><p style='display:none;'/></b:if> <b:if cond='!data:mobile'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.isDateStart and not data:post.isFirstPost'> </div></div> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <!-- Add-on HTag V2 --> <!-- <h2 class='date-header'><span><data:post.dateHeader/></span></h2> --> <div class='h2 date-header'><span><data:post.dateHeader/></span></div> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if> <div class='post-outer'> <b:include data='post' name='post'/> <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/> </div> <!-- Ad --> <b:if cond='data:post.includeAd'> <div class='inline-ad'> <data:adCode/> </div> </b:if> </b:loop> <b:if cond='data:numPosts != 0'> </div></div> </b:if> </div> <!-- navigation --> <b:include name='nextprev'/> <!-- feed links --> <b:include name='feedLinks'/> <b:else/> <b:include name='mobile-main'/> </b:if> </b:includable> <b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'> <!-- Add-on HTag V2 --> <!-- <h4 id='comment-post-message'> <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4> --> <h2 class='h4' id='comment-post-message'> <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h2> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/> <b:else/> <!-- Add-on HTag V2 --> <!-- <h4 id='comment-post-message'><data:postCommentMsg/></h4> --> <h2 class='h4' id='comment-post-message'><data:postCommentMsg/></h2> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/> </b:if> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>'); </script> </div> </b:includable> <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <!-- Add-on HTag V2 --> <!-- <h4><data:post.commentLabelFull/>:</h4> --> <h2 class='h4'><data:post.commentLabelFull/>:</h2> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <b:if cond='data:post.hasOlderLinks'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>   <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>   </b:if> <data:post.commentRangeText/> <b:if cond='data:post.hasNewerLinks'>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </b:if> </span> </b:if> <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> </div> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a>   <data:post.commentRangeText/>   <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:elseif cond='data:post.allowComments'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> </div> </b:includable> <b:includable id='mobile-index-post' var='post'> <div class='mobile-date-outer date-outer'> <b:if cond='data:post.dateHeader'> <div class='date-header'> <span><data:post.dateHeader/></span> </div> </b:if> <div class='mobile-post-outer'> <a expr:href='data:post.url'> <!-- Add-on HTag V2 --> <b:if cond='data:view.isSingleItem'> <h1 class='h3 mobile-index-title entry-title' itemprop='name'> <data:post.title/> </h1> <b:else/> <h3 class='mobile-index-title entry-title' itemprop='name'> <data:post.title/> </h3> </b:if> <div class='mobile-index-arrow'>&rsaquo;</div> <div class='mobile-index-contents'> <b:if cond='data:post.thumbnailUrl'> <div class='mobile-index-thumbnail'> <div class='Image'> <img expr:src='data:post.thumbnailUrl'/> </div> </div> </b:if> <div class='post-body'> <b:if cond='data:post.snippet'><data:post.snippet/></b:if> </div> </div> <div style='clear: both;'/> </a> <div class='mobile-index-comment'> <b:include cond='data:blog.pageType != "static_page" and data:post.allowComments and data:post.numComments != 0' data='post' name='comment_count_picker'/> </div> </div> </div> </b:includable> <b:includable id='mobile-post' var='post'> <div class='date-outer'> <b:if cond='data:post.dateHeader'> <!-- Add-on HTag V2 --> <!-- <h2 class='date-header'><span><data:post.dateHeader/></span></h2> --> <div class='h2 date-header'><span><data:post.dateHeader/></span></div> </b:if> <div class='date-posts'> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.thumbnailUrl'> <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <!-- Add-on HTag V2 --> <b:if cond='data:view.isSingleItem'> <h1 class='h3 post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:elseif cond='data:post.url and data:blog.url != data:post.url'/> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h1> <b:else/> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:elseif cond='data:post.url and data:blog.url != data:post.url'/> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> </b:if> <div class='post-header'> <div class='post-header-line-1'/> </div> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/> </span> </div> <div class='post-footer-line post-footer-line-2'> <b:if cond='data:top.showMobileShare'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <a href='javascript:void(0);'><data:shareMsg/></a> </div> </b:if> </div> </div> </div> <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/> </div> </div> </div> </b:includable> <b:includable id='post' var='post'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.firstImageUrl'> <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <!-- Add-on HTag V2 --> <b:if cond='data:view.isSingleItem'> <h1 class='h3 post-title entry-title' itemprop='name'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h1> <b:else/> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> </b:if> <div class='post-header'> <div class='post-header-line-1'/> </div> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> <!-- share buttons --> <div class='post-share-buttons goog-inline-block'> <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:top.showPostLabels and data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if> </b:loop> </b:if> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> <b:if cond='data:top.showLocation and data:post.location'> <data:postLocationLabel/> <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a> </b:if> </span> </div> <b:if cond='data:post.authorAboutMe'> <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <b:if cond='data:post.authorPhoto.url'> <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/> </b:if> <div> <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </div> <span itemprop='description'><data:post.authorAboutMe/></span> </div> </b:if> </div> </div> </b:includable> <b:includable id='threaded_comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <!-- Add-on HTag V2 --> <!-- <h4><data:post.commentLabelFull/>:</h4> --> <h2 class='h4'><data:post.commentLabelFull/>:</h2> <div class='comments-content'> <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> </div> </div> </div> </b:includable> </b:defaultmarkup> <!-- Add-on HTag V2 FIN -->
- Enregistrez le thème.
- Rétablissez les gadgets Header, BlogSearch, PageList et Blog.
- Enregistrez à nouveau le thème.
- Testez votre blog sans attendre.
- En cas d'anomalie faites une restauration.
Comment tester l'Add-on HTag V2
La première vérification est votre évaluation visuelle de l'apparence de votre blog. Normalement, l'Add-on HTag n'engendre que de très faibles modifications de style.
Ensuite, il faut vérifier que le balisage HN a bien été corrigé. De nombreux sites proposent de tester le balisage HN de pages web. Personnellement, j'utilise l'outil simple et gratuit fourni par Mehdi Cholat dont la plupart des copies d'écran dans cet article sont issues.
Conclusion
L'utilisation correcte des balises HN est essentielle pour améliorer l'accessibilité et le référencement de votre blog. En suivant les règles élémentaires et en corrigeant les erreurs courantes, vous pouvez (et devez !) structurer votre contenu de manière logique et efficace.
L'Add-on HTag V2 offre aux utilisateurs de Blogger une solution pratique, permettant de surmonter les erreurs natives de la plateforme. Avec ou sans, n'hésitez pas à laisser en commentaire vos retours d'expérience, merci !
Installation pas à pas : introduction des inclusions
Il est très difficile de fournir une procédure pas à pas exhaustive. En effet, l'Add-on HTag V2 s'introduit à 16 endroits différents dans le code XML de Blogger, de quoi écrire un livre !
Le mieux est de vous donner une méthode avec un exemple, en insistant sur le fait que vous devez être en mesure de repérer et comprendre les codes XML que vous allez modifier et introduire. L'exemple porte sur la toute première introduction, une des plus simples, qui concerne le gadget Header1.
- Après avoir fait une sauvegarde de votre thème et procédé aux modifications du CSS (chapitre Ajouts au CSS pour installations 'standard' et 'pas à pas'), copiez le code XML fourni dans la procédure standard dans un éditeur de texte quelconque (Bloc-notes par exemple).
- Dans cet éditeur, placez vous tout en haut du code, et faites une recherche de <!-- Add-on HTag V2 --> . Vous allez voir la partie de code ci-dessous qui vous permet de comprendre que la modification touche le gadget 'Header1' grâce à la ligne <b:defaultmarkup type='Header'>, et qu'elle concerne l'inclusion 'main' de ce gadget grâce à la ligne <b:includable id='main'> :
- Dans l'éditeur HTML de Blogger, vous allez vous placer sur le gadget 'Header1' et repérer son inclusion 'main' puisque c'est elle la cible. La chance de cet exemple est que c'est la toute première ! Vous devriez voir le code ci-dessous, s'il n'a pas déjà été modifié :
- Par comparaison, vous pourrez alors repérer la partie de code que l'Add-on HTag doit remplacer. En général et lorsqu'il n'était pas trop long, j'ai gardé dans le code fourni cette partie à remplacer en commentaires, afin d'en garder une trace et mieux se repérer.Si le code d'origine semble inchangé, vous pourrez procéder à l'introduction sans problème, ce qui va donner ça :
- Par contre si le code d'origine a déjà été modifié, vous allez devoir imaginer une façon d'introduire l'Add-on HTag en ménageant la chèvre et le choux...
- La suite consiste à faire la même chose avec les 15 autres occurrences de <!-- Add-on HTag V2 --> . Sachez qu'il faut parfois remonter très haut dans le code fourni pour connaître le gadget et l'inclusion concernés, qu'au contraire une inclusion peut être située très bas dans le code d'origine du gadget, et enfin qu'une même inclusion peut être impactée plusieurs fois (c'est par exemple le cas de l'inclusion 'main' de 'Header1' qui est modifiée 3 fois).
- Une fois les 16 introductions réalisées, enregistrez le thème et testez sans attendre.
- En cas de problème faites une restauration. Malgré ces difficultés, je pense que ça vaut le coup d'essayer. Bonne chance et bon courage !
Commentaires