Installation de l'add-on SEO pour les méta balises web des thèmes Blogger
Je vous propose d'améliorer immédiatement l'affichage de votre blog sur les réseaux sociaux et son référencement en installant l'add-on SEO, compatible avec toutes les versions des thèmes Blogger, y compris les thèmes déjà modifiés.
Pour mieux vous rendre compte de l'efficacité de l'add-on SEO, prenez le temps de lire l'article qui la démontre.
Important : malgré les nombreux tests réalisés dans diverses situations, aucune garantie de succès ni dans l'installation ni dans les résultats ne peut être donnée. Il est indispensable de faire une sauvegarde de votre thème avant de procéder à l'installation de l'add-on SEO afin de vous assurer un retour en arrière simple et sécurisé.
Pour plus d'informations techniques, voyez aussi plus bas le chapitre 'Explications techniques du fonctionnement de l'add-on SEO'.
Installation de l'add-on SEO pour les thèmes toutes versions
1. Faites une sauvegarde
2. Ajout des variables de l'add-on SEO
Dans le code html de votre thème Blogger recherchez le terme Variable definitions et juste au-dessous, copiez collez et complétez les variables suivantes :
<!-- Variables supplémentaires de l'add-on SEO --> <Variable name="BrandingImage" description="Url image du blog" type="automatic" default=""/> <Variable name="PageAbout" description="Url page de profil" type="automatic" default=""/> <Variable name="TwitterId" description="Identifiant Twitter" type="automatic" default=""/>
Exemple :
<!-- Variables supplémentaires de l'add-on SEO -->
<Variable name="BrandingImage" description="Url image du blog" type="automatic" default="https://blogger.googleusercontent.com/img/Blogger-etre-mieux-vu-grace-aux-balises-opengraph.webP"/>
<Variable name="PageAbout" description="Url page de profil" type="automatic" default="https://blogger-optimisation-seo.blogspot.com/p/about.html"/>
<Variable name="TwitterId" description="Identifiant Twitter" type="automatic" default="@SEOBlogger"/>
Note : l'absence ou le non remplissage de ces variables n'empêche pas le fonctionnement de l'add-on SEO, mais le bon renseignement de certaines méta balises web. L'absence d'une image de qualité dans BrandingImage va nuire à la visualisation de vos partages sur les réseaux sociaux de vos pages d'accueil et de recherche.
3. Ajout éventuel des balises <b:defaultmarkups> (avec un s)
Ce balisage est indispensable pour la suite de l'installation. Recherchez le terme <b:defaultmarkups>. Si ce terme n'existe pas (c'est en général le cas des thèmes de version 1 non modifiés), ajoutez les 2 lignes suivantes juste après la balise d'ouverture <head>
<b:defaultmarkups> </b:defaultmarkups>
4. Intégration du code principal de l'add-on SEO
Juste après la balise d'ouverture <b:defaultmarkups> (avec un s), copiez et collez le code ci-dessous
<!-- Inclusions communes de l'add-on SEO --> <b:defaultmarkup type='Common'> <b:includable id='openGraphMetaData'> <b:comment render='false'> <!-- openGraphMetaData est une inclusion commune systématiquement activée par Blogger coté serveur dès le head. Modifiée ici pour l'ajout pour les pages d'accueil et de recherche des Twitter Card et des balises OpenGraph. Le reste concernant les pages uniques ne peut être fourni que par le widget Blog par l'inclusion postMetadataJSON --> </b:comment> <b:comment render='false'> <!-- Si l'image du blog n'existe pas ou n'a pas été définie, on prend le favicon --> </b:comment> <b:with value='data:skin.vars.BrandingImage ? data:skin.vars.BrandingImage : data:blog.blogspotFaviconUrl' var='BlogImage1'> <!-- Web Tags by https://blogger-optimisation-seo.blogspot.com/ --> <!-- OpenGraph --> <b:if cond='data:blog.pageType == "index"'> <meta content='website' property='og:type'/> <b:else/> <meta content='article' property='og:type'/> </b:if> <meta expr:content='data:blog.url.canonical' property='og:url'/> <meta expr:content='data:view.title.escaped' property='og:title'/> <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/> <b:if cond='data:view.featuredImage'> <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/> <b:else/> <meta expr:content='resizeImage(data:BlogImage1, 300, "300:300")' property='og:image'/> </b:if> <b:if cond='data:blog.pageType == "index"'> <b:comment render='false'> <!-- Twitter Cards: Seulement si c'est une page d'accueil ou de recherche. Les pages uniques sont traitées au niveau du widget Blog --> </b:comment> <!-- X Card (ex Twitter Card) --> <meta content='summary' name='twitter:card'/> <b:if cond='data:skin.vars.TwitterId'> <meta expr:content='data:skin.vars.TwitterId' name='twitter:site'/> <b:else/> <meta content='' name='twitter:site'/> </b:if> <meta expr:content='data:blog.pageTitle.escaped' name='twitter:title'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/> </b:if> <meta expr:content='data:BlogImage1 + "?4362984378"' name='twitter:image'/> </b:if> <b:comment render='false'> <!-- On donne systématiquement le schema.org du blog --> </b:comment> <!-- Schema.org Website --> <script type='application/ld+json'> { "@context": "https://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl.canonical/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl.canonical/>search?q={search_term_string}", "query-input": "required name=search_term_string" }, "thumbnailUrl": "<data:BlogImage1/>" } </script> </b:with> </b:includable> <b:includable id='postMetadataJSON'> <b:comment render='false'> <!-- Inclusion permettant, seulement pour les pages uniques, de fournir les Twitter Cards vidéo, de compléter le Schema.org avec article systématiquement et éventuellement vidéo ou image selon le type --> </b:comment> <b:with value='data:skin.vars.BrandingImage ? data:skin.vars.BrandingImage : data:blog.blogspotFaviconUrl' var='BlogImage1'> <b:with value='data:skin.vars.PageAbout ? data:skin.vars.PageAbout : data:blog.homepageUrl.canonical' var='PageProfil'> <b:comment render='false'> <!-- Traduction des variables des gadgets version 2 vers version 1 pour assurer la compatibité dans les 2 versions --> </b:comment> <b:with value='data:post.featuredImage ? data:post.featuredImage : data:post.firstImageUrl' var='UrlImage'> <b:with value='data:post.author.name ? data:post.author.name : data:post.author' var='AuthorName'> <b:with value='data:post.lastUpdated.iso8601 ? data:post.lastUpdated.iso8601 : data:post.lastUpdatedISO8601' var='UpdatedDate'> <b:if cond='data:blog.pageType == "item"'> <b:comment render='true'> Web Tags by https://blogger-optimisation-seo.blogspot.com/ </b:comment> <b:comment render='true'> X Card (ex Twitter Card) </b:comment> <b:if cond='data:post.body contains "VideoObject"'> <meta content='player' name='twitter:card'/> <b:if cond='data:skin.vars.TwitterId'> <meta expr:content='data:skin.vars.TwitterId' name='twitter:site'/> <b:else/> <meta content='' name='twitter:site'/> </b:if> <meta expr:content='data:post.title.escaped' name='twitter:title'/> <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/> <b:if cond='data:UrlImage'> <meta expr:content='data:UrlImage + "?4362984378"' name='twitter:image'/> <b:else/> <meta expr:content='data:BlogImage1 + "?4362984378"' name='twitter:image'/> </b:if> <meta expr:content='data:post.url.canonical' name='twitter:player'/> <meta content='480' name='twitter:player:width'/> <meta content='480' name='twitter:player:height'/> <b:else/> <meta content='summary_large_image' name='twitter:card'/> <b:if cond='data:skin.vars.TwitterId'> <meta expr:content='data:skin.vars.TwitterId' name='twitter:site'/> <b:else/> <meta content='' name='twitter:site'/> </b:if> <meta expr:content='data:post.title.escaped' name='twitter:title'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/> </b:if> <b:if cond='data:UrlImage'> <meta expr:content='data:UrlImage + "?4362984378"' name='twitter:image'/> <b:else/> <meta expr:content='data:BlogImage1 + "?4362984378"' name='twitter:image'/> </b:if> </b:if> <b:comment render='true'> Schema.org WebPage </b:comment> <script type='application/ld+json'> { "@context": "https://schema.org", "@type": "BlogPosting", "mainEntityOfPage": { "@type": "WebPage", "@id": "<data:post.url.canonical/>"}, "headline": "<data:post.title.jsonEscaped/>", "description": "<data:blog.metaDescription.jsonEscaped/>", "image": { "@type": "ImageObject", "url": "<data:UrlImage/>"}, "publisher": { "@type": "Organization", "name": "Blogger", "logo": { "@type": "ImageObject", "url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/", "width": 206, "height": 60}}, "author": { "@type": "Person", "name": "<data:AuthorName.jsonEscaped/>", "url": "<data:PageProfil/>"}, "datePublished": "<data:post.date.iso8601 iso8601='true'/>", "dateModified": "<data:UpdatedDate iso8601='true'/>" } </script> <b:if cond='data:post.body not contains "noschemaorg"'> <b:if cond='data:post.body contains "VideoObject"'> <b:comment render='true'> Schema.org VideoObject </b:comment> <script type='application/ld+json'> { "@context": "https://schema.org", "@type": "VideoObject", "@id": "#videoObject", "name": "<data:post.title.jsonEscaped/>", "description": "<data:blog.metaDescription.jsonEscaped/>", "thumbnailUrl": "<data:UrlImage/>", "publisher": { "@type": "Person", "name": "<data:blog.title.jsonEscaped/>" } } </script> </b:if> <b:if cond='data:post.body contains "ImageObject"'> <b:comment render='true'> Schema.org ImageObject </b:comment> <script type='application/ld+json'> { "@context": "https://schema.org/", "@type": "ImageObject", "@id": "#imageObject", "contentUrl": "<data:UrlImage/>", "name": "<data:post.title.jsonEscaped/>", "headline": "<data:post.title.jsonEscaped/>", "description": "<data:blog.metaDescription.jsonEscaped/>", "license": "<data:blog.homepageUrl.canonical/>", "acquireLicensePage": "<data:post.url.canonical/>" } </script> </b:if> </b:if> </b:if> </b:with> </b:with> </b:with> </b:with> </b:with> </b:includable> </b:defaultmarkup> <!-- Fin des inclusions communes de l'add-on SEO -->
5. Ajout éventuel de l'appel à postMetadataJSON
Faites une recherche du terme name='postMetadataJSON'.
- S'il apparaît, vous n'avez rien de plus à faire à cette étape.
- S'il n'apparaît pas, ce qui est normalement le cas des gadgets version 1, ajoutez le code ci-dessous au tout début de l'inclusion 'main' du gadget Blog1. Pour ça, positionnez-vous sur le gadget Blog1, et collez le code juste après la ligne <b:includable id='main' var='top'>
<b:comment render='false'> <!-- Add-on SEO meta données web spécifiques à l'article --> </b:comment> <b:loop values='data:posts' var='post'> <b:include name='postMetadataJSON'/> </b:loop>
6. Enregistrez le thème mis à jour et passez immédiatement aux vérifications.
Vérifications après l'installation de l'add-on SEO
- Affichez votre blog et naviguez dedans afin de repérer des anomalies visuelles.
- Affichez une page de votre blog et dans son code source recherchez le terme <!-- Web Tags qui doivent apparaître 1 fois si c'est la page d'accueil, 2 fois si c'est un article. Vérifiez les 2 cas.Si c'est dans vos compétences, consultez le contenu des méta balises OpenGraph, Shema.org et Twitter Card.
- Pour des vérifications plus fines, utilisez les outils de diagnostic tiers mentionnés dans cet article.
En cas d'anomalie, dysfonctionnement visuel du blog, absence du bon nombre des termes "Web Tags" dans le code source des pages, faites une restauration.
Explications techniques du fonctionnement de l'add-on SEO
L'add-on SEO contient 2 inclusions dites 'communes', c'est à dire appelables dans l'ensemble du thème Blogger.
- openGraphMetaDataC'est une inclusion native de Blogger appelée systématiquement par le serveur Blogger dès l'en-tête de page, dans toutes les versions des thèmes. Elle est chargée de fournir les balises OpenGraph.En la redéfinissant dans les inclusions communes du thème Blogger, l'add-on SEO prend le dessus, ce qui lui permet de mieux définir ces balises (Voir le chapitre 'Fonctionnalités de l'add-on SEO' de l'article 'Add-on SEO pour tous les thèmes Blogger : une efficacité démontrée')Il y ajoute aussi les Twitter Cards des pages d'accueil et de recherche.
- postMetadataJSONC'est elle aussi une inclusion native de Blogger, mais uniquement disponible dans les versions 2 où elle est systématiquement appelée par le gadget Blog1. Elle est chargée de fournir les données structurées Schema.org des articles (données enrichies).Là encore, en la redéfinissant dans les inclusions communes, l'add-on SEO prend le dessus, lui permettant de mieux définir les données structurées Schema.org en s'adaptant aux particularités des pages vidéos et images, ainsi que les Twitter Cards correspondantes, à condition que celles-ci soient correctement renseignées (Voir le chapitre 'Gestion des pages vidéo ou image pour leur prise en charge par l'add-on SEO').Sa présence dans les inclusions 'communes' permet de la créer pour les versions 1 de Blogger mais pas de l'appeler automatiquement comme c'est le cas des versions 2. C'est la raison pour laquelle, pour les gadgets Blog1 de version 1, il est nécessaire d'ajouter manuellement son appel dans l'inclusion 'main' qui, elle, est appelée systématiquement.
Remerciements
Rien de tout ça n'aurait été possible sans la fabuleuse documentation de Soraya Lambrechts.
Commentaires