Aujourd'hui nous allons parler balises meta !
N'ayez pas peur de son nom barbare, les balises meta (ou meta tags en anglais), sont des bouts de code qui vont améliorer la recherche de votre blog dans les moteurs de recherche.
Mais pas que ! Ils vont aussi permettre d'avoir un joli aperçu d'article sur Facebook par exemple ;)
Allez c'est parti pour les explications !
Sommaire
- Petite introduction
- Faire une sauvegarde de son blog
- Où coller les codes
- Les codes des balises meta de base
Petite introduction
Les balises meta, comme je vous l'ai expliqué, sont des bouts de code qui vont aider la recherche de votre blog et de vos articles sur les moteurs de recherche. Mais comment ?Ces codes vont définir un titre, une image, une description pour chaque page et article de votre blog. Ainsi, en partageant un article sur les réseaux sociaux, ces éléments seront automatiquement générés.
Je vous présente ici seulement quelques balises meta et Open Graph, mais la liste est longue, il en existe bien d'autres ! Mais ceci vous sera utile pour débuter ;)
Faire une sauvegarde de son thème
Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.
Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.
>> Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)
Où coller les codes
Cliquez maintenant sur Modifier le code HTML :
Cliquez n'importe où dans la boîte de code, puis appuyez sur Ctrl et F en même temps.
Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code collez :
<title><data:blog.pageTitle/></title>Nous allons remplacer cette ligne par les codes des balises meta ci-dessous.
Les codes des balises meta de base
Titre de la page
Voici le code pour définir le titre de la page :<!-- Titre -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' property='og:title'/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<title><data:blog.pageTitle/></title>
</b:if>
<title><data:blog.pageTitle/></title>
Que signifie ce code ?
La première partie défini le titre de la page si cette page n'est pas la page principale (page d'accueil).Dans cet exemple le titre s'affichera comme ceci :
Nom de la page (ou de l'article) - Titre du blogTitre du blogA quoi correspondent ces titres ?
Le titre du blog est le nom que vous avez donné à votre blog. Vous pouvez le modifier dans Paramètres > Basique, à la ligne Titre :
Le nom de la page est le titre de l'article ou de la page sur la quelle vous vous trouvez.
Description de la page
Voici le code pour définir la description de la page :<!-- Description -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='Entrez une description ici' property='og:description'/>
</b:if>
Que signifie ce code ?
La première partie du code défini la description de la page comme étant celle que vous avez défini en créant votre article ou votre page. Si vous n'avez pas défini de description à votre article ou votre page, alors la description utilisée sera celle que vous avez défini avec le titre de votre blog.La 2e partie du code est une description de secours au cas où vous n'avez pas ajouté de description à votre article, votre page ou votre blog. Elle peut aussi être utilisée au cas où ces descriptions ne chargent pas.
Remplacez Entrez une description ici par votre description de secours.
Comment modifier les autres descriptions ?
Tout d'abord vous devez activer les descriptions. Allez dans Paramètres, puis cliquez sur Préférences de recherche. A la ligne Description sous Balises Meta, cliquez sur Modifier :
Cochez Oui et entrez une description générale pour votre blog. Cliquez sur Enregistrer les modifications quand vous avez fini :
Pour ajouter une description à votre article, allez sur la page de création / modification de votre article. Dans les paramètres des articles à droite de l'écran, cliquez sur Description pour la recherche. Entrez ici la description de votre article et cliquez sur OK, puis n'oubliez pas de mettre à jour votre article ;)
Vous retrouverez le même onglet sur la page de création / modification de vos pages ;)
Image de la page
Voici le code pour définir l'image principale de la page :<!-- Image -->
<b:if cond='data:blog.postImageUrl != ""'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL de votre image de secours' property='og:image'/>
</b:if>
Que signifie ce code ?
La première partie du code défini l'image principale comme étant la première image de votre article ou page s'li y en a une.La 2e partie du code définit une image principale de secours, au cas où il n'y ai pas de première image.
Remplacez URL de votre image de secours par l'adresse URL d'une image de secours.
>> Vous pouvez ajouter cette image à Blogger pour générer une adresse URL. Suivez les instructions ici ;)
Type de contenu de la page
Voici le code pour définir le type de page :<!-- Type -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type' />
<b:else/>
<meta content='website' property='og:type'/>
</b:if>Que signifie ce code ?
Ce code informe simplement que les pages de vos articles sont des articles. Et que le reste de votre blog est un site web.URL canonique
Voici le code pour définir l'URL canonique de votre blog :<!-- URL Canonique -->
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>Que signifie ce code ?
Ce code permet de définir l'adresse URL officielle de vos pages. Pourquoi est-ce important ? Pour éviter d'afficher des duplicata de contenu sur les moteurs de recherche.Quand on créé un blog sur Blogger, différentes extensions lui sont attribué par défaut : .fr .com etc.
Or pour les moteurs de recherche une adresse URL = une page web. En d'autres termes, votre page d'accueil en .fr est considéré comme une page différente de cette page en .com.
Pour éviter ceci, on définit donc une URL officielle pour les moteurs de recherche.
Indexation des pages annexes
Voici le code pour définir l'indexation des pages annexes de votre blog :<!-- Indexation des pages annexes -->
<b:if cond='data:blog.pageType == "archive"'>
<!-- Archives -->
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<!-- Page d'erreur -->
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- Page d'accueil -->
<meta content='index,follow' name='robots'/>
<b:else/>
<!-- Pages d'indexes (recherche et libellés) -->
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:else/>
<!-- Autres pages du blog -->
<meta content='index,follow' name='robots'/>
</b:if>
</b:if>
</b:if>
Que signifie ce code ?
Ce code va dire aux moteurs de recherche s'il doit prendre en compte ou non les pages annexes de votre blog. Par pages annexes j'entends les pages de recherche de libellés, d'archives, de recherche de mot clé, et page d'erreur.Dans cet exemple voici comment cont définit les instructions pour les différentes pages :
- Archives : Ne pas afficher dans la recherche Google et ne pas suivre les liens de cette page
- Page d'erreur : Ne pas afficher dans la recherche Google et ne pas suivre les liens de cette page
- Page d'accueil : Afficher dans la recherche Google et suivre les liens de cette page
- Pages d'indexes (Recherche de libellé ou mot clé) : Ne pas afficher dans la recherche Google et ne pas suivre les liens de cette page
- Autres pages du blog : Afficher dans la recherche Google et suivre les liens de cette page
Comment sont définit ces instructions ? Avec les mots suivants :
- index = Afficher dans la recherche Google
- follow = Ne pas suivre les liens de cette page
- noindex = Ne pas afficher dans la recherche Google
- nofollow = Suivre les liens de cette page
J'espère que cet article vous à bien été utile ;)
Comme expliqué, je vous ai présenté une petite sélection de codes. La liste est longue !
Si vous voulez en savoir plus sur les balises meta et Open Graph, voici quelque sites intéressants :
