I tag Open Graph (OG) sono essenziali per garantire che il contenuto del tuo sito web venga visualizzato correttamente sulle piattaforme dei social media quando viene condiviso. Questi tag aiutano le piattaforme a determinare quale immagine, titolo e descrizione utilizzare quando si mostra il contenuto. In questo articolo, imparerai come aggiungere questi tag al tuo tema WordPress utilizzando PHP, assicurandoti che l'immagine in evidenza venga visualizzata correttamente per ogni post condiviso.
Passaggio 1: comprendere i tag Open Graph
Prima di immergerci nel codice, rivediamo cosa sono i tag Open Graph e perché sono importanti.
og:titolo: Definisce il titolo del post.og:descrizione: Fornisce una breve descrizione del post.og:immagine: Specifica l'immagine da utilizzare quando si condivide il post.og:url: Specifica l'URL canonico del post.og:tipo: Definisce il tipo di contenuto, come un articolo, un video, ecc. Per i post del blog, utilizziamo "articolo".
Questi tag vengono posizionati all'interno del <head> sezione dell'HTML del tuo sito e vengono letti dalle piattaforme di social media come Facebook, Twitter e LinkedIn, tra gli altri.
Passaggio 2: aggiunta del codice al tema
Ora che hai compreso l'importanza dei tag Open Graph, aggiungiamo il codice necessario al tuo tema funzioni.php file. Se stai utilizzando un tema figlio, aggiungi il codice al file del tema figlio funzioni.php per garantire che le modifiche non vengano sovrascritte durante futuri aggiornamenti del tema principale.
- Accedi alla dashboard di WordPress e vai a Aspetto > Editor tema.
- Selezionare il
funzioni.phpfile del tuo tema o tema figlio. - Aggiungere il seguente codice PHP alla fine del file:
- funzione add_opengraph_tags() {
se (is_single() || is_page()) {
globale $post;
se (has_post_thumbnail($post->ID)) {
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'completo');
} altro {
// URL immagine predefinita se il post non ha un'immagine in evidenza
$img_src = array('https://www.example.com/default-image.jpg');
}// Titolo del post
$title = ottieni_il_titolo();
// Descrizione del post
$description = ottieni_l'estratto();echo ' ';
eco ' ';
eco ' ';
eco ' ';
eco ' ';
}
}
aggiungi_azione('wp_head', 'aggiungi_tag_opengraph');
Spiegazione del codice:
aggiungi_tag_opengraph(): Questa funzione controlla se la pagina corrente è un post o una pagina e, in caso affermativo, genera i tag Open Graph appropriati.- Immagine in evidenza:
has_post_thumbnail($post->ID): Controlla se il post ha un'immagine in evidenza.wp_get_attachment_image_src(): Recupera l'URL completo dell'immagine in evidenza. Se il post non ha un'immagine in evidenza, viene utilizzata un'immagine predefinita.
- Titolo e descrizione:
ottieni_il_titolo()Eottieni_l'estratto(): Recupera il titolo e la descrizione del post, che vengono utilizzati per ilog:titoloEog:descrizionerispettivamente i tag.
- URL canonico e tipo di contenuto:
ottieni_permalink(): Recupera l'URL del post corrente per ilog:urletichetta.og:tipo: Impostare su "articolo" per indicare che il contenuto è un articolo.
Fase 3: Verifica dell'implementazione
Dopo aver aggiunto il codice a funzioni.php, è importante verificare che i tag Open Graph vengano generati correttamente.
- Visualizza la sorgente della pagina: Su qualsiasi post o pagina, fai clic con il pulsante destro del mouse e seleziona "Visualizza sorgente pagina" o un'opzione simile. Cerca i tag Open Graph all'interno del
<head>sezione. - Utilizzare il debugger di condivisione di Facebook:
- Visita il Debugger di condivisione di Facebook.
- Inserisci l'URL del tuo post e clicca su "Debug".
- Facebook mostrerà le informazioni che rileva, tra cui l'immagine, il titolo e la descrizione. Ciò aiuta a identificare se i tag vengono generati correttamente.
Passaggio 4: risoluzione dei problemi comuni
- Immagine non visualizzata: Assicurati che l'immagine in evidenza sia impostata sul post. Se viene utilizzata un'immagine predefinita, verifica che l'URL dell'immagine sia corretto e accessibile al pubblico.
- Conflitti con altri plugin: Alcuni plugin SEO o social media potrebbero interferire con la generazione di tag Open Graph. Prova a disabilitare temporaneamente questi plugin per vedere se il problema persiste.
- Memorizzazione nella cache: Se stai utilizzando un plugin di memorizzazione nella cache, cancella la cache del sito per assicurarti che le nuove impostazioni vengano applicate.
Riepilogo
Aggiungere manualmente i tag Open Graph al tuo tema WordPress usando PHP è un modo eccellente per assicurarti che i tuoi contenuti vengano visualizzati correttamente sulle piattaforme dei social media. Con questo codice, hai il pieno controllo su come vengono condivisi i tuoi post, incluso quale immagine, titolo e descrizione vengono usati. Inoltre, eviti di affidarti a plugin extra, mantenendo il tuo sito più leggero e veloce.
Ora che hai configurato i tag Open Graph, i tuoi post dovrebbero essere condivisi correttamente sui social media, con le immagini in evidenza che appaiono come previsto. Se hai domande o hai bisogno di ulteriore assistenza, sentiti libero di lasciare un commento qui sotto!
Foto di Spazio negativo
