Open Graph Meta Etiketleri
Open graph etiketleri, web sayfalarının sosyal medyalarda paylaşırken başlık, açıklama ve görsel gibi verilerin yansıtılmasına yardımcı olan meta etiketleridir. İlk defa Facebook tarafından oluşturulmuştur.
HTML dilinde <head> etiketinin içerisinde <meta> etiketleri ile kullanılırlar.
Temel OGP Meta Etiketleri
Open graph etiketlerini en basit şekilde aşağıdaki 4 meta etiketi sayfanın kaynak koduna yerleştirerek kullanabilirsiniz. Bu 4 meta etiketi yapının çalışması için tüm sayfalarda gereklidir.
og:typeSayfanın tipini belirtir. (Makale, video, yazar…)og:titleSayfanın başlığını belirtir.og:imageSayfayı tanımlayan kapak görselini belirtir.og:urlSayfayı oluşturan canonical URL’i belirtir.
Örnek
<meta property="og:type" content="article">
<meta property="og:title" content="Nikola Tesla Quotes - Words From Life">
<meta property="og:image" content="https://wordsfromlife.com/img/static/nikola-tesla.jpg">
<meta property="og:url" content="https://wordsfromlife.com/en/nikola-tesla-quotes">Opsiyonel OGP Etiketleri
Aşağıdaki meta etiketleri Open Graph Protokolü için opsiyoneldir ama genellikle kullanılmaları önerilir.
og:audioPaylaşım yapılacak ses dosyasının URL’ini belirtmek için kullanılır.og:videoPaylaşım yapılacak video dosyasının URL’ini belirtmek için kullanılır.og:descriptionSayfayı tanımlayan bir açıklama kullanılır, genellikle sayfanın meta description etiketiyle aynı değeri çeker.og:determinerSayfanın başlığından önce görünecek kelime için kullanılır. İngilizce metinlerde “a”, “an” veya “the” ön ekleri gibi. Varsayılan olarak boş gelir.og:localeSayfanın yerel dilini işaretlemek için kullanılır. Varsayılan değeri “en_US”‘dir.og:locale:alternateSayfanın mevcut olan alternatif lokasyonları için kullanılır. Birden fazla alternatif sayfa için dizi olarak kullanılabilir.og:site_nameWeb sitesinin adını belirtmek için kullanılır.
Yapılandırılmış OGP Özellikleri
Open Graph meta etiketleri property ve content elemanlarından oluşuyor, bazı property özellikleri ekstra verilere sahip;
og:image Ekstra Veri
og:image:urlKullanım olarak og:image ile birebir aynı, tekrar kullanılmasına gerek yok.og:image:secure_urlHTTPS görsel URL’i için kullanılır, artık web sitelerinin büyük çoğunluğu HTTPS olduğu için ayrıca kullanımına gerek duyulmuyor.og:image:typeGörselin dosya tipini belirtmek için kullanılır. (Örnek: image/png)og:image:widthGörselin genişliğini belirtmek için kullanılır.og:image:heightGörselin yüksekliğini belirtmek için kullanılır.og:image:altGörseli tanımlayan kısa açıklama metni için kullanılır. Alternative text olarak kullanılır.
Örnek
<meta property="og:image" content="https://wordsfromlife.com/img/static/nikola-tesla.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:image:alt" content="Nikola Tesla Quotes" />og:video Ekstra Veri
og:video ekstra verileri de alt değeri dışında og:image gibi birebir aynı mantıkla geçerlidir, aynı değerler kullanılabilir.
<meta property="og:video" content="" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="" />
<meta property="og:video:height" content="" /> og:audio Ekstra Veri
og:audio için yalnızca 3 özellik kullanılabilir; og:audio, og:audio:secure_url, og:audio:type. og:audio:secure_url kullanılmasa da yapı çalışır.
<meta property="og:audio" content="" />
<meta property="og:audio:type" content="audio/mpeg" />og:type Nesne Tipleri
og:type ile sayfanın tipini belirtmek gerekir, sayfa tiplerine göre farklı değerler bulunur;
music.song
<meta property="og:type" content="music.song" /> music.song tipi için özellikler;
music:durationSaniye olarak şarkınınn uzunluğu.music:albumŞarkının albümü.music:album:discŞarkının albümde bulunduğu disk numarası.music:album:trackŞarkının hangi parça olduğunun numarası.music:musicianŞarkının müzisyeni.
Örnek
<meta property="og:type" content="music.song" />
<meta property="music:duration" content="236" />
<meta property="music:album" content="http://open.spotify.com/album/7rq68qYz66mNdPfidhIEFa" />
<meta property="music:album:disc" content="1" />
<meta property="music:album:track" content="2" />
<meta property="music:musician" content="http://open.spotify.com/artist/1dfeR4HaWDbWqFHLkxsg1d" />Kaynak: