In breve: per verificare la presenza di Open Graph online, incolla l'indirizzo della pagina nel debugger gratuito Open Graph PromoPilot. Questo strumento leggerà tutti i tag og:* e Twitter Card, controllerà la presenza e le dimensioni dell'immagine, valuterà la completezza del markup e visualizzerà le anteprime dei link per Facebook, X (Twitter) e LinkedIn, oltre a fornire suggerimenti su cosa aggiungere. Non è richiesta alcuna registrazione. Di seguito troverai i tag necessari, le dimensioni richieste per og:image e le istruzioni per aggiornare un'anteprima "bloccata".
Realizzo siti web da 12 anni e sento spesso dai clienti la domanda "Perché Telegram non ha un'immagine?", più di quante mi chiedano informazioni sul posizionamento nei motori di ricerca. Di solito è un lavoro di cinque minuti, se si sa dove cercare.
Che cosa controlla Open Graph Debugger?
Quando inserisci un link in un post o in un messaggio, la piattaforma accede alla pagina e cerca i tag Open Graph. Se ne trova uno, disegna una scheda apposita. In caso contrario, utilizza il contenuto che trova o visualizza un URL semplice. Lo strumento controlla solo ciò che i social network possono leggere.
| Che cosa verifica? | Cosa sta guardando? | Perché le aziende ne hanno bisogno? |
|---|---|---|
| Tutti i tag og:* | og:titolo, og:descrizione, og:immagine, og:url, og:tipo, og:nome_sito, og:locale | Da queste informazioni, i siti raccolgono il titolo, la descrizione e l'immagine della carta. |
| Scheda Twitter | twitter:card, twitter:title, twitter:description, twitter:image | X (Twitter) legge i suoi tag e, se sono assenti, parzialmente og |
| Immagine originale | C'è una foto? E quali sono le sue dimensioni? | La piccola immagine trasforma la carta in una minuscola icona laterale |
| Valutazione della completezza | Quanti tag consigliati sono stati compilati? | Breve verifica: è tutto a posto? |
| Anteprime di rete | carte per Facebook, X e LinkedIn | È possibile visualizzare l'anteprima del post prima della pubblicazione. |
| Raccomandazioni | Cosa dovrei aggiungere o correggere? | Un elenco di attività già pronto per uno sviluppatore o per te |
Come controllare le pagine Open Graph online?
- Apri Open Graph Debugger.
- Inserisci l'URL della pagina che desideri condividere: un articolo, un prodotto o una landing page pubblicitaria. Fai clic su "Verifica".
- Esamina l'elenco dei tag: quali sono impostati, quali sono vuoti e se in og:url è presente un indirizzo esterno o di prova.
- Controlla l'anteprima di ogni rete: il titolo è tagliato? L'immagine è visibile? C'è del testo importante ai bordi?
- Si prega di aggiungere i tag mancanti come consigliato e di ricontrollare la pagina.
Pagina degli strumenti: campo indirizzo, pulsante "Verifica", elenco dei controlli e domande frequenti (FAQ).
Lo strumento è leggero: il limite giornaliero è sufficiente per consentire a un utente non registrato di visualizzare tutti i template del sito, ovvero la homepage, le categorie, i prodotti e gli articoli. Dopo la registrazione gratuita, il limite viene triplicato.
Quali sono gli errori più comuni in Open Graph?
Ecco cosa trovo su quasi tutti gli altri siti e in quale ordine per risolvere il problema.
- Non è presente l'attributo og:image oppure è specificato un URL relativo. I social network non comprenderanno
content="/img/cover.jpg"— è necessario l'URL completo che inizia conhttps://. Senza un'immagine, la portata del post si riduce significativamente. - L'immagine è troppo piccola. Il logo di 200x200 pixel trasforma la carta in un piccolo quadrato sul lato. È necessaria un'immagine di 1200x630 pixel.
- Un'unica immagine per l'intero sito. Ogni articolo e ogni prodotto sui social media devono avere lo stesso aspetto, con il logo. Per il blog e il catalogo, l'immagine deve essere ripresa dalla foto principale della pagina.
- og:url porta a un altro indirizzo: la homepage, un dominio di prova o la versione
http://. La piattaforma può consolidare tutti i link in un'unica pagina. - Non esiste twitter:card. Senza di essa, X spesso mostra una piccola scheda. Per un'immagine più grande, è necessario
summary_large_image. - og:title duplica il titolo con "buy" e il marchio. In un feed di social media, questo sembra un annuncio pubblicitario; un titolo accattivante, come quello di un post, è meglio.
L'insieme minimo corretto si presenta così:
<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">Come preparare un'immagine per og:image?
L'immagine è la parte più visibile del biglietto, ed è proprio su questo aspetto che spesso si tende a risparmiare. Ecco alcune regole che seguo:
- Le dimensioni sono 1200×630 e l'orientamento è orizzontale. Il social network ritaglierà la parte superiore e inferiore della foto quadrata del prodotto, il che potrebbe comportare la perdita di una parte, come la testa o la suola.
- L'importante è che sia al centro. Piattaforme diverse ritagliano i bordi in modo diverso e, nella visualizzazione su dispositivi mobili, la scheda è ancora più piccola. Mantieni il testo grande e lontano dai bordi.
- Testo minimo. Il titolo è già sotto l'immagine; 3-6 parole o nessuna didascalia sono sufficienti sull'immagine stessa.
- File leggero. Un'immagine JPG o PNG di dimensioni ragionevoli si caricherà rapidamente e la piattaforma non andrà in timeout.
- Un'immagine dedicata per ogni pagina chiave. Per articoli e prodotti, è comodo crearne una automaticamente: come immagine di copertina dell'articolo o come foto principale del prodotto.
Un buon test consiste nell'aprire l'anteprima nel debugger del telefono. Se il collegamento non è chiaro senza ingrandire, l'immagine deve essere rielaborata.
Come faccio ad aggiornare una vecchia anteprima dopo una correzione?
Uno scenario comune: hai corretto i tag, ma il social network continua a mostrare la vecchia immagine. Il motivo è la cache: la piattaforma ha memorizzato l'anteprima della prima condivisione. Su Facebook recuperare i dati con lo Sharing Debugger può essere d'aiuto, su LinkedIn con Post Inspector e su Telegram con il bot @WebpageBot, a cui inviare il link. Se tutto il resto fallisce, aggiungi un parametro innocuo all'indirizzo, come ad esempio ?v=2: per la piattaforma, questo rappresenta un nuovo link.
Confronto: Open Graph Debugger e alternative
| Attrezzo | Cosa c'è di gratuito? | Restrizioni | Per chi è adatto? |
|---|---|---|---|
| PromoPilot - Debugger Open Graph | Tutti i tag og e Twitter, og:dimensioni dell'immagine, anteprime per Facebook, X e LinkedIn, raccomandazioni | Non cancella la cache dei social media | Controlla immediatamente la tua pagina prima di pubblicarla su qualsiasi social media. |
| Condivisione del debugger (Meta) | Anteprima Facebook e raccolta dati aggiuntiva | Solo Facebook, è necessario accedere all'account. | Reimposta la vecchia anteprima su Facebook |
| Ispettore dei post di LinkedIn | Anteprima di LinkedIn e aggiornamento della cache | Solo LinkedIn, accesso richiesto | Per chi promuove su LinkedIn |
| @WebpageBot su Telegram | Aggiornamento dell'anteprima del link in Telegram | Solo Telegram non analizza i tag | Per i proprietari dei canali Telegram |
In conclusione: per svuotare la cache sono necessari i debugger ufficiali della piattaforma, ma ogni piattaforma mostra solo la propria rete. Per visualizzare tutte le anteprime e un elenco dei tag mancanti in un colpo solo, un debugger universale risulta più conveniente.
A proposito, PromoPilot offre 87 strumenti SEO gratuiti. Se non hai ancora scritto i tag, abbiamo un articolo nella nostra serie su un generatore di meta tag che creerà un blocco Open Graph con un'anteprima.
In che modo Open Graph Debugger si differenzia dall'analisi dei meta tag?
L'analisi dei meta tag esamina una pagina dal punto di vista di un motore di ricerca: titolo, descrizione, canonical, hreflang e Open Graph sono solo un gruppo di elementi. Il debugger si concentra sui social media: crea schede per diverse piattaforme, verifica le dimensioni delle immagini e fornisce consigli specifici basati sulle anteprime. Se i link al tuo sito vengono condivisi attivamente sui social media e sulle app di messaggistica, il debugger risulta più utile.
Entrambi presentano una limitazione: leggono l'HTML restituito dal server. Se i tag vengono inseriti da uno script del browser, molti social network non li visualizzeranno; questo problema deve essere risolto lato sito web. Un altro dettaglio: il debugger controlla i tag, ma non la condivisione stessa. Se la pagina è protetta da password, bloccata geograficamente o protetta dai bot, il social network potrebbe non essere in grado di accedervi anche se tutti i tag sono presenti.
Quando uno strumento gratuito non è sufficiente?
Un debugger mostrerà che la pagina non ha og:image. Ma se ci sono migliaia di pagine, inserire manualmente le immagini non è possibile. È necessario uno specialista quando:
- ogni prodotto o articolo dovrebbe avere una propria immagine di anteprima, raccolta automaticamente;
- il sito restituisce i tag utilizzando uno script e i social network non li vedono;
- Lanci annunci e invii di email in cui ogni anteprima influisce sul costo per clic;
- Abbiamo bisogno di una combinazione di "sito web + canale Telegram + pubblicazione automatica" con le carte giuste.
Cosa posso fare per il tuo sito web?
Sono Valeriy Danyuk, sviluppatore e specialista SEO con 12 anni di esperienza e oltre 200 clienti. Offro un'anteprima del link di alta qualità, gratuita e personalizzata per ogni progetto.
SEO e promozione
- Audit SEO completo del sito web: verifico tutti i tag del template, imposto le immagini di anteprima automatiche e correggo il codice.
Siti web e negozi online
- Trasferimento del tuo negozio da Instagram al tuo sito web: prodotti con anteprime adeguate per una facile condivisione.
- Una landing page per un nuovo prodotto creata in una sola sera: un caso di studio di NordHarvest con una scheda precompilata per i social media.
- Sito web di una clinica di chirurgia plastica con intelligenza artificiale e applicazioni tramite Telegram.
- Sito web su 1001site: le anteprime per i social network e la pubblicazione automatica su Telegram vengono configurate automaticamente.
Bot e automazione
- Bot Telegram con intelligenza artificiale per un negozio online di salse.
- QuestFlow è una piattaforma SaaS Telegram con intelligenza artificiale.
- Agenti di e-commerce al posto dei chatbot.
Inviami un link che ha un aspetto scorretto in una chat su Telegram e ti dirò quale tag manca.
Risultato
- Uno strumento online di verifica Open Graph mostra come appare un link su Facebook, X e LinkedIn e quali tag mancano.
- Il minimo richiesto è og:title, og:type, og:image (1200×630, indirizzo completo) e og:url, più twitter:card.
- Dopo aver risolto il problema, reimposta la cache dei siti: Sharing Debugger, Post Inspector, @WebpageBot.
- Per il catalogo e il blog, le immagini di anteprima dovrebbero essere raccolte automaticamente, come su 1001site.
Prima che i tuoi follower visualizzino il post, verifica la pagina che stai per condividere utilizzando il debugger gratuito Open Graph.
Fonti
- Pagina dello strumento Open Graph Debugger di PromoPilot: elenco dei controlli e domande frequenti.
- Protocollo Open Graph (ogp.me) - proprietà obbligatorie e facoltative.
- Meta's Sharing Debugger e LinkedIn Post Inspector sono gli strumenti ufficiali delle piattaforme.
