Guide 2026 : Ajouter une Boîte d'Auteur (Author Box) sur Blogger pour booster l'E-E-A-T

 

Bonjour à tous, c'est Lucas Martin. Si vous suivez les tutoriels de Cash Astuce, vous savez que nous construisons une forteresse technique. Mais aujourd'hui, nous allons parler d'un critère SEO purement humain : la confiance. Comment prouver à Google et à vos lecteurs que vous êtes un expert digne de confiance ?

La réponse se trouve dans l'acronyme E-E-A-T de Google (Expérience, Expertise, Autorité, Fiabilité). Pour satisfaire ce critère algorithmique, l'identité de l'auteur doit être claire. C'est ici qu'intervient l'Author Box (Boîte d'auteur) : un encart professionnel situé à la fin de vos articles, présentant votre photo, votre biographie et vos liens sociaux.

Dans ce tutoriel, je vous fournis le code HTML et CSS pour intégrer une boîte d'auteur moderne, responsive, et nativement compatible avec le Dark Mode sur Blogger.

Pourquoi l'Author Box est vitale pour le SEO en 2026 ?

Les récentes mises à jour de Google pénalisent le contenu anonyme ou généré en masse. Ajouter une boîte d'auteur apporte :

• Un visage sur une expertise : Augmente le temps de lecture car l'utilisateur fait confiance au rédacteur.
• Validation E-E-A-T : Les liens vers vos profils LinkedIn ou GitHub professionnels confirment votre légitimité aux yeux des Quality Raters de Google.
• Fidélisation de l'audience : Les visiteurs sont plus enclins à vous suivre sur vos réseaux s'ils sont accessibles en un clic à la fin d'un bon tutoriel.

Tutoriel : Intégration du Code (HTML & CSS)

L'intégration se fait en deux étapes dans le code source de votre thème. Faites toujours une sauvegarde préalable de votre thème (Thème > Sauvegarder).

Étape 1 : Le Design (Code CSS)

Allez dans Thème > Modifier le code HTML. Cherchez la balise <b:skin><![CDATA[ ou votre zone CSS, et ajoutez ce code pour styliser la boîte :

/* Design Author Box - Cash Astuce */
.ca-author-box {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 12px;
  margin: 40px 0;
  border-left: 5px solid #0056b3;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.ca-author-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ca-author-info h3 {
  margin: 0 0 8px 0;
  font-size: 22px;
  color: #222222;
}
.ca-author-info p {
  margin: 0;
  font-size: 15px;
  color: #555555;
  line-height: 1.6;
}
.ca-author-social {
  margin-top: 12px;
}
.ca-author-social a {
  text-decoration: none;
  font-size: 18px;
  margin-right: 15px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.ca-author-social a:hover {
  transform: translateY(-3px);
}

/* Compatibilité Dark Mode (Variables) */
[data-theme="dark"] .ca-author-box {
  background-color: #1e1e1e;
  border-left-color: #4da3ff;
}
[data-theme="dark"] .ca-author-info h3 { color: #e0e0e0; }
[data-theme="dark"] .ca-author-info p { color: #aaaaaa; }

/* Responsive Mobile */
@media(max-width: 600px) {
  .ca-author-box {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .ca-author-img {
    margin: 0 0 15px 0;
  }
}

Étape 2 : La Structure (Code HTML)

Toujours dans l'éditeur HTML, cherchez la balise <data:post.body/>. (Il y en a souvent plusieurs, choisissez celle qui gère l'affichage des articles, généralement la 2ème ou 3ème). Juste en dessous de cette balise, collez le code suivant :

<!-- Author Box HTML par Cash Astuce -->
<b:if cond='data:view.isPost'>
  <div class='ca-author-box'>
    <img alt='Lucas Martin' class='ca-author-img' src='URL_DE_VOTRE_PHOTO_ICI'/>
    <div class='ca-author-info'>
      <h3 class='ca-author-name'>Lucas Martin</h3>
      <p class='ca-author-bio'>Passionné par le développement web, la programmation et le SEO technique. Je partage sur Cash Astuce des tutoriels exclusifs pour optimiser votre blog et dominer les résultats de recherche.</p>
      <div class='ca-author-social'>
        <a aria-label='LinkedIn' href='LIEN_LINKEDIN' target='_blank'>💼</a>
        <a aria-label='Twitter' href='LIEN_TWITTER' target='_blank'>🐦</a>
        <a aria-label='GitHub' href='LIEN_GITHUB' target='_blank'>💻</a>
      </div>
    </div>
  </div>
</b:if>

Note : Remplacez URL_DE_VOTRE_PHOTO_ICI par le lien de votre photo de profil, et les liens sociaux par vos propres URLs. La condition <b:if cond='data:view.isPost'> s'assure que la boîte ne s'affiche que sur les articles, pas sur la page d'accueil !

Conclusion et architecture du site

Afficher qui vous êtes est un signal fort de qualité. Votre blog technique devient ainsi une marque personnelle fiable.

Pour parfaire votre interface, n'oubliez pas que cette boîte d'auteur a été conçue pour s'adapter automatiquement au Mode Sombre (Dark Mode) JavaScript que nous avons développé précédemment. De plus, une identité forte empêche les visiteurs de fuir votre site, tout comme une Page 404 personnalisée bien configurée évite les impasses lors de la navigation.

Avez-vous réussi à intégrer votre photo et vos liens ? N'hésitez pas à demander de l'aide dans les commentaires !