Facebook Open Graph – WordPress

Merhaba, bu konu web sitesi olanlar içindir, ufak bir detay bilgisi içerir.

open graph functions

Sosyal medyada web sitenizin linkini paylaşırken linke ait ön izleme resminin otomatik olarak linkle birlikte görünmesi gerekir.

Sitenizde belli ayarlar yapılmamışsa; sitenizden özellikle Facebook ve whatsapp gibi sitelere link paylaşımında ön izleme resimleri görünmez.

Facebook bunu “Open Graph” ile adlandırıyor.

Paylaşacağım ayarlar, sitenizde yapılan link paylaşımlarında konu başlığı, resim gibi bilgilerin nereden çekilmesi gerektiğini içerir.

Bu ayarları sitenizin meta bilgilerini girdiğiniz alanına yazmamız gerekiyor…

ÖRNEK: SİTE LİNKİNİ SOSYAL MEDYADA PAYLAŞIRKEN RESİM BÖYLE OTOMATİK ÇIKACAKTIR.

facebook open graph wordpress

Sadece Facebook değil Whatsappta da bir link paylaşacakken o sitenin sosyal medya için meta verileri düzgün girilmemişse resim gözükmez sadece düz link gözükecektir.

Resimleri inceleyiniz meta girdisi olmayan linkte önce ön izleme resmi görünmüyor. Girince görünür duruma geliyor.

Whatsapptan örnek paylaşım. İlkinde sitemde meta verisi yoktu ekledim sonrasında aynı linki paylaştım aradaki farkı görüyorsunuz.

whatsapp meta bilgileri

WordPress için kendi ayarları kısmında bu meta girişi bilgileri girme alanı henüz mevcut değil ama ileride olacaktır diye düşünüyorum.

İnstagram gibi bazı siteler bu bilgiler olmadan da sitenin içinden kolayca verileri çekip alabiliyorken bazı siteler için meta verisini bizim girmemiz gerek.

Bunu iki şekilde yapabiliriz:

1. Manuel şekilde kod girerek yapabiliriz.
2. Eklenti ile yapabiliriz

Önce manuel yöntemi anlatayım.

Malumunuz meta bilgileri <head></head> arasına girilir.

Bunu functions a otomatik girdirelim…

Funtions.php içine nasıl veri girileceğini bilmiyorsanız dikkatli olun.

Bu konuda acemilik çekenler şu yazımdan faydalanarak en temizi, kodu eklenti yoluyla ekleyebilirsiniz:
https://100numaraliadam.com/wordpress-functions-kodu-nedir-ve-nasil-eklenir/#4-2-eklenti-ile-functions-ekleme

Siteye facebook Open Graph Özellikleri Kazandırma

//Siteye facebook Open Graph Özellikleri Kazandırma
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');
 
//Açık Grafik Meta Bilgisi ekleyelim
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //Bir gönderi veya sayfa değilse
        return;
        echo '<meta property="fb:app_id" content="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="SİTENİZİN ADI"/>';
    if(!has_post_thumbnail( $post->ID )) { //Gönderide öne çıkan resim yok, varsayılan bir resim kullanın
        $default_image="http://site.com/image.jpg"; //DİKKAT! Bunu sunucunuzdaki varsayılan bir resimle veya medya kitaplığınızdaki bir resimle değiştirin
        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 );

Kodun Özellikleri:

  • Facebook, Whatsapp, Twitter gibi sitelerin sitenizden resim ve başlık bilgisini kolayca çekebilmesini sağlar.
  • Bu kod ek meta bilgisi ekleyeceği için seo puanınızı da yükseltir.
  • Kodumuz wordpresste yazılardan ve sayfalardan başlık ve resim bilgisini çeker.
  • Gönderi linkinde resim yok ise varsayılan resim kullan özelliği sayesinde linki resimsiz bırakmaz. Bunu kod içinden “image.jpg” yolunu değiştirerek yapabilirsiniz.
  • Meta verisi sadece yazı ve sayfalardan resim çıkartmaya odaklı çalışır. Paylaştığınız link yazı veya sayfa türünde değilse resim, kod içinde ayarlanan “image.jpg” yolundan çekilecektir.
  • Gerekli olmamakla birlikte olsa iyi olur; Facebook App id ile bütünleşebilir. Mevcut Face id nizi kod içinde “Facebook App ID” yazan kısma yazacaksınız.
    (Facebook App ID niz yoksa nasıl alınacağını araştırınız.)
100numaraliadam Yeni Konu:  Eklentisiz Reklam Yerleştirme Yöntemleri

Diğer yöntem eklenti yükleyerek yapılır. Bu yöntemde meta bilgisi girdileri otomatik ayarlanır.

Sadece eklentiyi yüklemeniz ve etkinleştirmeniz yeterlidir.

Eklenti adı budur: https://wordpress.org/plugins/og/

OG Better Share on Social Media Eklentisi

Sitenizin eklentiler bölümünde yeni ekle dedikten sonra “OG Better Share on Social Media” yazarak arayabilirsiniz

Bunu kurduktan sonra yapacağınız ek bir ayar mevcut değil.

Madem eklenti var neden kod yöntemini paylaştın derseniz. Eklentiler zamanla kendini günceller. Bu şu an için hafif bir eklentidir ama ileride güncellemeler sonrası oluşabilecek ek kod yığınlarıyla siteyi ağırlaştırmayacağını bilemeyiz. O yüzden genel anlamda eklenti kullanmaktan kaçınırım. Bunun yerine işleri kod ekleme metodu ile çözme taraftarıyım.


Anlattığım şekillerden birini tercih ederek meta girdisini sitenize eklettiniz…

Facebook hemencecik resimlerinizi sitenizden ön izlemesi görülebilir hale getiremeyebiliyor.

Bunu sizin kontrol etmeniz gerekiyor bunun için Facebook Developer Aracını kullanacağız.

Sitenizdeki linklerin sosyal medyada nasıl göründüğünü merak ediyorsanız bu linkten ;

https://developers.facebook.com/tools/debug

Facebook un geliştirici araçları bölümünden canlı ön izlemesini yapabilirsiniz.

Bu adrese sitenizde bulunan bir yazının veya bir sayfanın ya da ana sayfanızın linkini ekleyin.

Meta bilgisi tamamsa resim ve başlığın nasıl çekileceğini görebilirsiniz.

Ayarlarınızın tam olduğunu düşünüyorsanız ve burada resim göremiyorsanız telaşlanmayın.

Meta girdilerinden sonra sitenizde kullandığınız cache eklentileri varsa mutlaka önbelleklerini temizleyin.

Facebook un da önbelleğinin temizlenmesi kendi bünyesinde uzun sürebiliyor.

Sonraki haftalarda developer aracını kullanarak linklerinizi tekrar deneyin.

Facebook gibi siteler bu bilgileri bir kere alır kendi ön belleğinde bir süreliğine kayıt eder. Bu şekilde kendince işleri hızlandırmış olur.

Yazıdaki resim veya başlık değiştiğinde bu bilgiler hala Facebook veri tabanında tutulacağı için acil durumlarda bilgileri manuel olarak yenilemek için developer aracına girip linki yazmanız gerekebilir.

100numaraliadam Yeni Konu:  Wordpress Resimler Ayrı Safyada Açılıyor

Not: Sitenizde Hotlink Koruması mevcutsa Facebook resimleri göstermeyebiliyor! Korumayı kaldırmanız gerekebiliyor.

Kaldırmak için: Sitenizin panel kısmına girmelisiniz genelde CPANEL kullanılıyor.

Burada resim hotlink korumasını arayın bulun. Aktifse kapatın.

Ya da hotlink korumasına ek ayar girerek Facebook gibi resim göstermeyen siteleri ekleyebilir, bu sayede bu siteler için hotlink korumasının çalışmamasını sağlayabilirsiniz.

Sitenizdeki resimlerin, başka siteler tarafından kullanılmasını engelleyen koruma metodudur.


Sitesi olan arkadaşlarım için işe yarayacağını sanıyorum. Hoşça kalın.

Yazar: utquick

utquick 1Merhaba, Bu site 2017 senesinde kurulmuştur: Kemal SUNAL 'ın 100 Numaralı Adam filminden feyz alınarak kurulan sitemiz, filmdeki Halk Kahramanı rolünü de bünyesine katarak dürüst paylaşımlarda bulunmaktadır. Bizi takip ediniz. Büyük bir aile oluyoruz. Tek güvencemiz paylaşımlarımızın samimiliğidir.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

css.php