DevToolPal
IT

Generatore di meta tag

Genera meta tag SEO, Open Graph e Twitter Card per la tua pagina, con anteprima del risultato di ricerca e della scheda social.

Eseguito in locale, mai caricato

Opzioni

Dati della pagina

HTML per <head>

Anteprima

Risultato di ricerca

example.com
Titolo della pagina

Aggiungi una descrizione per scegliere lo snippet mostrato sotto il titolo.

Scheda social

Nessuna immagine di condivisione
example.comTitolo della pagina

L’immagine non viene caricata qui, quindi questa pagina non effettua richieste di rete.

Cosa fa

Il generatore di meta tag scrive i tag da inserire nel <head> di una pagina HTML: il <title>, la meta description, parole chiave e autore, una direttiva robots, il link canonico, un colore del tema, le dichiarazioni viewport e charset, l’insieme completo dei tag Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) e i tag delle schede X / Twitter.

Mentre scrivi, mostra come potrebbe apparire la pagina in un risultato di ricerca e in una scheda social, e controlla gli errori più comuni: titolo oltre circa 60 caratteri, descrizione mancante, troppo corta o oltre circa 160 caratteri, URL canonico relativo, immagine senza URL assoluto, lingua o colore scritti male. Tutto avviene nel browser, e l’anteprima di proposito non carica la tua immagine, quindi la pagina non effettua richieste di rete.

Come si usa

  1. Compila i dati della pagina. Titolo e descrizione sono l’essenziale; i contatori mostrano la loro lunghezza rispetto ai limiti di visualizzazione abituali. Fai clic su Esempio per vedere un caso completo.
  2. Inserisci l’URL canonico della pagina e un’immagine di condivisione. Un percorso relativo come /images/cover.jpg viene risolto rispetto all’URL canonico.
  3. Nelle opzioni scegli il tipo Open Graph (website per la maggior parte delle pagine, article per gli articoli di un blog), la dimensione della scheda, se i motori possono indicizzare la pagina e seguirne i link, e quali gruppi di tag includere.
  4. Leggi gli avvisi sotto l’HTML, controlla le anteprime e copia l’HTML nel modello della pagina.

Le opzioni sono salvate nell’indirizzo della pagina e il modulo nel browser, quindi puoi riprenderlo o condividere un link con le stesse impostazioni.

Esempio

La pagina di esempio produce tag come questi (abbreviato):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

I valori vengono codificati per l’HTML, quindi virgolette e & in un titolo non rompono il markup, e la lingua en-US viene normalizzata nel formato en_US richiesto da Open Graph.

Suggerimenti

  • Scrivi un titolo e una descrizione unici per ogni pagina; i duplicati rendono i risultati difficili da distinguere.
  • Metti le parole più importanti all’inizio del titolo, perché i titoli lunghi vengono troncati alla fine.
  • L’URL canonico deve essere l’indirizzo esatto da indicizzare, con il protocollo e la variante preferita con o senza www.
  • Impostare robots su noindex esclude la pagina dai risultati, ma solo se i crawler possono ancora leggerla: non bloccarla anche nel robots.txt.

Domande frequenti

› Quali meta tag contano davvero per la SEO?

I più importanti sono l’elemento title e la meta description: il titolo è un segnale di ranking e il titolo del tuo risultato, mentre la descrizione viene spesso usata come snippet sotto di esso. Il link canonical indica ai motori qual è l’URL principale e robots controlla l’indicizzazione. Google e Bing ignorano il tag keywords; inseriscilo solo se lo legge un altro sistema che usi.

› Che cos’è Open Graph?

Open Graph è un insieme di meta tag og:, introdotto da Facebook, che dice a social network e app di messaggistica quale titolo, descrizione e immagine mostrare quando qualcuno condivide il tuo link. LinkedIn, Slack, Discord, WhatsApp, Telegram e molti altri li leggono, e X (Twitter) li usa quando mancano i suoi tag twitter:.

› Quanto deve essere grande l’immagine di condivisione?

Usa 1200 × 630 pixel (un rapporto di circa 1,91:1) per le schede grandi, tieni i contenuti importanti lontano dai bordi e resta sotto qualche megabyte. L’URL deve essere assoluto e pubblico; un percorso relativo viene risolto rispetto all’URL canonico inserito.

› Perché condividendo il link vedo ancora il vecchio titolo?

Le piattaforme social memorizzano in cache le anteprime. Dopo aver aggiornato i tag, chiedi alla piattaforma di rileggere la pagina con il suo strumento, come il Debugger di condivisione di Facebook o il Post Inspector di LinkedIn, oppure aggiungi un parametro all’URL condiviso.