Sie möchten sicherstellen, dass der Inhalt Ihrer WordPress-Website auf Facebook gut aussieht? Dann müssen Sie Ihrem WordPress Theme Facebook Open Graph-Metadaten hinzufügen.
Open Graph-Metadaten teilen Facebook und anderen Websites für soziale Medien Informationen über Ihre WordPress-Beiträge und -Seiten mit und ermöglichen es Ihnen, zu kontrollieren, wie sie aussehen, wenn jemand sie teilt.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Facebook Open Graph-Metadaten in WordPress Themes hinzufügen können. Wir stellen Ihnen drei verschiedene Methoden vor, darunter die All-in-One-SEO-Methode, die wir bei WPBeginner verwenden, damit Sie diejenige auswählen können, die für Ihre WordPress-Website am besten geeignet ist.
Über die unten stehenden Links können Sie direkt zu der Methode springen, die Sie am meisten interessiert:
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.
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.
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.
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.
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 sind die Facebook Open Graph-Daten standardmäßig aktiviert.
Sie können dies überprüfen, indem Sie zu Yoast SEO “ Einstellungen gehen und zum Abschnitt „Social Sharing“ hinunter scrollen. Jetzt können Sie sicherstellen, dass die Funktion für Open Graph-Daten aktiviert ist.
müssen Sie zu SEO “ Social gehen und die Option ‚Aktiviert‘ unter ‚Open Graph Metadaten hinzufügen‘ auswählen.
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 der Premium-Version von 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.
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
Diese Methode erfordert normalerweise das Kopieren und Einfügen von Code in die Datei functions.php Ihres Themes. Wir empfehlen jedoch, den Code stattdessen mit dem WPCode Plugin hinzuzufügen, das es einfacher und sicherer macht, individuellen Code in WordPress hinzuzufügen.
WPCode enthält außerdem eine Bibliothek mit vorgefertigten Code-Snippets, darunter auch eines zum Hinzufügen grundlegender Open Graph-Schlagwörter, so dass es nur ein paar Klicks braucht.
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 von Ihrem WordPress-Dashboard aus zu Code Snippets “ + Snippet hinzufügen gehen.
Suchen Sie in der Bibliothek nach dem Snippet „Grundlegende Open Graph-Schlagwörter hinzufügen“. Sobald Sie es gefunden haben, bewegen Sie den Mauszeigerkontakt darauf und klicken Sie auf den Button „Snippet verwenden“.
WPCode fügt dann automatisch den Code für Sie ein und legt die Position für den Header der Website als Einfügemethode fest.
Danach müssen Sie das Snippet nur noch auf „Aktiv“ umschalten und auf den Button „Aktualisieren“ klicken. Ihr Theme zeigt nun Facebook Open Graph-Metadaten im WordPress Header an.
Wenn Sie ein fortgeschrittener Benutzer sind, können Sie den unten stehenden Code auch kopieren und in die Datei functions.php Ihres Themes einfügen.
Da dies eine direkte Bearbeitung Ihrer Theme-Dateien erfordert, stellen Sie sicher, dass Sie Ihre Theme-Dateien sichern, bevor Sie Änderungen vornehmen.
//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.
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:
- Die besten Facebook-Tipps und -Tutorials für WordPress-Benutzer
- Wie man automatisch von WordPress auf Facebook postet
- Wie man Facebook-Kommentare in WordPress installiert und einrichtet
- Wie man einen benutzerdefinierten Facebook-Feed in WordPress erstellt
- Wie Sie die Bewertungen Ihrer Facebook-Seite in WordPress anzeigen
- Wie behebt man das Problem mit den falschen Miniaturbildern bei Facebook in WordPress?
- So zeigen Sie Twitter und Facebook des Autors auf der Profilseite an
- Wie man eine Facebook Ads Landing Page in WordPress erstellt
- Wie man das Facebook- und Instagram-oEmbed-Problem in WordPress behebt
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.
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
Admin
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.
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.
Admin
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.
Admin
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
Admin
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.
Admin
Richard S.
Wow, this really worked for me, you’re awesome!
WPBeginner Support
Glad our guide was helpful
Admin
evelien
You did it again – looking for a solution, and you deliver ! You rule
WPBeginner Support
Glad our guide was helpful
Admin
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.
Admin
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
Admin
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.
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.
Admin
Colin
My title looks like this in the preview:
%%title%% %%page%% %%sep%% %%sitename%%
How do I fix this?
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
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
WPBeginner Support
Hi Sadie,
You can add it to either functions.php file.
Admin
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.
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?
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..
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.
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!
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..?
elsa
This plugin gave me a white screen of death, obviously a conflict with something or memory exceeded
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!
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
Martin
Does my Facebook profile have to be public in order for my Facebook User ID to be good to use here?
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?
WPBeginner Support
Hi Martin,
Yes it would work.
Admin
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?
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()
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!
Mohsin Rafique
Nicely explained & works like a charm.
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?
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.
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?
giovanna
Hi can you help me please? I added the code in function and what I have to add in the head please?
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 “;
}
benjamin
I just want to say thanks! … this is very helpful, you the best!
WPBeginner Support
Glad you found it helpful. Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
Admin
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!
WPBeginner Support
You need to enter your WordPress site URL in the debug tool.
Admin
Courtney
Hi there,
I have SEO Yoast and I uploaded the new image and its still not working on facebook……???
MassimoDIFA
Thank you, manually added open graph on header, perfect!! Thank you!!
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.
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?
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?
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
WPBeginner Staff
Check your page using Facebook debug tool
https://developers.facebook.com/tools/debug Usually checking a page with the debug tool refreshes the Facebook’s cache and you will be able to see the new image.
BK
Thank you for taking the time to reply. Will give it a shot!
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?
Naren Patel
Thank you very much, I really want this information.
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.
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?
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??????
Anas Khan
Great tutorial, i want to know is there any tutorial about open graph meta for Google Plus ?