Tag Open Graph
Infrastruttura TecnicaMeta tag che controllano come i contenuti vengono visualizzati quando condivisi sulle piattaforme social come Facebook.
Definizione
I tag Open Graph (OG) sono meta tag HTML inseriti nella sezione `<head>` di una pagina web che controllano come quella pagina appare quando il suo URL viene condiviso su piattaforme social, app di messaggistica e altri servizi che generano anteprime dei link. Il protocollo è stato creato da Facebook nel 2010 ed è diventato lo standard universale per le anteprime dei link su tutto il web. I tag OG definiscono quattro proprietà principali: `og:title` (il titolo nell'anteprima), `og:description` (il testo riassuntivo), `og:image` (la miniatura di anteprima) e `og:url` (il link canonico). Proprietà aggiuntive come `og:type`, `og:site_name` e `og:locale` forniscono ulteriore contesto. Senza tag OG, le piattaforme tentano di indovinare cosa mostrare analizzando la pagina, producendo spesso immagini rotte, testo troncato o contenuto irrilevante.
Perché È Importante
Ogni link condiviso sui social media genera una scheda di anteprima. Quella scheda è la prima e spesso l'unica cosa che le persone vedono prima di decidere se cliccare. Un'immagine OG ben configurata, un titolo chiaro e una descrizione convincente possono moltiplicare i tassi di click-through rispetto a un'anteprima generica o mancante. Per gli editori che distribuiscono [flipbook](/glossary/flipbook) attraverso i canali social, la scheda di anteprima funge da pubblicità in miniatura per il contenuto. I tag OG influenzano anche come i link appaiono in app di messaggistica come WhatsApp, Slack e iMessage, il che significa che influenzano il comportamento di clic ben oltre i feed dei social media.
Come Funziona in FlipLink
La funzionalità [SEO e anteprime social](/features/seo-and-social-previews) di FlipLink consente di configurare i tag OG per ogni pubblicazione. Impostate un titolo personalizzato, una descrizione e un'immagine di anteprima attraverso le impostazioni della pubblicazione, e FlipLink genera automaticamente i meta tag `og:title`, `og:description`, `og:image`, `og:url` e `og:type`. Questo significa che ogni link di [flipbook](/glossary/flipbook) condiviso mostra una scheda di anteprima curata e brandizzata senza richiedere alcuna modifica HTML. L'immagine OG può essere la copertina del flipbook o una grafica personalizzata pensata per la condivisione social.
Checklist di Configurazione
Seguite questi passaggi per configurare correttamente i tag OG e massimizzare l'impatto della condivisione social:
1. **Impostate og:title** - Mantenetelo sotto i 60 caratteri. Usate un titolo descrittivo che includa l'argomento del contenuto, non solo il nome del brand. Esempio: "Catalogo Collezione Primavera | IlVostroBrand" anziché solo "IlVostroBrand."
2. **Scrivete og:description** - Puntate a 120-155 caratteri. Includete una proposta di valore o una call-to-action. Descrivete cosa troverà il lettore nel flipbook.
3. **Scegliete og:image** - Usate un'immagine di almeno 1200x630 pixel. La copertina del flipbook funziona bene, ma una grafica social personalizzata con testo sovrapposto può performare meglio. Evitate immagini con troppo testo piccolo poiché vengono mostrate come miniature.
4. **Verificate og:url** - Questo dovrebbe essere l'[URL canonico](/glossary/canonical-url) della pubblicazione. Se il flipbook è accessibile tramite più URL, l'og:url dovrebbe puntare a quello principale.
5. **Impostate og:type** - Usate "website" per le pagine di destinazione e "article" per le pubblicazioni individuali o i post del blog.
6. **Testate prima di condividere** - Usate il Debugger di Condivisione di Facebook, il Card Validator di Twitter o il Post Inspector di LinkedIn per vedere in anteprima come apparirà il vostro link prima di condividerlo pubblicamente.
Domande Frequenti
**Cosa succede se non imposto i tag OG?**
La piattaforma social tenterà di analizzare la pagina e indovinare il titolo, la descrizione e l'immagine. I risultati sono imprevedibili: potreste ottenere un'immagine casuale dalla pagina, un titolo HTML troncato o nessuna anteprima. Impostare tag OG espliciti elimina completamente queste incertezze.
**I tag OG influenzano il posizionamento SEO?**
I tag OG non influenzano direttamente il posizionamento nei motori di ricerca. Tuttavia, influenzano significativamente i tassi di click-through sui link condivisi, generando traffico. Più traffico e coinvolgimento possono migliorare indirettamente la visibilità di ricerca nel tempo.
**I tag OG sono uguali alle Twitter Card?**
Twitter ha i propri meta tag (`twitter:card`, `twitter:title`, `twitter:image`), ma ricade sui tag OG quando i tag specifici di Twitter non sono presenti. La maggior parte delle piattaforme, inclusi LinkedIn, WhatsApp, Slack e iMessage, usano i tag OG come fonte primaria per le anteprime dei link.
Dettagli Tecnici
I tag OG seguono una struttura HTML diretta all'interno dell'elemento `<head>`:
- `og:title` - Il titolo visualizzato nell'anteprima. Dovrebbe differire dal tag `<title>` della pagina se il titolo include breadcrumb di navigazione o suffissi che non hanno senso nel contesto social.
- `og:description` - Un riassunto conciso. A differenza della meta description usata per i motori di ricerca, la descrizione OG dovrebbe essere ottimizzata per il contesto social: più breve, più diretta e orientata all'azione.
- `og:image` - Un URL assoluto al file immagine. Facebook raccomanda 1200x630 pixel. Immagini più piccole di 200x200 pixel potrebbero non renderizzarsi su alcune piattaforme.
- `og:type` - Categorizza il contenuto. Valori comuni sono "website", "article", "product" e "video.other".
- `og:url` - L'URL canonico. Questo previene schede di anteprima duplicate quando lo stesso contenuto è accessibile da più URL.
- `og:locale` - Specifica la lingua del contenuto (es. "en_US", "it_IT"). Utile per pubblicazioni multilingue.
Quando un URL viene condiviso, il crawler della piattaforma recupera la pagina, legge i tag OG dall'HTML e memorizza il risultato nella cache. Ecco perché le modifiche ai tag OG non hanno effetto immediato sulle piattaforme che hanno già memorizzato la vecchia anteprima. Usate lo strumento di debug di ciascuna piattaforma per forzare un nuovo recupero dopo aver aggiornato i tag.
Termini Correlati
Gateway di Pagamento
Un servizio che elabora i pagamenti online, come Stripe, consentendo la vendita di documenti tramite FlipLink.
PDF.js
La libreria JavaScript open-source di Mozilla che renderizza i file PDF direttamente nel browser.
Progressive Web App (PWA)
Un'applicazione web che funziona offline e può essere installata sui dispositivi come un'app nativa.
Design Responsivo
Adattamento automatico del layout e dei contenuti per funzionare al meglio su schermi di ogni dimensione.
Incorporamento Responsivo
Un codice embed che adatta automaticamente le dimensioni del flipbook a qualsiasi contenitore o larghezza dello schermo.
Funzionalità Correlate
Disponibile in altre lingue
Pronto a trasformare
i tuoi PDF?
Unisciti a migliaia di aziende che usano FlipLink per creare contenuti coinvolgenti e interattivi dai propri PDF. Inizia gratis — non serve la carta di credito.