Strumenti di ottimizzazione per la condivisione e la ricerca – CINQUEPUNTOZERO.it – Full Stack Developer Logbook

Questi strumenti condividono l'obiettivo di ottimizzare come i contenuti web vengono visualizzati e condivisi, sia nei motori di ricerca (come le Rich Cards di Google) sia sui social media (come Open Graph e Twitter Cards).
Tutti e tre migliorano l'anteprima visiva e i dettagli del contenuto per attirare l'attenzione degli utenti.

Social media

Open Graph

L' og:image è un attributo che fa parte delle meta tag Open Graph. Open Graph è un protocollo sviluppato da Facebook per ottimizzare la condivisione di contenuti sui social network. Attraverso le meta tag Open Graph, puoi controllare come i contenuti del tuo sito vengono visualizzati quando vengono condivisi su piattaforme come Facebook, Twitter, LinkedIn e altre.

OG metatag

Open Graph è un insieme di tag meta HTML che consentono di definire come i tuoi contenuti web vengono rappresentati quando vengono condivisi sui social media.

<head>
    <!-- Titolo della pagina -->
    <meta property="og:title" content="Titolo della tua pagina">

    <!-- Descrizione della pagina -->
    <meta property="og:description" content="Descrizione della pagina che apparirà sui social media.">

    <!-- URL canonico della pagina -->
    <meta property="og:url" content="https://www.tuosito.com/la-tua-pagina">

    <!-- Tipo di contenuto (es. website, article, etc.) -->
    <meta property="og:type" content="website">

    <!-- Immagine da mostrare come anteprima -->
    <meta property="og:image" content="https://www.tuosito.com/percorso-immagine.jpg">

    <!-- Larghezza e altezza dell'immagine (opzionali) -->
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">

    <!-- Tipo di immagine (opzionale) -->
    <meta property="og:image:type" content="image/jpeg">

    <!-- Altri tag Open Graph -->
    <meta property="og:locale" content="it_IT">
    <meta property="og:site_name" content="Nome del tuo sito">
</head>

Twitter Cards

Alcune piattaforme di Google, come Gmail, supportano i tag Twitter Cards. Questi tag sono simili a Open Graph e servono per ottimizzare il modo in cui vengono visualizzati i contenuti.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titolo della Pagina">
<meta name="twitter:description" content="Descrizione della pagina">
<meta name="twitter:image" content="https://www.tuosito.com/percorso-immagine.jpg">

Formato immagine di preview

Per garantire che l'immagine si visualizzi correttamente sui social, segui queste linee guida:

Dimensioni raccomandate: 1200 x 630 pixel.
Peso del file: cerca di mantenere l'immagine sotto i 5 MB.
Formato: usa JPEG o PNG.
Proporzioni: mantenere un rapporto di 1.91:1, in modo che l'immagine sia ben visibile su tutte le piattaforme.

Wordpress e OG

In WP possiamo aggiungere manualmente il codice Open Graph nel file header.php del tema. Nella sezione dell' <head> nel file header.php possiamo sfruttare le funzioni del framework WP e inserire i meta tag Open Graph.

<head>
    <meta property="og:title" content="<?php the_title(); ?>">
    <meta property="og:description" content="<?php echo get_the_excerpt(); ?>">
    <meta property="og:url" content="<?php the_permalink(); ?>">
    <meta property="og:image" content="<?php echo get_the_post_thumbnail_url(); ?>">
</head>

Google e OG

Attualmente, non esiste un tag specifico per i servizi Google, come Google Chat, equivalente diretto alle meta tag Open Graph utilizzate da piattaforme come Facebook e WhatsApp.
Tuttavia, Google può selezionare un'immagine di preview da una pagina web in base a una combinazione di fattori e meta tag presenti.

In ordine di proprietà:

og:image (Open Graph): Sebbene Google non supporti sempre le Open Graph meta tag, può comunque utilizzare il tag og:image se presente e correttamente configurato.
twitter:image (Twitter Card): Se hai configurato i tag Twitter Cards, Google potrebbe usare l'immagine specificata in twitter:image.
Schema.org Google può utilizzare i dati strutturati Schema.org, che spesso contengono dettagli su un articolo o prodotto, incluse immagini.
primo tag <img> Se nessuna meta tag specifica è presente, Google potrebbe cercare l'immagine più rilevante direttamente dal contenuto della pagina. L'immagine che si trova più in alto nella pagina a partire dal <body>

Motori di ricerca

Schema.org

Schema.org è un formato di dati strutturati usato per aiutare i motori di ricerca (come Google) a capire meglio il contenuto di una pagina web. Usando Schema.org, puoi "etichettare" informazioni specifiche, come titoli, immagini, descrizioni, ecc., in modo che Google le interpreti correttamente.

Come funziona?

Usi un markup in JSON-LD (JavaScript Object Notation per dati collegati) nel codice HTML della pagina per descrivere il contenuto.

Esempio semplice: Descrivere un articolo

Immagina di voler dire a Google che la tua pagina contiene un articolo con un titolo, un'immagine e una descrizione. Ecco come apparirebbe usando Schema.org:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Il mio primo articolo",
  "image": "https://www.esempio.com/immagine.jpg",
  "description": "Questo è un articolo che parla di cose interessanti.",
  "url": "https://www.esempio.com/il-mio-articolo"
}
</script>

Spiegazione:

@context: Specifica che stai usando Schema.org.
@type: Indica che il tipo di contenuto è un Article (articolo).
headline: Il titolo dell'articolo.
image: Il link all'immagine principale.
description: Una breve descrizione dell'articolo.
url: L'URL dell'articolo.

Perché è utile?

Google può usare queste informazioni per mostrare risultati più ricchi (come anteprime con immagini, descrizioni, ecc.) nei suoi risultati di ricerca, migliorando la visibilità della tua pagina.

Google Rich Cards (per Google Search)

Google utilizza anche Rich Cards, che sono un'estensione di Schema.org e vengono utilizzati per fornire contenuti ricchi nei risultati di ricerca. Non sono specificamente legati a Google Chat, ma aiutano ad arricchire la visualizzazione su Google Search e Discover.

Le Google Rich Cards sono un tipo di risultato avanzato (rich result) che Google mostra nelle sue pagine di ricerca. Sono una versione più visiva e interattiva dei normali risultati di ricerca e spesso includono immagini, video, recensioni e altre informazioni dettagliate, come eventi, ricette o articoli. Google usa i dati strutturati (come Schema.org) per creare queste rich cards.

Come funzionano?

Se implementi correttamente i dati strutturati nel tuo sito, Google può utilizzare queste informazioni per creare un risultato di ricerca più ricco. Questi dati aiutano Google a comprendere meglio il contenuto della pagina e a presentarlo in modo più accattivante.

Esempio di Rich Card per una ricetta:

In questo esempio, stai usando Schema.org per una ricetta. Google potrebbe mostrare l'immagine, il titolo e le recensioni direttamente nei risultati di ricerca.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Torta al cioccolato",
  "image": "https://www.esempio.com/torta.jpg",
  "description": "Una deliziosa torta al cioccolato.",
  "recipeIngredient": [
    "200g di cioccolato",
    "100g di farina",
    "100g di zucchero"
  ],
  "recipeInstructions": "Mescolare tutti gli ingredienti e cuocere per 30 minuti.",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "89"
  }
}
</script>

Come appaiono:

Le Google Rich Cards vengono mostrate come caroselli di risultati, con immagini più grandi e dettagli aggiuntivi rispetto ai normali snippet di ricerca. Questo rende i risultati più attraenti per gli utenti e può aumentare il tasso di clic (CTR).

Tipi di contenuto supportati:

Ricette
Film
Articoli
Eventi
Prodotti

Perché usarle?

Le Rich Cards migliorano la visibilità del tuo sito e offrono agli utenti un'esperienza di ricerca più ricca, aumentando la probabilità che visitino la tua pagina.

Approcci differenti a Open Graph

A volte è possibile ritrovarsi dinanzi a documentazioni che richiedono di impostre, per esempio, il metatag title, con due sintassi differenti ma simili:

<meta property="og:title" content="Titolo della tua pagina">
<!-- OR -->
<meta name="title" property="og:title" content="Titolo della tua pagina">

La confusione deriva dal fatto che ci sono due approcci comuni nell'uso dei tag Open Graph, e entrambi possono funzionare, ma la sintassi corretta per Open Graph prevede l'uso dell'attributo property e non di name.
Alcune guide potrebbero suggerire un uso combinato di name e property.
Questo formato non è errato, ma è ridondante.
Elenco di tutti i meta cosi dichiarati:

<head>
    <!-- Titolo della pagina -->
    <meta name="title" property="og:title" content="Titolo della tua pagina">

    <!-- Descrizione della pagina -->
    <meta name="description" property="og:description" content="Descrizione della pagina che apparirà sui social media.">

    <!-- URL canonico della pagina -->
    <meta name="url" property="og:url" content="https://www.tuosito.com/la-tua-pagina">

    <!-- Tipo di contenuto (es. website, article, etc.) -->
    <meta name="type" property="og:type" content="website">

    <!-- Immagine da mostrare come anteprima -->
    <meta name="image" property="og:image" content="https://www.tuosito.com/percorso-immagine.jpg">

    <!-- Larghezza e altezza dell'immagine (opzionali) -->
    <meta name="image:width" property="og:image:width" content="1200">
    <meta name="image:height" property="og:image:height" content="630">

    <!-- Tipo di immagine (opzionale) -->
    <meta name="image:type" property="og:image:type" content="image/jpeg">

    <!-- Altri tag Open Graph -->
    <meta name="locale" property="og:locale" content="it_IT">
    <meta name="site_name" property="og:site_name" content="Nome del tuo sito">
</head>

Una piattaforma che richiede questo tipo di sintassi e Linkedin.
Inoltre è bene sapere che Linkedin ha una propria cache per i post e i contenuti che creamo e condividiamo sul social.
LinkedIn potrebbe aver memorizzato quindi una versione cache della tua pagina con vecchi Open Graph o meta tag.
Potremo quindi ìusare lo strumento LinkedIn Post Inspector per aggiornare la cache di LinkedIn. Inserisci l'URL del tuo sito e LinkedIn riprenderà le informazioni aggiornate.