Open Graph Protokolü Nedir?
Tags: seo, frontend, webdev
Published: 2023-03-01 22:21:38

![](https://cdn-images-1.medium.com/max/2000/1*WnOWx2Su1S6oylmenzM1pA.png)

[Open Graph Protokolü](https://ogp.me/), [URL](https://tr.wikipedia.org/wiki/URL)’lerin sosyal medyada paylaşıldığında nasıl görüntüleceğini kontrol eden ve [Web](https://tr.wikipedia.org/wiki/World_Wide_Web) sayfalarındaki [SEO](https://tr.wikipedia.org/wiki/Arama_motoru_optimizasyonu) meta verilerinin standartlaştırılması için [Facebook](https://tr.wikipedia.org/wiki/Meta,_Inc.) tarafından oluşturulmuş bir protokolüdür. Meta verilerinin standartlaştırılması, siteler arası meta veri uyumsuzluğunu ortadan kaldırmıştır. Günümüzde Open Graph protokolü, Facebook dışında [LinkedIn](https://tr.wikipedia.org/wiki/LinkedIn) ve [Twitter](https://tr.wikipedia.org/wiki/Twitter) gibi diğer sosyal medya siteleri tarafından da kullanılmaktadır. Open Graph etiketleri bir Web sayfasının head bölümünde yer alırlar.

![LinkedIn’de paylaşılan bu URL’nin önizlemesinde yer alan başlık ve görüntü Open Graph etiketlerinden gelmektedir.](https://cdn-images-1.medium.com/max/2000/1*isWKSXCiVwYNemiziyZoZg.png)

İçeriğinizi daha geniş kitlelere ulaştırmak için sosyal medya siteleri oldukça önemlidir. Kullanıcıların optimize edilmiş Open Graph etiketleriyle paylaşılan içeriği görme ve tıklama olasılıkları, oluşan önizlemenin içerikle uyumlu olması nedeniyle daha yüksektir, bu da web siteniz için daha fazla sosyal medya trafiği anlamına gelir. Open Graph etiketleriyle oluşturulan önizlemelerin faydaları ise şunlardır:

* Sosyal medya akışlarında içeriği daha dikkat çekici hale getirirler.

* İnsanlara içeriğin ne hakkında olduğunu bir bakışta söylerler.

* Facebook’un içeriğin ne hakkında olduğunu anlamasına yardımcı olurlar, bu da arama yoluyla marka görünürlüğünüzü artırmanıza yardımcı olacaktır.

![Twitter’da paylaşılan bu URL’nin önizlemesinde yer alan görüntü, başlık ve açıklama bilgisi Open Graph etiketlerinden gelmektedir.](https://cdn-images-1.medium.com/max/2000/1*-Z_7udw8-kNeOcor7FlEWw.png)

Twitter ve LinkedIn’de paylaşılan [sitenin](https://github.blog/changelog/2022-02-23-the-new-github-issues-february-23rd-update/) <head> bölümüne baktığımızda Open Graph meta etiketlerini görebiliriz.

![Yukarıdaki örnek paylaşımlarda yer alan sitenin meta etiketleri](https://cdn-images-1.medium.com/max/2014/1*7euJU8TOSXhOhbERf4tEZA.png)

Her sayfa için gerekli olan dört temel Open Graph etiketleri; og:title, og:type, og:image ve og:url’dir. Bazı meta etiketlerine ve açıklamalarına kısaca bakalım:

* **“og:title”**: Sayfanızın başlığını temsil edecektir. Çoğu zaman web sayfasının <title> etiketiyle aynıdır.

* “**og:type”**: Web sitesinin türünü temsil etmektedir. Yukarıdaki örnekte bu “article” olarak belirtilmiştir.

* “**og:image”**: Sayfanızı temsil eden resmin URL’sidir.

* “**og:url”**: Sayfanızın geçerli URL’sini ifade eder.

* “**og:description”**: İçeriğinizin kısa bir açıklamasını ifade eder. Genellikle <meta type=”description” ile aynıdır.

* “**og:audio”**: İçeriğinizi temsil eden ses dosyasının URL’sidir.

* “**og:video”**: İçeriğinizi temsil eden video URL’sidir.

![Open graph etiketleriyle oluşturulan twitter kartının anatomisi](https://cdn-images-1.medium.com/max/3124/1*A1VQRvxavAjrqGdwF5sPzg.png)

### Görüntüler İçin Ek Meta Etiketleri

Bazı meta etiketlerinde, kendilerine eklenmiş ek meta etiketleri olabilir. Örneğin og:image etiketi üzerinden ilerleyelim. Genellikle og:image etiketi ile ilerlemek yeterli olacaktır fakat bazı durumlarda içeriğinizin önizlemesi istediğiniz gibi görünmeyebilir. Bunun için ek meta etiketlerine ihtiyaç duyabilirsiniz. Örneğin görüntünüzün yükseklik ve genişlik bilgisini ayarlamak isteyebilirsiniz.

Aşağıda og:image için bazı meta etiketlerini ve açıklamalarını görebilirsiniz.

* **“og:image:url”**: og:image ile aynıdır. Görüntünün URL’sini ifade eder.

* **“og:image:secure_url”**: Web sayfası için [HTTPS](https://tr.wikipedia.org/wiki/HTTPS) gerekiyorsa kullanılabilecek alternatif URL’yi temsil eder.

* **“og:image:type”**: Görüntü için [medya türü](https://en.wikipedia.org/wiki/Media_type) bilgisini ifade eder.

* “**og:image:width”**: Görüntünün genişlik bilgisini piksel olarak ifade eder.

* “**og:image:height”**: Görüntünün yükseklik bilgisini piksel olarak ifade eder.

* “**og: image:alt”**: Görüntünün içeriği ile ilgili açıklamayı ifade eder.

![og:image meta etiketlerinin kullanımı ([Ekran görüntüsünün kaynağı](https://ogp.me/#structured))](https://cdn-images-1.medium.com/max/2000/1*yPuPpXyfBN4HQA3Vm4wpMg.png)

### Open Graph Etiketlerini Test Etmek

Open Graph meta etiketlerinizi ekledikten sonra içeriğinizin sosyal medya sitelerinde nasıl göründüğünü test edebilirsiniz. Bu sayede meta etiketlerinizde hata ayıklama işlemi çok daha kolay olacaktır.

![Twitter kart önizleme örneği](https://cdn-images-1.medium.com/max/2198/1*1o6oBbJp2j2aQ0tXJHK5Ig.png)

Facebook ve Twitter için test linkleri aşağıdadır:

Facebook: [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)
Twitter: [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

### Kaynaklar

* [https://ogp.me/](https://ogp.me/)

* [https://en.wikipedia.org/wiki/Social_graph](https://en.wikipedia.org/wiki/Social_graph)

* [https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol](https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol)

* [https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/#:~:text=Open%20Graph%20is%20an%20internet,the%20duration%20of%20a%20video](https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/#:~:text=Open%20Graph%20is%20an%20internet,the%20duration%20of%20a%20video).

* [https://en.wikipedia.org/wiki/Social_graph#/media/File:Sna_large.png](https://en.wikipedia.org/wiki/Social_graph#/media/File:Sna_large.png)

* [https://ogp.me/#structured](https://ogp.me/#structured)

* [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)

* [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

* [https://en.wikipedia.org/wiki/Media_type](https://en.wikipedia.org/wiki/Media_type)

* [https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup)