Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere i meta-dati Open Graph di Facebook nei temi WordPress

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete aggiungere i metadati di Facebook Open Graph ai vostri temi WordPress?

I metadati Open Graph aiutano Facebook e altri siti web di social media a ottenere informazioni sui vostri post e pagine di WordPress. Inoltre, vi permette di controllare il modo in cui i vostri contenuti appaiono quando vengono condivisi su Facebook.

In questo articolo vi mostreremo come aggiungere facilmente i metadati di Facebook Open Graph nei temi WordPress.

How to Add Facebook Open Graph Meta Data in WordPress Themes

Condivideremo tre metodi diversi, in modo che possiate scegliere quello che funziona meglio per il vostro sito WordPress:

Metodo 1: Aggiungere i metadati Open Graph di Facebook con AIOSEO

All in One SEO è un popolare plugin SEO per WordPress utilizzato da oltre 3 milioni di siti web. Consente di ottimizzare facilmente il sito web per i motori di ricerca e per le piattaforme sociali come Facebook e Twitter.

Innanzitutto, è necessario installare e attivare il plugin gratuito All in One SEO. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina All in One SEO ” Reti sociali. Qui è possibile inserire l’URL della propria pagina Facebook e di tutti gli altri social network.

The AIOSEO SEO plugin for WordPress

Quindi, fate clic sulla scheda Facebook nella parte superiore della pagina e vedrete che Open Graph Markup è abilitato per impostazione predefinita.

È possibile fare clic sul pulsante “Carica o seleziona immagine” per scegliere un’immagine OG di Facebook predefinita se un articolo non ha un’immagine Open Graph.

Set default Open Graph image

Scorrendo verso il basso, è possibile personalizzare il nome del sito, la descrizione e altre impostazioni. Non dimenticate di fare clic sul pulsante blu “Salva modifiche” una volta terminato.

Dopo aver impostato i metatag Open Graph per tutto il sito, il passo successivo è aggiungere i metadati Open Graph per i singoli post e pagine.

Per impostazione predefinita, AIOSEO utilizzerà il titolo e la descrizione del post per il titolo e la descrizione di Open Graph. È inoltre possibile impostare manualmente la miniatura di Facebook per ogni pagina e post.

È sufficiente modificare il post o la pagina e scorrere fino alla sezione “Impostazioni AIOSEO” sotto l’editor. Da qui, passate alla scheda Social e vedrete un’anteprima della vostra miniatura.

AIOSEO Facebook preview

Qui è possibile impostare l’immagine del social media, il titolo e la descrizione.

Basta scorrere verso il basso fino al campo “Fonte dell’immagine”. Si può scegliere di utilizzare l’immagine in evidenza, caricare un’immagine personalizzata o altre opzioni.

Choose which WordPress image to use as your Facebook thumbnail

Metodo 2: Impostare i metadati Open Graph di Facebook con Yoast SEO

Yoast SEO è un altro plugin SEO per WordPress che può essere utilizzato per aggiungere i metadati di Facebook Open Graph a qualsiasi sito WordPress.

La prima cosa da fare è installare e attivare il plugin Yoast SEO. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Una volta attivati, i dati Open Graph di Facebook sono abilitati di default.

È possibile verificarlo andando su Yoast SEO ” Impostazioni e scorrendo giù fino alla sezione Condivisione sociale. Ora è possibile verificare che la caratteristica dei dati Open Graph sia abilitata.

Enable Facebook Open Graph

è necessario andare in SEO ” Social e selezionare l’opzione ‘Abilitato’ in ‘Aggiungi meta dati Open Graph’.

È possibile salvare le impostazioni o continuare a configurare altre opzioni sociali di Facebook.

È possibile fornire l’ID dell’app di Facebook se si utilizza una pagina Facebook e gli insight. Potete anche modificare il titolo, la descrizione e l’immagine della vostra homepage Open Graph.

Infine, è possibile impostare un’immagine predefinita da utilizzare quando non è stata impostata alcuna immagine per un post o una pagina.

La versione Premium di Yoast SEO consente anche di impostare i metadati Open Graph per le singole pagine e post. È sufficiente editare una pagina o un post e scorrere verso il basso fino alla sezione “Yoast SEO” sotto l’editor.

Set open graph meta data for post and pages using Yoast

Da qui è possibile impostare una miniatura Facebook per quel particolare post o pagina. Se non si imposta un titolo o una descrizione del post, il plugin utilizzerà il meta titolo e la descrizione SEO.

Ora è possibile salvare il post o la pagina e il plugin memorizzerà i metadati di Facebook Open Graph.

Metodo 3: Aggiungere i metadati Open Graph di Facebook con il codice

Questo metodo richiede la modifica dei file del tema, quindi assicuratevi di eseguire un backup dei file del tema prima di apportare qualsiasi modifica.

Dopodiché, è sufficiente copiare e incollare questo codice nel file functions.php del tema o aggiungere il frammento di codice utilizzando il plugin WPCode (consigliato).

Innanzitutto, installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consultare la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, è possibile andare su Code Snippets ” + Add Snippet dalla dashboard di WordPress. Dovete passare sopra il primo snippet con l’etichetta “Aggiungi il tuo codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet”.

Adding Your Custom Code in WPCode

Verrà creato un nuovo snippet in cui si dovrà digitare un titolo e selezionare il tipo di codice “Snippet PHP”. Dopodiché, è necessario inserire il seguente codice nella sezione “Anteprima del codice”:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Lets add Open Graph Meta Info
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:app_id" content="Your Facebook App ID" />';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site Name Goes Here"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Ricordarsi di aggiungere il nome del sito alla riga 17, dove è scritto “Il nome del sito va qui”. Successivamente, è necessario modificare l’URL dell’immagine predefinito alla riga 19 con uno dei propri URL dell’immagine.

Si consiglia di inserire un’immagine con il proprio logo, in modo che, se il post non ha una miniatura, venga estratto il logo del sito.

È inoltre necessario aggiungere l’ID dell’applicazione di Facebook alla riga 13. Se non si dispone di un’applicazione Facebook, è possibile rimuovere la riga 13 dal codice.

The New Code Snippet in WPCode

Una volta terminato l’aggiornamento del codice, è necessario impostare lo snippet su “attivo” e fare clic sul pulsante “Salva snippet”. Il vostro tema inizierà a mostrare i metadati di Facebook Open Graph nell’intestazione di WordPress.

Guide di esperti su Facebook e WordPress

Ora che sapete come aggiungere i metadati di Facebook Open Graph, potreste voler vedere altre guide su come utilizzare Facebook in WordPress:

Speriamo che questo articolo vi abbia aiutato ad aggiungere i metadati di Facebook Open Graph in WordPress. Potreste anche voler consultare la nostra guida su come gestire un’offerta o un concorso in WordPress o la nostra scelta dei migliori plugin per Facebook per far crescere il vostro blog.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

222 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ikix says

    Hello, I’ve tried everything i could an i can’t display thumbnail image when i post my blog url on facebook, i already add the code as you said, i download tons of plugings and there is no image in facebook! can you help me please? pleeease!

  3. Jason C. says

    what about just for a single image to be added to the thumbnail options in Facebook? I’ve noticed it picks up my featured image no problem, but doesn’t pick up the others in the post. Is there a way to manually add them with some quick code?

  4. WPBeginner Staff says

    Sorry the plugin is no longer available. We have updated the article, with new information. Hope this will help you add Facebook Open Graph Meta Data into your WordPress. site.

  5. Musadiq says

    Hi,

    How can I include a facebook in the code above? So it can directly publish an article to our profile timeline and also to our facebook page. Thank you

  6. Loes Liemburg says

    Hi, I installed this plug-in, but can’t see the OG-options in my settings menu. I’ve refreshed and waited, but still nothing. What has gone wrong?

  7. Manuel Gomez says

    This line means that the image will use the medium size?

    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );

    If i replace for “big” will use the big image? i would like to see the link post with the new format in facebook, because i can get more clics.

    Thanks!

    • M says

      Unfortunately this did not work for me, I can’t even see it being output in the WP head source code. I’m using the code method as I don’t want to add any plugins to the site.

      I’ve checked the htaccess file and that is not causing any issues since it’s blank except for the perma link declaration.

      Its also not a caching plugin either since I dont have one in place. Any ideas?

      • M says

        Actually sorry this did work, but unfortunately using the debugger tool it still seems that posting a link on my timeline still does not show the og:image.

        Even if it’s there in the json. Its really bizarre. The debugger shows the post but without any image in the share preview. Any ideas anyone?

  8. Attila says

    Hello Syed,
    I have use many plugins to extract my graph meta info since I’ve started to use WordPress and Facebook and I can say that “Facebook Open Graph Meta for WordPress” is the most simple yet professional plugin so far.

    I have a minor issue tough…when debugging my posts link with the the Facebook debugger, my Raw Open Graph Document Information does not show up properly. I have special characters included as my content is in Hungarian language.

    Here is an example:
    Meta Tag:

    I would appreciate if someone could tell me how to fix this.

    Thanks in advance and keep up the good work.

    Best Regards

  9. ally says

    I’ve been using this code for a long time but recently there’s been problems, it doesn’t always pull the image. I used the linter and found this errror:

    Inferred Property The ‘og:description’ property should be explicitly provided, even if a value can be inferred from other tags.

    So I added the description tag and that seems to have resolved the image issue but now it no longer displays the article content.

    Any idea’s how to resolve this? I just need to show the first few lines of content.

    Thanks

  10. Theo says

    Hi there,

    I was just wondering whether it is possible to have a different “og:type” for a post and a page. As it stands (well from what I understand) is that for everything in WordPress, this sets the “og:type” to article.

    What if I want to set “og:type” of page to say “website” and for a post “article”?

    Any suggestions or help much appreciated :)

    Thanks

    • wpbeginner says

      @seitanist Yes the reason why global $post is added because this code is being added outside the Loop in the section of the page. In order to pull the right information, we must call global $post which makes all those tags work.

  11. Cno says

    Hello, everything worked! When i put the link of my specific blog post on my facebook wall, I have the right thumbnail, description and site name. But the post on facebook also automatically shows the complete url of my site (right under the blog title). Instead I want it to show the permalink of the specific blog post – not the url of my site. This way i can integrate the ‘likes’ for that particular post in wordpress. Please! Anyone?

  12. StephanePerez says

    Hi, i tried to insall the plugin but can’t activate it because of a fatal error : Cannot redeclare add_opengraph_doctype()…/fbogmeta.php on line 24

    What i’m supposed to do?

    Thanks!

  13. techhogger says

    Hi pasted this codes as per the instruction on my blog techhogger.com but still issue does not seem to resolve. I can see my adsense codes in the description area. Kindly help.

      • wpbeginner says

        @waqaslone@techhogger For the description to appear, you have to use the excerpts. Alternatively, you can use Otto’s Simple Facebook Connect plugin and just turn the Base on. That would take care of everything for you.

        • techhogger says

          @wpbeginner@waqaslone@techhogger

          I did everything. Even tried the plugin you said. Just try to share any post from my blog and you will know what exactly is happening. To some extend I was able to remove codes appearing from the description section. But now I can’t see description and thumbails of the post while sharing it on fb. Will be thankful if I get your help.

        • wpbeginner says

          @techhogger@waqaslone We are using the method shared on this page on our own website. Everything works. We are using SFC on List25 and it works perfectly fine. Not sure why you are having these issues. SFC has a very smart way to parse through your content and pull out description. So I know for a fact that it pulls out description. It also pulls out all images. This most likely means that there is another plugin that is interfering on your site.Do you have a WP plugin to add the like box or the like button? or any other FB plugin?

        • techhogger says

          @wpbeginner@waqaslone I tried to share again after your last reply. And the same happens. I can see only post title with description as my blog’s description instead of post description and no thumbnail. I am using Digg Digg plugin for social sharing .

        • wpbeginner says

          @techhogger@waqaslone Please turn on Otto’s Simple Facebook Connect plugin. Remove the code that you have added in your functions.php …

        • techhogger says

          @wpbeginner@waqaslone I think its working now. I downloaded and configured the plugin again. And now it seems to be working. Can you have a look and let me know if everything is fine now.

  14. ChristopherJosephDowney says

    I am used to putting meta tags in the HTML on Blogger. Switching to WordPress has been a headache in this aspect, as I have no HTML to edit and am not used to CSS. This plug-in is a dream, but it doesn’t seem to be working correctly. My question is this: It appears I have 3 different ID’s: My facebook profile, my facebook fan page (the one my blog links to) and my OG debugger ID that appears on the developer debugger page; which ID do I need to use for the plug-in? No matter which one I put in the plug-in when I click “debug” the thumbnail does not update and is always one of the advertisement’s gif’s. Can I have more than one default thumbnail like I would using megatags in HTML?

  15. RobKara says

    When a user hits my wordpress page “object” then how do i get the facebook userid if its a facebook user viewing the page? Does facebook send a signed_request or facebook userid via the querystring?

    • wpbeginner says

      @RobKara This question should be asked in the Open Graph forum because it is beyond the scope of this article.

  16. MetalPhil says

    So I installed this stuff on my website (AngryMetalGuy.com) and it doesn’t work. I have *no* clue why. I am beyond frustrated and super confused. If you could please, please, please, please, pleeeease help me that would be awesome.

  17. lizbizz says

    This solved my problem for the Share on Facebook button, but now when I try to share a post from my site to Facebook using Hootsuite’s Hootlet, the description text box is empty. It shows the correct thumbnail and URL but no article preview text. It worked before and still works for other sites, so I think it happened when I installed the plugin…help?

  18. wpbeginner says

    @SaijoGeorge It will only output your post’s defined excerpt. If you don’t specify an excerpt, then nothing will be displayed.

  19. SaijoGeorge says

    Great plugin .. the only issue I seem to be having is that the meta property=”og:description” spits out some random data :( . Thr url for a sample post is 1800pocketpc.com/watch-out-for-windows-phone-7/22453/ similar issue on another blog bestwp7games.com/crazy-horses-match-maker-a-path-drawing-game.html ( here og:description comes out to be blank ) I am using thesis variations on both of those sites .. was wondering if any of you guys have come across this issue

    It’s also worth noting that meta description tag on those pages seems to ouput the right data

  20. CarlosDeGuzman says

    Hi wpbeginner! I installed the plugin on my site, ww w.swimbikerun.ph and it’s not working. I’m still getting these errors on the linter. Also no thumbnails are showing when you share a post on fb. Hope you can help :)

    Also its not showing the description

    Warning

    Required Property Missingog:title is required

    Required Property Missingog:type is required

    Required Property Missingog:url is required

    Required Property Missingog:image is required

  21. arabsciences says

    @Tia Peterson@wpbeginner

    I use All in one seo plugin and could not pull the description to show in url linter

  22. arabsciences says

    @Tia Peterson@wpbeginner

    I found a fix for that which shows first 300 characters of the post.

    just change og:description to :

    <meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” />

  23. ClyoBeck says

    Okay, I’ve gone back to the original theme files and uploaded the original functions.php file. No go. Still a blank screen. I’m thinking up upgrading the theme to see if that will help. I’m wondering if the code I put in the functions.php file, somehow, changed something else. Is that possible?

  24. ClyoBeck says

    Hi guys,

    I should have just downloaded the plug-in. Instead I copied and pasted the code above into my functions.php file and now my blog has disappeared.

    I went into my server and, having made copies of the php file in notepad, uploaded the old file. Still no luck.

    Looks like I’m going to have to hire a programmer to fix this.

    Any advice?

  25. Livefyre says

    @wpbeginner Thanks. I don’t think I got the update, though. Should I just download the plugin again from the WP plugin repository and re-install?

  26. wpbeginner says

    @Tia Peterson Just uploaded the fix for this and another issue. It should be live within 15 minutes or sooner (whenever the SVN updates go through).

  27. wpbeginner says

    @SteveJoseph@joshuatj Also with the linter (not sure exactly what the number is) but if your post has that many likes, then it won’t reset the description / title and such… If I am correct, then that number is not very high…

  28. SteveJoseph says

    @wpbeginner@joshuatj Thanks for the response wpbeginner. I tried your plugin within the last 3 days so was fairly certain it was the latest version but that didn’t seem to work for me. I’m going to go with your suggestion that it will fix itself but the current solution is not the most ideal. It’s pulling the description from my blog “intro” section which is helpful in telling the audience about me but does very little to support why they should click on the article or shared item. Thankfully it does show the correct image and post headline just not the description from the post itself.

    Since Facebook hyped open graph so much you’d like to have imagined they would have made sure this was working and buttoned up pretty solid. Thanks again.

  29. Tia Peterson says

    Hi! For some reason, the plugin doesn’t pull a description. At first, I figured out that it was pulling the description from the ‘excerpt’ field, so I started using that field every time. Now, it doesn’t even pull from that. Not sure why. I am using the latest version of the plugin, StudioPress News Child Theme for Genesis, and WordPress version 3.1.

    Here is our most recent post to show you that when you paste this URL into Facebook, only the image and title show up. In the source code, the description field for the open graph plugin is completely empty. http://www.bizchickblogs.com/2011/08/what-do-you-know-about-naturopathy.html

    Thanks for your help!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.