Tu as peaufiné ton contenu, soigné le design et tu es prêt à lancer ta newsletter (Brevo pour moi). Mais ça ne suffit pas ! As-tu pensé aux réglages SPF, DKIM, DMARC indispensables pour que ton beau travail arrive bien dans la boîte des destinataires ?
Dans le monde numérique actuel, envoyer un email ne suffit plus : il faut prouver que tu es bien l’expéditeur légitime. SPF, DKIM, DMARC : derrière ces acronymes techniques se joue la réputation de ton domaine. Sans eux, tes emails sont comme des lettres sans adresse de retour envoyées avec une fausse signature : les filtres de Gmail et Outlook les bloqueront immédiatement.
Cet article explique simplement pourquoi ces réglages sont cruciaux pour votre performance et comment les mettre en place pour garantir que vos messages arrivent bien dans la boîte de réception principale, et non dans les indésirables.
Étape 1 : Récupérer les clés chez Brevo
J’ai écrit cet article alors que je créai une nouvelle newsletter, chez Brevo (en mode gratuit). Je décris donc ici le moyen d’obtenir les informations chez Brevo.
Dans ton compte Brevo, va dans le menu (paramètres, en haut à droite) > Expéditeurs et IP.
Cliquer sur Domaines > Ajouter un domaine. Entrer le nom du domaine (parcours-performance.com pour moi) et valide.
Ensuite choisis de faire à la main. Je ne veux pas laisser la main à un automate dans mon compte OVH…
On arrive alors sur une page qui contient tous les réglages à faire. Garde la ouverte dans un onglet.
Dans un autre onglet, va dans les réglages « zone DNS » de ton nom de domaine (chez OVH pour moi).
Etape 2 configurer le DKIM
C’est ce qui permet de signer numériquement tes mails. Brevo dit « DKIM (DomainKeys Identified Mail) vous permet de signer vos emails avec votre propre domaine, de la même manière que vous signez une lettre. »
Toujours dans la Zone DNS d’OVH, clique sur le bouton Ajouter une entrée.
Crée deux champs de type CNAME
Enregistrement DKIM 1
CNAME
brevo1._domainkey
b1.parcours-performance-com.dkim.brevo.com
Enregistrement DKIM 2
CNAME
brevo2._domainkey
b2.parcours-performance-com.dkim.brevo.com
Etape 3 configurer le DMARC
Brevo dit « DMARC (Domain-based Message Authentication, Reporting, and Conformance) est un protocole qui protège votre domaine contre toute utilisation non autorisée, telle que la phishing ou l’usurpation d’identité. Vous pouvez configurer une politique DMARC pour déterminer ce qu’il advient des emails qui échouent aux vérifications d’authentification DMARC. »
Toujours dans la Zone DNS d’OVH, clique sur le bouton Ajouter une entrée.
Crée un champs de type TXT
Enregistrement DMARC
TXT
_dmarc
v=DMARC1; p=none; rua=mailto:rua@dmarc.brevo.com
Etape 4 Configurer le code BREVO
Cet enregistrement sert à indiquer à Brevo que tu est bien propriétaire du domaine.
Toujours dans la Zone DNS d’OVH, clique sur le bouton Ajouter une entrée.
Crée un champs de type TXT
Code Brevo
TXT
brevo-code:afe0eda50XXXXXXXXXXXX29d969c8
Etape 5 configurer le SPF
Attention : Modification, pas création ! C’est l’erreur n°1 : il ne faut jamais avoir deux lignes SPF. j’avais déjà une ligne SPF, je l’ai donc modifiée. pour y inclure Brevo.
Toujours dans la Zone DNS d’OVH, cherche la ligne de type TXT qui ressemble à : v=spf1 include:_spf.google.com ~all
Cliquez sur le crayon (modifier) à droite.
Changez la valeur pour insérer Brevo avant le ~all. La nouvelle ligne doit ressembler à ceci : v=spf1 include:_spf.google.com include:spf.brevo.com ~all
Etape 6 validation finale par Brevo
Dans les éléments de mon domaine sur OVH j’ai modifié le SPF et ajouté les autres éléments comme suit :
Retourne sur la page Brevo ouverte précédemment et clique sur le bouton « Vérifier et Authentifier ».
Si cela reste rouge, attend 10 à 20 minutes (la propagation DNS chez OVH peut prendre un petit délai) et réessaie.
Ca a fonctionné immédiatement pour moi.
Me voici prête à communiquer avec ma base de contacts !
Voici l’image créée par Gemini pour illustrer cet article : SPF, DKIM et DMARC, tout ceci permet de dire aux contrôleurs de spam que mon message est légitime !
Tu as créé une carte interactive mais il manque un truc essentiel : les vraies frontières de la ville ? Pas besoin de dessiner ça à la main (et de façon approximative). Dans ce tuto, on te montre comment récupérer le tracé officiel en Open Data et l’injecter dans ta carte. Démo pratique avec la commune de Plonéour-Lanvern.
Le contexte
Le problème : une carte un peu « floue »
Quand tu crées une carte sur Google My Maps pour un projet, c’est super pour placer des points. Mais si tu veux montrer une zone d’intervention ou un territoire précis, le fond de carte par défaut est un peu léger. On ne sait jamais exactement où s’arrête la commune.
Regarde l’exemple ci-dessous : c’est centré sur la ville, mais ça manque de contexte.
carte Google My Maps standard.
Étape 1 : Va chercher la donnée officielle (c’est gratuit)
On ne va pas s’embêter à tracer des lignes approximatives. On va prendre les données officielles de la région.
J’ai écrit un article contenant des émojis récemment et il était impossible de l’enregistrer. Il y avait un message disant « impossible de mettre à jour la publication dans la base de données ». A force de supprimer des éléments de l’article pour déterminer ce qui bloquait, j’ai compris que mon site, et celui-ci, ne supportaient pas les émojis. J’y ai perdu beaucoup de temps 😠. Alors je documente la solution pour me permettre de la retrouver si nécessaire, et pour aider d’autres internautes si nécessaire.
Pour déterminer la solution, je me suis appuyée sur cet excellent article, dont j’ai validé le processus par un bref echange avec Gemini 2.5 Flash.
Un InterClassement trop ancien !
Comme on le voit dans cette copie d’écran, certaines de mes tables utilisent utf8mb3_general_ci et d’autres utf8mb4_unicode_520_ci. Selon Gemini, « L’interclassement, ou « collation » en anglais, est un ensemble de règles qui définit comment les chaînes de caractères sont triées et comparées dans une base de données. Il détermine l’ordre alphabétique des caractères, la sensibilité à la casse (majuscules/minuscules) et aux accents, ce qui est crucial pour le tri des résultats de recherche ou le filtrage de données. »
Tous les interclassements que j’utilise sont basés sur UTF-8, encodage bien adapté. Mais utf8mb3 n’utilise que 3 octets par caractères et ne convient pas pour certains caractères spéciaux comme les emojis. Et il traite aussi les caractères accentués comme s’ils ne l’étaient pas, ce qui le rend moins précis.
utf8mb4_unicode_ci semble être le standard recommandé actuellement. Il convient à une gamme très large de caractères, y compris les emojis et caractères asiatiques. Il respecte les règles de tri d’Unicode, ce qui le rend bien adapté à la plupart des langues. utf8mb4_unicode_520_ci est encore plus récent.
Quelles solutions ?
Après analyse de l’article et consultation de Gemini, j’ai décidé de procéder en trois étapes :
Etape 1 : sauvegarder la base de données
Ca se fait dans l’interface de l’hébergeur (Infomaniak par exemple) ou avec l’interface phpMyAdmin.
Etape 2 : Modifier wp-config.php
Il vaut mieux en télécharger la version actuelle au cas où avant de le modifier. Dans ce fichier je vois :
define('DB_CHARSET', 'utf8');
Je me modifie en :
define('DB_CHARSET', 'utf8mb4');
Et je vois qu’il n’y a pas besoin de changer la ligne
define('DB_COLLATE', '');
Et je sauvegarde le fichier wp-config.php ainsi modifié.
Etape 3 : migrer la base de données
Je vais migrer l’ensemble de la base de données vers utf8mb4_unicode_ci.
Dans phpMyAdmin, sélectionnez votre base de données.
Cliquez sur l’onglet « Opérations » en haut.
Dans la section « Interclassement », sélectionnez utf8mb4_unicode_ci dans la liste déroulante.
Cochez la case « Changer l’interclassement de toutes les tables » puis la case « Changer les interclassements de toutes les colonnes de toutes les tables »
cliquer sur « Exécuter » :
Une fois l’opération terminée, vous verrez un message de succès.
Notez Que si on clique sur « information schema » ça reste toujours le vieil interclassement ; mais ce schéma ne sert à rien (pour le site lui-même). Donc pas de problème !
Et maintenant ?
Je peux mettre autant d’emojis que je veux dans mes articles. Est-ce que c’est mieux ou pas, je ne sais pas !
GitHub est très bien pour stocker du code dans ses versions successives. J’ai découvert récemment qu’il est aussi très bien pour mettre à disposition le rendu de ce code dans un navigateur, par l’intermédiaire des « pages » GitHub.
Rendons à César…
J’ai fait cette découverte en regardant de près cette publication sur LinkedIn de Lionel Miszka . Il y exposait comment le modèle o3-mini-high de chatGPT lui avait permis de créer un outil pédagogique intéractif sans coder. L’article est très intéressant lorsqu’on s’intéresse à l’IA. Mais il est également intéressant lorsqu’on aime un peu coder et qu’on a envie d’utiliser mieux GitHub. En effet Lionel Miszka a choisi d’héberger son outil pédagogique sur github, ici.
Et pour créer une page j’ai tout simplement demandé à Mistral AI de me dire comment Lionel avait pu faire ça…
Question n°1 : Peux-tu regarder et commenter le dépôt https://github.com/lionelmyszka2/ ?
Question n°2 : Je vois que Lionel Myszka a également des url où ces projets en html sont visibles. Par exemple le projet ‘lentille » est visible sur https://lionelmyszka2.github.io/lentille/. Comment puis-je faire quelque chose de semblable à partir de mon propre compte github ?
Mistral m’a expliqué l’essentiel de ce qui suit !
Si vous n’avez pas de compte GitHub
Créer un dépôt sur GitHub :
Connectez-vous à votre compte GitHub.
Créez un nouveau dépôt (repository) pour votre projet. Vous pouvez le nommer comme vous le souhaitez, par exemple mon-projet.
Ajouter vos fichiers HTML :
Clonez le dépôt sur votre machine locale ou téléchargez-le.
Ajoutez vos fichiers HTML, CSS, JavaScript, et autres ressources nécessaires à votre projet dans le répertoire du dépôt.
Dans mon cas j’avais déjà un compte GitHub, j’ai simplement créé un « fork » du dépôt de Lionel. Il est visible ici : https://github.com/aldelpech/lentille. J’y ai apporté deux modifications mineures :
ajout d’un lien en MarkDown dans le README pour aller plus facilement vers la démo
Ajout du lien vers la démo originelle de Lionel Myszka, pour ne pas le plagier, dans le fichier html.
Comment créer des pages GitHub ?
Configurer GitHub Pages :
Allez dans les paramètres (Settings) de votre dépôt sur GitHub.
Dans la section « Pages » (ou « GitHub Pages »), sélectionnez la branche que vous souhaitez utiliser pour le site (souvent main ou master).
Choisissez le dossier racine (/) ou un dossier spécifique (comme /docs) où se trouvent vos fichiers HTML.
Cliquez sur « Save » pour enregistrer vos modifications.
Dans le curseur « deploy from a branch » j’ai choisi « main ». Puis cliqué sur le bouton Save qui apparaît alors :
Pour ce faire, avec l’éditeur WordPress classique, je choisis un bloc « HTML personnalisé et j’y colle le code ci-dessus :
Qu’est-ce que je peux faire de ça ?
C’est un avantage énorme puisque je peux venir placer ici des démos « vivantes », sans avoir besoin de passer par l’éditeur p5.js. Et l’intégration dans un site wordPress fonctionne. C’est aussi probablement le cas dans une newsletter Substack.
Lorsqu’on crée un script p5js on apprécie de pouvoir partager le résultat sans obliger les gens à sortir du site où ils sont. C’est là que les GIF sont fantastiques. Comme dans l’image ci-dessous, ce sont des images que l’on peut voir comme une mini vidéo.
Il suffit d’ajouter la fonction suivante à la fin de sketch.js.
// Save a 5-second gif when the user presses the 's' key.
function keyPressed() {
if ( (key === 's') || (key === 'S') ) {
saveGif('mySketch', 5);
}
}
Et voilà, maintenant j’appuie sur la touche s et j’obtiens un fichier GIF.
Commentaires récents