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

Hinzufügen von Facebook Open Graph-Metadaten in WordPress-Themes

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie Facebook Open Graph-Metadaten zu Ihren WordPress-Themes hinzufügen?

Open Graph-Metadaten helfen Facebook und anderen Websites für soziale Medien, Informationen über Ihre WordPress-Beiträge und -Seiten zu erhalten. Außerdem können Sie damit steuern, wie Ihre Inhalte beim Teilen auf Facebook erscheinen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Facebook Open Graph-Metadaten in WordPress-Themes hinzufügen können.

Add Facebook open graph meta data in any WordPress theme

Wir stellen Ihnen drei verschiedene Methoden vor, damit Sie diejenige auswählen können, die für Ihre WordPress-Website am besten geeignet ist:

Methode 1: Hinzufügen von Facebook Open Graph Metadaten mit AIOSEO

All in One SEO ist ein beliebtes WordPress SEO-Plugin, das von über 3 Millionen Websites genutzt wird. Es ermöglicht Ihnen die einfache Optimierung Ihrer Website für Suchmaschinen sowie für soziale Plattformen wie Facebook und Twitter.

Zunächst müssen Sie das kostenlose All in One SEO-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite All in One SEO “ Soziale Netzwerke besuchen. Hier können Sie die URL Ihrer Facebook-Seite und all Ihrer anderen sozialen Netzwerke eingeben.

AIOSEO social network settings

Klicken Sie dann oben auf der Seite auf die Registerkarte Facebook, und Sie werden sehen, dass Open Graph Markup standardmäßig aktiviert ist.

Sie können auf die Schaltfläche „Bild hochladen oder auswählen“ klicken, um ein standardmäßiges Facebook OG-Bild auszuwählen, wenn ein Artikel kein Open Graph-Bild hat.

Set default Open Graph image

Wenn Sie nach unten scrollen, können Sie den Namen Ihrer Website, die Beschreibung und weitere Einstellungen anpassen. Vergessen Sie nicht, auf die blaue Schaltfläche „Änderungen speichern“ zu klicken, wenn Sie fertig sind.

Nachdem Sie nun die Open-Graph-Metatags für die gesamte Website festgelegt haben, können Sie im nächsten Schritt Open-Graph-Metadaten für einzelne Beiträge und Seiten hinzufügen.

AIOSEO verwendet standardmäßig den Titel und die Beschreibung Ihres Beitrags für den Open Graph-Titel und die Beschreibung. Sie können die Facebook-Miniaturansicht auch manuell für jede Seite und jeden Beitrag festlegen.

Bearbeiten Sie einfach den Beitrag oder die Seite und scrollen Sie nach unten zum Abschnitt „AIOSEO-Einstellungen“ unterhalb des Editors. Wechseln Sie von hier aus zur Registerkarte „Social“ und Sie sehen eine Vorschau Ihres Thumbnails.

AIOSEO Facebook preview

Hier können Sie das Bild für die sozialen Medien sowie den Titel und die Beschreibung festlegen.

Blättern Sie einfach nach unten zum Feld „Bildquelle“. Sie können das angezeigte Bild verwenden, ein eigenes Bild hochladen oder andere Optionen wählen.

Choose which WordPress image to use as your Facebook thumbnail

Methode 2: Facebook Open Graph Metadaten mit Yoast SEO einstellen

Yoast SEO ist ein weiteres WordPress SEO-Plugin, mit dem Sie Facebook Open Graph-Metadaten zu jeder WordPress-Website hinzufügen können.

Als Erstes müssen Sie das Yoast SEO-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie zu SEO “ Social gehen und die Option „Aktiviert“ unter „Open Graph-Metadaten hinzufügen“ auswählen.

Enable Facebook Open Graph

Sie können Ihre Einstellungen speichern oder fortfahren und andere soziale Facebook-Optionen konfigurieren.

Sie können eine Facebook-App-ID angeben, wenn Sie eine für Ihre Facebook-Seite und Insights verwenden. Sie können auch den Open Graph Meta-Titel, die Beschreibung und das Bild Ihrer Homepage ändern.

Schließlich können Sie ein Standardbild festlegen, das verwendet wird, wenn für einen Beitrag oder eine Seite kein Bild festgelegt wurde.

Mit Yoast SEO können Sie auch Open Graph-Metadaten für einzelne Beiträge und Seiten festlegen. Bearbeiten Sie einfach einen Beitrag oder eine Seite und scrollen Sie nach unten zum Abschnitt „Yoast SEO“ unterhalb des Editors.

Set open graph meta data for post and pages

Von hier aus können Sie eine Facebook-Miniaturansicht für diesen bestimmten Beitrag oder diese Seite festlegen. Wenn Sie keinen Beitragstitel oder eine Beschreibung festlegen, verwendet das Plugin Ihren SEO-Metatitel und Ihre Beschreibung.

Sie können nun Ihren Beitrag oder Ihre Seite speichern, und das Plugin speichert Ihre Facebook Open Graph-Metadaten.

Methode 3: Hinzufügen von Facebook Open Graph-Metadaten mit Code

Bei dieser Methode müssen Sie Ihre Themedateien bearbeiten. Stellen Sie daher sicher, dass Sie Ihre Themedateien sichern, bevor Sie Änderungen vornehmen.

Kopieren Sie diesen Code und fügen Sie ihn in die Datei functions.php Ihres Themes ein oder fügen Sie den Code mit dem WPCode-Plugin ein (empfohlen).

Installieren und aktivieren Sie zunächst das kostenlose WPCode-Plugin. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie in Ihrem WordPress-Dashboard zu Code Snippets “ + Snippet hinzufügen gehen. Fahren Sie mit dem Mauszeiger über das erste Snippet mit der Bezeichnung „Add Your Custom Code (New Snippet)“ und klicken Sie auf die Schaltfläche „Use snippet“.

Adding Your Custom Code in WPCode

Dadurch wird ein neues Snippet erstellt, in das Sie einen Titel eingeben und den Codetyp „PHP Snippet“ auswählen müssen. Danach müssen Sie den folgenden Code in den Abschnitt „Codevorschau“ einfügen:

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

Vergessen Sie nicht, den Namen Ihrer Website in Zeile 17 einzufügen, wo „Your Site Name Goes Here“ steht. Danach sollten Sie die Standard-URL des Bildes in Zeile 19 durch eine Ihrer eigenen Bild-URLs ersetzen.

Wir empfehlen, dort ein Bild mit Ihrem Logo zu platzieren. Wenn Ihr Beitrag also kein Thumbnail hat, wird das Logo Ihrer Website verwendet.

Sie müssen auch Ihre eigene Facebook-App-ID in Zeile 13 hinzufügen. Wenn Sie keine Facebook-App haben, können Sie Zeile 13 aus dem Code entfernen.

The New Code Snippet in WPCode

Sobald Sie die Aktualisierung des Codes abgeschlossen haben, müssen Sie das Snippet auf „Aktiv“ schalten und auf die Schaltfläche „Snippet speichern“ klicken. Ihr Theme zeigt nun Facebook Open Graph-Metadaten in der WordPress-Kopfzeile an.

Expertenleitfäden zu Facebook und WordPress

Da Sie nun wissen, wie Sie Facebook Open Graph-Metadaten hinzufügen können, möchten Sie vielleicht noch einige andere Anleitungen zur Verwendung von Facebook in WordPress sehen:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Facebook Open Graph-Metadaten in WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Durchführung von Werbegeschenken oder Wettbewerben in WordPress oder für unsere Expertenauswahl der besten Facebook-Plugins für die Erweiterung Ihres Blogs.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

222 KommentareEine Antwort hinterlassen

  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. wpbeginner says

    @SteveJoseph@joshuatj Josh not sure when you last checked the plugin, but our plugin has full support for the og:description. It has been there since version 0.1.2. Here is the changelog:http://wordpress.org/extend/plugins/facebook-open-graph-meta-in-wordpress/changelog/In version 0.1.3, we improved the description code to actually look for Yoast’s plugin’s description code, and if that doesn’t exist then it pulls the post excerpt if that exists.

  3. SteveJoseph says

    @joshuatj Good point and thanks again for the links and your help. It’s much appreciated. Between Linter and the Yoast plugin I should be ok. All the best.

  4. SteveJoseph says

    @joshuatj I tried linter before but that only fixed the 1st post. The rest still display the old copy. I just realized however that if I lint each unique page then it shows the correct information which is what you’ve posted above. Annoying but I guess this is what I’ll need to use for now or check out the link you provided and see if that plugin works for me. Much thanks mate! Cheers.

  5. joshuatj says

    @SteveJoseph Oops, you’re right, I did make a typo mistake there. I meant „Yoast“. http://yoast.com/wordpress/seo/But in actual fact, Yoast does more than just solving the og-description issue, so it might not be what you want. I just used URL Linter (http://developers.facebook.com/tools/lint/) for your site. It seem to be displaying this description „Future Tomorrow is the collective online moniker, portfolio site and blog of Steve Joseph. With over 14yrs creative experience across several disciplines and knowledge that far extends beyond „just being a creative“, there is much to share but still more to learn.“. Is that what you want in the description field? Try „sharing on Facebook“ again?

  6. SteveJoseph says

    @joshuatj Thanks for the response joshuatj. Unfortunately a search of „Yeost Facebook Plugin“ or „Yeost Plugin“ didn’t return any helpful results in guiding me to this possible solution. Do you have a direct link?

    I also tried searching „Yoast“ thinking there may have been a typo in your response and that still didn’t lead me to a solution. Any further help would be greatly appreciated. Thanks for your time.

  7. SteveJoseph says

    Hi,

    I tried both your plug-in and code method and neither worked. When clicking „share this on Facebook“ from my blog, my title is correct, URL is correct, image is correct but the description is old and incorrect. Is there an update to the code or plug-in where the „description“ is properly displayed?Thanks in advance.

    Cheers,

    Steve

  8. joshuatj says

    The plugin is awesome! Thanks wpbeginner! However it’ll be awesome if we can also add the „description“ content for the <meta property=“og:description“ content=““> meta tag

  9. ExpandSM says

    Thanks for this plugin! I have a blog that is also a Buddypress site and I can’t get it to pull the post excerpt. Any suggestions?

  10. jaffa says

    @wpbeginner Thank you for your reply.

    I realise I’m turning into the biggest pain on this thread and this will be my last question:

    I use the catch that image and tim thumb function on my site and was wondering how or if I could implement that into this function to replace the code that looks for a featured image?

    Sometimes I don’t use the featured image so it would be handy if the script could just look for the first image in the post and if that is not there then use the default.

    Thanks in advance :)

  11. dbrabyn says

    @wpbeginner @dbrabyn Fair enough. I’ve just tried it and for a post with no featured image but a post image, FB Lint tells me „The image url is not compliant with RFC2396 and will not be displayed correctly.“ The absence of a default image is a problem too. Thanks anyway.

  12. wpbeginner says

    @jaffa If you don’t have these meta tags, and the user LIKES a post using the like button on your blog (FB will pick a random image for them)….Now if they put the link on their Facebook profile (then they will get option)… Most of the time folks click on the like button then actually copying the link and pasting on their facebook status box. This plugin actually fixes that issue.

  13. wpbeginner says

    @dbrabyn The plugin that we have in the repository actually does that. It looks for the featured image and if no featured image is found it falls back to the first image of the post… The snippet in this post doesn’t do that. Just use the plugin.

  14. jaffa says

    Finally got this working with the help of wpbeginner!

    I have a question though, when I share a page that doesn’t have any images in the content the default image is used. Is it possible to specify more than one default image?

    Also, I noticed if I share the homepage of the website, I have a choice of all the images on the page to pick from but when sharing a normal page I am forced to use the default only. Is there a way to see all images on the page?

    Thanks

  15. dbrabyn says

    Any way to make this function grab the first image from the post, then the featured image, then the default image? Just like get_the_image does.

  16. wpbeginner says

    @jaffa If you send us an email using the contact form, we can definitely look into it and help you get this working.

  17. jaffa says

    @wpbeginner It is not that I am not satisfied with the article here, it’s just I can’t seem to get it working. I always visit this site as it has helped me greatly and allowed me to learn a lot about wp.

    I couldn’t get the opengraph to work and then started looking elsewhere online which lead me to other articles that just confused me really. I then came back here to try again. Maybe I have done something incorrect or there is something not right in my theme that is preventing it from working. That’s what I meant by ‚I’ll figure it out‘

    I appreciate your replies and help.

    Thank you.

  18. wpbeginner says

    @jaffa You don’t need an app if you don’t want it. You can still retrieve analytics for your like buttons through your personal account. There is nothing to figure out because the article explains everything, but if you still are not satisfied then sure do further research.

  19. jaffa says

    @wpbeginner ok, thanks!

    Other articles suggested an app needed to be created which is why I was confused. Nevermind, I’ll figure it out.

    :)

  20. wpbeginner says

    @jaffa You DO NOT have to create a facebook application for this tutorial. It will work regardless. We have the app on our page for other reasons that does not relate to the tutorial mentioned in this article….

  21. jaffa says

    @wpbeginner thanks for your reply. I was getting very confused :s

    Do I need to create a facebook application for this open graph to work correctly? I just checked the source code for this page and you have an ‚fb:app_id‘ field which isn’t included in the code above?

    I apologise for all the questions, if anyone can direct me to some documentation about open graph I will happily try to find some answers and come back and share any info I may find.

    Thanks

    :)

  22. wpbeginner says

    @jbjb3077 Look at our article about showing custom fields anywhere on the site. Custom Fields 101 article covers that on our site :)

  23. jaffa says

    this may seem like a very silly question but in order for this to work do you have to create a facebook application first? I just have a regular facebook page and nothing else and I have tried this code many times but still cannot get it to work. When I run it through the linter tool I get the error: invalid app ID.

    Is the example of the USER ID above the same as an app ID or not?

  24. mark.bravura says

    Thanks again for your quick response. And that is the heart of my question… the Facebook Open Graph Meta For WordPress plugin is pulling in all of the meta data correctly, except for no excerpt/description data. Hence why I am wondering how to manually tweak it. Any suggestions?

  25. wpbeginner says

    @mark.bravura Your post title is being pulled as the title. Your excerpt is being pulled as the description. Your featured image (thumbnail) is being pulled as the thumbnail. Modify any of those, and you can modify the og data.

  26. mark.bravura says

    Thanks for the quick reply. So is there a reasonably easy way to manually fine tune (access/modify) the OG data?

  27. Liverpoolfcblog says

    Hey there wpbeginner @wpbeginner , the code is working fine. Thanks for that.

    Just have a question. I ran individual articles through facebook’s linter and all appeared fine. However, when I ran my home page through it says this:

    Required Property Missing og:title is required

    Required Property Missing og:type is required

    Required Property Missing og:url is required

    Required Property Missing og:image is required

    I noticed this in the code: if ( !is_singular()) //if it is not a post or a page return;

    Does adding the above four affect how facebook sees my site? For instance, will it categorize as a website and show the Title?

    Cheers.

    • Editorial Staff says

      You can remove the is_singular item and show this on the homepage… Most if not all WordPress blogs are only shared from the single post page. That is also the page where the Like button is prominent.

      Admin

  28. jbjb3077 says

    hello my post images are in custom field (thumb) i had a hack with previous version but now cant figure it out how to add that. please help me. this is the code i have replaced

    if ( get_post_meta($post->ID, ‚thumb‘, true) ) { //the post does have featured image $thumbnail_src = get_post_meta($post->ID, „thumb“, true); echo ‚<meta property=“og:image“ content=“‚ . esc_attr( $thumbnail_src[0] ) . ‚“/>‘; } else{ echo ‚<meta property=“og:image“ content=“mysite image in a path.jpg“/>‘; } echo „n“;

  29. jaffa says

    Thanks Daniel, adding that did help remove the errors I was receiving before but now it’s telling me the title, url, image and type are missing even though they are there.

    It is also showing the wrong image, it doesn’t seem to be picking up the image from the article rather a random image from the page.

    I have no idea why I can’t get this to work, I wanted to avoid using the plugin but maybe that’s the way I need to go.

    :(

    Thanks guys for your help.

  30. jaffa says

    I added the code to my functions file and then followed your article on how to add the Like and Send button and all seemed to be fine but today as my client posted a link on the FB wall to the latest article there was no option to select an image to go with the article.

    I can’t understand what went wrong or how to go about fixing it. I am assuming it is the FB code I added that has caused this as I have made no other changes.

    Any idea’s what could be the problem?

      • jaffa says

        Thank you for your reply.

        I didn’t realise it took that option away. But I still don’t understand why it didn’t display the thumbnail when I have included a thumbnail image. There just wasn’t an image there at all.

        When I view the source I can see a link to the image in the og:image field.

        I wish I could get it to work, might have to try the plugin.

        Just one other thing, I have defined a number of different thumbnail sizes in my theme to use in various places, so instead of it calling the ‚medium‘ sized image do I need to set it so it calls one of my defined thumbnails??

        Sorry for the long and confusing comment, newbie here!

        :-)

        • Elliott the web design guy says

          Facebook will scrape your site every 24hrs or so… so if you’ve made any changes on your site facebook will need to catch up – 24hrs or so later. But, you can force facebook to re-scrape your site by using the linter tool. Before testing the Send button again run anyone of your url’s through http://developers.facebook.com/tools/lint/ to force Facebook to refresh the details, hopefully this should resolve the image issue ;-)

        • jaffa says

          Thanks Elliott, the Linter tool you provided a link to was quite helpful.

          After passing a url through it, the error message I got was:

          fb:admins field contained some invalid ids, I noticed that my page ID is 15 characters long but the one used in the example above is only 10.

          The other message I got was:
          You put App ID in the fb:admins field. It should be in fb:app_id

          Should there be an extra field for app_id in the code above?

          I’m slightly confused now…

        • Daniel Chenery says

          Sorry, I thought the code tag might keep the tags, turns out not. Let me try and post that again
          <meta property=“fb:app_id“ content=“Your_App_ID“/>
          <meta property=“fb:admins“ content=“Your_Profile_ID“/>

    • Editorial Staff says

      We updated the plugin to fix a bug with the default image issue. Now, it is checking if your post has a thumbnail… If it doesn’t, then it picks the first image from your post. We do have plans on bringing the default image feature back soon.

      Admin

  31. Ovidiu says

    I am curios about this part of the code: add_opengraph_doctype the problem is that that function doesn’t seem to do anything on my install :-( the rest is working fine but this add_opengraph_doctype doesn’t.

    is it necessary and why do you think my themes doesn’t trigger that?

  32. Sheryl says

    I installed the open graph plug-in to wordpress. I configured the settings swapping my business name out for the name on the URL you posted.

    Now what?? What do I do next to get the send button under my like button?

  33. Preston says

    This is great. Any guidance on how to modify this so that Facebook draws an excerpt from the written content? The plug-in doesn’t go to content but takes author name, categories, and date. Thoughts?

  34. Chris Bracco says

    This code only adds the OG tags to single posts and pages. I’d like to have the tags appear on all of my pages, and I can’t figure out a simple way to accomplish this. Any ideas?

    • Editorial Staff says

      You have individual like / send buttons on your archive, category, tags pages??? Like buttons are only good on single posts / pages which is why the code adds that. The only other like button added on the site is the (Like Box) for the Facebook page of the site. Which doesn’t require this information.

      But if you must, then remove the !is_singular conditional statement.

      Admin

    • Editorial Staff says

      You can hard code it into the header.php but that is a multiple step process as you have to edit doctype, then add the other meta tags… This is a one step process. Paste, and Done. Or install the plugin, and done. If you use the plugin, then you are even better of because the tags stay even when you change the themes.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.