Ho imparato il valore dei meta tag in modo imbarazzante Anni fa ho spedito una landing page di cui ero orgoglioso, ho pubblicato il link in alcuni punti e l'ho visto apparire ovunque come un URL spoglio senza titolo, senza descrizione e con un'icona di immagine rotta La pagina stessa andava bene, ma non l'avevo mai aggiunta Grafico aperto tag, quindi ogni piattaforma social è ricaduta sull'ipotesi, e ognuno di loro ha indovinato male Il contenuto era buono e la presentazione del collegamento era spazzatura, il che in pratica significava molti meno clic di quanto la pagina meritasse.
I meta tag sono il piccolo blocco di HTML che decide come appare la tua pagina ovunque tranne che nella pagina stessa: in Google's risultati, in uno Slack unfurl, in una scheda Facebook o LinkedIn, in un tweet Sono facili da sbagliare perché ci sono tre standard sovrapposti - tag SEO standard, Open Graph e Twitter Cards - e ognuno vuole nomi di proprietà leggermente diversi per quelle che spesso sono le stesse informazioni Costruisco Toolz.dev e scrivo molti contenuti su di esso, quindi ho impostato costantemente i metadati e ho costruito il Generatore di meta tag per produrre un blocco di tag corretto, completo e pronto per la copia da un set di input, con avvisi di lunghezza in modo da non spedire mai più un titolo che viene troncato.
tl; dr: I meta tag controllano il tuo frammento di ricerca e le anteprime dei tuoi link social Hai bisogno di tre set sovrapposti - tag SEO standard, Open Graph per la maggior parte delle piattaforme e Twitter Card - e condividono la maggior parte dei loro contenuti ma usano nomi di attributi diversi Il Generatore di meta tag Crea tutti e tre da un modulo, ti avvisa quando il tuo titolo supera ~60 caratteri o la descrizione passa ~160, sfugge al tuo testo in sicurezza e può emettere un blocco JSON-LD corrispondente, tutto nel tuo browser.
Cosa sono i meta tag e perché sono importanti?
I meta tag sono elementi che vivono all'interno di una pagina <head> e trasportare informazioni sulla pagina anziché sul contenuto mostrato su di essa. la <title> Tag e il <meta name="description"> I tag sono i due più vecchi e più importanti: insieme di solito formano il titolo cliccabile e la riga di riepilogo grigia in un risultato di ricerca di Google. Falli bene e il tuo risultato legge bene e guadagna clic; lasciali fuori e i motori di ricerca sintetizzano qualcosa dal testo della tua pagina, spesso imbarazzante.
Oltre a queste basi si trovano due standard sociali. Grafico aperto, originario di Facebook ma ora onorato da LinkedIn, Slack, Discord, Pinterest, WhatsApp e molti altri utilizza tag come og:title, og:description, e og:image Per controllare come appare un collegamento condiviso come una carta. Le schede Twitter fanno lo stesso lavoro per Twitter/X con twitter: tag. C'è una forte sovrapposizione - il titolo e la descrizione sono solitamente identici in tutti e tre - ma ogni piattaforma legge il proprio spazio dei nomi, quindi devi fornirli tutti e tre per coprire ovunque il tuo collegamento possa essere condiviso.
Il motivo per cui questo è importante è la leva. Lo stesso contenuto ottiene un coinvolgimento drammaticamente maggiore quando la sua anteprima di link è completa e attraente rispetto a quella nuda. Un buon titolo e descrizione di aumento di clic dalla ricerca; una vera e propria scheda di grafo aperta aumenta i clic da ogni condivisione sociale. I meta tag sono una configurazione una tantum per pagina che continua a pagare ogni volta che la pagina viene trovata o condivisa, che è esattamente il tipo di lavoro che vale la pena svolgere con attenzione. la Generatore di meta tag esiste in modo che l'installazione sia un'attività di compilazione del modulo piuttosto che una copia-incolla-dalla memoria.
In che modo il generatore di meta tag costruisce i tag?
Il generatore prende un unico insieme strutturato di input - titolo, descrizione, immagine, URL, nome del sito e una manciata di opzioni - e li fan fuori in tre blocchi coordinati di HTML Comprendere il fan-out spiega perché un modulo produce così tanti tag.
dai tuoi campi principali prima scrive il Tag primari: il <title>, la meta descrizione e le parole chiave opzionali, l'autore, i robot, il linguaggio, il colore del tema e un collegamento canonico. Quindi riutilizza lo stesso titolo, descrizione e immagine per scrivere il Blocco grafico aperto con il og: Nomi di proprietà, aggiungendo og:type, og:url, e og:site_name. Finalmente scrive il Blocco della carta Twitter di twitter: nomi, inclusi lo stile della carta e il tuo handle mappato a twitter:site e twitter:creator. Poiché tutti e tre attingono dagli stessi input, rimangono sincronizzati automaticamente: non è possibile dare accidentalmente a Facebook un titolo e a Twitter un altro.
Due dettagli rendono l'output sicuro da incollare. Innanzitutto, solo i campi che riempi effettivamente i tag di produzione, quindi non spedisci mai vuoti content="" attributi. In secondo luogo, ogni valore è in fuga HTML: una citazione, una commerciale o una parentesi angolare nella tua descrizione viene convertita nella sua entità in modo che non possa uscire dall'attributo e danneggiare il tuo markup. la Generatore di meta tag Facoltativamente, emette anche un blocco di dati strutturati JSON-LD corrispondente, che è un modo separato ma complementare per descrivere la pagina ai motori di ricerca.
Quanto dovrebbero essere lunghi un titolo e una meta descrizione?
Questa è la domanda che fa inciampare la maggior parte delle persone e la risposta riguarda la larghezza del display, non un limite di carattere. I motori di ricerca troncano titoli e descrizioni che superano lo spazio che assegnano, quindi i limiti pratici sono i punti oltre i quali il testo inizia a essere interrotto con un'ellissi.
Per i titoli, mira a circa 50-60 caratteri. Google rende i titoli larghi fino a circa 600 pixel, il che equivale a circa 60 caratteri per il testo tipico, e oltrepassa la fine. Per le metadescrizioni, mira a circa 120-160 caratteri; le descrizioni possono arrivare a circa 160 prima del troncamento sul desktop e il cellulare a volte è più breve. Nessuno dei due limiti è esatto perché entrambi sono misurati in pixel, non in caratteri - un titolo pieno di lettere larghe tronca prima di uno pieno di caratteri stretti - ma le linee guida dei caratteri sono abbastanza vicine da poter essere progettate.
la Generatore di meta tag conta i personaggi dal vivo e ti avverte mentre varchi le soglie: un titolo sopra i 60 o una descrizione sopra i 160 viene contrassegnato in modo da poterlo tagliare prima che venga spedito Ti dà anche una gomitata quando un titolo è molto corto, perché un titolo di 20 caratteri spreca spazio che potresti usare per le parole chiave Queste sono linee guida piuttosto che regole - un titolo leggermente lungo non è una catastrofe - ma vedere il conteggio mentre scrivi ti mantiene onesto Se stai sintonizzando molto titoli e descrizioni, il Contatore di parole è utile per una copia più lunga che deve colpire un bersaglio di lunghezza.
Qual è la differenza tra tag SEO, open graph e Twitter card?
Servono consumatori diversi e sapere quale è il che ti impedisce di pensare di aver finito quando ne hai coperto solo uno. Ecco come si allineano i tre set per i campi che condividono.
| proposito | Targhetta SEO | Grafico aperto | scheda twitter |
|---|---|---|---|
| Titolo pagina | <title> |
og:title |
twitter:title |
| riassunto | meta name="description" |
og:description |
twitter:description |
| Immagine in anteprima | - | og:image |
twitter:image |
| indirizzo canonico | link rel="canonical" |
og:url |
twitter:url |
| Stile di carte | - | og:type |
twitter:card |
| attribuzione | meta name="author" |
og:site_name |
twitter:site |
La colonna SEO è ciò che Google legge per il risultato della ricerca La colonna Open Graph è ciò che la maggior parte delle piattaforme social e chat leggono per le loro schede di collegamento La colonna Twitter è ciò che Twitter/X legge La sovrapposizione è ovvia - titolo e descrizione si ripetono su tutti e tre - ma poiché ogni piattaforma guarda solo nel proprio spazio dei nomi, omettere una colonna significa che la piattaforma torna a indovinare Il Generatore di meta tag Riempie tutte e tre le colonne da un modulo proprio in modo da non lasciare mai una piattaforma indovinando.
Ho ancora bisogno di dati strutturati JSON-LD?
I meta tag e i dati strutturati rispondono a domande diverse, quindi quelli utili si completano piuttosto che sostituirsi a vicenda. I meta tag indicano alle piattaforme come visualizzare la pagina; JSON-LD indica ai motori di ricerca di cosa tratta la tua pagina in modo leggibile in modo da sbloccare i risultati.
JSON-LD è un blocco di JSON, avvolto in a <script type="application/ld+json"> tag, che descrive la tua pagina come un'entità digitata - un sito Web, un articolo, un prodotto, una ricetta e così via - con proprietà con nome I motori di ricerca la utilizzano per comprendere le relazioni e, nei casi giusti, per mostrare risultati migliorati come sottotitoli degli articoli, valutazioni a stelle o fisarmoniche FAQ direttamente nella ricerca Non controlla il tuo frammento come fanno il titolo e la descrizione; aggiunge un livello di significato in alto.
la Generatore di meta tag emette un blocco JSON-LD iniziale accanto ai meta tag, digitato come sito Web o articolo in base al tipo di grafico aperto e popolato dagli stessi campi È una solida base che puoi estendere con proprietà specifiche del tipo Vale la pena aggiungere dati strutturati ogni volta che vuoi essere idoneo per risultati ricchi, sebbene non sia una leva di classificazione magica - abilita le funzionalità, non le forza Per il quadro più ampio di come questi pezzi si incastrano, il Toolkit per sviluppatori web Roundup copre gli strumenti circostanti che uso.
Casi d'uso comuni per un generatore di meta tag
Lancio di una nuova pagina o sito
quello ovvio. Ogni nuova pagina ha bisogno di un titolo, una descrizione e una scheda sociale e digitare a mano il set completo di tag SEO, Open Graph e Twitter è noioso e soggetto a errori. Compilando il modulo una volta e copiando un blocco completo e corretto trasforma un compito complicato in uno di trenta secondi e gli avvisi di lunghezza significano che la pagina si avvia con uno snippet che viene visualizzato completamente invece di essere troncato il primo giorno.
Riparare anteprime di link errate o mancanti
Quando un collegamento condiviso viene visualizzato senza immagine o testo sbagliato, la causa è quasi sempre mancante o tag Open Graph non validi Ricostruire i tag con il generatore - assicurandosi og:image, og:title, e og:description sono tutti presenti e corretti - corregge l'anteprima Dopo l'aggiornamento, la relativa cache platform' s a volte deve essere aggiornata attraverso il suo strumento di debug, ma i tag stessi escono a destra.
Standardizzazione dei metadati in un team
Su un progetto con diversi contributori, meta tag deriva: una pagina ha tag Twitter, un'altra no, un terzo ha una descrizione il doppio della lunghezza consigliata. L'utilizzo di un singolo generatore come riferimento per l'aspetto di un set completo di tag mantiene tutti nella stessa forma di metadati. L'output raddoppia come documentazione di esattamente quali tag si aspetta il progetto.
Preparazione dei metadati per un framework
In Next.js, nuxt, react o simili, non incolli RAW <meta> tag - si alimentano i valori in una testa o API di metadati Il generatore è ancora utile come fonte di verità per cui i tag e i valori necessari: compilare il modulo, leggere il set completo e tradurlo nel tuo oggetto metadati framework' s Rimuove le congetture su cui og: e twitter: campi da includere.
Perché generare meta tag nel browser?
la Generatore di meta tag funziona interamente lato client I titoli, le descrizioni, gli URL e i link alle immagini che inserisci rimangono nel tuo browser e non vengono mai caricati, e lo strumento funziona offline una volta caricato Che la privacy è importante perché spesso stai preparando metadati per pagine che non sono ancora pubbliche - un prodotto inedito, una campagna di bozza client's, uno strumento interno Incollarlo in un generatore lato server significa consegnare i tuoi piani non annunciati a qualcun altro's logs; farlo in-browser significa che non lascia mai la tua macchina Il Privacy dei dati negli strumenti online La guida spiega perché lo tratto come non negoziabile.
Il lavoro sui metadati si collega anche ad alcune attività vicine. la generatore di lumache costruisce l'URL pulito che il tuo canonico e og:url I tag puntano. la codificatore di entità HTML è utile quando hai bisogno di sfuggire a mano a un personaggio testardo. E il Encoder/decoder URL Gestisce la codifica per i parametri di query che a volte si bloccano da un URL canonico. Insieme, coprono i piccoli lavori esigenti che circondano correttamente una pagina.
FAQ
Quali meta tag crea il generatore?
Crea i tag SEO standard - titolo, descrizione, parole chiave, autore, robot, lingua, colore del tema e canonici - oltre a tag Open Graph come og: title, og: descrizione, og: immagine e og: URL e i tag corrispondenti delle schede Twitter. Può anche emettere un blocco di dati strutturati JSON-LD. Solo i campi compilati producono tag, quindi l'output rimane pulito.
Quanto dovrebbero essere lunghi il mio titolo e la mia meta descrizione?
Punta a un titolo di circa 50-60 caratteri e una descrizione di circa 120-160 caratteri. Google tronca il testo oltre quei punti perché misura la larghezza in pixel, non i caratteri esatti. Il generatore conta durante la digitazione e ti avvisa quando è probabile che un titolo o una descrizione vengano tagliati nei risultati di ricerca.
Cosa sono i tag del grafico aperto e ne ho bisogno?
I tag Graph aperti controllano l'aspetto della tua pagina quando condivisa su Facebook, LinkedIn, Slack, Discord e molte altre piattaforme. Senza di loro un link condiviso può mostrare nessuna immagine o testo di fallback imbarazzante. Se desideri anteprime di link attraenti e prevedibili ovunque siano condivisi i tuoi contenuti, i tag Graph aperti sono fortemente consigliati e il generatore li crea per te.
Qual è la differenza tra i due tipi di schede Twitter?
La scheda di riepilogo mostra una piccola miniatura quadrata accanto al titolo e alla descrizione, mentre Summary_Large_image mostra un'immagine di banner di grandi dimensioni sopra di loro. Usa la scheda di grande immagine quando hai un'immagine di condivisione ampia e di alta qualità che desideri dominare l'anteprima e utilizza il riepilogo per una scheda più compatta. Il generatore ti consente di passare da uno all'altro e scrive il valore corretto di Twitter:Card.
Dove metto i meta tag generati?
Incolla il blocco all'interno dell'elemento head della tua pagina HTML, idealmente vicino alla parte superiore prima degli altri script. In un framework come Next.js, React o Vue, aggiungi i tag equivalenti attraverso la testa o l'API dei metadati del framework utilizzando l'HTML generato come riferimento per esattamente quali tag e valori includere.
ho ancora bisogno di un URL canonico se ho tag graph aperti?
si. Il collegamento canonico indica ai motori di ricerca quale URL è la versione autorevole di una pagina per evitare problemi di contenuto duplicato, mentre OG:URL imposta l'URL utilizzato nelle anteprime social. Servono scopi diversi anche se i valori sono generalmente identici, quindi impostare entrambi è una buona pratica.
Il meta tag generatore è gratuito e privato?
si. È completamente gratuito senza limiti e ogni tag è integrato in JavaScript all'interno del tuo browser. I link di testo, URL e immagini immessi non vengono mai inviati a un server, quindi puoi preparare in sicurezza i metadati per pagine non pubblicate o interne.
L'aggiunta di meta tag migliora le mie classifiche di ricerca?
I meta tag aiutano i motori di ricerca e le piattaforme social a visualizzare correttamente la tua pagina, ma sono uno dei fattori tra i tanti. Un titolo e una descrizione forti possono aumentare la percentuale di clic e i dati strutturati possono consentire risultati ricchi, ma la qualità dei contenuti, i collegamenti e l'integrità del sito generano ancora classifiche. Tratta i buoni meta tag come basi necessarie piuttosto che come scorciatoia di classifica.
