ArmyYazılım

Open Graph Meta Etiketleri (Açık Grafik Meta Etiketleri) Nedir?

Kasım 23, 2019 | İbrahim Bozkurt

Open Graph Meta Etiketleri (Açık Grafik Meta Etiketleri). Bu Meta Etiketleri içeriğimizi sosyal medyada paylaşırken yapacağımız düzenlemeleri içeren etiketlerdir.

Open Graph Meta Etiketleri
Open Graph Meta Etiketleri

Web sitemizdeki içeriklerimizin daha çok kişiye ulaşmasını sağlamanın yollarından biride sosyal medya hesaplarında paylaşmaktır.

Sosyal medya hesaplarında paylaştığımız her bir bağlantı sitemize gelecek potansiyel kullanıcı sayını ve kitlesini arttırır.

Aslında sosyal medya hesaplarında da bir bakıma paylaşmak zorundayız. Çünkü hemen hemen herkes bir sosyal medya mecrasını kullanıyor.

Her website sahibi websitelerine kullanıcılar içerikleri sosyal medya hesaplarında paylaşsın diye sosyal medya butonları ekliyor.

Biz de armyyazilim.com da bu yolu izliyoruz. Herkes kaliteli içerik ürettiğini düşünür.

Bizde öyle düşünüyoruz ve içeriklerimiz ne kadar çok insana ulaşırsa o kadar çok faydalı olduğumuzu biliyoruz.

Open Graph Meta Etiketleri (Açık Grafik Meta Etiketleri) Neden Gerekli?

Siz bir linki sosyal medya platformlarında paylaşınca o linkin ön izlemesi oluşur.

O ön izlemede sitenin adı, içeriğin başlığı, içeriğin kısa açıklaması, içeriğin vurgulanan resmi ve sitenin linki ortaya çıkar. İşte bu elementlerin her içerik için ayrı ayrı düzenlenmesi lazımdır.

Her içeriğin resmi, başlığı, kısa açıklaması ve linki değişiktir. Bu değişikliği Open Graph Meta Tags sayesinde yapıyoruz.

Open Graph Meta Etiketleri (Açık Grafik Meta Etiketleri) olmasa sosyal medya platformları akıllarına göre başlıklar, açıklamalar, resimler alacağından insanlara içeriğiniz ve web siteniz hakkında tam bir açıklama yapamazsınız.

Bunu engellemek ve içeriğinizi, websitenizi sosyal medya kullanıcılarına daha iyi aktarmak için Open Graph Meta Etiketleri (Açık Grafik Meta Etiketleri) ortaya çıktı.

Mesela örnekte gördüğünüz bir sosyal medya (Facebook ve Twitter) paylaşımı var. İşte bu paylaşımdaki bütün başlık, kısa açıklama, resim gibi alanlar Open Graph Meta Etiketleri (Açık Grafik Meta Etiketleri) ile düzenlendiği için birbiriyle senkronize haldedir.

İşte Open Graph Meta Tags Tam Listesi!

<meta name="og:title" content="The Rock"/>

Bu etiket İçeriğin başlığını doğru bir şekilde sosyal medyada paylaşmanızı sağlar.

<meta name="og:type" content="movie"/>

Bu etiket İçeriğin türünü belirtmenizi sağlar.

<meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/>

Bu etiket sosyal medya kullanıcılarının içeriğinize ulaşabilmeleri için vereceğiniz link.

<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Bu etiket içeriğinizin öne çıkarılmış görselini ayarlamayı sağlar.

<meta name="og:site_name" content="IMDb"/>

Bu etiket sitenin ismini doğru bir şekilde girmenize yarar.

<meta name="og:description" content="A group of U.S. Marines, under command of..."/>

Bu etiket içeriğinizin kısa açıklamasını sosyal medya platformlarında gösterir.

<meta name="fb:page_id" content="43929265776" />

Bu etiket facebook sayfanızın oluşturduğunuz uygulamaların id’sini girmenize yarar.

<meta name="og:email" content="me@example.com"/>

Bu etiket mail adresinizi belirtmenize yarar.

<meta name="og:phone_number" content="650-123-4567"/>
<meta name="og:fax_number" content="+1-415-123-4567"/>

Bu iki etiket telefon numaranızı ve fax numaranızı belirtir.

<meta name="og:latitude" content="37.416343"/>
<meta name="og:longitude" content="-122.153013"/>
<meta name="og:street-address" content="1601 S California Ave"/>
<meta name="og:locality" content="Palo Alto"/>
<meta name="og:region" content="CA"/>
<meta name="og:postal-code" content="94304"/>
<meta name="og:country-name" content="USA"/>

Bu etiket topluluğu lokasyon ve adres bilgilerinizi belirtir. Eğer bir resmi şirket kullanıyorsanız bu düzenlemer sayesinde kullanıcılar size daha kolay ulaşabilir.

<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />

Bu etiket topluluğu eğer bir video paylaşırsanız düzenleme gerektiren meta etiketleridir.

<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />

Bu etiket topluluğu eğer bir ses içeriği paylaşırsanız düzenleme gerektiren meta etiketleridir.

Bir de Twitter için özel meta tagleri var!

Twitter da üstteki meta taglerini kullanıyor ancak bunlara ek olarak aşağıdaki meta taglerini de kullanmanız Twitter da içerik paylaşırken işinize yarar.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />

Umarız işinize yaramıştır. Sormak istediğiniz her nokta için yorumlar alanımızı kullanabilirsiniz.

İlginizi çekebilir…

WordPress Spam Yorumlarla Mücadele için Önemli İpuçları ve Araçlar!

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …



google meta tagler html meta tag meta etiketler meta etiketleri open graph open graph meta etiketleri sosyal medya meta etiketleri twitter meta etiketleri
3 sene / HTML


Yorumlar