Comment modifier dynamiquement le title de sa page lorsqu’elle passe en onglet navigateur inactif ? (via jQuery)

Vous souhaitez automatiquement modifier la balise titre (title) de vos pages web si un internaute quitte votre page mais garde l’onglet ouvert sur son navigateur Chrome | Firefox | Safari | Edge | Internet Explorer depuis son ordinateur ou smartphone ? Voici comment vous pouvez très simplement mettre cela en place avec quelques lignes de code jQuery et un peu d’inspiration.

Pourquoi devriez-vous modifier dynamiquement le title d’une page lorsqu’elle n’est plus active dans le navigateur ? 5 raisons de le faire.

Modifier dynamiquement la balise title de ses pages inactives dans le navigateur d’un internaute peut être une bonne idée pour de nombreuses raisons.

Plutôt que de vous prendre la tête avec de nombreux arguments détaillés, je préfère aller à l’essentiel et me concentrer sur 5 gains clés que vous pouvez en tirer.

Adapter le title remplacé dynamiquement en fonction de la saison et de votre audience peut vous faire gagner :

• en sympathie : de la part des clients, futurs clients, prospects, curieux égarés sur votre site et confrères
• des ventes : si vous poussez un code promo par exemple
• des conversions : en poussant vos avantages concurrentiels
• des clients encore plus fidèles : lié au premier point qui est la « sympathie »
• en communication : passer des messages marketing efficaces en 7 caractères, ça peut paraître chaud, mais c’est possible !

Et si vous vous posez la question : OUI c’est adapté à toutes les audiences et cibles (personas), il suffit simplement d’adapter le message et de s’être posé les bonnes questions en amont.

Avec quels navigateurs est-ce compatible ?

Tous les principaux navigateurs dans n’importe quelle version :

• Google Chrome,
• Mozilla Firefox,
• Safari,
• Internet Explorer,
• Microsoft Edge,
• Opera,
• …

Modifier le title des onglets inactifs de son site : comment ça marche concrètement ?

1- Vérifiez que jQuery est installé sur votre site web :

Pour cela :

• 1- rendez-vous sur votre site
• 2- réalisez un CTRL + U pour afficher le code source de la page
• 3- réalisez un CTRl + F puis recherchez jquery.js ou jquery.min.js

S’il est déjà présent et donc installé, parfait.

S’il n’est pas installé, vous pouvez le faire très simplement en ajoutant cette ligne de code dans le head de votre site (source) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Si non bis (deuxième méthode d’installation mais moins optimisée pour votre temps de chargement et donc moins recommandée) :

• 1- Téléchargez jQuery sur le site officiel
• 2- Dé-zippez le paquet et en l’ajoutant dans un répertoire de votre choix sur votre site via FTP / SSH
• 3- Ajoutez cette ligne de code (en modifiant le chemin) à toutes les pages de votre site web :

<script src="chemin/vers/jquery.js"></script>

Si vous êtes perdus ici, envoyez cet article à un développeur, il vous fera le tout en deux temps trois mouvements.

2- Personnalisez le message souhaité et ajoutez le code jQuery final sur votre site web :

Pour mettre en place (et en ligne) la modification dynamique de votre title, ajoutez simplement n’importe où entre les balises body de votre site le code ci-dessous en remplaçant bien « Coucou toi » dans le code par n’importe quel message qui vous dit de tester avec votre audience :

<script type=“text/javascript”>
$(function() {
// Recup titre de la page
var pageTitle = $("title").text();
// Changement dynamique du title
$(window).blur(function() {
$("title").text("Coucou toi");
});
// Recup titre initial lorsque page active
$(window).focus(function() {
$("title").text(pageTitle);
});
});
</script>

Concrètement, ce code récupère votre balise titre actuelle puis la remplace lorsque la fenêtre n’est pas active. Dès que la fenêtre redevient active, le title original est de retour.

Si vous souhaitez garder votre title initial après votre title dynamiquement modifié, voici ce que vous devez simplement modifier au code précédent (ajouter « + pageTitle » après les guillemets qui renferment votre message) :

// Changement dynamique du title
$(window).blur(function() {
$("title").text("Coucou toi" + pageTitle);
});

Ceci peut être utile si l’internaute a de nombreux onglets de votre site ouvert et qu’il ne s’y retrouve plus à cause de votre Title qui sera identique sur tous les onglets (faites bien attention à cela car cela pourrait plus vous déservir qu’autre chose dans ce cas précis).

Autres codes si le précédent ne fonctionne pas chez vous (ce qui ne devrait pas être le cas) :

$(document).ready(function() {
document.title = 'Nouveau titre';
});

Encore une autre possibilité en jQuery compatible avec Internet Explorer :

$(function(){
$(document).attr("title", "Nouveau titre");
});

Exemples concrets de message à utiliser pour remplacer la balise title de l’onglet inactif :

Vous manquez d’inspiration ? Avant de vous présenter quelques exemples concrets de title de remplacement lorsque votre page se retrouve comme un vulgaire onglet inactif sur n’importe quel navigateur, voici 4 conseils avant de vous lancer tête baissée :

• Soyez brefs et ajoutez un émoticône en premier : c’est ce qui attirera l’oeil et donnera à l’internaute l’envie de revenir (ou de fermer votre onglet ;).
• De manière générale, ce sont les 8 – 9 premiers caractères de votre title changé dynamiquement qui seront les plus importants et impactants : ce seront les plus visibles dans la plupart des cas (si un internaute à 10 onglets Chrome ouverts sur un ordinateur doté d’un écran de 15 pouces, il pourra voir les 8-9 premiers par exemple).
• Evitez le tout majuscules (et les majuscules en général) : cela prendra plus de place et vous pourrez donc passer moins d’info.
• Surprenez fréquemmeent vos visiteurs : l’idéal est de remplacer le message automatique le plus souvent possible pour éviter de lasser vos visiteurs qui reviennent. Jouez sur l’effet de surprise.

Voici quelques idées pour attirer l’oeil de l’internaute en fonction de votre site et de votre objectif :

• Reviens ↩️ vite 😉
• Clique-moi ▶️
• Cliquez ici ⬇️
• C’est par ici ↩️ que ça se passe
• Solution ici ⬇️
• Coucou 😋
• ici ⬇️, c’est mieux 😂
• Chez nous, c’est mieux 😉

Quelques idées pour des agences et freelance webmarketing :

• 📈 Tu veux du trafic ? 📈
• Tu veux booster ton CA ? 📈
• Envie de 🚀 ?
• Service 🌟🌟🌟🌟🌟
• Besoin d’aide ❓
• Tu veux voir ton CA ↗️ ?

Quelques idées de title dynamiques pour l’e-commerce :

• 📦 Livraison gratuite
• 📦 gratuite
• 🚚 gratuit
• 🚚 & ↩️ gratuits
• 🚚 & ↩️ = 🆓
• 💲 Code « REVIENS » = réduc 5€
• ⚠️ Stock limité !
• 📢 Moins cher ici ⬇️
• 📢 Prix en ⬇️ !
• PRIX EN ⬇️ !
• 📢 [PRODUIT] en PROMO !
• Paiement sécurisé 🔒
• Les soldes [marque] finissent bientôt 😮
• 🎅, c’est tous les jours (avec nous)
• 🔥 ça chauffe ici !!!
• Les produits partent vite ! 😮
• On est on-🔥 pour vous !

Quelques idées de titres dynamiques qui jouent sur les émotions et s’adressent directement à l’internaute :

• 💔 C’est déjà fini entre nous ? 😭
• 😥 Déjà ? 💌
• Tu reviens quand ? 🕑
• Tu es curieux ? Reviens 😉
• Curieux ? 😉
• 😲 Si vite ?
• 🔔 Hey, reviens ?
• Tu nous manques… 🙄
• On te manque pas ? 😭
• Toi + Nous = 💘
• Tu nous manques… ❤️
• Hey BG, reviens ! 😋
• Tu veux bien 🍽️ ?
• Tu veux mieux 🍽️ ? Reviens
• Tiens… 🌹
• 🏝️ On part quand ?
• Reviens-nous vite 🏃
• Envie de gagner des 💲 ?
• 🤔 Si vite ? 😮
• 😮 Reviens-nous vite…
• On t’💚 bien nous

Il y en a plusieurs qui vous plaisent ? Ca vous a donné des idées ? Faîtes-vous plaisir !

Quelques exemples d’emojis à utiliser dans vos balises title d’onglets inactifs :

🎁  💡 📢 ✔ 😲 🙄😮 🤔 😋 😭 🔔 ❤️ 🔞 ✔️ 🥦 💚 ❓ 🆘 🏳️‍🌈 🌟 💰 💲 🆓

Ceci n’est qu’un aperçu des nombreux émoticônes que vous pouvez ajouter à votre balise title lorsqu’elle est inactive.

Ce petit hack te plait ? Tu en veux d’autres comme celui-là ? Abonne-toi à notre newsletter et/ou n’hésite pas à nous faire un petit lien depuis ton site ou tes réseaux sociaux (le choix de nous suivre partout t’appartient aussi 😉).

Vincent Brossas

Fondateur de LEPTIDIGITAL et consultant SEO senior (à mes heures perdues), je suis un grand passionné de marketing digital et de SEO. Avant d’être indépendant à 100 %, j’ai travaillé en tant qu’SEO manager et responsable e-commerce pour différentes sociétés (Altice Media, Infopro Digital, Voyage Privé, Groupe ERAM). (Sur le plan perso, je suis un grand curieux hyperactif aussi passionné par l’IA, la photographie et les voyages !). PS : Si vous souhaitez me contactez, privilégiez LinkedIn ou Instagram. Pour me contacter : [email protected]

www.leptidigital.fr