Verificatore e simulatore OGP
- Sicuro
- I risultati della diagnostica non vengono salvati né pubblicati.
Note
Uno strumento per validare i tag OGP e simulare come appare una pagina quando viene condivisa sui social.
Utile per creare immagini OGP e testare i meta tag HTML.
Sorgente di input
Scegli uno dei tre metodi.
| URL del sito | Adatto a siti pubblicamente accessibili. |
|---|---|
| Sorgente HTML | Adatto a siti in sviluppo o con restrizioni di accesso. |
| File immagine | Adatto per controllare l’aspetto di un’immagine OGP durante la creazione. |
Risultato diagnostico
Valutato in tre livelli.
| Valutazione A | Soddisfa tutti i requisiti consigliati. |
|---|---|
| Valutazione B | Soddisfa i requisiti obbligatori, ma ci sono elementi consigliati. |
| Valutazione C | Alcuni elementi richiedono correzioni. |
Esempio consigliato
Le impostazioni seguenti coprono le principali piattaforme.
<meta property="og:title" content="Titolo pagina">
<meta property="og:description" content="Descrizione pagina">
<meta property="og:url" content="URL pagina">
<meta property="og:image" content="URL immagine OGP">
<meta property="og:type" content="Tipo pagina">
<meta property="og:site_name" content="Nome sito">
<meta name="twitter:card" content="Tipo Twitter Card">Dettagli dei tag
Tag OGP di base
Tag utilizzabili su varie piattaforme social. Si consiglia di impostare tutti i seguenti.
Usa l’attributo `property`.
<meta property="og:title" content="Titolo pagina">
<meta property="og:description" content="Descrizione pagina">
<meta property="og:url" content="URL pagina">
<meta property="og:image" content="URL immagine OGP">
<meta property="og:type" content="Tipo pagina">
<meta property="og:site_name" content="Nome sito">og:title
Imposta il titolo della pagina. Di solito lo stesso valore del tag `title`.
Su X (Twitter), se manca, la Twitter Card potrebbe essere disabilitata, quindi è di fatto obbligatorio.
<meta property="og:title" content="Titolo pagina">Esempio
<meta property="og:title" content="Verificatore e simulatore OGP">og:description
Imposta la descrizione della pagina. Di solito lo stesso valore del tag `description`.
Sulla maggior parte dei social, se omesso, `description` può essere usato come fallback.
<meta property="og:description" content="Descrizione pagina">Esempio
<meta property="og:description" content="Diagnostica le impostazioni OGP e mostra in anteprima come apparirà la tua pagina quando viene condivisa sui social, da un URL o dal sorgente HTML. Supporta X, Facebook e LINE e può anche simulare da un file immagine.">og:url
Imposta l’URL della pagina come URL assoluto.
<meta property="og:url" content="URL pagina">Esempio
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Imposta l’URL dell’immagine OGP come URL assoluto. Dimensione consigliata: `1200px`×`630px`.
Poiché può essere mostrata in 1:1, mantieni le informazioni importanti nell’area centrale `630px`×`630px`.
<meta property="og:image" content="URL immagine OGP">Esempio
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Specifica il tipo di pagina.
| website | Homepage del sito |
|---|---|
| article | Pagine non home come articoli |
| blog | Homepage del blog |
| product | Pagine dettaglio prodotto/servizio |
<meta property="og:type" content="Tipo pagina">Esempio
<meta property="og:type" content="article">og:site_name
Specifica il nome del sito. Di solito è comune a tutte le pagine.
<meta property="og:site_name" content="Nome sito">Esempio
<meta property="og:site_name" content="develop.tools">Tag di X (Twitter)
Tag prioritari per X (ex Twitter).
Se i tag OGP di base sono impostati, puoi ometterli tutti senza problemi.
Imposta `twitter:card` solo se vuoi controllare la dimensione della miniatura.
Usa l’attributo `name`.
<meta name="twitter:card" content="Tipo Twitter Card">
<meta name="twitter:title" content="Titolo pagina">
<meta name="twitter:description" content="Descrizione pagina">
<meta name="twitter:image" content="URL miniatura">
<meta name="twitter:site" content="Username X/Twitter del sito">
<meta name="twitter:creator" content="Username X/Twitter dell’autore">twitter:card
Imposta il tipo di Twitter Card. Specificalo se vuoi una miniatura grande.
Se omesso, diventa `summary`.
| summary | Miniatura piccola (quadrata) + info sito affiancate |
|---|---|
| summary_large_image | Miniatura grande + info sito impilate |
<meta name="twitter:card" content="Tipo Twitter Card">Esempio
<meta name="twitter:card" content="summary_large_image">Tag di Facebook
Tag usati da Facebook.
Specificali se vuoi usare funzioni di analisi specifiche di Facebook.
<meta property="fb:app_id" content="ID app Facebook">