In questo articolo, discuteremo come aggiungere Facebook Open Graph e Twitter Card a Joomla senza un plug-in o un modulo.
Se non hai vissuto sotto una roccia negli ultimi dieci anni o giù di lì, probabilmente avrai visto molto spesso persone condividere articoli su Facebook con una bella immagine e un titolo, e una cosa simile su Twitter con grandi belle carte che mostrano un grande Immagine.
Il modo migliore per controllarlo è implementare ciò che viene chiamato Open Graph protocollo. Si tratta di un insieme di tag che forniscono suggerimenti a Twitter, Facebook e altri crawler su quale contenuto dovrebbero utilizzare.
Puoi farlo facilmente in Joomla senza installare alcuna estensione di terze parti creando una sostituzione del modello.
Ecco come fare:
Carte Twitter Joomla
Quando si implementano le schede Twitter utilizzando i tag del grafico aperto di Joomla, invece di avere un'immagine visualizzata a caso o nessuna immagine, il tuo articolo di Joomla suggerirà la migliore immagine da utilizzare.
Guarda l'esempio qui sotto dal CollectiveRay feed di Twitter.
Esempio di grafico aperto di Facebook
D'altra parte, su Facebook, utilizzando i tag Open Graph di Joomla, i tuoi post quando condivisi appariranno come i seguenti.
Come abilitare i tag Open Graph di Joomla
1. Creare una sostituzione del modello per gli articoli
Estensioni> Modelli> Modelli> (il tuo modello) Dettagli e file> Crea sostituzioni> Componenti> com_content> articolo
Dopo aver creato l'override del modello di articolo, puoi aggiungere i metadati all'override che verrà utilizzato per visualizzare il tuo articolo. In sostanza, dovrai aggiungere il seguente contenuto all'articolo in modo che i metadati vengano prelevati dal tuo articolo.
2. Aggiungere i metadati per Facebook / Twitter Open Graph
Vai a Estensioni> Modelli> Modelli> (il tuo modello) Dettagli e file> Editor> html> com_content> articoli> default.php
Aggiungi il codice seguente in alto tra i tag php: - fai un po 'attenzione a dove aggiungerlo, potresti interrompere temporaneamente il tuo modello se lo aggiungi nel posto sbagliato ... quindi fai un backup completo del file, prima di eseguire una qualsiasi di queste modifiche
if (isset($images->image_intro) and !empty($images->image_intro)){ $timage= htmlspecialchars(JURI::root().$images->image_intro); } elseif (isset($images->image_fulltext) and !empty($images->image_fulltext)){ $timage= htmlspecialchars(JURI::root().$images->image_fulltext);}else{ $timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';}$doc =& JFactory::getDocument();$doc->addCustomTag( ' <meta name="twitter:title" content="'.$this->escape($this->item->title).'"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations"> <meta name="twitter:url" content="'.str_replace('" ','"',JURI::current()).'" <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'"> <meta name="twitter:image" content="'.$timage.'"> <meta property="og:title" content="'.$this->escape($this->item->title).'"/> <meta property="og:type" content="article"/> <meta property="og:email" content="info@dart-creations.com";/> <meta property="og:url" content="'.str_replace('" ','"',juri::current()).'" <meta property="og:image" content="'.$timage.'"/> <meta property="og:site_name" content="DARTCreations"/> <meta property="fb:admins" content="xxxxxxxxxxx"/> <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>');
3. Personalizza i tag Open Graph sui tuoi valori
Il codice sopra è personalizzato per CollectiveRay, quindi ovviamente modifica i valori con gli elementi che desideri per il tuo sito.
Queste sono le linee che devi cambiare:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Questa dovrebbe essere la posizione dell'immagine predefinita, nel caso in cui il tuo articolo non abbia un'immagine introduttiva o un'immagine a testo completo.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
Il valore @ sopra dovrebbe essere modificato per riflettere il tuo nome utente Twitter.
<meta property="og:email" content="info@dart-creations.com";/>
L'indirizzo e-mail sopra dovrebbe essere aggiornato con il tuo indirizzo e-mail.
Quanto sopra dovrebbe essere aggiornato con il nome del tuo sito.
Invece del xxxxxxxxxxx del tag fb: admins, dovrai inserire l'ID numerico dell'utente di Facebook che eseguirà cose come Page Insights. Per trovare il numero, potresti voler guardare uno strumento come questo strumento: trova il mio ID Facebook.
Suggerimento del lettore:
Eddie ha suggerito di limitare la lunghezza della descrizione a un numero di caratteri specificato se si utilizza il codice seguente:
Potresti voler limitare la lunghezza della descrizione a circa 45 caratteri utilizzando mb_strimwidth o substr in questo modo:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtext), 0,45). '"/>
or
Ed ha anche fatto un secondo suggerimento che in realtà ti consente di scegliere i dati dalla meta descrizione dell'articolo, il che è un suggerimento davvero eccezionale.
Ho modificato un po 'il codice e ho ottenuto quanto segue:
.
Questo è prodotto da questo codice (la nota ">" è rimossa):
<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('description')), 0,45, "..."). '"=" "/>
Puoi vedere che sto ottenendo la meta descrizione, limitata a 45 caratteri, e aggiungo puntini di sospensione se la descrizione è troncata. In questo modo posso "fare clic" sulla descrizione per ottenere un CTR migliore mantenendo leggibile il testo introduttivo in linea con lo "stile" o la "voce" del mio sito web. Usando la meta descrizione posso anche aggiungere un po 'di questo codice a un override anche per le categorie!
Un altro lettore: Thomas Meredith ha commentato di seguito che il codice
era vulnerabile alle vulnerabilità XSS e il codice corretto dovrebbe essere:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
Abbiamo aggiornato il codice con questa correzione e dovresti fare lo stesso.
Ti aiutiamo a gestire meglio il tuo Joomla
Altri aggiornamenti dai nostri visitatori
Se segui la conversazione qui sotto, scoprirai che anche se il codice sopra funziona per la maggior parte delle situazioni, ci sono casi specifici in cui il codice non funziona. Michael di N8 Solutions, si è assunto la responsabilità di trovare una soluzione per quei casi in cui questo non funzionava.
Nello spirito della comunità open source di Joomla, hanno condiviso il codice con il resto dei visitatori nei commenti qui sotto. Sto riproducendo il codice e i commenti di Michael alla lettera, per chiarezza:
Sono stato in grado di risolvere il problema non solo per la pagina "Contatti" ma anche per le pagine delle voci di menu "Blog" e "In primo piano".
In primo luogo, quello che ho scritto sopra per la pagina dei contatti, per afferrare il "Nome" il contatto viene salvato in quanto funzionerà. "Twitter: title" e "og: title" dovrebbero apparire così se si desidera utilizzare il nome salvato del contatto.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
Tuttavia, se desideri utilizzare le informazioni dal menu, puoi farlo con questo nuovo codice che funzionerà anche per le pagine delle voci di menu "Blog" e "In primo piano".
Puoi scegliere di utilizzare il "Titolo del menu", il "Titolo della pagina del browser" o il "Titolo della pagina". Preferisco usare il titolo della pagina e impostare il menu in modo che non mostri il titolo della pagina. In questo modo posso utilizzare l'intestazione della pagina per Open Graph nel modo desiderato poiché non verrà visualizzato da nessun'altra parte a differenza del titolo del menu o del titolo della pagina del browser che lo farà.
Per fare questo, devi aggiungere il codice sotto tra "$ timage" e sopra "$ doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Quindi è necessario sostituire il codice per "twitter: title" e "og: title" con questo codice sottostante per utilizzare l '"intestazione della pagina".
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Se invece desideri utilizzare il "Titolo del menu" o il "Titolo della pagina del browser", nel codice devi sostituire "$ pageheading" con "$ title" per utilizzare il titolo del menu o "$ browserpagetitle" per utilizzare il browser Titolo della pagina.
Puoi creare le sostituzioni qui:
Crea sostituzioni> Componenti> com_content> categoria
Crea sostituzioni> Componenti> com_content> in primo piano
Crea sostituzioni> Componenti> com_contact> contact
Quindi modifica le sostituzioni, aggiungendo il codice sopra, nelle rispettive posizioni:
Editor> html> com_content> categoria> blog.php
Editor> html> com_content> in primo piano> default.php
Editor> html> com_contact> contact> default.php
Ho anche rimosso l'istruzione "if" per l'immagine Open Graph lasciando solo la linea di base:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
L'ho fatto perché l'istruzione "if" non è necessaria per queste pagine poiché non esiste un'immagine introduttiva o un'immagine a testo completo.
Un'altra cosa importante riguardante le "Descrizioni".
Per CONTATTI:
Nel codice della pagina dei contatti per "twitter: description" e "og: description", "introtext" deve essere sostituito con "metadesc" per acquisire la Meta Description impostata per il contatto. Se non si imposta una descrizione per il contatto, non verrà visualizzato nulla per i tag di descrizione del grafico aperto.
Per blog e articoli in primo piano:
Proprio come sopra per i contatti, "twitter: description" e "og: description", l '"introtext" deve essere sostituito con il codice di Eddie sopra per ottenere la Meta Description impostata per il Blog o per la voce di menu Articolo in primo piano. Anche in questo caso, se non si imposta una descrizione lì, non verrà visualizzato nulla. Quindi non devi cercarlo, ecco il codice che Eddie ha fornito sopra e come dovrebbero apparire le righe descrittive.
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
Preferisco cambiare la lunghezza dei caratteri da 45 a 160 poiché non sono interessato ai potenziali visitatori del sito "Bait Clicking".
Spero che questo sia utile agli altri!
4. Prova con il validatore Twitter e Facebook Linter
Controlla l'articolo sul tuo sito web con il validatore di Twitter: https://cards-dev.twitter.com/validator
e la
Linter Facebook: https://developers.facebook.com/tools/debug/
Ed è così che aggiungi i metadati di Open Graph ai tuoi articoli di Joomla :)
Domande frequenti
Cos'è il protocollo Open Graph?
Il protocollo Open Graph è un modo per consentire ai siti Web di controllare quale contenuto viene mostrato quando il contenuto del loro sito Web viene condiviso su Facebook, Twitter o altre piattaforme compatibili con Open Graph. Se il tuo sito web non utilizza questi tag, la piattaforma può decidere quale immagine mostrare e probabilmente mostrerà un'immagine non correlata.
Google utilizza Open Graph?
No Google non utilizza il protocollo Open Graph per le pagine dei risultati dei motori di ricerca. Invece, usa Dati strutturati, che è un altro metodo per consentire ai crawler di comprendere meglio il contenuto del tuo sito web. Anche se Google non utilizza i tag OG di per sé, il traffico al tuo sito web è un segnale di ranking, quindi probabilmente gioverà alle tue classifiche organiche avere un sito web compatibile con i social media.
Come si impostano i tag Open Graph in Joomla?
Per impostare i tag del grafico aperto in Joomla puoi utilizzare un modello di sovrascrittura e popolare i tag dal contenuto dei tuoi articoli come abbiamo descritto nell'articolo sopra. In alternativa, puoi installare un plug-in in grado di generare automaticamente questi tag dal contenuto del tuo sito web.
Come controlli i tag Open Graph?
Per controllare i tag Open Graph, puoi utilizzare Facebook Linter o Sharing Debugger oppure utilizzare il validatore di carte Twitter.
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.
e molti altri ...