Open Graph Meta Etiketleri

668

17/12/2022

Advertisement

Continue Reading Below

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:

Web Tasarım > HTML > Open Graph Meta Etiketleri

Advertisement

Continue Reading Below

İlişkili SEO Konuları