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

Så här add to Facebook Open Graph Meta Data i WordPress Themes

Vill du se till att innehållet på din WordPress-webbplats ser bra ut på Facebook? Då måste du lägga till Facebook Open Graph-metadata i ditt WordPress-tema.

Open Graph-metadata ger Facebook och andra sociala medier information om dina WordPress-inlägg och sidor, och låter dig styra hur de ser ut när någon delar dem.

I den här artikeln visar vi dig hur du enkelt lägger till Facebook Open Graph-metadata i WordPress-teman. Vi kommer att dela med oss av tre olika metoder, inklusive All in One SEO-metoden som vi använder på WPBeginner, så att du kan välja den som fungerar bäst för din WordPress-webbplats.

How to Add Facebook Open Graph Meta Data in WordPress Themes

Du kan använda snabblänkarna nedan för att hoppa direkt till den metod du är mest intresserad av:

Metod 1: Lägga till metadata för Facebook Open Graph med AIOSEO

All in One SEO är ett populärt WordPress SEO plugin som används av över 3 miljoner websites. Det allow you to easily optimize your website for search engines as well as social platforms like Facebook and Twitter.

Först måste du installera och aktivera det gratis pluginet All in One SEO. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

När du är aktiverad måste du besöka All in One SEO ” Social Networks page. Här kan du enter din Facebook-sida URL och alla dina andra sociala nätverk.

The AIOSEO SEO plugin for WordPress

Därefter klickar du på Facebook tabs högst upp på sidan, och du kommer att se att Open Graph Markup är aktiverad som standard.

You can click the ”Upload or Select Image” button to choose a standard Facebook OG image if an article doesn’t have an Open Graph image.

Set default Open Graph image

Om du rullar ner kan du customize namnet på din site, description och fler inställningar. Glöm inte att clicka på den blå knappen ”Save Changes” när du är klar.

Nu när du har ställt in Open Graph-metataggar för hela siten är nästa steg att add to Open Graph-metadata för enskilda posts och pages.

Som standard kommer AIOSEO att använda din posttitel och beskrivning för Open Graph-titeln och beskrivningen. Du kan också manuellt ställa in inläggsminiatyren för Facebook för varje page och post.

Bara edit posten eller page och rulla ner till ”AIOSEO Settings” section under editor. Härifrån byter du till tabben Social och du kommer att se en preview av din thumbnail.

AIOSEO Facebook preview

Du kan ställa in social media image här, samt titel och description.

Rulla bara ner till fältet ”Image Source”. Du kan välja att använda den featured image, uploada en custom image, eller andra alternativ.

Choose which WordPress image to use as your Facebook thumbnail

Metod 2: Ställ in Facebook Open Graph-metadata med hjälp av Yoast SEO

Yoast SEO är ett annat plugin för sökmotorsoptimering i WordPress som du kan använda för att add to Facebook Open Graph metadata till alla WordPress webbplatser.

Det första du behöver göra är att installera och aktivera sökmotorsoptimeringens plugin Yoast. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

När Facebook Open Graph har aktiverats är data aktiverade som standard.

Du kan kontrollera detta genom att gå till Yoast sökmotorsoptimering ” Settings och rulla ner till Social Sharing section. Nu kan du se till att Open Graph-datafunktionen är aktiverad.

Enable Facebook Open Graph

du måste gå till sökmotorsoptimering ” Social och välj alternativet ”Aktiverad” under ”Lägg till Open Graph meta data”.

You can save your settings or continue and configure other Facebook social options.

Du kan ange en Facebook app ID:n om du använder en för din Facebook page och insights. You can also change your homepage Open Graph meta title, description, and image.

Slutligen kan du ange en standardbild som ska användas när ingen image har angetts för ett post eller en page.

Premium-versionen av Yoast sökmotorsoptimering allow you också att ställa in Open Graph metadata för enskilda posts och pages. Bara edit ett post eller page och rulla ner till ”Yoast SEO” section under editorn.

Set open graph meta data for post and pages using Yoast

Härifrån kan du ställa in en Facebook inläggsminiatyr för viss post eller page. Om du inte anger en rubrik eller beskrivning för inlägget, kommer pluginet att använda din sökmotorsoptimering meta titel och beskrivning.

Du kan nu save din post eller page, och plugin kommer att lagra din Facebook Open Graph metadata.

Metod 3: Lägga till Facebook Open Graph Metadata med hjälp av kod

Den här metoden kräver vanligtvis att du kopierar och klistrar in kod i ditt temas functions.php-fil. Vi rekommenderar dock att du lägger till koden med hjälp av plugin-programmet WPCode istället, vilket gör det enklare och säkrare att lägga till anpassad kod i WordPress.

WPCode levereras också med ett bibliotek med färdiga kodavsnitt, inklusive ett för att lägga till grundläggande Open Graph-taggar, så det tar bara ett par klick.

Installera och aktivera först det gratis tillägget WPCode. För mer detaljer, vänligen se vår guide om hur du installerar ett plugin för WordPress.

Efter aktivering kan du gå till Code Snippets ” + Add Snippet från din WordPress instrumentpanel.

Sök efter utdraget ”Lägg till grundläggande Open Graph-taggar” från biblioteket. När du har hittat det, håll muspekaren över det och klicka på knappen ”Använd snippet”.

Select the 'Add basic Open Graph Tags' snippet from the library

Sedan kommer WPCode automatiskt att lägga till koden åt dig och ställa in sidhuvudet som plats för infogningsmetoden.

WPCode automatically adds the code for Open Graph data

Efter det är allt du behöver göra att växla snippet till ”Aktiv” och klicka på knappen ”Uppdatera”. Ditt tema kommer nu att börja visa Facebook Open Graph-metadata i WordPress-headern.

Activate and update snippet

Om du är en avancerad användare kan du fortfarande kopiera och klistra in koden nedan i ditt temas functions.php-fil.

Eftersom detta kräver att du direkt redigerar dina temafiler, se till att du säkerhetskopierar dina temafiler innan du gör några ändringar.

//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 );

Kom ihåg att lägga till namnet på din site på rad 17, där det står ”Your Site Name Goes Here”. Efter det bör du ändra standard URL för image på rad 19 med en av dina egna URL:er för image.

Vi rekommenderar att du lägger en image med din logga där, så om din post ej har en inläggsminiatyr, så drar den din sites logga.

Du måste också lägga till ditt eget ID:n för Facebook-appen på rad 13. Om du inte har en Facebook app kan du ta bort rad 13 från koden.

Expertguider om Facebook och WordPress

Nu när du vet hur du addar Facebook Open Graph-metadata kanske du gillar att se några andra guider relaterade till hur du kan använda Facebook i WordPress:

Vi hoppas att den här artikeln hjälpte dig att add to Facebook Open Graph-metadata i WordPress. Du kanske också vill se vår guide om hur man runar en giveaway eller tävling i WordPress eller våra expertval för de bästa Facebook-tilläggen för att få din blogg att växa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

223 kommentarerLämna ett svar

  1. Syed Balkhi

    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. Dennis Muthomi

    It is good that AIOSEO can set a default Open Graph image for posts without featured images.
    I have some older blog posts without featured images set, so it’s helpful to that I can specify my full logo(with a picture of me edited) as a Open Graph image.
    This will makes my posts get shared properly on social media even if I haven’t gotten around to adding an featured image

  3. Daniel

    This is indeed helpful but SEO Yoast’s interface doesn’t look like this anymore. This needs updating.

    • WPBeginner Support

      Thank you for letting us know that their interface has been updated, we will look to update it when we update the article :)

      Administratör

  4. Jiří Vaněk

    Thanks for the tutorial. I’ve been adding Open Graph in AIO SEO and I’m still surprised that AIO SEO tells me there isn’t one. I spent about half an hour on this before I found out that I had to click refresh again in the SEO evaluation so that the plugin would download the new WordPress settings and do a new SEO analysis. Such a simple thing and it took me so long.

  5. Harry Goldhagen

    Hello, thanks for the code snippet, I look forward to trying it. One question, will it then allow FB to pick up the featured image (is that the ”thumbnail”?) and excerpt for each blog post, or will it just use the sitewide logo image designated in line 19? I’ve tried Blog2Social, but the posts lacked the featured image and excerpt and did not look good. Thanks!

    • WPBeginner Support

      The code snippet should set your featured image to the featured image of the post.

      Administratör

  6. Kiss Attila

    Hi,

    Awesome code. BUT, why it’s not changes og:url and og:image. I tried with a post with no image set as default. But checking it on fb debugger, it picks up my logo from the footer instead of getting the image I added in the og:image part.
    Title is working it changed from the origin and I pasted og:description too. All the most important metas but image and url.
    Why is that?

    Thanks,
    Atila

    • WPBeginner Support

      Please ensure you’ve cleared any caching on your WordPress site as that is the most common reason it would not update to match the code.

      Administratör

  7. rehman

    hi how can i modify the code to add OG tags for custom post types i tried by changing this line code if ( !is_singular()) to if ( is_singluar( array( ’post’, ’publications’) ) ) but my website throw fatal error. can anyone please help thank you

    • WPBeginner Support

      You should not need to modify the code to work with custom post types and it should work on them :)

      Administratör

  8. gabriele biagini

    Hello, i tried all the solution suggested still i miss some parameter to the schema:
    A required field is missing: id
    A required field is missing: price
    A required field is missing: availability

    Is there any solution via plugin or updating the function.php code?

    • WPBeginner Support

      That would be markup for a product you are selling on your site and All in One SEO does have the option to add that markup to your products.

      Administratör

  9. Richard S.

    Wow, this really worked for me, you’re awesome!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  10. evelien

    You did it again – looking for a solution, and you deliver ! You rule :)

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  11. Eddie

    Does this also work for sms text message url previews or just Facebook?

    • WPBeginner Support

      While not specifically for SMS messages, the markup helps with that as well.

      Administratör

  12. Indranil Paul

    If I use the Yoast SEO settings, will it take times for showing the perfect result in facebook share? Or will it start working within minutes?

    • WPBeginner Support

      That would depend on your site’s caching and any caching on Facebook for how long it takes

      Administratör

      • Indranil Paul

        I’m facing this problem in all social sharing sites.

        • WPBeginner Support

          If it is not showing what you set on every social site, you would want to reach out to Yoast’s support and let them know to ensure there isn’t a problem with the plugin.

  13. Udaya Bhaskar

    Hello
    When I share my post in facebook it’s how my post featured image .
    But when I share in whatsapp it’s not show my featured image with link please help me..

    • WPBeginner Support

      If you’re using Yoast to add the meta data, we would first recommend reaching out to Yoast to ensure that there aren’t any known issues.

      Administratör

  14. Colin

    My title looks like this in the preview:

    %%title%% %%page%% %%sep%% %%sitename%%

    How do I fix this?

  15. Pramod Singh

    Hello please help me
    Facebook has blocked my site, now in the Facebook developer app, I can not even link my site because it has blocked the Facebook

    Please tell me how to unblock your website with Facebook

  16. Sadie

    Hello

    Please can you advise when using a child theme – do i need to copy the parent theme functions.php and then add the above script to a newly created functions.php and upload it to the child theme folder OR do I just add the script to the parent theme functions.php

    Thanks for reading Sadie

  17. Max

    How would I remove the ”By …” from appearing on the card?

    Currently we have an issue where it displays as: site-name | By site-name

    We just want the first website name to appear and not twice.

  18. Laura

    I’m using this on a self-hosted website. What do I do about the USER ID that I’m supposed to replace since the site is not on wordpress.com?

  19. Suraj

    Hello,
    I have a big problem!!
    When I share my post in facebook it’s how my post featured image .
    But when I share in whatsapp it’s not show my featured image with link please help me..

  20. Malik Adil

    All Good, But still one problem, How to add Facebook ID..After using this code, following Facebook ID message appears.

    The ’fb:app_id’ property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

  21. Eric Hepperle

    I enjoyed this article, but in January 2018 this *manual code* option doesn’t appear to work completely. For instance, though I have verified that the default image property works, when I create a new post, I don’t see ANYWHERE a field where one can begin to edit ”open graph (og)” metadata.

    Suggestions? Thanks!

  22. Mahesh Yadav

    Thanks for such great information. But I have one question.

    How helpful it is to add facebook graph meta data in our site..?

    And if it is very much helpful, for what purpose, it is helpful..?

  23. elsa

    This plugin gave me a white screen of death, obviously a conflict with something or memory exceeded

  24. Jin Miller

    What if I am wanting to change the thumbnail image not for the whole site, but just a page off my wordpress site : For example I’m trying to share an event page from my site and would like a unique, relevant thumbnail. Help?

    • Nikki

      Hi Jin, Did you ever get an answer to your question? I’m looking for the same information.
      Thank yoU!

  25. Vic

    Hey, I wanted to include Worpress SEO by Yoast but Im not sure if latest version is compatible with my version of Worpress (4.2.2) do you know if is safe to activate?

    Thanks guys

  26. Martin

    Does my Facebook profile have to be public in order for my Facebook User ID to be good to use here?

  27. Martin

    I’ve added the code for manually adding this to my theme. However, things aren’t working. Does my profile have to be public in order for my Facebook user id to be accessible?

  28. Jordan Carter

    Is this still valid for today? I tried it and works, but I noticed in the code the following: ”xmlns:fb=”http://www.facebook.com/2008/fbml”’;

    Isn’t 2008 a little old? Is there a newer protocol we should be using today?

  29. Wagner Lungov

    Hello, thanks for posting. I remained with one doubt. I understood that the in each post is dynamically constructed by the functions you explained so well. What I can’t figure out is where the variables called by that function are defined and stored. When you put property=”og:type” content=”article”/, OK you are defining with a fixed string. But when you use: property=”og:title” content=”’ . get_the_title() . ’”, where is the function get_the_title() going to get it? How can I define before hand those values for each post in a way that the code will pick the right meta data for each parameter?

    • Jordan Carter

      get_the_title() will get your post title. If you want to use something else, you could always get the value from a meta box. With the advanced custom fields plugin, it would be something like get_field(”my_field”), or with a regular WordPress custom meta field it would be get_post_meta($post->ID, ”my_field”, true). See get_post_meta()

  30. Jolanda

    Nicely explained! I try to figure out where I can add the code in checking the size of the featured image, since FB needs a size with a minimum of 200px for both width and height, otherwise it will use another image from the post.
    Any help would be great!

  31. Mohsin Rafique

    Nicely explained & works like a charm.

  32. Devyn

    I’ve been trying to use Yoast to enable my meta data so I can use Rich Pins on Pinterest. I’ve done what this tutorial says, but Pinterest still won’t recognize my post. Is there another plugin I could try?

  33. Michelle

    I added the Yoast plugin and there is no social option. Please help me. I am at my wits end with this issue.

    • Brent Watkins

      Same problem here.

    • Glenford

      Once you have Yoast installed the look under SEO » Dashboard » Titles & Metas and under that is Social.
      in Social you should Enable the ”Add Open Graph meta data” in the Facebook tab.

      • Xavier

        This option just isn’t there with v4.6 of the plugin.
        Under SEO >> Dashboard, the tabs I have are: Dashboard, General, Features, Company info, Webmaster tools and Security. No mention of Titles & Metas or Social.

        Is this because I haven’t set up a Facebook social profile? Surely this shouldn’t be needed just to be able to configure OG stuff!

        • WPBeginner Support

          Hey Xavier,

          First you would need to go to SEO » Features page and then click ’Enable’ under ’Show Advanced Settings Pages’ option. This will display advanced settings pages in Yoast SEO. For more details see our article on how to install and setup Yoast SEO.

  34. joe Barrett

    I added social sharing to the search result template, so each excerpt has a share button BUT the meta data that is shared is messed up and uncontrollable with this, is there a way to make this work better when there are 20 reuslts on the same page with different meta description for each?

  35. giovanna

    Hi can you help me please? I added the code in function and what I have to add in the head please?

  36. benjamin s

    Here’s also a nice improvement to make an exception for the home-page:

    if (is_front_page()){
    echo ”;
    echo ”;
    echo ”;
    }else{
    echo ”;
    echo ”;
    }

  37. benjamin

    I just want to say thanks! … this is very helpful, you the best!

  38. Laura K

    I’ve downloaded the Yoast plugin, and set it up for my home page, but when I enter the website on Facebook it still won’t show the image I’ve specified, or the text snippet I’ve written.
    Also can’t find my Facebook URL using the link you provided, it just gives me an error…
    I tried debug but it says Facebook pages can’t be debugged, and they have no cache.
    Sooooo….nothing has worked so far!

  39. Courtney

    Hi there,

    I have SEO Yoast and I uploaded the new image and its still not working on facebook……???

  40. MassimoDIFA

    Thank you, manually added open graph on header, perfect!! Thank you!!

  41. D

    I just wanted to thank you for this very thorough description on the process of connecting facebook to your wordpress page. I’ve been trying to do for days now following other sites and recommendations. This evening I came across your page from a google search and bam, it worked. Hooray! Thanks a lot.

  42. Amanda Paul

    Thanks for this info. It was really easy to follow. I uploaded the Yoast plugin and followed all the steps and saved but the thumbnail is still just a blank box. does it take some time to flow through? Do I need to log out and back in again to Facebook? or Wordpress?

  43. Mahmud Ayaz

    Hi! When i replace this link with my name http://graph.facebook.com/syedbalkhi got this error

    {
    ”error”: {
    ”message”: ”(#803) Cannot query users by their username (mahm0od)”,
    ”type”: ”OAuthException”,
    ”code”: 803
    }
    }

    Any Solution?

  44. Daniele Besana

    Hi guys, I’m having problems with og:description, basically all the formatting is missing on the shared page. New lines are not respected, how can I control that?
    Thanks!

    • JC

      I have the same problem, also getting og:description missing

      • amelliya

        me too – any help?

    • AC

      I have the same problem, and I cannot use FB debugger because i work in localhost…

    • Marc

      this worked for me:

      $metadesc = strip_tags(get_post_field(’post_content’, $post->ID));
      echo ”;

      (my posts had a very short content)

    • Kim McCann

      The following works by pulling from your excerpt. Just add under og:title

    • BK

      Thank you for taking the time to reply. Will give it a shot!

  45. BK

    Thanks for this. I want to share link directly from my site using the social button. However, when I click on for example the Facebook share button, the image and the description is still using a previous information. Although I have updated the image and description using Yoast SEO and specifically customise the image and description for that post. May I know what did I do wrongly?

  46. Naren Patel

    Thank you very much, I really want this information.

  47. Robin

    Thank you. I can’t tell you how long I have been trying to figure this out. Easy to do with ZiPLIST for recipes but could not figure it out for Articles.

  48. Maria

    Hi! I have a issue that i don’t know how to solve. When I try to share a link on facebook from my blog, or a particular page this message appera ”page not found” or the link with symbols I don’t understand. I controlled th elinks with object debugger and this is what appear: required property ’og:title’ of type ’string’ was not provided. How can I solve it, please?

  49. Salih Kulangara

    @ Syed Balkhi. —– Just want to ask you this, After all I have got setup all the tags, and got a clean debug test result without any warning, when any one click on the Facebook Like button i used in my web page, it’s not showing up in the Facebook Timeline feed, just showing up in the recent activity section only, why is this, Is there anything else I have to add to get it be shown in the newsfeed directly when the click the LIKE button??????

  50. Anas Khan

    Great tutorial, i want to know is there any tutorial about open graph meta for Google Plus ?

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.