Generatore di Meta Tag

Informazioni su GeekFormat

Parametri di input

Titolo pagina30 caratteri

Meta descrizione87 caratteri

Parole chiave

Autore

URL canonica

Nome del sito (og:site_name)

URL immagine OG

Tipo OG

Robots

Tipo Twitter Card

@handle Twitter

Colore del tema

Tag generati

<!-- Primary Meta Tags -->
<title>GeekFormat - Developer Toolbox</title>
<meta name="title" content="GeekFormat - Developer Toolbox">
<meta name="description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta name="keywords" content="online tools,developer tools,pdf tools,network tools">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://geekformat.com/tools">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://geekformat.com/tools">
<meta property="og:title" content="GeekFormat - Developer Toolbox">
<meta property="og:description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta property="og:image" content="https://geekformat.com/og-cover.png">
<meta property="og:site_name" content="GeekFormat">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="GeekFormat - Developer Toolbox">
<meta name="twitter:description" content="One page, one utility. Fast and privacy-friendly tools for developers and growth teams.">
<meta name="twitter:image" content="https://geekformat.com/og-cover.png">

Strumento di generazione meta tag lato browser per la generazione di tag come title, description, keywords, canonical, Open Graph, Twitter Card, robots, escape automatico entità HTML, avvisi lunghezza caratteri in tempo reale con stato colorato, copia e download con un clic.

Raccomandazioni correlate

Generatore Sitemap

Generatore di QR Code/Codici a Barre

Compressione TypeScript

Convertitore Esadecimale

Hash SHA-256

Decodifica Base64

Casi d'uso

Prima del lancio di un nuovo sito, generazione in batch di set completi di meta tag per homepage, pagine elenco, pagine dettaglio, completamento rapido della configurazione SEO di base
Prima della pubblicazione di articoli blog, configurazione di tag Open Graph di tipo article e Twitter Card di tipo summary_large_image per migliorare l'effetto di condivisione sulle piattaforme social
Pagine prodotto e-commerce configurano og:type product, impostano informazioni strutturate come og:image, og:price:amount, ottimizzano la visualizzazione dei prodotti sulle piattaforme social
Dopo un restyling del sito o cambio di dominio, rigenerazione del tag canonical, standardizzazione unificata degli URL per evitare la dispersione del peso dovuta a contenuti duplicati
Configurazione del colore tema theme-color per pagine web mobile, in modo che la barra degli indirizzi di Chrome, Safari mobile sia coerente con il colore del marchio
Durante lo sviluppo con framework SSR/SSG come Next.js, Nuxt.js, Gatsby, generazione rapida del codice completo dei meta tag necessario per la configurazione head
In sistemi CMS come WordPress, Shopify, configurazione manuale dei meta tag per modelli di pagina personalizzati senza dipendere da plugin SEO
Durante la risoluzione di problemi di indicizzazione del sito, generazione rapida di combinazioni corrette di meta tag robots (es. noindex,nofollow per ambienti di test)
Operatori social media configurano card di condivisione per landing page di campagne, garantendo che l'anteprima sia corretta durante la condivisione su Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord
Sviluppatori frontend durante la creazione di modelli di pagina HTML, completano automaticamente l'escape delle entità dei meta tag, evitando errori di sintassi HTML causati da caratteri speciali

Come utilizzare

Nell'area「Tag SEO base」inserisci title della pagina (titolo, consigliato 50-60 caratteri), meta description (descrizione, consigliata 120-160 caratteri), keywords (parole chiave, separate da virgola), canonical URL (link canonico), author (autore)
Nell'area「Istruzioni crawler robots」seleziona le regole di indicizzazione e tracciamento appropriate: index/noindex (se indicizzare), follow/nofollow (se tracciare i link), è possibile selezionare anche opzioni aggiuntive come noarchive, nosnippet
Nell'area「Impostazione colore tema」inserisci o seleziona il valore colore esadecimale di theme-color, utilizzato per colorare la barra degli indirizzi del browser mobile
Passa all'area「Tag Open Graph」, seleziona og:type (una scelta tra quattro: website/article/product/profile), inserisci og:title, og:description, og:image (URL immagine di condivisione, consigliata 1200×630 pixel), og:url, og:site_name, og:locale
Passa all'area「Tag Twitter Card」, seleziona il tipo twitter:card (una scelta tra quattro: summary/summary_large_image/app/player), inserisci account @ twitter:site, twitter:title, twitter:description, twitter:image
Durante tutto l'inserimento osserva l'area di anteprima in tempo reale a destra e l'indicatore di colore del conteggio caratteri: verde indica lunghezza ottimale, arancione indica vicino al limite, grigio indica troppo corto o troppo lungo e deve essere modificato
Dopo aver confermato che i tag sono corretti, fai clic sul pulsante「Copia negli appunti」per copiare tutto il codice in un passaggio e incollarlo nell'area head dell'HTML, oppure fai clic su「Scarica file HTML」per salvare come meta-tags.html per uso successivo

Funzionalità

Escape automatico delle entità HTML: Escape sicuro dei cinque caratteri speciali &, <, >, ", ' per evitare errori di sintassi nei tag generati in HTML
Avvisi intelligenti sulla lunghezza di title: Nell'intervallo 50-60 caratteri viene visualizzato verde (ottimale), in caso di superamento o insufficienza viene visualizzato arancione/grigio, conteggio caratteri in tempo reale
Avvisi intelligenti sulla lunghezza di meta description: Nell'intervallo 120-160 caratteri viene visualizzato verde (intervallo di visualizzazione ottimale), in caso di superamento o insufficienza l'indicatore di colore cambia in tempo reale
Supporta 4 opzioni og:type: website (sito generico), article (articolo/blog), product (pagina prodotto), profile (pagina profilo), adatte a diversi tipi di pagina
Supporta 4 tipi di twitter:card: summary (riassunto con immagine piccola), summary_large_image (riassunto con immagine grande), app (card app), player (card video/player)
Configurazione combinata delle istruzioni robots: Supporta la combinazione libera di varie istruzioni per crawler come index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
Meta tag autore author: Supporta la configurazione di tag di firma autore come content-author, article:author, adatto per blog e siti di notizie
Configurazione colore tema theme-color: Supporta l'impostazione del colore della barra degli indirizzi del browser mobile, offre selettore colore e input valore colore
Configurazione nome sito og:site_name: Imposta specificamente il campo nome sito nel protocollo Open Graph, visualizza correttamente il nome del sito durante la condivisione social
Configurazione account @ twitter:site: Supporta l'inserimento dell'account @handle ufficiale sulla piattaforma Twitter/X, collega le card di condivisione all'account ufficiale
Output strutturato in tre sezioni: Mostra i risultati generati in tre sezioni chiare: Primary SEO, Open Graph, Twitter Card, struttura a colpo d'occhio
Copia negli appunti con un clic: Il codice generato può essere copiato con un clic, nessuna selezione manuale necessaria, compatibile con vari ambienti browser
Download come meta-tags.html: I tag generati possono essere scaricati completamente come file HTML autonomo, comodo per salvare o importare direttamente nei progetti
Generazione e anteprima in tempo reale: L'inserimento del contenuto genera immediatamente il codice dei tag, contemporaneamente visualizza in anteprima l'effetto di visualizzazione dei risultati di ricerca SERP e lo stile delle card di condivisione social

Domande frequenti

Il codice generato dal Generatore di Meta Tag può essere copiato direttamente nel sito web? Deve essere modificato?

Può essere copiato e utilizzato direttamente. Il codice generato da questo strumento sono meta tag HTML in formato standard, l'escape delle entità HTML è stato eseguito automaticamente, basta incollarlo tra <head> e </head> della tua pagina web. Devi solo assicurarti che gli URL compilati (canonical, og:image, og:url, twitter:image) siano indirizzi online reali del tuo sito, non segnaposto di esempio. Se utilizzi soluzioni di gestione head di framework come Next.js, Nuxt.js, React Helmet, Vue Meta, potrebbero essere necessari piccoli adattamenti secondo la sintassi dei template JSX/Vue del framework, ma attributi e valori dei tag possono essere completamente riutilizzati.

Perché è necessario compilare l'immagine og:image? Cosa succede senza immagine?

og:image influenza direttamente l'effetto visivo e il tasso di clic delle card di condivisione social. Quando i link senza og:image vengono condivisi su piattaforme come Facebook, Twitter, LinkedIn, WeChat, viene visualizzato un link di testo nudo senza alcuna anteprima immagine, oppure la piattaforma cattura casualmente una piccola immagine dalla pagina (potrebbe essere logo, avatar, immagine pubblicitaria o anche un'immagine irrilevante), l'effetto di visualizzazione è estremamente scarso, il tasso di clic è generalmente inferiore di oltre il 50% rispetto alle condivisioni con immagine di anteprima corretta. La dimensione consigliata per og:image è 1200×630 pixel (rapporto 1.91:1), deve essere un URL assoluto accessibile pubblicamente, dimensione del file non superiore a 5MB.

Devono essere configurati sia i tag Open Graph che Twitter Card? Basta configurare solo OG?

La piattaforma Twitter/X legge effettivamente i tag Open Graph come fallback: se non configuri alcun tag con prefisso twitter:, Twitter tenta di utilizzare og:title, og:description, og:image per generare la card. Ma la configurazione speciale di Twitter Card ha diversi vantaggi: ①Puoi scegliere il tipo twitter:card più adatto (in particolare il tipo con immagine grande summary_large_image, con OG potrebbe non essere utilizzato per impostazione predefinita lo stile immagine grande); ②Puoi impostare twitter:site per collegare il tuo account Twitter ufficiale e aumentare la conversione di follower; ③Puoi ottimizzare separatamente la lunghezza di titolo e descrizione per Twitter e distinguerli da OG. Si consiglia di configurare entrambi, questo strumento supporta la generazione simultanea, il carico di lavoro è quasi lo stesso.

Quali conseguenze ci sono se la lunghezza di title e meta description supera l'intervallo consigliato? Viene penalizzato?

Il superamento della lunghezza non viene penalizzato dai motori di ricerca, ma viene troncato. Nei risultati di ricerca di Google la parte di title che supera circa 600 pixel di larghezza (circa 50-60 caratteri cinesi) viene troncata da puntini di sospensione, gli utenti non possono vedere il titolo completo; meta description che supera circa 920 pixel di larghezza (circa 120-160 caratteri cinesi) viene anch'essa troncata. Il problema della lunghezza troppo corta è che si spreca prezioso spazio di visualizzazione e non si riesce a trasmettere pienamente il valore della pagina e ad attirare clic. Nota che questa non è una limitazione esatta del numero di caratteri, ma una limitazione della larghezza in pixel: caratteri a larghezza intera, lettere inglesi maiuscole, lettere larghe come W/M, emoji occupano più larghezza, la visualizzazione effettiva potrebbe essere troncata prima di quanto sembri dal numero di caratteri. L'indicatore a colori di questo strumento è un riferimento di best practice basato sul numero di caratteri.

Cosa significa escape delle entità HTML? Perché lo strumento lo fa automaticamente?

In HTML alcuni caratteri hanno un significato sintattico speciale, se vengono scritti direttamente nei valori degli attributi distruggono la struttura HTML: le virgolette doppie " sono il terminatore dei valori degli attributi, scriverle direttamente causa la chiusura prematura dei tag; & è il carattere di inizio dell'escape di entità; < e > sono l'inizio e la fine dei tag. Questi caratteri devono essere scritti in forma di entità per essere visualizzati correttamente: & → &, < → <, > → >, " → ", ' → '. Se il tuo title o description contiene caratteri speciali come &, virgolette, parentesi angolari e viene scritto direttamente senza escape, causa errori di sintassi HTML, che possono invalidare tutti i tag successivi. Questo strumento gestisce automaticamente questo escape, tu inserisci semplicemente il testo originale, nessun escape manuale necessario.

Perché i crawler di Facebook/Twitter non riescono a catturare i meta tag della mia pagina scritta con React/Vue?

Perché framework frontend moderni come React, Vue, Angular sono di default rendering lato client (CSR): il codice sorgente HTML è vuoto o ha solo un div contenitore, i meta tag vengono inseriti dinamicamente nel DOM dopo che il browser ha eseguito JavaScript. Ma la maggior parte dei crawler delle piattaforme social come il crawler di Facebook facebookexternalhit, Twitterbot, LinkedInBot, crawler WeChat non eseguono JavaScript (o hanno capacità di esecuzione molto limitate), nel codice HTML originale che catturano non ci sono meta tag, naturalmente non possono generare card di condivisione. Soluzioni: ①Utilizzare SSR (Server-Side Rendering) o SSG (Static Site Generation), come framework come Next.js, Nuxt.js, Gatsby, Astro, che renderizzano i meta tag completi nel codice sorgente HTML lato server; ②Utilizzare servizi di prerendering come prerender.io, Rendertron per restituire HTML statico ai crawler; ③Utilizzare servizi speciali di generazione di immagini OG per generare dinamicamente i tag.

canonical e og:url della stessa pagina dovrebbero essere compilati uguali?

Sì, dovrebbero essere coerenti. Il tag canonical è per i motori di ricerca e dice ai motori di ricerca l'URL preferito; og:url è per le piattaforme social e dice alle piattaforme social l'URL univoco di questo contenuto per aggregare Mi piace, commenti, condivisioni. Che entrambi puntino allo stesso URL è una best practice e può evitare la dispersione del peso e la frammentazione dei conteggi social. Nota che devono essere tutti URL assoluti completi (con https://, dominio, percorso completo), non possono essere percorsi relativi. Se gli URL hanno parametri UTM, parametri di tracciamento, canonical e og:url dovrebbero entrambi puntare all'URL pulito senza parametri.

I link sulle pagine noindex vengono ancora crawlatati dai crawler? Viene trasmesso il peso?

noindex significa「Non indicizzare questa pagina」, non「Non crawlar」e neanche「Non tracciare i link」. I crawler crawleranno comunque le pagine noindex (solo così possono vedere il tag noindex), se robots meta ha contemporaneamente impostato follow (per impostazione predefinita è follow), i crawler continueranno a tracciare i link sulla pagina. Ma per quanto riguarda la trasmissione del peso: la dichiarazione ufficiale di Google è che le pagine noindex alla fine vengono rimosse dall'indice e il peso dei link sulla pagina non viene trasmesso normalmente (perché la pagina stessa non è indicizzata). Quindi se vuoi che i crawler attraverso una determinata pagina arrivino ad altre pagine ma non vuoi che la pagina stessa sia indicizzata, noindex,follow è accettabile, ma non aspettarti che le pagine noindex trasmettano peso come le pagine normali.

In quali browser funziona theme-color? iOS Safari lo supporta?

Supporto attuale di theme-color: Chrome/Firefox/Edge/Brave e altri browser basati su Chromium su Android lo supportano già da molto tempo, l'effetto è più evidente; Safari supporta theme-color da iOS 15 e macOS Monterey, ma l'implementazione di Safari è leggermente diversa: si adatta automaticamente al colore di sfondo della pagina e supporta anche l'uso dell'attributo media per impostare colori separati per modalità chiara/scura. Chrome desktop applica theme-color da una certa versione anche in posizioni come la barra delle schede. IE e browser vecchi non lo supportano, ma non importa, semplicemente non c'è l'effetto del colore tema e non influisce su alcuna funzionalità. Si consiglia di impostare il colore tema sul colore dell'header/barra di navigazione del tuo sito, visivamente è più uniforme.

Perché Google a volte nei risultati di ricerca non mostra la description che ho scritto?

Google non garantisce di utilizzare al 100% la meta description che hai scritto. Quando Google valuta che la description che hai scritto non è abbastanza pertinente alla query di ricerca dell'utente, o la qualità della description non è alta (es. keyword stuffing, uguale per tutto il sito, non corrispondente al contenuto), Google estrae automaticamente un pezzo di testo dal corpo della pagina che ritiene più pertinente al termine di ricerca come descrizione visualizzata nel risultato di ricerca. Questo è comportamento normale di Google, non un bug. Per aumentare la probabilità che description venga utilizzata: ①Scrivi per ogni pagina description univoca che descriva accuratamente il contenuto; ②description contiene in modo naturale le parole chiave principali della pagina ma senza stuffing; ③Mantieni la lunghezza in un intervallo ragionevole non troppo corta; ④Il contenuto di description è effettivamente presente nel corpo principale della pagina. Anche se Google a volte riscrive, dovresti comunque scrivere description con cura: questo è il tuo mezzo principale per controllare attivamente l'effetto di visualizzazione.

Dopo aver configurato i tag, come verifico se funzionano correttamente? Quali strumenti di controllo ci sono?

Per verificare i meta tag ci sono diversi passaggi e strumenti: ①Prima usa nel browser「Visualizza sorgente pagina」, cerca nel codice sorgente HTML originale se tag come title, description, og: esistono e il contenuto è corretto (nota è il codice sorgente non il pannello Elements, perché il codice sorgente è restituito dal server, in caso di CSR non è visibile nel sorgente); ②Usa Facebook Sharing Debugger per verificare i tag OG e aggiornare la cache; ③Usa Twitter Card Validator per verificare Twitter Card; ④Usa Google Rich Results Test per controllare i tag di base; ⑤Usa lo strumento「Controllo URL」nella Google Search Console per visualizzare la pagina effettivamente catturata da Google e lo stato di indicizzazione; ⑥Per i test locali, puoi simulare i crawler dei social media con l'user-agent switcher del browser, o usare il comando curl con UA Facebook per recuperare e vedere l'HTML restituito.

Ogni pagina deve avere meta tag configurati separatamente? Va bene usare un set di tag per tutto il sito?

Assolutamente no! Ogni pagina deve avere title e meta description univoci. Se tutte le pagine dell'intero sito usano lo stesso title e la stessa description, i motori di ricerca non possono distinguere i temi di contenuto di pagine diverse: ①I motori di ricerca non sanno di cosa tratta ogni pagina e non possono posizionare correttamente; ②Nei risultati di ricerca tutte le pagine vengono visualizzate con lo stesso titolo e la stessa descrizione, gli utenti non possono distinguere su quale cliccare, il CTR è estremamente basso; ③Può essere giudicato dai motori di ricerca come sito di bassa qualità e influenzare il peso dell'intero sito. Anche i tag OG e Twitter Card in linea di principio dovrebbero essere diversi per ogni pagina. Solo le configurazioni a livello di sito come theme-color, og:site_name, twitter:site possono essere uniformi per tutto il sito, gli altri tag dovrebbero essere configurati separatamente in base al contenuto della pagina.

meta keywords oggi vanno ancora scritte? Quante sono appropriate?

I principali motori di ricerca come Google, Bing, Baidu nel 2026 non utilizzano più meta keywords come fattore di posizionamento, se le scrivi, cosa scrivi non influenza sostanzialmente la SEO. Se il tuo CMS o modello ha questo campo, prenditi alcuni secondi per inserire 3-5 parole chiave principali, non dedicare troppo tempo alla scelta delle parole chiave e alla densità. L'importante è: non inserire decine di parole chiave, non ripetere la stessa parola molte volte, non scrivere parole popolari che non hanno nulla a che fare con la pagina – sebbene keywords stesse non venga utilizzata per il posizionamento, un stuffing troppo estremo potrebbe essere giudicato dai motori di ricerca come un segnale di spam, causando più danni che benefici. Se il tuo sito non ha il campo keywords o sei troppo pigro per compilarlo, lasciarlo vuoto va benissimo, non ha alcun impatto negativo sul posizionamento.

Qual è la differenza tra meta tag robots e robots.txt? Quale ha priorità più alta?

I due hanno diversi livelli di azione e meccanismi: ①robots.txt è un file di testo nella directory principale del sito, che controlla il comportamento dei crawler a livello di intero sito o directory, es. Disallow: /admin/ dice a tutti i crawler di non crawlar la directory /admin/; ma robots.txt è un「accordo tra gentiluomini」, i crawler conformi lo rispetteranno, e se le pagine di cui è vietato il crawl hanno link esterni che puntano ad esse, potrebbero comunque essere indicizzate ma senza descrizione. ②robots meta è un tag a livello di pagina, posizionato nell'HTML head di ogni pagina e può controllare con precisione il comportamento di singole pagine come index/noindex/follow/nofollow, ha priorità più alta di robots.txt. ③X-Robots-Tag è a livello di intestazione di risposta HTTP, ha la stessa funzione di robots meta ma viene restituito tramite intestazione HTTP, può essere utilizzato per il controllo dell'indicizzazione di file non HTML (come PDF, immagini). Per impedire completamente l'indicizzazione di una pagina è necessario utilizzare noindex (meta o X-Robots-Tag), il solo robots.txt Disallow non può garantire la non indicizzazione.

Dopo aver generato i meta tag con questo strumento, è necessario configurare anche dati strutturati Schema.org (JSON-LD)?

I meta tag e i dati strutturati Schema.org sono complementari, non sostitutivi l'uno dell'altro. I meta tag risolvono principalmente: titolo e descrizione nella pagina dei risultati dei motori di ricerca, card di condivisione sulle piattaforme social, controllo di base dei crawler. I dati strutturati Schema.org (solitamente incorporati come formato JSON-LD nella pagina) risolvono: risultati di ricerca avanzati (Rich Snippets), come stelle di valutazione prodotto, prezzo e disponibilità, navigazione breadcrumb, data di pubblicazione articolo, blocchi FAQ, ora e luogo di eventi e altre visualizzazioni avanzate, queste possono migliorare ulteriormente il CTR. Si consiglia di configurare contemporaneamente per le pagine importanti: ①Meta tag di base (contenuto generato da questo strumento); ②Dati strutturati Schema.org corrispondenti al tipo di pagina. I due non sono in conflitto e ottimizzano insieme l'effetto di visualizzazione della ricerca.

Risoluzione dei problemi

Quando si condividono link su Facebook/Twitter/LinkedIn non viene visualizzata l'immagine, oppure l'immagine visualizzata non è l'og:image impostata

L'URL og:image utilizza percorsi relativi o localhost/127.0.0.1/IP rete interna, i crawler delle piattaforme social non possono accedere a indirizzi pubblici L'immagine è bloccata da robots.txt, oppure server/WAF/CDN/firewall bloccano gli User-Agent dei crawler di Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) La dimensione dell'immagine non soddisfa i requisiti: og:image inferiore a 200×200 pixel viene ignorato, l'immagine summary_large_image inferiore a 300×157 viene declassata Il file immagine è troppo grande (oltre 5MB-8MB) o il formato non è supportato (sono supportati solo JPG/PNG/WebP/GIF, SVG non è supportato da alcune piattaforme) I tag sono renderizzati dinamicamente lato client con JavaScript, i crawler delle piattaforme social non eseguono JS, solo SSR/SSG possono essere catturati L'URL og:image restituisce errori 404/403/5xx o reindirizza alla pagina di accesso/pagina di errore La piattaforma ha memorizzato nella cache la vecchia versione senza immagine, dopo aver modificato i tag non è stato utilizzato lo strumento di debug ufficiale per eseguire Scrape Again per aggiornare la cache

Nei risultati di ricerca di Google title viene troncato e non visualizzato completamente, oppure Google ha riscritto automaticamente il titolo

La lunghezza di title supera i 50-60 caratteri cinesi (o circa 600 pixel di larghezza), la parte in eccesso viene troncata da puntini di sospensione Caratteri speciali a larghezza intera, emoji in title occupano larghezza aggiuntiva e causano troncamento prematuro, la lunghezza effettivamente visualizzata è più corta del numero di caratteri title contiene keyword stuffing o non corrisponde al contenuto della pagina, Google ritiene che il tuo titolo non sia accurato ed estrae altro testo dal corpo della pagina o dal testo di ancoraggio per riscrivere il titolo Il title di ogni pagina è ripetuto o molto simile, Google non riesce a distinguere le pagine e genera automaticamente titoli diversi title contiene solo il nome del marchio senza descrizione del tema della pagina, oppure il nome del marchio è troppo lungo e occupa troppo spazio Vengono utilizzati troppi separatori come |, -, _, oppure il metodo di separazione non è standard, il che porta Google a ritenere che ci sia stuffing di separatori La pagina ha una gerarchia di intestazioni h1-h6 disordinata o più tag h1, Google potrebbe utilizzare il contenuto di h1 per riscrivere title

Dopo aver configurato i meta tag, sulla pagina si verificano caratteri illeggibili, visualizzazione anomala di caratteri speciali o errori di sintassi HTML

Il tag canonical è configurato ma non funziona, gli URL duplicati vengono comunque indicizzati, oppure canonical viene ignorato dai motori di ricerca

L'URL a cui punta canonical restituisce errori 404/403/5xx o reindirizza ad altre pagine, i motori di ricerca non possono accedere alla versione canonica La pagina A punta a B tramite canonical, la pagina B punta di nuovo ad A tramite canonical (canonical ciclico), oppure A→B→C→D canonical a catena confonde i motori di ricerca canonical punta a una pagina con contenuto molto diverso (non contenuto altamente duplicato/uguale), i motori di ricerca ritengono che l'impostazione di canonical sia errata e la ignorano canonical utilizza percorsi relativi (es. href="/page") invece di URL assoluto completo (href="https://example.com/page") Il sito web ha più versioni protocollo/dominio (http/https, www/non www) che si puntano reciprocamente tramite canonical, ma i reindirizzamenti 301 non sono configurati correttamente Le pagine impaginate (es. ?page=2, ?page=3) puntano tutte alla prima pagina tramite canonical, causando che il contenuto successivo non venga affatto indicizzato, i motori di ricerca ignorano tale canonical irragionevole La stessa pagina dichiara contemporaneamente URL canonical diversi nel tag link, nell'intestazione di risposta HTTP Link: <...>; rel="canonical" e nella Sitemap, conflitto di priorità

Dopo aver modificato i meta tag, quando si condivide nuovamente vengono ancora visualizzati il vecchio titolo, la vecchia descrizione o la vecchia immagine, l'effetto aggiornato non è visibile

Le piattaforme social (Facebook/Twitter/LinkedIn) memorizzano nella cache le informazioni OG/Twitter Card per molto tempo (può durare da diversi giorni a settimane), non crawleranno nuovamente a ogni condivisione Non sono stati utilizzati gli strumenti di debug ufficiali delle piattaforme corrispondenti (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) per eseguire Scrape Again/nuovo crawl per forzare l'aggiornamento della cache CDN (Cloudflare, Alibaba Cloud CDN, Tencent Cloud CDN ecc.) ha memorizzato nella cache la vecchia pagina HTML, i crawler recuperano la vecchia versione della cache CDN La cache lato server, cache SSR, plugin cache WordPress, cache pagine Redis e altro non sono stati cancellati, viene ancora emesso il vecchio HTML L'URL della risorsa come og:image non è cambiato ma il contenuto dell'immagine è stato aggiornato, browser e piattaforme memorizzano nella cache in base all'URL, solo aggiungendo parametri di versione come ?v=2 è possibile forzare l'aggiornamento Dopo aver modificato i tag la pagina non è stata distribuita e pubblicata correttamente, il file è stato modificato localmente ma l'ambiente di produzione è ancora la vecchia versione I meta tag sono stati posizionati nell'area body dell'HTML o inseriti dinamicamente con JS, i crawler non hanno letto affatto i nuovi tag, la versione letta è ancora quella precedentemente memorizzata nella cache

L'impostazione accidentale di noindex,nofollow causa che l'intero sito o pagine importanti non vengano indicizzati da Google e non siano reperibili

Il tag noindex,nofollow dell'ambiente di sviluppo/test non è stato rimosso al momento del lancio, l'intero sito è stato pubblicato con noindex Nel backend di CMS come WordPress è selezionata l'opzione「Consenti ai motori di ricerca di non indicizzare questo sito」, che aggiunge automaticamente noindex a tutte le pagine robots.txt ha impostato contemporaneamente Disallow, causando che i crawler non possano nemmeno crawlar la pagina per vedere noindex, ma se ci sono link esterni che puntano ad essa potrebbe comunque essere indicizzata L'intestazione di risposta HTTP restituisce X-Robots-Tag: noindex (ha priorità più alta dei meta tag, molti non prestano attenzione alle intestazioni di risposta), ad es. causato da configurazione Nginx/Apache, impostazioni CDN CDN/WAF/plugin di sicurezza aggiungono automaticamente l'intestazione noindex alla pagina (alcuni plugin di sicurezza causano operazioni errate o impostazioni predefinite) Sono state utilizzate combinazioni di istruzioni errate, ad esempio noindex è stato scritto come index ma altri parametri sono in conflitto, oppure il modello dell'intero sito contiene noindex che è stato rimosso solo sulla homepage ma le pagine interne lo hanno ancora Durante la migrazione del sito dall'ambiente di staging/test all'ambiente di produzione, non sono stati aggiornati base URL, canonical, configurazione robots, il noindex dell'ambiente di test è rimasto nell'ambiente di produzione

Glossario

Meta tag: Meta tag HTML, posizionato nell'area head, serve a descrivere i metadati della pagina, trasmette a browser, motori di ricerca, piattaforme social informazioni come titolo, descrizione, autore della pagina, regole crawler.
title: Tag titolo HTML, definisce il titolo della scheda del browser e il titolo cliccabile nella pagina dei risultati dei motori di ricerca (SERP), è il tag SEO più importante, lunghezza consigliata 50-60 caratteri.
meta description: Meta tag descrizione pagina, visualizzato come testo descrittivo sotto il titolo SERP, non influisce direttamente sul posizionamento ma influisce significativamente sul tasso di clic (CTR), lunghezza consigliata 120-160 caratteri cinesi.
meta keywords: Meta tag parole chiave, utilizzato dai primi motori di ricerca per determinare il tema della pagina, a causa di abusi Google ha annunciato nel 2009 di non utilizzarlo più, oggi non ha praticamente più valore SEO.
canonical: Tag link canonico (rel="canonical"), dice ai motori di ricerca quale di più URL simili è la versione preferita, serve a risolvere contenuti duplicati, URL con parametri, domini preferiti e altri problemi.
Open Graph: Protocollo di metadati di condivisione social lanciato da Facebook nel 2010, utilizza tag con prefisso og: per controllare lo stile delle card di condivisione dei link sulle piattaforme social, supportato da quasi tutte le piattaforme come Facebook, LinkedIn, WhatsApp, Slack.
Twitter Card: Protocollo di card di condivisione della piattaforma Twitter/X, utilizza tag con prefisso twitter:, supporta quattro tipi di card summary, summary_large_image, app, player, viene letto da Twitter prima dei tag OG.
og:type: Tag tipo di pagina Open Graph, specifica il tipo di contenuto, valori comuni sono website (sito generico), article (articolo), product (prodotto), profile (profilo personale), determina come le piattaforme social analizzano il contenuto.
og:image: Tag immagine di condivisione Open Graph, specifica l'URL dell'immagine di anteprima della card di condivisione social, dimensione consigliata 1200×630 pixel (rapporto 1.91:1), deve essere un URL assoluto accessibile pubblicamente.
twitter:card: Tag tipo Twitter Card, specifica il tipo di card di condivisione, i valori sono summary (immagine piccola), summary_large_image (immagine grande), app (app), player (lettore), è un tag obbligatorio per Twitter Card.
robots meta: Meta tag di controllo crawler, dice ai motori di ricerca a livello di pagina se indicizzare (index/noindex), se tracciare i link (follow/nofollow), se visualizzare snapshot (noarchive) e altro, ha priorità più alta di robots.txt.
noindex: Una delle istruzioni robots, vieta ai motori di ricerca di indicizzare questa pagina, la pagina non apparirà nei risultati di ricerca; i crawler crawleranno comunque la pagina per leggere questo tag, ma non la indicizzeranno. Comunemente utilizzato per pagine di test, pagine interne, pagine di basso valore.
nofollow: Una delle istruzioni robots, vieta ai crawler dei motori di ricerca di tracciare tutti i link sulla pagina (a differenza di rel="nofollow" per singoli link), comunemente utilizzato per pagine con contenuti generati dagli utenti, link pubblicitari, pagine con link esterni non affidabili.
theme-color: Meta tag colore tema del browser, definisce il colore della barra degli indirizzi/barra degli strumenti del browser mobile, funziona su browser come Android Chrome, Safari 15+ e offre un'esperienza di marca più coinvolgente.
author meta: Meta tag autore (name="author"), dichiara le informazioni sul creatore del contenuto della pagina, utilizzato in blog, siti di notizie in combinazione con article:author per identificare l'autore del contenuto.
HTML entity: Caratteri di escape per entità HTML, servono per visualizzare in modo sicuro caratteri speciali in HTML, es. & rappresenta &, < rappresenta <, > rappresenta >, " rappresenta ", ' rappresenta ', evitano errori di sintassi e problemi XSS.
SERP: Search Engine Results Page, pagina dei risultati dei motori di ricerca, si riferisce alla pagina dei risultati restituita quando gli utenti inseriscono parole chiave in motori di ricerca come Google/Baidu, contiene elementi come titolo, descrizione, URL, frammenti rich media.
CTR: Click-Through Rate, tasso di clic, si riferisce alla percentuale di utenti che fanno clic dopo che il risultato di ricerca è stato visualizzato. Il CTR è uno degli indicatori SEO principali, è influenzato direttamente dall'attrattiva di title e meta description ed è anche un segnale utente nell'algoritmo di posizionamento di Google.
crawl budget: Crawl budget, il numero di crawl e pagine che i motori di ricerca assegnano al tuo sito in un determinato periodo di tempo. L'uso ragionato di robots meta, canonical, noindex può evitare di sprecare crawl budget per pagine di basso valore, facendo sì che le pagine importanti vengano crawlate più frequentemente.
viewport: Meta tag viewport (name="viewport"), tag indispensabile per le pagine web responsive moderne, controlla la larghezza di rendering e la scala iniziale della pagina sui dispositivi mobili, configurazione standard è width=device-width, initial-scale=1.0.

Tabella elenco meta tag comuni e spiegazione attributi


title	Titolo pagina, titolo scheda browser e SERP	<title>Titolo pagina \| Marchio</title>	Consigliato 50-60 caratteri, parole chiave principali in primo piano, nome marchio alla fine, ogni pagina univoca
meta description	Descrizione pagina, testo descrittivo visualizzato nella SERP	<meta name="description" content="...">	Consigliato 120-160 caratteri cinesi, contiene parole chiave e CTA, ogni pagina univoca
meta keywords	Tag parole chiave	<meta name="keywords" content="parola1,parola2,parola3">	Principali motori di ricerca come Google/Bing/Baidu non lo usano più, non è necessaria una configurazione approfondita
link canonical	Link canonico, specifica l'URL preferito	<link rel="canonical" href="https://example.com/page">	Deve scrivere URL assoluto completo, risolve il problema del contenuto duplicato, non impostare a catena
meta robots	Controllo crawler, regole di indicizzazione/tracciamento a livello di pagina	<meta name="robots" content="index,follow">	Ha priorità più alta di robots.txt, noindex è il vero divieto di indicizzazione
meta charset	Dichiarazione codifica caratteri	<meta charset="UTF-8">	Deve essere posizionato all'inizio dell'head, le pagine web moderne usano uniformemente UTF-8
meta viewport	Controllo viewport mobile	<meta name="viewport" content="width=device-width, initial-scale=1.0">	Indispensabile per pagine responsive, deve essere configurato altrimenti l'esperienza mobile è estremamente scarsa
meta author	Informazioni autore della pagina	<meta name="author" content="Nome autore">	Identifica il creatore del contenuto, utilizzato in blog/siti di notizie
meta theme-color	Colore tema del browser mobile	<meta name="theme-color" content="#2563eb">	Supportato da Android Chrome/Safari 15+, consigliato l'uso del colore principale del marchio
og:title	Titolo condivisione Open Graph	<meta property="og:title" content="...">	Titolo della card di condivisione social, può essere diverso dal SEO title, più accattivante
og:description	Descrizione condivisione Open Graph	<meta property="og:description" content="...">	Descrizione della card social, consigliata entro 200 caratteri
og:image	Immagine condivisione Open Graph	<meta property="og:image" content="https://.../img.jpg">	Consigliata 1200×630 pixel, URL assoluto, accessibile pubblicamente, file <5MB
og:url	URL canonico Open Graph	<meta property="og:url" content="https://example.com/page">	Dovrebbe essere coerente con canonical, serve per aggregare i conteggi di Mi piace/condivisioni
og:type	Tipo di contenuto Open Graph	<meta property="og:type" content="website">	Selezionabile website/article/product/profile, diversi tipi supportano diversi attributi di estensione
og:site_name	Nome sito Open Graph	<meta property="og:site_name" content="GeekFormat">	Visualizza il nome dell'intero sito web, differisce dal titolo della pagina
twitter:card	Tipo Twitter Card	<meta name="twitter:card" content="summary_large_image">	Selezionabile summary/summary_large_image/app/player
twitter:site	Account ufficiale Twitter	<meta name="twitter:site" content="@username">	Inserisci l'@handle Twitter del tuo sito/marchio
twitter:image	Immagine Twitter Card	<meta name="twitter:image" content="https://.../img.jpg">	Se non compilato viene usato og:image come fallback, per tipo summary usa 1:1, per large usa 2:1

Tabella di confronto degli scenari di applicazione di og:type


website	Homepage del sito, pagine generiche, Chi siamo, Contattaci e altre pagine non di contenuto/prodotto	1.91:1 (1200×630)	Solo tag og: di base sufficienti, nessuna estensione particolare
article	Articoli blog, comunicati stampa, documenti di conoscenza, tutorial, contenuti di colonne e altri contenuti temporali	1.91:1 (1200×630)	article:published_time (data di pubblicazione), article:modified_time (data di modifica), article:author (autore), article:section (categoria), article:tag (tag)
product	Pagine di dettaglio prodotto e-commerce, pagine prodotto, pagine di servizi a pagamento, landing page prodotto SaaS	1.91:1 (1200×630) immagine prodotto consigliata quadrata o 4:3	product:price:amount (prezzo), product:price:currency (valuta come CNY/USD), product:availability (stato disponibilità), product:brand (marchio)
profile	Homepage personale, pagina profilo utente, pagina autore, pagina curriculum personale	Immagine avatar 1:1 o immagine di copertina 1.91:1	profile:first_name (nome), profile:last_name (cognome), profile:username (nome utente), profile:gender (sesso)

Tabella di confronto dei tipi di twitter:card


summary	Card di riepilogo con immagine piccola, immagine piccola a sinistra/sopra, testo a destra/sotto	Minimo 144×144 pixel, 1:1 quadrato, <5MB	Articoli ordinari, pagine, pagine strumento, contenuti generici	Nessun campo aggiuntivo obbligatorio, compilare i tag di base
summary_large_image	Card di riepilogo con immagine grande, in alto immagine banner grande a tutta larghezza, forte impatto visivo	Minimo 300×157 pixel, consigliato 1200×675, rapporto circa 2:1, <5MB	Articoli blog, pagine prodotto, pagine evento, contenuti che desiderano alti tassi di clic (consigliato l'uso predefinito)	Nessun campo aggiuntivo obbligatorio, assicurarsi che la dimensione dell'immagine soddisfi i requisiti
app	Card download app, mostra icona app, nome, valutazione, pulsante download	Immagine quadrata logo app, oltre 144×144	Pagine download app iOS/Android, pagine promozionali app mobili	twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (ID App Store), twitter:app:url:iphone/ipad/googleplay (scheme personalizzato)
player	Card lettore video/audio, incorpora direttamente il lettore multimediale nel flusso	Immagine di copertina del lettore, la pagina del lettore deve essere HTTPS	Pagine di contenuto video, podcast, pagine audio, pagine live streaming	twitter:player (URL lettore, HTTPS), twitter:player:width (larghezza lettore), twitter:player:height (altezza lettore), twitter:player:stream (indirizzo stream video/audio), richiede approvazione whitelist da parte di Twitter