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

WordPress Temalarına Facebook Open Graph Meta Verileri Nasıl Eklenir?

WordPress yolculuğumuzun başlarında, bazı web sitelerinin Facebook’ta paylaşıldığında harika göründüğünü, diğerlerinin ise berbat göründüğünü fark ettik. Aradaki fark içerik kalitesi değildi. Site sahibinin Facebook Open Graph meta verilerini düzgün bir şekilde yapılandırıp yapılandırmadığıydı.

Facebook Open Graph etiketleri esasen sosyal medya platformlarına içeriğinizi nasıl görüntüleyeceklerini söyleyen talimatlardır. Bunlar olmadan Facebook’un hangi görseli kullanacağını ve hangi metni göstereceğini tahmin etmesi gerekir ve bu da genellikle kötü sonuçlar doğurur.

Doğru Open Graph uygulamasıyla, WordPress gönderilerinizin paylaşıldığında tam olarak nasıl görüneceğini kontrol ederek daha iyi etkileşim ve daha fazla tıklama elde edersiniz.

Yıllar boyunca sayısız WordPress kullanıcısının Open Graph meta verilerini uygulamasına yardımcı olduk, bu nedenle hangi yöntemlerin en iyi sonucu verdiğini biliyoruz. Bu eğitimde, WordPress temanıza Facebook Open Graph etiketleri eklemek için kanıtlanmış birkaç yaklaşımda size yol göstereceğiz.

How to Add Facebook Open Graph Meta Data in WordPress Themes

En çok ilgilendiğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanabilirsiniz:

Yöntem 1: AIOSEO ile Facebook Açık Grafik Meta Verilerini Ekleme

All in One SEO, 3 milyondan fazla web sitesi tarafından kullanılan popüler bir WordPress SEO eklentisidir. Web sitenizi arama motorlarının yanı sıra Facebook ve Twitter gibi sosyal platformlar için kolayca optimize etmenizi sağlar.

Öncelikle, ücretsiz All in One SEO eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından All in One SEO ” Sosyal Ağlar sayfasını ziyaret etmeniz gerekir. Burada, Facebook sayfanızın URL’sini ve diğer tüm sosyal ağlarınızı girebilirsiniz.

The AIOSEO SEO plugin for WordPress

Ardından, sayfanın üst kısmındaki Facebook sekmesine tıklayın ve Open Graph Markup’ın varsayılan olarak etkin olduğunu göreceksiniz.

Bir makalenin Açık Grafik görseli yoksa varsayılan bir Facebook OG görseli seçmek için ‘Görsel Yükle veya Seç’ düğmesine tıklayabilirsiniz.

Set default Open Graph image

Aşağı kaydırırsanız, site adınızı, açıklamanızı ve daha fazla ayarı özelleştirebilirsiniz. İşiniz bittiğinde mavi renkli ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Artık site genelinde Open Graph meta etiketlerini ayarladığınıza göre, bir sonraki adım tek tek gönderiler ve sayfalar için Open Graph meta verileri eklemektir.

Varsayılan olarak AIOSEO, Açık Grafik başlığı ve açıklaması için gönderi başlığınızı ve açıklamanızı kullanacaktır. Her sayfa ve gönderi için Facebook küçük resmini manuel olarak da ayarlayabilirsiniz.

Gönderiyi veya sayfayı düzenleyin ve editörün altındaki ‘AIOSEO Ayarları’ bölümüne gidin. Buradan Sosyal sekmesine geçtiğinizde küçük resminizin önizlemesini göreceksiniz.

AIOSEO Facebook preview

Burada sosyal medya görselinin yanı sıra başlık ve açıklamayı da ayarlayabilirsiniz.

Sadece ‘Görsel Kaynağı’ alanına kaydırın. Öne çıkan görseli kullanmayı, özel bir görsel yüklemeyi veya diğer seçenekleri tercih edebilirsiniz.

Choose which WordPress image to use as your Facebook thumbnail

Yöntem 2: Yoast SEO Kullanarak Facebook Açık Grafik Meta Verilerini Ayarlayın

Yoast SEO, herhangi bir WordPress sitesine Facebook Open Graph meta verilerini eklemek için kullanabileceğiniz başka bir WordPress SEO eklentisidir.

Yapmanız gereken ilk şey Yoast SEO eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirildikten sonra, Facebook Open Graph verileri varsayılan olarak etkinleştirilir.

Bunu Yoast SEO ” Ayarlar ‘a gidip Sosyal Paylaşım bölümüne ilerleyerek kontrol edebilirsiniz. Şimdi Open Graph veri özelliğinin etkinleştirildiğinden emin olabilirsiniz.

Enable Facebook Open Graph

SEO ” Sosyal bölümüne gitmeniz ve ‘Open Graph meta verileri ekle’ altındaki ‘Etkin’ seçeneğini seçmeniz gerekir.

Ayarlarınızı kaydedebilir veya devam edip diğer Facebook sosyal seçeneklerini yapılandırabilirsiniz.

Facebook sayfanız ve içgörüleriniz için bir Facebook uygulama kimliği kullanıyorsanız bunu sağlayabilirsiniz. Ayrıca ana sayfanızın Open Graph meta başlığını, açıklamasını ve görselini de değiştirebilirsiniz.

Son olarak, bir gönderi veya sayfa için herhangi bir görsel ayarlanmadığında kullanılacak varsayılan bir görsel ayarlayabilirsiniz.

Yoast SEO’nun Premium sürümü ayrıca tek tek gönderiler ve sayfalar için Open Graph meta verilerini ayarlamanıza olanak tanır. Bir gönderiyi veya sayfayı düzenleyin ve editörün altındaki ‘Yoast SEO’ bölümüne kaydırın.

Set open graph meta data for post and pages using Yoast

Buradan, söz konusu gönderi veya sayfa için bir Facebook küçük resmi ayarlayabilirsiniz. Bir gönderi başlığı veya açıklaması ayarlamazsanız, eklenti SEO meta başlığınızı ve açıklamanızı kullanacaktır.

Artık gönderinizi veya sayfanızı kaydedebilirsiniz ve eklenti Facebook Open Graph meta verilerinizi depolayacaktır.

Yöntem 3: Kod Kullanarak Facebook Açık Grafik Meta Verilerini Ekleme

Bu yöntem genellikle kodu kopyalayıp temanızın functions.php dosyasına yapıştırmanızı gerektirir. Ancak, bunun yerine WordPress’te özel kod eklemeyi daha kolay ve güvenli hale getiren WPCode eklentisini kullanarak kodu eklemenizi öneririz.

WPCode ayrıca, temel Open Graph etiketlerini eklemek için bir tane de dahil olmak üzere hazır kod parçacıklarından oluşan bir kitaplıkla birlikte gelir, bu nedenle yalnızca birkaç tıklama yeterlidir.

İlk olarak, ücretsiz WPCode eklentisini kurun ve etkinleştirin. Daha fazla ayrıntı için lütfen WordPress eklentisi yükleme kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress panonuzdan Code Snippets ” + Add Snippet bölümüne gidebilirsiniz.

Kütüphaneden ‘Temel Açık Grafik Etiketleri Ekle’ snippet’ini arayın. Bulduktan sonra üzerine gelin ve ‘Snippet’i kullan’ düğmesine tıklayın.

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

Ardından, WPCode kodu sizin için otomatik olarak ekleyecek ve site genelindeki başlığı ekleme yöntemi konumu olarak ayarlayacaktır.

WPCode automatically adds the code for Open Graph data

Bundan sonra yapmanız gereken tek şey parçacığı ‘Etkin’ olarak değiştirmek ve ‘Güncelle’ düğmesine tıklamaktır. Temanız artık WordPress başlığında Facebook Open Graph meta verilerini göstermeye başlayacaktır.

Activate and update snippet

İleri düzey bir kullanıcıysanız, aşağıdaki kodu kopyalayıp temanızın functions.php dosyasına yapıştırabilirsiniz.

Bu, tema dosyalarınızı doğrudan düzenlemenizi gerektirdiğinden, herhangi bir değişiklik yapmadan önce tema dosyalarınızı yedeklediğinizden emin olun.

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

Satır 17’de ‘Site Adınız Buraya Girecek’ yazan yere sitenizin adını eklemeyi unutmayın. Bundan sonra, Satır 19’daki varsayılan resim URL’sini kendi resim URL’lerinizden biriyle değiştirmelisiniz.

Buraya logonuzu içeren bir görsel koymanızı öneririz, böylece gönderinizin küçük resmi yoksa sitenizin logosunu çeker.

Ayrıca Satır 13’e kendi Facebook Uygulama Kimliğinizi eklemeniz gerekir. Eğer bir Facebook uygulamanız yoksa, 13. satırı koddan kaldırabilirsiniz.

Facebook ve WordPress Hakkında Uzman Kılavuzları

Umarız bu makale WordPress’te Facebook Open Graph meta verilerini eklemenize yardımcı olmuştur. WordPress’te Facebook’u nasıl kullanabileceğinizle ilgili diğer bazı kılavuzları da görmek isteyebilirsiniz:

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

221 yorumLeave a Reply

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

      Admin

  1. 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.

  2. 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!

  3. 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

    • 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

  4. 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

  5. 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?

    • 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

  6. 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?

        • 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.

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

    • 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

  8. 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

  9. 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

  10. 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.

  11. 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?

  12. 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..

  13. 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.

  14. 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!

  15. 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..?

  16. 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?

  17. 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

  18. 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?

  19. 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?

  20. 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?

    • 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()

  21. 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!

  22. 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?

    • 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.

      • 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!

  23. 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?

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

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

  25. 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!

  26. 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.

  27. 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?

  28. 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?

  29. 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.

  30. 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?

  31. @ 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??????

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.