Facebook paylaşımı için 'og' (Açık Grafik) meta etiketi nasıl kullanılır


118

Facebook sitemdeki tüm resimleri alıyor.

O sayfadaki tek bir resmi paylaşmak istiyorum.

ogMeta etiketi duydum ama nasıl koyacağımı bilmiyorum.

Yanıtlar:


355

kullanın:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Sayfanızın içeriğine göre içeriği = "..." doldurun.

Daha fazla bilgi için 2013'te Her Web Sayfasında Olması Gereken 18 Meta Etiketi ziyaret edin .


authorEtiketin yazar adına mı yoksa bir profil URL'sine bir bağlantıya mı sahip olması gerektiğini biliyor musunuz ?
tobek

İkisinin de mümkün olduğunu düşünüyorum. Profil resminizin google arama sayfasında yayınınızın sol tarafında olmasını istiyorsanız, google + profilinizin bağlantısını sağlamalısınız.
jurihandl

meta etiket author, web sitesinin yazarı veya mevcut makalenin yazarı anlamına gelir (örneğin, blog makalesinde kullanım)?
LuiGi

Bu iyi bir infaz mı? Google / Facebook / Twitter bununla herhangi bir hata bulamayacak mı?
Jeromie Devera

2
1) Facebook <meta name = "author"> etiketini okuyacak ve birisi bir sayfayı paylaştığında bunu önizlemede gösterecektir 2) Facebook artık <meta property = "article: author"> desteğine sahip (ayrıntılar giannopoulos.net/ 2015/06/20 /… ) ve Facebook profilinize bir bağlantı gösterecek (gerçekten makaleye bir bağlantı koyduysanız: yazar) 3) Google artık "Zengin Parçacıklar" adını verdiği biçimdeki zengin verileri arıyor ( developer.google.com/structured-data )
MarkG

41

Facebook, bir bağlantıyı paylaştığınızda hangi şeylerin görüntüleneceğine karar vermek için Açık Grafik Protokolü denen şeyi kullanır . OGP sayfanıza bakar ve hangi içeriğin gösterileceğine karar vermeye çalışır. Yardım edebilir ve Facebook'a sayfamızdan ne alacağını söyleyebiliriz .

Bunu yapmamızın yolu og:metaetiketlerdir.

Etiketler şuna benzer -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Bunları veya benzer meta etiketleri <head>HTML dosyanızın içine yerleştirmeniz gerekir. Değerleri kendinizin yerine koymayı unutmayın!

Daha fazla bilgi için, Facebook'un bu meta etiketleri nasıl kullandığı hakkında belgelerini okuyabilirsiniz. İşte oradaki öğreticilerden biri - https://developers.facebook.com/docs/opengraph/tutorial/


Facebook, bu meta etiketlerle uğraşırken bize yardımcı olmak için harika küçük bir araç sunuyor - Facebook'un URL'nizi nasıl gördüğünü görmek için Hata Ayıklayıcı'yı kullanabilirsiniz ve hatta bununla ilgili bir sorun olup olmadığını size söyleyecektir.

Burada dikkat edilmesi gereken bir nokta, meta etiketlerinde her değişiklik yaptığınızda , Facebook'un URL'nizle ilgili sunucularında önbelleğe alınan tüm verileri temizlemesi için, URL'yi Hata Ayıklayıcı aracılığıyla yeniden beslemeniz gerektiğidir .


Açıklamamda html etiketleri görüyorum, bunu nasıl aşacağınızı biliyor musunuz?
Neil

28

Meta üretimi için bir araç geliştirdim. Facebook, Google+ ve Twitter için girişleri önceden yapılandırır ve buradan ücretsiz olarak kullanabilirsiniz: http://www.groovymeta.com

Soruyu biraz daha fazla yanıtlamak için, OGetiketler (Open Graph) etiketleri meta etiketlere benzer şekilde çalışır ve HTML dosyanızın HEAD bölümüne yerleştirilmelidir. OG etiketlerinin nasıl etkili bir şekilde kullanılacağı hakkında daha fazla bilgi için Facebook'un en iyi uygulamalarına bakın .


1
Teşekkürler @Mogsdad, cevabımı buna göre genişlettim.
Louis Otto

1
Maalesef bağlantı koptu!
Vincent Sels
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.