Come aggiungere tag Open Graph in WordPress utilizzando PHP

Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you’ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.

Passaggio 1: comprendere i tag Open Graph

Before diving into the code, let’s review what Open Graph tags are and why they are important.

• 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: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.

Questi tag vengono posizionati all'interno del 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

Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s funzioni.php file. If you’re using a child theme, add the code to the child theme’s funzioni.php per garantire che le modifiche non vengano sovrascritte durante futuri aggiornamenti del tema principale.

1. Accedi alla dashboard di WordPress e vai a Aspetto > Editor tema.
2. Selezionare il funzioni.php file del tuo tema o tema figlio.
3. Aggiungere il seguente codice PHP alla fine del file:
4. 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), ‘full’);
   } 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 = get_the_excerpt();echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   }
   }
   add_action(‘wp_head’, ‘add_opengraph_tags’);

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() E ottieni_l'estratto(): Recupera il titolo e la descrizione del post, che vengono utilizzati per il og:titolo E og:descrizione rispettivamente i tag.
• URL canonico e tipo di contenuto:
  • ottieni_permalink(): Recupera l'URL del post corrente per il og:url etichetta.
  • og:tipo: Set to “article” to indicate that the content is an article.

Fase 3: Verifica dell'implementazione

Dopo aver aggiunto il codice a funzioni.php, è importante verificare che i tag Open Graph vengano generati correttamente.

1. 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 sezione.
2. Utilizzare il debugger di condivisione di Facebook:
   • Visita il Debugger di condivisione di Facebook.
   • Enter the URL of your post and click “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