5 semplici modi per installare le Twitter Card sul tuo sito web

Quindi sai come su Twitter, quando qualcuno pubblica un link al proprio sito Web, Twitter crea una casella che ha un'immagine in miniatura, un titolo, una descrizione e un URL per la pagina di destinazione? È davvero comune. Rende i post di link standard molto più visibili nelle timeline, mostra qualcosa sulla destinazione del link e incoraggia una maggiore interazione dell'utente.

Quella è una Twitter Card. Nello specifico, è la scheda riepilogativa del sito web, una delle numerose tipologie di Twitter card che possono essere integrate in un sito web. Quali altri tipi ci sono?

• La scheda riepilogativa, come detto, è un'anteprima di un sito web. È un'immagine e un testo personalizzati estratti da meta informazioni che garantiscono una buona anteprima di ciò che un utente vedrà quando fa clic sul tuo collegamento.
• La scheda riepilogativa (con immagine grande) è... identica a una scheda riepilogativa. Sinceramente non so perché c'è una differenza. Fare clic su ciascuno dei collegamenti e visualizzare i tweet in anteprima e vedere cosa intendo. Suppongo che prima dell'ultima riprogettazione di Twitter avrebbero potuto sembrare diversi, ma oggi tutto sembra una grande scheda immagine.
• La carta giocatore non deve essere confusa con le carte da baseball o altre carte sportive. Sono essenzialmente grandi schede immagine, tranne per il fatto che l'immagine è una forma di supporto animato. A seconda di come vengono visualizzati, potrebbero essere piccole caselle di anteprima e descrizione che si espandono in file multimediali o semplicemente il file multimediale stesso pronto per la riproduzione. Generalmente si tratta di video incorporati, come i video di YouTube, anche se i webm sono sempre più popolari.
• La scheda dell'app è una casella che estrae i dati da una pagina dell'app store per creare una finestra di promozione dell'app personalizzata. Mostra i dettagli salienti dell'app collegata nel tweet, insieme a un pulsante CTA per convincere gli utenti a installare immediatamente l'app.

Le schede Twitter erano molto più complesse. C'erano tipi specifici di schede per gallerie di immagini, prodotti e alcune altre opzioni, ma da allora Twitter le ha rimosse. Se vuoi un po' di nostalgia, puoi vedere che aspetto avevano qui, ma non attaccarti troppo; non puoi farli oggi

Le basi delle Twitter Card

Puoi avere solo un tipo di Twitter card per sito web, o almeno per pagina web, se hai voglia di specificare un codice individuale per ogni pagina. La maggior parte delle persone sceglie una scheda riepilogativa di base per immagini di grandi dimensioni e inserisce il codice nell'intestazione del modello del proprio sito, in modo che venga visualizzato in ogni pagina. Alcuni siti, come YouTube, inseriranno la scheda giocatore nell'intestazione. L'aspetto principale qui è che puoi avere solo un set di informazioni sulla carta nei metadati dell'intestazione su una determinata pagina.

Le carte sono piuttosto robuste nei dati che possono trasmettere. Puoi fare in modo che la scheda sappia automaticamente chi ha creato il contenuto e chi è il proprietario della pagina, anche entrambi contemporaneamente se sono diversi. Puoi specificare il supporto da caricare, puoi specificare nomi e codice di tracciamento e molto altro ancora. In effetti, puoi leggere questa pagina per farti un'idea degli attributi che puoi utilizzare per le carte in particolare. Puoi anche collegare attributi Open Graph per dati più robusti.

Quello che farò qui oggi è dirti come aggiungere schede Twitter al tuo sito. Non esaminerò ogni singolo attributo - la documentazione di Twitter è abbastanza buona - ti darò solo una carrellata di come farlo per vari CMS.

Prima di iniziare; per ogni metodo di installazione è necessaria la convalida. Per assicurarti di averlo fatto bene, una volta abilitata una carta, copia l'URL su questo validatore. Questo ti dirà se la carta funziona effettivamente o meno.

1: WordPress

WordPress è forse la piattaforma più semplice per implementare le Twitter card, perché ci sono tanti modi diversi per farlo, incluso quello che è quasi integrato.

Il modo consigliato per implementare le Twitter card è utilizzare il plugin ufficiale di Twitter . Puoi installarlo come qualsiasi altro plug-in e da lì puoi generare automaticamente le tue schede Twitter. Consente inoltre la condivisione e i pulsanti tweet/segui, la gestione dei tweet incorporata e gli shortcode per il monitoraggio delle analisi. Puoi leggere la documentazione qui e scaricare il plugin stesso qui.

Se non vuoi utilizzare il plugin ufficiale di Twitter, o se sei su WordPress.com ospitato, puoi usare Jetpack. In Jetpack, vuoi trovare la sezione Condivisione e configurarla. Ci sarà una sezione Twitter, dove autorizzi il tuo account Twitter al tuo sito web.

Una terza opzione consiste nell'utilizzare il plug-in JM Twitter Cards. Questo plugin, di Julien Maury, aggiunge la compatibilità della scheda Twitter con alcune impostazioni di base. Puoi scegliere di utilizzare la prima immagine sulla tua pagina anziché un'immagine in primo piano, puoi visualizzare in anteprima il rendering della tua scheda Twitter e puoi personalizzare la scheda per ogni post quando crei il post. Per configurare il plug-in, vai alla barra laterale e fai clic sul pannello del plug-in nella dashboard di amministrazione. Scegli il tipo di carta e compila le altre caselle con il tuo account Twitter, l'account del tuo sito, la lunghezza della descrizione e qualsiasi altra cosa tu voglia aggiungere.

Se nessuno di questi soddisfa le tue esigenze, o se lo hai già, WordPress SEO di Yoast gestisce anche le schede Twitter. Nel tuo pannello di amministrazione, vai su SEO e fai clic sulla sezione Social. C'è una scheda Twitter lì, dove puoi aggiungere il tuo nome utente Twitter alla casella. Purtroppo, l'ultima volta che ho letto, Yoast supporta solo schede riepilogative; hai bisogno di plugin più avanzati se vuoi altri tipi di carte.

2: Tumblr

Tumblr è una piattaforma di blog sorprendentemente popolare che molte persone non si rendono conto che è diventata così prolifica. La rete Tumblr si estende oltre i semplici blog contrassegnati con .tumblr.com; in effetti, alcuni siti di grandi nomi utilizzano Tumblr come architettura di base. Una volta che hai un dominio personalizzato su di esso, è proprio come qualsiasi altra architettura di back-end. O è?

Il fatto è che l'architettura di Tumblr non è ampia o personalizzabile come qualcosa come WordPress. Dovrai utilizzare del codice personalizzato per implementare schede Twitter specifiche e personalizzate sul tuo blog. Puoi leggere il codice e la descrizione dietro di esso qui, nella risposta data da Dan Leveille su Quora.

Vale la pena notare qui che questo codice è necessario per personalizzare manualmente le tue carte; non è richiesto il semplice possesso di schede riepilogative. Twitter ha già inserito Tumblr.com nella whitelist per la generazione automatica delle carte alla pubblicazione dei link, quindi a meno che tu non voglia una carta specifica con dati specifici o utilizzi un dominio personalizzato, puoi semplicemente usare ciò che è implementato per impostazione predefinita. Ricorrerei al suo codice solo se hai un dominio personalizzato per il tuo sito Tumblr o se vuoi dati che Twitter non sta raccogliendo naturalmente.

3: blogger

L'installazione di schede Twitter su un blog di Blogger dipende dal tuo modello. Ti darò istruzioni generali, ma se il modello del tuo sito varia troppo dalla norma, dovrai capirlo tu stesso in base agli indizi che ti fornisco.

Si consiglia sempre di eseguire il backup del modello prima di manometterlo, per ogni evenienza. Vai alla dashboard, fai clic sul modello e fai clic sul pulsante di backup per salvarne una copia a scopo di ripristino in seguito.

Quindi, fai clic sul pulsante "modifica HTML" sotto l'anteprima dal vivo del modello del tuo blog. All'interno di quel codice, esegui una ricerca per "<b:includedable id='post' var='post'>". Mantieni quella riga dove si trova, ma incolla quanto segue direttamente sotto di essa:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Ovviamente, dovrai modificare tu stesso i dati sopra . Cambia @tuonome con il tuo nome utente Twitter, cambia www.tuosito.com con l'URL del tuo sito e assicurati che sia accurato.

Ovviamente puoi personalizzare questo codice in base alle tue esigenze. Se preferisci un tipo diverso di carta, cambia la riga superiore con qualcosa di diverso da “riassunto” e adatta il resto del codice ai dati che ti servono.

Nel caso in cui il codice che ho incollato sopra non funzioni, questa è la pagina da cui l'ho preso. Puoi ricontrollare per assicurarti di averlo copiato correttamente, o di averlo fatto, e puoi controllare lì nel caso in cui sia stato aggiornato e il mio post non rifletta l'aggiornamento. A proposito, se non funziona, fammi sapere. Farò del mio meglio per risolverlo.

4: Joomla

Joomla ha molto in comune con WordPress, in quanto è un CMS con un'enfasi sulla personalizzazione tramite estensioni piuttosto che una piattaforma limitata con miglioramenti estetici come Tumblr o Blogger. Pertanto, ci sono una manciata di modi diversi per implementare le schede Twitter utilizzando diverse estensioni di Joomla.

Tweet Cards è un'estensione che probabilmente la maggior parte delle persone preferisce. È gratuito da scaricare e utilizzare e aggiunge le schede Twitter al tuo sito Web basato su Joomla. Questo è tutto; non c'è niente di stravagante nella configurazione, non c'è niente di eccezionale con la sua funzionalità o implementazione, fa solo quello che dice sulla scatola.

Una seconda opzione è l'estensione pro Open Graph e Twitter Card Tags. È un'estensione più robusta che aggiunge tag sia per Twitter che per Facebook. Ha molte opzioni di personalizzazione per scegliere le immagini e i dati specifici che desideri per i tuoi post. L'integrazione con Facebook di Open Graph è ottima, inoltre aggiunge metadati extra sia per Twitter che per Google quando bussano. L'unico aspetto negativo è che, come estensione pro, questo ti costerà. È economico, però; solo 7 euro per la licenza. Puoi acquistare supporto extra se lo desideri, ma siamo onesti; questi sono solo metadati, è un lavoro di copia e incolla glorificato per le persone che hanno paura del codice. Non hai bisogno di supporto.

La terza opzione che ho per te è usare TEXTman, un editor di post front-end per creare e pubblicare i tuoi articoli su un sito Joomla. Non è necessario configurare nulla per il funzionamento delle schede Twitter; usa semplicemente TEXTman come editor e porta automaticamente la funzione. Lo svantaggio qui è che è anche uno strumento professionale e molto più costoso. Poiché è un intero editor di testo e strumenti associati, è una grande licenza con diverse estensioni aggiunte. Ti costerà $ 99 per un abbonamento con tutto, o $ 40 solo per TEXTman stesso e un supporto limitato e una licenza di aggiornamento. Molto costoso se tutto ciò che vuoi sono le schede Twitter.

Infine, ovviamente, puoi utilizzare il metodo di seguito o descritto in questo post per implementarli manualmente.

5: Sistemi di gestione dei contenuti personalizzati

Ho già pubblicato un esempio dei metadati nel codice sopra. È fondamentalmente lo stesso codice che incolli nell'intestazione del tuo sito, indipendentemente dall'architettura che stai utilizzando. Modifica le cose in base alle esigenze del tuo sito e copia il codice nell'intestazione del tuo sito. Non importa esattamente dove si trovi, purché si trovi tra i tag <head> e </head> nella parte superiore del sito.

Non dimenticare di personalizzare i tag. I principali a cui devi prestare attenzione sono i tag della carta, del sito, del creatore e del dominio. Questi dovrebbero essere compilati con il tipo di carta che desideri, l'handle Twitter del tuo sito e del creatore di contenuti e l'URL del tuo dominio. Quindi convalida la carta dopo aver implementato le modifiche.

Se la tua carta continua a non funzionare dopo la convalida, dovresti leggere la guida alla risoluzione dei problemi di Twitter. È probabile che ci sia un semplice errore da qualche parte che puoi correggere in pochi secondi.