"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduzione", "hProperties": { "id": "introduzione" } }, "depth": 2, "value": "Introduzione" }, { "data": { "id": "mai-sentito-parlare-dei-metadati-dei-siti-web", "hProperties": { "id": "mai-sentito-parlare-dei-metadati-dei-siti-web" } }, "depth": 2, "value": "Mai sentito parlare dei metadati dei siti web?" }, { "data": { "id": "configurazione-dei-metadati-di-open-graph", "hProperties": { "id": "configurazione-dei-metadati-di-open-graph" } }, "depth": 2, "value": "Configurazione dei metadati di Open Graph" }, { "data": { "id": "configurazione-dei-metadati-di-twitter-cards", "hProperties": { "id": "configurazione-dei-metadati-di-twitter-cards" } }, "depth": 2, "value": "Configurazione dei metadati di Twitter Cards" }, { "data": { "id": "note-finali", "hProperties": { "id": "note-finali" } }, "depth": 2, "value": "Note finali" }]; const readingTime = { "minutes": 3, "words": 914, "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: "introduzione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduzione", children: _jsx(_components.span, { children: "#" }) }), "Introduzione"] }), "\n", _jsx(_components.p, { children: "Quando condividi un link al tuo sito web sui social media, vuoi che appaia bene. Invece di mostrare semplicemente un link semplice, vuoi mostrare una bella anteprima con tutti i metadati necessari come titolo, descrizione e immagine. È qui che entrano in gioco i metadati delle card di Open Graph e Twitter (ora X)." }), "\n", _jsxs(_components.p, { children: ["In questo articolo, ti mostreremo come configurare i metadati di Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") e Twitter Cards per il tuo sito web. Ti mostreremo anche come testare i tuoi metadati per assicurarti che appaiano bene sui social media."] }), "\n", _jsxs(_components.h2, { id: "mai-sentito-parlare-dei-metadati-dei-siti-web", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mai-sentito-parlare-dei-metadati-dei-siti-web", children: _jsx(_components.span, { children: "#" }) }), "Mai sentito parlare dei metadati dei siti web?"] }), "\n", _jsx(_components.p, { children: "Quando un umano visita un sito web, vede il contenuto renderizzato dal browser. Ma quando un bot (come un crawler del motore di ricerca o uno scraper dei social media) visita un sito web, vede solo l'HTML grezzo. I metadati del sito web ora entrano in gioco per fornire informazioni strutturate sul sito web al bot, che può utilizzare per renderizzare un output strutturato, come una card di anteprima." }), "\n", _jsxs(_components.p, { children: ["Se fai clic con il tasto destro su un sito web e selezioni \"Visualizza sorgente pagina\", vedrai l'HTML grezzo del sito web. I metadati sono solitamente inclusi nella sezione ", _jsx(_components.code, { children: "" }), " dell'HTML e sembrano qualcosa del genere:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Il codice sopra è autoesplicativo: il titolo del sito web è \"Home del mio sito web\" e la descrizione è \"Questo è il mio sito web.\"." }), "\n", _jsxs(_components.p, { children: ["Potresti notare il prefisso ", _jsx(_components.code, { children: "og:" }), " nei metadati, che sta per ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ". Open Graph è un protocollo sviluppato da Facebook per fornire informazioni strutturate su un sito web. Anche Twitter (ora X) ha il suo protocollo di metadati, chiamato Twitter Cards."] }), "\n", _jsxs(_components.h2, { id: "configurazione-dei-metadati-di-open-graph", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurazione-dei-metadati-di-open-graph", children: _jsx(_components.span, { children: "#" }) }), "Configurazione dei metadati di Open Graph"] }), "\n", _jsx(_components.p, { children: "Alcuni dei tag di metadati di Open Graph più comuni sono:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Il nome del sito web."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Il titolo della pagina corrente."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Una breve descrizione del sito web."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": L'URL dell'immagine da visualizzare."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": L'URL ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "canonico" }), " del sito web."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Il tipo di sito web (es. sito web, articolo, video)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["La differenza tra ", _jsx(_components.code, { children: "og:title" }), " e ", _jsx(_components.code, { children: "og:site_name" }), " è che ", _jsx(_components.code, { children: "og:title" }), " è il titolo della pagina corrente (es. il titolo del post del blog), mentre ", _jsx(_components.code, { children: "og:site_name" }), " è il nome del sito web (es. il nome del blog). Se controlli il codice sorgente di questa pagina, vedrai i seguenti metadati di Open Graph:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Poiché abbiamo impostato ", _jsx(_components.code, { children: "og:type" }), " su ", _jsx(_components.code, { children: "article" }), ", è possibile aggiungere metadati aggiuntivi come autore e data di pubblicazione. Ad esempio, se vuoi aggiungere i tag per un post del blog, puoi aggiungere i seguenti metadati:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph specifica che se desideri aggiungere valori multipli, devi usare multipli tag ", _jsx(_components.code, { children: "" }), " con lo stesso nome di proprietà."] }), "\n", _jsxs(_components.p, { children: ["Dopo aver aggiunto i metadati di Open Graph al tuo sito web, puoi testarli utilizzando il ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ". Basta inserire l'URL del tuo sito web e fare clic su \"Debug\". Se ci sono problemi con i metadati, il debugger ti mostrerà gli errori."] }), "\n", _jsxs(_components.p, { children: ["Ecco un esempio del nostro post del blog ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "Quando dovrei usare i JWT?" }), " nel 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: "configurazione-dei-metadati-di-twitter-cards", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurazione-dei-metadati-di-twitter-cards", children: _jsx(_components.span, { children: "#" }) }), "Configurazione dei metadati di Twitter Cards"] }), "\n", _jsxs(_components.p, { children: ["Le Twitter Cards sono simili ai metadati di Open Graph, ma hanno ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "le loro convenzioni" }), ". Ci sono quattro tipi di Twitter Cards:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Summary Card: Una card con titolo, descrizione e miniatura." }), "\n", _jsx(_components.li, { children: "Summary Card con immagine grande: Una card con titolo, descrizione e immagine grande." }), "\n", _jsx(_components.li, { children: "App Card: Una card per promuovere app mobile." }), "\n", _jsx(_components.li, { children: "Player Card: Una card per contenuti video e audio." }), "\n"] }), "\n", _jsx(_components.p, { children: "Per il nostro post del blog, useremo la Summary Card con immagine grande. I metadati di Twitter Cards per il post del blog saranno simili a questi:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Le due principali differenze rispetto ai metadati di Open Graph sono:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Il tag ", _jsx(_components.code, { children: "twitter:card" }), " è obbligatorio e specifica il tipo di card."] }), "\n", _jsxs(_components.li, { children: ["Il tag ", _jsx(_components.code, { children: "twitter:site" }), " specifica l'handle Twitter del sito web."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["C'era un ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Validator di Twitter Card" }), " disponibile, tuttavia, la funzione di anteprima è stata spostata al Tweet Composer (meglio di niente)."] }), "\n", _jsxs(_components.h2, { id: "note-finali", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#note-finali", children: _jsx(_components.span, { children: "#" }) }), "Note finali"] }), "\n", _jsx(_components.p, { children: "Configurare i metadati di Open Graph e Twitter Cards per il tuo sito web è facile ma utile. Alla gente piacciono le immagini e una bella card di anteprima può attirare più attenzione al tuo sito web. Ti auguriamo buona fortuna con il tuo sito web e buona condivisione!" })] }); } 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 };