Analisi di Open Graph

Come funziona questo controllo

Scanaris cerca nell'<head> della tua pagina tre tag Open Graph: og:title, og:description e og:image. Se ci sono tutti e tre con contenuto, non c'è nulla da dire. Se ne manca qualcuno, apre un rilievo informativo che indica quali; se mancano tutti e tre, il rilievo dice direttamente che la pagina non ha Open Graph. È informativo, quindi non toglie punti: non è una falla di sicurezza né di indicizzazione, è un'occasione persa ogni volta che qualcuno condivide il tuo sito.

Perché è importante

Quando qualcuno incolla il tuo link su WhatsApp, X, LinkedIn, Slack, Discord, iMessage o Telegram, l'app visita l'URL, legge questi tag e costruisce la scheda di anteprima: immagine grande, titolo e descrizione. Senza di essi, la scheda esce senza immagine, con l'URL grezzo o con un pezzo di testo qualsiasi della pagina. La differenza in clic tra un link con scheda e uno senza è grande, soprattutto su mobile, dove la scheda occupa tutto lo schermo. E l'immagine che scegli è, per molte persone, la prima impressione del tuo brand.

Come risolvere

<meta property="og:title" content="Scanner di sicurezza per app create con l'IA">
<meta property="og:description" content="Analizza il tuo sito in 60 secondi e ricevi ogni falla con la soluzione.">
<meta property="og:image" content="https://tuodominio.it/og/home.png">
<meta property="og:url" content="https://tuodominio.it/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

• L'immagine va in URL assoluto e in HTTPS, da 1200 per 630 pixel, in JPG o PNG e sotto 1 MB perché tutte le piattaforme la accettino. Uno sfondo del brand, il titolo della pagina in grande e il logo è la formula che funziona.
• Una per pagina, non la stessa ovunque. Un articolo con il suo titolo nell'immagine si condivide più di uno con l'immagine generica del sito. Nuxt ha un modulo per generare queste immagini da un template; Next.js lo fa con un file opengraph-image.tsx in ogni rotta.
• Nuxt: useSeoMeta({ ogTitle, ogDescription, ogImage, twitterCard: 'summary_large_image' }). Next.js: metadata.openGraph e metadata.twitter. WordPress: Yoast e Rank Math li generano per articolo dall'immagine in evidenza.
• twitter:card è l'unico tag proprio di cui X ha bisogno; per titolo, descrizione e immagine usa gli og: se non trova i suoi.

Le piattaforme mettono in cache la scheda la prima volta che vedono un URL. Dopo aver cambiato i tag, chiedi una nuova scansione nel debugger di condivisione di Facebook, nel Post Inspector di LinkedIn o nel validatore di X; WhatsApp e Telegram la rinnovano da soli dopo un po'.

Verifica che sia risolto

curl -s https://tuodominio.it | grep -oE '<meta (property|name)="(og:|twitter:)[^"]+" content="[^"]*"'
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" "$(curl -s https://tuodominio.it | grep -oE 'og:image" content="[^"]+"' | cut -d'"' -f3)"

Il primo elenca i tag; il secondo scarica l'immagine e deve dare 200 con tipo immagine. Poi incolla l'URL in una chat con te stesso e guarda la scheda.

Domande frequenti

Ho già titolo e meta description. Non bastano?

Alcune piattaforme li usano come riserva, ma nessuna mostra l'immagine senza og:image, e l'immagine è ciò che fa il salto nei clic. Gli og: inoltre ti permettono un titolo diverso da quello di Google, più corto e più diretto.

Conta per il SEO?

Non direttamente: Google non usa Open Graph per il ranking. Conta perché la gente condivida e clicchi, il che finisce in link e traffico. Ciò che Google legge davvero lo esamina metadati SEO.

La mia immagine appare tagliata in alcune app.

Ogni piattaforma ritaglia alla sua proporzione. Con 1200 per 630 e il contenuto importante centrato, con margine ai bordi, viene bene ovunque. Evita testo piccolo attaccato agli angoli.