Generatore Open Graph
Quattro tag decidono la tua scheda
Questo generatore Open Graph scrive il blocco og: che controlla come appare il tuo link in una chat, in un feed o in un messaggio. Inoltre segnala le quattro proprietà obbligatorie e mostra la scheda mentre scrivi.
- GratisPrezzo
- 4Tag obbligatori
- NessunaRegistrazione
- NessunaCaricamenti
Generatore Open Graph
I tag og: che decidono come appare un link condiviso
Pronto. I quattro tag obbligatori vengono segnati mentre li compili.
Cosa controlla davvero Open Graph
Incolla un link in una chat e succede qualcosa. Compaiono un’immagine, un titolo, una riga di testo e il nome del sito.
Quella scheda viene dai tag dell’elemento head. Senza di essi l’app indovina, e ciò che indovina di solito è il tuo logo e il tuo menu.
Facebook ha pubblicato il protocollo nel 2010, poi si è diffuso. Oggi LinkedIn, WhatsApp, Slack, Discord, Signal e Telegram leggono tutti le stesse quattro proprietà.
Il protocollo stesso le indica: og:title, og:type, og:image e og:url. Tutto il resto in questa pagina è una rifinitura facoltativa.
L’immagine è tutta la scheda
Una scheda con immagine occupa più volte lo spazio di una senza. Per questo l’immagine è il tag da sistemare per primo.
Quindi usa 1200 per 630 pixel, la forma 1,91 a 1 su cui ritaglia ogni social. Poi tieni il file sotto circa cinque megabyte, e usa sempre un indirizzo https assoluto.
Il testo dentro l’immagine viene tagliato nelle schede piccole. Invece metti le parole in og:title, dove restano leggibili a qualsiasi dimensione.
Property, non name
I tag Open Graph usano l’attributo property, mentre i tag di Twitter usano name. Così, se copi un tag dall’esempio sbagliato, il social lo ignora in silenzio.
La differenza viene da RDFa, su cui si basa Open Graph. Sembra un dettaglio, tuttavia spiega metà delle schede rotte, come illustra il riferimento dell’elemento meta.
Questo generatore di tag Open Graph scrive ciascuno con l’attributo giusto, così quella distinzione non diventa mai un tuo problema.
Tipi oltre website
La maggior parte delle pagine è website. Un articolo aggiunge autore e data di pubblicazione, un prodotto può avere un prezzo e un profilo nomina una persona. Scegli quello adatto, poi ignora il resto.
Perché la tua scheda non si aggiorna
I social mettono in cache ciò che leggono, spesso per giorni. Correggi un tag, ricondividi il link, e torna la vecchia scheda.
Ogni social ha un debugger che forza un aggiornamento, ed è l’unico rimedio affidabile. Facebook, LinkedIn e X ne offrono uno.
Perciò imposta i tag prima di un lancio e non dopo. Una scheda in cache il giorno di una campagna è un problema lento da sbrogliare.
Le descrizioni di una scheda si comportano diversamente
Una descrizione di ricerca compete con altri nove risultati. Invece una descrizione di scheda compete con tutto il feed intorno, e ha meno spazio.
Limitala a una frase, perché la maggior parte dei social mostra circa due righe sul telefono. Una seconda frase lunga raramente sopravvive.
Di’ cosa offre il link, non cosa contiene la pagina. Dietro una scheda non c’è una ricerca, quindi nulla suggerisce perché a qualcuno dovrebbe interessare.
Poi lascia che sia il titolo a portare il peso. In una scheda piccola la descrizione a volte sparisce del tutto.
Le descrizioni di una scheda si comportano diversamente
Una descrizione di ricerca compete con altri nove risultati. Invece una descrizione di scheda compete con tutto il feed intorno, e ha meno spazio.
Limitala a una frase. La maggior parte dei social mostra circa due righe sul telefono, quindi una seconda frase lunga raramente sopravvive.
Di’ cosa offre il link, non cosa contiene la pagina. Dietro una scheda non c’è una ricerca, quindi nulla suggerisce perché a qualcuno dovrebbe interessare.
Poi lascia che sia il titolo a portare il peso. In una scheda piccola la descrizione a volte sparisce del tutto.
Un blocco serve ogni social
Twitter ripiega sui tag og: quando mancano i suoi, e quasi tutto il resto fa lo stesso. Scrivi Open Graph una volta, aggiungi una riga twitter:card, e hai finito.
Come usare il generatore Open Graph
Quattro passaggi, e il pannello delle note segue le quattro proprietà obbligatorie mentre le compili.
- 1
Scegli il tipo
Website copre la maggior parte delle pagine. Scegli article per un post del blog, e compaiono due campi in più per autore e data.
- 2
Scrivi un titolo per la scheda
Fino a 70 caratteri vengono mostrati per intero. Può essere diverso dal titolo della pagina, e spesso dovrebbe esserlo, perché dietro una scheda non c’è una ricerca.
- 3
Aggiungi immagine e indirizzo
Entrambi richiedono indirizzi https completi. L’anteprima mostra il ritaglio 1,91 a 1, così vedi cosa conserva una scheda stretta.
- 4
Incolla il blocco e rifai la lettura
Mettilo nell’head, poi passa il link nel debugger di ogni social. Altrimenti una scheda in cache può restare lì per giorni.
Cosa distingue questo strumento Open Graph
La maggior parte dei generatori produce ogni proprietà della specifica. Invece questo scrive ciò che serve a una scheda e indica ciò che manca.
Segue le quattro obbligatorie
Titolo, tipo, immagine e url mantengono ognuno una nota finché non li compili. Nient’altro finge di essere obbligatorio.
Un’anteprima della scheda dal vivo
Vedi la forma del ritaglio e le lunghezze di taglio mentre scrivi, poiché è lì che sbaglia la maggior parte delle schede.
Attributi corretti ovunque
I tag og: usano property, mentre i tag twitter: usano name. Invertirli è la causa più comune di scheda rotta.
Nessun blocco Twitter duplicato
Twitter legge già i tag og:, quindi spuntare la casella aggiunge solo twitter:card e il testo alternativo dell’immagine. Due volte la stessa cosa non aiuta nessuno.
Campi per gli articoli quando servono
Autore e data di pubblicazione compaiono per gli articoli e restano nascosti negli altri casi. Del resto, un modulo pieno di campi inutili invita a risposte sbagliate.
Nulla lascia la scheda
Qui passano testi di campagne non ancora lanciate. Poiché la pagina non scarica nulla, nessun indirizzo e nessun titolo arriva a un server.
Regole per schede che appaiono giuste
Le schede falliscono in pochi modi prevedibili. Ogni regola qui sotto ne chiude uno.
- Usa un indirizzo immagine https assoluto. La maggior parte dei social ignora i percorsi relativi e l’http semplice. Il crawler non è il tuo browser, e non ha il contesto della pagina per risolverli.
- Fai l’immagine di 1200 per 630. È la dimensione dell’immagine og verso cui ritaglia ogni social. Le immagini più piccole finiscono in una piccola scheda quadrata o in nessuna.
- Tieni il testo importante fuori dall’immagine. I ritagli tagliano i bordi, e le schede piccole rimpiccioliscono tutto. Le parole vanno in og:title, dove restano leggibili.
- Scrivi un titolo per la scheda, non per la pagina. Un titolo di ricerca risponde a una domanda. Invece un titolo di scheda deve funzionare a freddo, in un feed, accanto a contenuti che competono per lo stesso sguardo.
- Punta og:url all’indirizzo canonico. Le condivisioni si accumulano su quell’indirizzo. Quindi, se non coincide con il tag canonical, i conteggi si dividono tra due versioni della stessa pagina.
- Aggiungi og:image:alt. Uno screen reader lo legge al posto dell’immagine, e costa una riga. Anche se pochissimi siti se ne preoccupano, è un cattivo motivo per saltarlo.
- Rifai la lettura dopo ogni modifica. I social usano la cache in modo aggressivo. Finché non forzi un aggiornamento, tutti vedono la vecchia scheda.
- Indica anche il sito. og:site_name mette la tua pubblicazione accanto al titolo. In un feed affollato quella riga lavora quanto il titolo.
- Prova su un telefono. Quasi tutti aprono i link dentro una chat, sullo schermo di un telefono. L’anteprima desktop è quella indulgente.
Sei errori Open Graph che rompono le schede
Ognuno produce una pagina che funziona perfettamente e un link che sembra rotto.
Usare name invece di property
I tag Open Graph richiedono l’attributo property. Con name, il tag è HTML valido e viene ignorato del tutto.
Un percorso dell’immagine relativo
Poiché il crawler non ha una base su cui risolverlo, la scheda arriva senza immagine.
Tag aggiunti con JavaScript
La maggior parte dei crawler legge l’HTML così come viene servito, e non esegue nulla. Quindi i tag inseriti dopo il caricamento restano per loro invisibili.
Un’immagine dietro un login
Poiché una password di staging o una regola anti-hotlink blocca il crawler, la scheda ripiega sul testo semplice.
Due tag og:image
Un tema ne mette uno, e poi un plugin ne mette un altro. I social ne scelgono uno, ma raramente quello che volevi.
Aspettarsi un aggiornamento immediato
Le cache durano giorni. Quindi passa il link nel debugger di ogni social, invece di ricondividerlo e sperare.
I tuoi dubbi su Open Graph
Di quali tag Open Graph ha bisogno una scheda?
Quattro: og:title, og:type, og:image e og:url. Il protocollo li indica come metadati di base, e inoltre una scheda senza immagine è una scheda molto più piccola.
Che dimensione deve avere l’immagine og?
Usa 1200 per 630 pixel, che corrisponde al rapporto 1,91 a 1 su cui ritagliano i social. Inoltre tienila sotto i cinque megabyte e servila in https.
Mi servono anche i tag di Twitter?
Solo twitter:card, e il testo alternativo dell’immagine se lo vuoi. Infatti Twitter legge og:title, og:description, og:image e og:url quando mancano i suoi tag.
Perché la mia scheda non è cambiata?
Il social ha messo in cache quella vecchia. Quindi usa il suo debugger per forzare una nuova lettura, poiché ricondividere il link di solito serve la copia in cache.
Open Graph influisce sulla SEO?
Non direttamente. Influisce su quanto spesso viene cliccato un link condiviso, e inoltre Google ha detto che può usare og:title come segnale quando riscrive un link del titolo.
Posso usare l’output di un generatore di tag Open Graph su qualsiasi piattaforma?
Sì. Lo stesso blocco funziona su Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram e Signal, perché tutti leggono lo stesso protocollo.
Dove vanno questi tag?
Dentro l’elemento head, accanto agli altri meta tag. L’ordine non conta, tuttavia tenerli insieme li rende più facili da controllare dopo.
Cosa succede se non metto nessun tag og?
Il social indovina dalla tua pagina. Di solito questo significa il tuo logo, un titolo del menu e la prima frase che trova, cosa che raramente vende il link.
Più pagine possono condividere un’immagine?
Possono, e un’immagine predefinita per il sito è meglio di niente. Tuttavia una pagina con la propria immagine ottiene più clic, quindi usa quella predefinita solo dove manca un’immagine specifica.
Più pagine possono condividere un’immagine?
Possono, e un’immagine predefinita per il sito è meglio di niente. Tuttavia una pagina con la propria immagine ottiene più clic, quindi usa quella predefinita solo dove manca un’immagine specifica.
Ciò che scrivo qui viene caricato?
No. Il browser scrive i tag, e la pagina non scarica alcun indirizzo. Per questo il sito non salva nulla e non registra nulla.
Strumenti per i link condivisi
Una scheda è fatta di tag e di un’immagine. Questi tre coprono entrambe le metà.
Generatore di Twitter Card
I tag twitter:, e solo quelli senza equivalente og:.
Apri lo strumento →Convertitore di immagini
Trasforma un’immagine della scheda in WebP, JPG o PNG nel browser.
Apri lo strumento →Generatore di meta tag
I tag head che stanno accanto al blocco og:.
Apri lo strumento →
Pronto a sistemare la tua scheda?
Compila quattro proprietà, guarda l’anteprima e incolla il blocco nell’head. Il generatore Open Graph è gratis, non chiede account e gira interamente nel browser.