Facebook'ta önizleme olarak gösterilecek bir web sitesi resmini nasıl ayarlayabilirim?

156

Facebook'ta bir bağlantı paylaştığınızda, web sitesinde otomatik olarak resim bulur ve rastgele bir önizleme olarak alır. Önizleme görüntüsünü nasıl etkileyebilirsiniz? Bir kişi web sitesi bağlantısını facebookunda paylaştığında?

image facebook preview

— işaret
kaynak

234

1. Açık Grafik XML ad alanı uzantısını HTML bildiriminize ekleyin

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Kullanımınızın içinde, <head></head>kullanmak istediğiniz görüntüyü tanımlamak için aşağıdaki meta etiketi kullanın

<meta property="og:image" content="fully_qualified_image_url_here" />

Açık grafik protokolü hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Yukarıdakileri yaptıktan sonra , görüntü düzgün görünmüyorsa Facebook "Nesne Hata Ayıklayıcısı" nı kullanın. Ayrıca, ilk kez paylaşıldığında, yükseklik ve genişlik de belirtilmedikçe hala görünmeyeceğini unutmayın, bkz . Facebook'ta Paylaş - Küçük resim ilk kez gösterilmiyor

— shef
kaynak

@Martin farkında değilim. Belki de öyle, ama Açık Grafik Protokol Dokümanlarında bahsedildiğini görmüyorum . Siteniz için önbelleğe alınan değerlerin gösterilip gösterilmediğini görmek için Hata Ayıklayıcı'yı deneyin . Bu konu ile ilgili önbelleği temizlemeyen SO başlıklı Facebook Açık Grafiği'nde başka bir soru var gibi görünüyor .

— Shef

@KDog tarafından yapılan yorum: Sorun mu yaşıyorsunuz? Facebook hata ayıklama aracında kodlarınızı kontrol edin. Facebook önbellek resmi, başlık ve gövde metni. Web siteme xml eklerken başlığı değiştirdim ve yanlışlıkla birkaç doğrulama hatası oluşturduğum için Facebook'un paylaşım önizlemesinde hiçbir şey değişmedi. Facebook geçersiz kılınan yeni verileri göstermek yerine geçerli bir önbellek kullandı. Bu hataları developers.facebook.com/tools/debug kullanarak çözebildim . Bunu yaptıktan sonra yeni başlığım ve resimlerim hemen görünüyor.

— Jeremy Thompson

@ScotterMonkey: Evet, beklenen davranış budur. FB'ye hangi içeriği kullanacağını söyleyebilirsiniz. BTW, öğeye birden fazla öğe ekleyebilirsiniz <meta property="og:image" content="your_image_here" />, headböylece FB'ye ne zaman yayın göndereceğinizi seçebilirsiniz.

— Shef

Html-bildiriminde fb ile o şeyi kaçırdı. Günümü kurtardım! (bu üç yıllık bir yazı olsa bile). Çok teşekkürler!

— bestprogrammerintheworld

içerik bağlantısı gerçek bir URL - bulduğum göreli bir bağlantı değil. yani http://mywebsite.com.au/Images/prettypic.png, değil/Images/prettypic.png

— JumpingJezza

Ayrıca wordpress'iniz varsa, düzenleme modundayken web sayfasının en altına inip "özellikli resim" i (ekranın sağ alt köşesi) seçin.

— davea0511
kaynak

Weebly kullanıyorsanız , yayınlanan siteyi görüntüleyip resme sağ tıklayarak Resim Adresini Kopyala seçeneğini tıklayın. Ardından Weebly'de, Siteyi Düzenle, Sayfalar'a gidin, kullanmak istediğiniz sayfayı tıklayın, SEO Ayarları, Başlık Kodu altında Shef'in cevabından kodu girin:

<meta property="og:image" content="/uploads/..." />

/ uploads / ... kopyalanan resim adresiyle değiştirilir. Değişikliği uygulamak için Yayınla'yı tıklayın.

Shef'in isim alanı hakkındaki cevabının bölümünü atlayabilirsiniz, çünkü bu Weebly'de zaten varsayılan olarak ayarlanmıştır.

— krubo
kaynak