Joomla e Open Graph: Configurare i Meta Tag Senza Estensioni

Indice:

Modalità lettura:

Troppo testo da leggere?

Scopri come configurare i meta tag Open Graph nei tuoi articoli Joomla utilizzando solo il core! Ti guideremo passo dopo passo con un override della view e campi personalizzati, per ottimizzare la SEO e migliorare la condivisione sui social.

Cosa sono gli Open Graph e perché sono importanti per la SEO?

Gli Open Graph sono meta tag sviluppati da Facebook per migliorare la condivisione dei contenuti sui social network.

Vi è mai capitato, condividendo il vostro sito sui social network, che venisse fuori l'immagine sbagliata o una descrizione errata? Ecco: quello è un problema di open graph.
Se non sono settati correttamente i social network tendono a "tirare a caso" prendendo la prima immagine che trovano e il primo testo che ritengono coerente con il contenuto (ma spesso sbagliano). Per dire ai social esattamente cosa andare a prendere quando clicchismo sul tasto "condividi" dobbiamo usare proprio questi meta tag particolari: gli open graph!

A questo punto abbiamo 2 strade per poterli inserire senza usare estensioni di terze parti:

Utilizziamo il titolo, la meta descrizione e l'immagine introduttiva per settare gli open graph in automatico
Creiamo dei campi personalizzati (titolo, descrizione e immagine) per settare noi manualmente gli open graph articolo per articolo

Entrambe le soluzione richiederanno la creazione di un override della view degli articoli, ma lo faremo insieme passo passo.

Override della view articolo su Cassiopeia (o altri template)

Prima di tutto facciamo un bel backup del sito web: potete farlo manualmente oppure usando un'estensione gratuita e facilissima da usare.

Fatto il backup? Bene, ora creiamo un override della view dell'articolo: questo ci permette di modificare il codice con cui gli articoli vengono visualizzati sul sito. Questo ci permetterà di settare gli open graph a nostro piacimenti.

In questo caso, useremo l'override della view articolo (com_content)

Vai su Sistema (menù a sinistra) > Sezione "Template" > Template Sito.
Seleziona il template attivo (es. Cassiopeia).
Clicca su "Crea override" e seleziona componenti > com_content > article.
Il file default.php sarà ora disponibile in /html/com_content/article. (sezione "editor")

Ora che abbiamo creato l'override possiamo andare a modificare il nostro "default.php" a piacimento, con una delle due soluzioni seguenti.

Inserire gli Open Graph automatici nell’override

Questa prima soluzione permette di inserire gli open graph automaticamente. Questo vuol dire che il titolo dell'articolo sarà usato per og:title, la meta descrizione sarà usata per og:description e l'immagine introduttiva sarà usata per og:image.

Questo ci permetterà di non dover usare info aggiuntive oltre a quelle che usiamo di solito, ma ovviamente ci "obbliga" a riempire quei campi tutte le volte (ma comunque il titolo è obbligatorio e l'immagine di intro e meta descrizione sono sempre altamente consigliati).

Il procedimento è semplice: copia e incolla questo codice alla riga 23 (subito dopo tutta la lista degli "use XXX...").

// Ottieni i dati dell'articolo
$title = $this->item->title ?? '';
$metaDesc = $this->item->metadesc ?? '';
$images = isset($this->item->images) ? json_decode($this->item->images) : null;

// Funzione per pulire l'URL dell'immagine
function cleanImageUrl($url) {
    // Separiamo la parte prima di '#' se presente
    $urlParts = explode('#', $url);
    $cleanedUrl = $urlParts[0];
    
    // Separiamo eventuali parametri dopo il '?' (se presenti) dalla parte prima di '?'
    $finalParts = explode('?', $cleanedUrl);
    return $finalParts[0];
}

// Controlla l'immagine introduttiva e quella completa
$introImage = isset($images->image_intro) ? cleanImageUrl($images->image_intro) : '';
$fullImage = isset($images->image_fulltext) ? cleanImageUrl($images->image_fulltext) : '';

// Seleziona l'immagine da usare
$image = $introImage ?: $fullImage;

// Ottieni il documento di Joomla
$doc = Joomla\CMS\Factory::getDocument();

// Aggiungi i meta tag Open Graph
$doc->addCustomTag('<meta property="og:title" content="' . htmlspecialchars($title) . '" />');
$doc->addCustomTag('<meta property="og:description" content="' . htmlspecialchars($metaDesc) . '" />');

if (!empty($image)) {
    $doc->addCustomTag('<meta property="og:image" content="' . htmlspecialchars(JUri::root() . $image) . '" />');
}

$doc->addCustomTag('<meta property="og:type" content="article" />');
$doc->addCustomTag('<meta property="og:url" content="' . htmlspecialchars(JUri::getInstance()->toString()) . '" />');

Cosa fa esattamente questo codice?

Recupero dei dati: Prende titolo, meta descrizione e immagini (image_intro e image_fulltext) dall'articolo corrente.
Pulizia degli URL: Rimuove parti aggiuntive dopo # e ? dagli URL delle immagini di Joomla 5.
Selezione immagine: Usa l'immagine introduttiva; se non disponibile, usa quella completa.
Aggiunta meta tag Open Graph:
- Inserisce titolo (og:title), descrizione (og:description), immagine (og:image), tipo (og:type), e URL (og:url) nell’<head>.
Sicurezza e validazione: Filtra i contenuti con htmlspecialchars() per evitare problemi di sicurezza e garantire HTML valido.

Una volta inserito questo codice nel vostro override e salvato siete a bolla: i vostri opengraph appariranno in automatico su ogni articolo del vostro sito!

Modalità manuale con campi personalizzati

Questa seconda modalità si può utilizzare nel caso abbiate bisogno di settare degli open graph diversi da titolo, immagine e meta descrizione. Quando può succedere questa cosa? Soprattutto quando avete titoli e descrizioni molto lunghe e volete fare qualcosa di più corto per i social, oppure usare due immagini diverse tra social e sito web.

Primo step: creiamo i campi personalizzati:

Puoi aggiungere tre campi personalizzati per il controllo manuale degli Open Graph:

Vai su Contenuto (menu di sinistra) > Campi aggiuntivi e clicca su "Nuovo".
- Campo 1: Open Graph - Titolo (Tipo: Testo).
- Campo 2: Open Graph - Descrizione (Tipo: Area di testo).
- Campo 3: Open Graph - Immagine (Tipo: Immagine - Media).

Questi 3 titoli sono indicativi, potete mettere quello che volete. Segnatevi però come li avete chiamati perchè li richiameremo nel codice qui sotto.

Puoi decidere tu se mettere questi campi obbligatori o solo facoltativi. Puoi inoltre scegliere se inserirli in un gruppo specifico oppure lasciarli "liberi". Inoltre puoi anche decidere se restringerli a specifiche categorie oppure renderli disponibili per tutti gli articoli del sito.

Una volta creati i 3 campi aggiuntivi andiamo a riempirli in tutti gli articoli e poi andiamo a fare questa modifica nell'override della view articoli che abbiamo creato in precedenza.

Inseriamo il codice nell'override della view singolo articolo

Anche in questo caso dobbiamo inserire il codice alla riga 23 (subito dopo tutta la lista degli "use XXX...").

// Ottieni i dati dell'articolo
$title = $this->item->title ?? '';
$metaDesc = $this->item->metadesc ?? '';
$fields = isset($this->item->jcfields) ? $this->item->jcfields : [];

// Funzione per pulire l'URL dell'immagine
function cleanImageUrl($url) {
    // Separa la parte prima di '#' e '?' per ottenere solo l'URL base
    $urlParts = explode('#', $url);
    $cleanedUrl = $urlParts[0];
    $finalParts = explode('?', $cleanedUrl);
    return $finalParts[0];
}

// Funzione per estrarre l'attributo src da un tag HTML di immagine
function extractImageSrc($html) {
    if (preg_match('/<img.*?src=["\'](.*?)["\']/', $html, $matches)) {
        return $matches[1];
    }
    return $html; // Ritorna il valore originale se non è un tag <img>
}

// Variabili per i campi personalizzati
$ogTitle = '';
$ogDescription = '';
$ogImage = '';

// Cerca i campi personalizzati specifici in base al label
foreach ($fields as $field) {
    if ($field->label === 'Open Graph - Titolo') {
        $ogTitle = $field->value ?? '';
    }
    if ($field->label === 'Open Graph - Descrizione') {
        $ogDescription = $field->value ?? '';
    }
    if ($field->label === 'Open Graph - Immagine') {
        // Estrae l'URL dell'immagine dal campo e lo pulisce
        $ogImage = isset($field->value) ? cleanImageUrl(extractImageSrc($field->value)) : '';
    }
}

// Fallback ai valori predefiniti se i campi personalizzati non sono compilati
$ogTitle = $ogTitle ?: $title;
$ogDescription = $ogDescription ?: $metaDesc;

// Ottieni il documento di Joomla
$doc = Joomla\CMS\Factory::getDocument();

// Aggiungi i meta tag Open Graph
$doc->addCustomTag('<meta property="og:title" content="' . htmlspecialchars($ogTitle) . '" />');
$doc->addCustomTag('<meta property="og:description" content="' . htmlspecialchars($ogDescription) . '" />');

if (!empty($ogImage)) {
    $doc->addCustomTag('<meta property="og:image" content="' . htmlspecialchars(JUri::root() . $ogImage) . '" />');
}

$doc->addCustomTag('<meta property="og:type" content="article" />');
$doc->addCustomTag('<meta property="og:url" content="' . htmlspecialchars(JUri::getInstance()->toString()) . '" />');

Ecco una descrizione sintetica di cosa fa questo codce:

Recupero dati:
- Recupera titolo, meta descrizione e campi personalizzati dell’articolo
Pulizia delle immagini:
- Estrae il valore src se l’immagine è un tag <img>.
- Rimuove parti extra dopo # e ? per ottenere URL validi.
Gestione campi personalizzati:
- Usa i valori dei campi personalizzati Open Graph Title, Open Graph Description e Open Graph Image.
- Se i campi sono vuoti, utilizza i valori predefiniti (titolo e descrizione dell’articolo).
Generazione meta tag Open Graph:
- Aggiunge i tag og:title, og:description, og:image, og:type, e og:url alla sezione <head>.
Validazione:
- Garantisce la sicurezza dei valori con htmlspecialchars() e genera tag solo se i dati sono presenti.

Conclusione: perché configurare gli Open Graph in Joomla?

Gli Open Graph migliorano l’aspetto dei tuoi articoli condivisi sui social e rafforzano l’indicizzazione sui motori di ricerca. Con pochi passaggi, puoi ottimizzare il tuo sito Joomla senza dipendere da estensioni esterne, garantendo un controllo completo e prestazioni migliori. Se avete qualche domanda non esitate a contattarmi!

TLDR? Guarda il video!