{"id":6254,"date":"2026-03-23T12:54:31","date_gmt":"2026-03-23T12:54:31","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-balise-head-react\/"},"modified":"2026-03-23T12:54:37","modified_gmt":"2026-03-23T12:54:37","slug":"modifier-dynamiquement-balise-head-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-balise-head-react\/","title":{"rendered":"20.3 Modifier Dynamiquement la Balise Head en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Modifier Balise Head React<\/strong> est une pratique essentielle pour tout d\u00e9veloppeur souhaitant maximiser l&rsquo;interactivit\u00e9 et l&rsquo;accessibilit\u00e9 de ses applications web. Ma\u00eetriser l&rsquo;art de la modification dynamiquement la balise Head permet aussi une optimisation accrue pour le SEO, ce qui est crucial dans un environnement en ligne comp\u00e9titif. D\u00e9couvrons ensemble comment cette technique peut \u00eatre appliqu\u00e9e de mani\u00e8re efficace via <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-dynamiquement-balise-head-react\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Modifier Balise Head React : Introduction \u00e0 la Modification Dynamique<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706158015?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener noreferrer\">construction d&rsquo;applications React<\/a> n\u00e9cessite souvent de modifier les m\u00e9tadonn\u00e9es \u00e0 la vol\u00e9e, telles que le titre et la description, pour assurer une exp\u00e9rience optimis\u00e9e pour l&rsquo;utilisateur. Cela peut \u00eatre efficacement r\u00e9alis\u00e9 \u00e0 l&rsquo;aide de biblioth\u00e8ques tierces con\u00e7ues pour faciliter ces ajustements de mani\u00e8re d\u00e9clarative.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Librairie React Helmet<\/h3>\n\n\n\n<p>La librairie <strong>React Helmet<\/strong> est l\u2019une des solutions les plus populaires pour manipuler la balise Head dans les applications React. Elle offre la possibilit\u00e9 de d\u00e9finir et modifier des \u00e9l\u00e9ments tels que le titre, la description, comme expliqu\u00e9 dans cet <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener noreferrer\">article<\/a>. Voici comment l&rsquo;installer et l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>npm install react-helmet<\/code><\/pre>\n\n\n\n<p>Ensuite, vous pouvez l&rsquo;int\u00e9grer dans votre composant React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { Helmet } from 'react-helmet';\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Helmet>\n        <title>Page Title<\/title>\n        <meta name=\"description\" content=\"This is a description of the page\" \/>\n      <\/Helmet>\n      <h1>Hello, world!<\/h1>\n    <\/div>\n  );\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir votre compr\u00e9hension, voici un lien vers un <a href=\"https:\/\/www.sitepoint.com\/react-helmet-manage-doc-head\/\" target=\"_blank\" rel=\"noopener noreferrer\">tutoriel d\u00e9taill\u00e9 sur React Helmet<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mise \u00e0 jour Dynamique des M\u00e9tadonn\u00e9es<\/h3>\n\n\n\n<p>Pour aller plus loin, on peut tirer parti de l&rsquo;\u00e9tat et des effets de React pour mettre \u00e0 jour dynamiquement les m\u00e9tadonn\u00e9es en fonction des interactions utilisateur, comme d\u00e9taill\u00e9 dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener noreferrer\">guide de cr\u00e9ation d&rsquo;application React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\nimport { Helmet } from 'react-helmet';\n\nfunction DynamicHeadComponent() {\n  const [pageTitle, setPageTitle] = useState('Accueil');\n  \n  useEffect(() => {\n    \/\/ Par exemple, changement de titre suite \u00e0 une action utilisateur :\n    setPageTitle('Nouvelle Page Titulaire');\n  }, []);\n  \n  return (\n    <div>\n      <Helmet>\n        <title>{pageTitle}<\/title>\n        <meta name=\"description\" content=\"Description dynamique selon l'\u00e9tat\" \/>\n      <\/Helmet>\n      <button onClick={() => setPageTitle('Titre Mis \u00e0 Jour')}>\n        Mettre \u00e0 jour le titre\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default DynamicHeadComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer l&rsquo;Optimisation SEO avec React Helmet<\/h3>\n\n\n\n<p>La modification dynamique de la balise Head est cruciale non seulement pour l&rsquo;exp\u00e9rience utilisateur, mais \u00e9galement pour le SEO. En ajustant les titres et descriptions au fur et \u00e0 mesure de la navigation des utilisateurs, vous pouvez significativement am\u00e9liorer le classement et la pertinence de votre site sur les moteurs de recherche. Consultez notre guide sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener noreferrer\">optimisation SEO en React<\/a> pour plus de conseils.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s avec React Helmet<\/h3>\n\n\n\n<p>Donnons un exemple avanc\u00e9 o\u00f9 nous mettons en \u0153uvre le conditionnement des m\u00e9tadonn\u00e9es via un gestionnaire d&rsquo;\u00e9tat global comme Redux ou le context API de React, comme \u00e9voqu\u00e9 dans cet <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-refs-react-tutoriel\" target=\"_blank\" rel=\"noopener noreferrer\">article sur l&rsquo;utilisation des refs<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useContext } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { GlobalContext } from '.\/GlobalContext';\n\nfunction ContextualHeadComponent() {\n  const { pageTitle, pageDescription } = useContext(GlobalContext);\n  \n  return (\n    <div>\n      <Helmet>\n        <title>{pageTitle}<\/title>\n        <meta name=\"description\" content={pageDescription} \/>\n      <\/Helmet>\n      <h1>{pageTitle}<\/h1>\n      <p>{pageDescription}<\/p>\n    <\/div>\n  );\n}\n\nexport default ContextualHeadComponent;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur la Modification de la Balise Head React<\/h2>\n\n\n\n<p>Ma\u00eetriser la modification de la balise Head en React gr\u00e2ce \u00e0 des outils comme <strong>React Helmet<\/strong> est un atout majeur pour enrichir l&rsquo;exp\u00e9rience utilisateur et optimiser le SEO de votre site. Pour les d\u00e9veloppeurs en qu\u00eate de perfectionnement, la <a href=\"https:\/\/wikiform.fr\/codespace\/img\/banner-learnify-react-redux.png\" target=\"_blank\" rel=\"noopener noreferrer\">formation sur la plateforme Learnify<\/a> offre une belle opportunit\u00e9 d&rsquo;approfondir vos connaissances et de d\u00e9couvrir de nouvelles approches pour rendre vos applications plus robustes et attrayantes.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Apprenez plus avec notre formation sur Learnify\" style=\"display: block; margin: 20px auto; max-width: 100%;\" title=\"\">\n<\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Modifier Balise Head React est une pratique essentielle pour tout d\u00e9veloppeur souhaitant maximiser l&rsquo;interactivit\u00e9 et l&rsquo;accessibilit\u00e9 de ses applications web. Ma\u00eetriser l&rsquo;art de la&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3232,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6254"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6254\/revisions"}],"predecessor-version":[{"id":6255,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6254\/revisions\/6255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3232"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}