--- title: "Joomla e Open Graph: Configurare i Meta Tag Senza Estensioni - Pixed" description: "Impara a configurare gli Open Graph in Joomla senza plugin: crea un override della view degli articoli e utilizza campi personalizzati per migliorare SEO e condivisioni sui social. Guida dettagliata e codice pronto per l'uso." url: "https://www.pixed.it/pixed-blog/joomla/joomla-e-open-graph-configurare-i-meta-tag-per-la-seo-senza-estensioni-esterne" language: "it-it" published: "2024-11-25T10:25:53Z" modified: "2024-12-06T10:13:26Z" --- # Joomla e Open Graph: Configurare i Meta Tag Senza Estensioni 25 Novembre 2024 · Gianluca Gabella ⏱ tempo di lettura 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: 1. Utilizziamo il titolo, la meta descrizione e l'immagine introduttiva per settare gli **open graph in automatico** 2. 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](https://www.pixed.it/pixed-blog/joomla/come-fare-il-backup-del-vostro-sito-joomla-parte-1) oppure usando [un'estensione gratuita e facilissima da usare](https://www.pixed.it/pixed-blog/joomla/come-fare-il-backup-del-vostro-sito-joomla-parte-2). 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") ![](https://www.pixed.it/images/blog/opengraph/override_article.png) 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(''); $doc->addCustomTag(''); if (!empty($image)) { $doc->addCustomTag(''); } $doc->addCustomTag(''); $doc->addCustomTag(''); ``` 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: 1. 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('/ } // 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(''); $doc->addCustomTag(''); if (!empty($ogImage)) { $doc->addCustomTag(''); } $doc->addCustomTag(''); $doc->addCustomTag(''); ``` 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! --- ti è piaciuto questo articolo? Condividilo! dal blog potrebbero interessarti: [Tutti gli articoli](https://www.pixed.it/pixed-blog) [![Perché gli utilizzatori di WordPress non migrano su Joomla?](https://www.pixed.it/media/yootheme/cache/d1/attivare-smooth-scroll-sito-web-d122399a.jpg?src=images/blog/attivare-smooth-scroll-sito-web.jpg&thumbnail=600,400,&hash=59974e26) ### Perché gli utilizzatori di WordPress non migrano su Joomla? 18 Gennaio 2026 ](https://www.pixed.it/pixed-blog/joomla/perche-gli-utilizzatori-di-wordpress-non-migrano-su-joomla) [![Come funziona la cache di Joomla?](https://www.pixed.it/media/yootheme/cache/5f/joomla-cache-5fd083f6.jpg?src=images/blog/cache/joomla-cache.jpg&thumbnail=600,400,&hash=6d3e3a00) ### Come funziona la cache di Joomla? 11 Dicembre 2024 ](https://www.pixed.it/pixed-blog/joomla/come-funziona-la-cache-di-joomla) [![In arrivo Joomla 5.2](https://www.pixed.it/media/yootheme/cache/5c/nuovo-joomla-52-5ce05a0f.jpg?src=images/blog/joomla52/nuovo-joomla-52.jpg&thumbnail=600,400,&hash=9529090d) ### In arrivo Joomla 5.2 13 Ottobre 2024 ](https://www.pixed.it/pixed-blog/joomla/in-arrivo-joomla-5-2)