Facebook Open Graph – WordPress

Yazar: utquick · Yayımlanmış 3 Aralık 2022 · Güncellendi 3 Aralık 2022

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

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.

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.

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

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/

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.

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.