"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "jamais-entendu-parler-des-métadonnées-de-site-web-", "hProperties": { "id": "jamais-entendu-parler-des-métadonnées-de-site-web-" } }, "depth": 2, "value": "Jamais entendu parler des métadonnées de site web ?" }, { "data": { "id": "configurer-les-métadonnées-open-graph", "hProperties": { "id": "configurer-les-métadonnées-open-graph" } }, "depth": 2, "value": "Configurer les métadonnées Open Graph" }, { "data": { "id": "configurer-les-métadonnées-twitter-cards", "hProperties": { "id": "configurer-les-métadonnées-twitter-cards" } }, "depth": 2, "value": "Configurer les métadonnées Twitter Cards" }, { "data": { "id": "notes-de-fin", "hProperties": { "id": "notes-de-fin" } }, "depth": 2, "value": "Notes de fin" }]; const readingTime = { "minutes": 3, "words": 971, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "introduction", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) }), "Introduction"] }), "\n", _jsx(_components.p, { children: "Lorsque vous partagez un lien vers votre site web sur les réseaux sociaux, vous voulez qu'il ait du style. Au lieu de montrer un simple lien, vous voulez afficher un bel aperçu avec toutes les métadonnées nécessaires telles que le titre, la description et l'image. C'est là que les métadonnées Open Graph et Twitter (maintenant X) Cards entrent en jeu." }), "\n", _jsxs(_components.p, { children: ["Dans cet article, nous vous montrerons comment configurer les métadonnées Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") et Twitter Cards pour votre site web. Nous vous montrerons également comment tester vos métadonnées pour vous assurer qu'elles ont belle allure sur les réseaux sociaux."] }), "\n", _jsxs(_components.h2, { id: "jamais-entendu-parler-des-métadonnées-de-site-web-", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#jamais-entendu-parler-des-métadonnées-de-site-web-", children: _jsx(_components.span, { children: "#" }) }), "Jamais entendu parler des métadonnées de site web ?"] }), "\n", _jsx(_components.p, { children: "Lorsqu'un humain visite un site web, il voit le contenu rendu par le navigateur. Mais lorsqu'un bot (comme un robot d'indexation de moteur de recherche ou un aspirateur de réseaux sociaux) visite un site web, il ne voit que le HTML brut. Les métadonnées du site web interviennent alors pour fournir des informations structurées sur le site web au bot, qu'il peut utiliser pour rendre une sortie structurée, comme une carte d'aperçu." }), "\n", _jsxs(_components.p, { children: ["Si vous cliquez avec le bouton droit sur un site web et sélectionnez \"Voir le code source de la page\", vous verrez le HTML brut du site web. Les métadonnées sont généralement incluses dans la section ", _jsx(_components.code, { children: "" }), " du HTML, et ça ressemble à ça :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Le code ci-dessus est explicite : le titre du site web est \"Mon site web\" et la description est \"Ceci est mon site web\"." }), "\n", _jsxs(_components.p, { children: ["Vous remarquerez peut-être le préfixe ", _jsx(_components.code, { children: "og:" }), " dans les métadonnées, qui signifie ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ". Open Graph est un protocole développé par Facebook pour fournir des informations structurées sur un site web. Twitter (maintenant X) a également son propre protocole de métadonnées, appelé Twitter Cards."] }), "\n", _jsxs(_components.h2, { id: "configurer-les-métadonnées-open-graph", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurer-les-métadonnées-open-graph", children: _jsx(_components.span, { children: "#" }) }), "Configurer les métadonnées Open Graph"] }), "\n", _jsx(_components.p, { children: "Voici quelques-unes des balises de métadonnées Open Graph les plus courantes :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Le nom du site web."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Le titre de la page actuelle."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Une courte description du site web."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": L'URL de l'image à afficher."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": L'", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "URL canonique" }), " du site web."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Le type de site web (par exemple, site web, article, vidéo)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["La différence entre ", _jsx(_components.code, { children: "og:title" }), " et ", _jsx(_components.code, { children: "og:site_name" }), " est que ", _jsx(_components.code, { children: "og:title" }), " est le titre de la page actuelle (par exemple, le titre de l'article de blog), tandis que ", _jsx(_components.code, { children: "og:site_name" }), " est le nom du site web (par exemple, le nom du blog). Si vous vérifiez le code source de cette page, vous verrez les métadonnées Open Graph suivantes :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Puisque nous avons ", _jsx(_components.code, { children: "og:type" }), " défini comme ", _jsx(_components.code, { children: "article" }), ", des métadonnées supplémentaires telles que l'auteur et la date de publication peuvent être ajoutées. Par exemple, si vous souhaitez ajouter des balises pour un article de blog, vous pouvez ajouter les métadonnées suivantes :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph spécifie que si vous souhaitez ajouter plusieurs valeurs, vous devez utiliser plusieurs balises ", _jsx(_components.code, { children: "" }), " avec le même nom de propriété."] }), "\n", _jsxs(_components.p, { children: ["Après avoir ajouté les métadonnées Open Graph à votre site web, vous pouvez les tester en utilisant le ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ". Entrez simplement l'URL de votre site web et cliquez sur \"Debug\". Si des problèmes apparaissent dans les métadonnées, le débogueur vous montrera les erreurs."] }), "\n", _jsxs(_components.p, { children: ["Voici un exemple de notre article de blog ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "Quand devrais-je utiliser des JWT?" }), " dans le Facebook Sharing Debugger :"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Facebook Debugger" }) }), "\n", _jsxs(_components.h2, { id: "configurer-les-métadonnées-twitter-cards", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurer-les-métadonnées-twitter-cards", children: _jsx(_components.span, { children: "#" }) }), "Configurer les métadonnées Twitter Cards"] }), "\n", _jsxs(_components.p, { children: ["Les Twitter Cards sont similaires aux métadonnées Open Graph, mais elles ont ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "leurs propres conventions" }), ". Il existe quatre types de Twitter Cards :"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Summary Card : Une carte avec un titre, une description et une miniature." }), "\n", _jsx(_components.li, { children: "Summary Card with Large Image : Une carte avec un titre, une description et une grande image." }), "\n", _jsx(_components.li, { children: "App Card : Une carte pour promouvoir des applications mobiles." }), "\n", _jsx(_components.li, { children: "Player Card : Une carte pour le contenu vidéo et audio." }), "\n"] }), "\n", _jsx(_components.p, { children: "Pour notre article de blog, nous utiliserons la Summary Card with Large Image. Les métadonnées Twitter Cards pour l'article de blog ressembleront à ceci :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Les deux principales différences par rapport aux métadonnées Open Graph sont les suivantes :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["La balise ", _jsx(_components.code, { children: "twitter:card" }), " est requise et spécifie le type de carte."] }), "\n", _jsxs(_components.li, { children: ["La balise ", _jsx(_components.code, { children: "twitter:site" }), " spécifie le handle Twitter du site web."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Il y avait un ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Twitter Card Validator" }), " disponible, cependant, la fonction d'aperçu a été déplacée vers le Compositeur de Tweets (mieux que rien, d'ailleurs)."] }), "\n", _jsxs(_components.h2, { id: "notes-de-fin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#notes-de-fin", children: _jsx(_components.span, { children: "#" }) }), "Notes de fin"] }), "\n", _jsx(_components.p, { children: "Configurer les métadonnées Open Graph et Twitter Cards pour votre site web est facile et utile. Les gens aiment les images, et une belle carte d'aperçu peut attirer plus d'attention sur votre site web. Bonne chance avec votre site web et bon partage !" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };