SEO Konuları

Open Graph Meta Etiketleri

17/12/2022
Open Graph Protocol

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:type Sayfanın tipini belirtir. (Makale, video, yazar…)
  • og:title Sayfanın başlığını belirtir.
  • og:image Sayfayı tanımlayan kapak görselini belirtir.
  • og:url Sayfayı 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:audio Paylaşım yapılacak ses dosyasının URL’ini belirtmek için kullanılır.
  • og:video Paylaşım yapılacak video dosyasının URL’ini belirtmek için kullanılır.
  • og:description Sayfayı tanımlayan bir açıklama kullanılır, genellikle sayfanın meta description etiketiyle aynı değeri çeker.
  • og:determiner Sayfanı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:locale Sayfanın yerel dilini işaretlemek için kullanılır. Varsayılan değeri “en_US”‘dir.
  • og:locale:alternate Sayfanın mevcut olan alternatif lokasyonları için kullanılır. Birden fazla alternatif sayfa için dizi olarak kullanılabilir.
  • og:site_name Web 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:url Kullanım olarak og:image ile birebir aynı, tekrar kullanılmasına gerek yok.
  • og:image:secure_url HTTPS 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:type Görselin dosya tipini belirtmek için kullanılır. (Örnek: image/png)
  • og:image:width Görselin genişliğini belirtmek için kullanılır.
  • og:image:height Görselin yüksekliğini belirtmek için kullanılır.
  • og:image:alt Gö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:duration Saniye 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: