DEV Community

Muhammed Erdinç
Muhammed Erdinç

Posted on

Open Graph Protokolü Nedir?

Open Graph Protokolü, URL’lerin sosyal medyada paylaşıldığında nasıl görüntüleceğini kontrol eden ve Web sayfalarındaki SEO meta verilerinin standartlaştırılması için Facebook 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 ve 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.

İç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.

Twitter ve LinkedIn’de paylaşılan sitenin

bölümüne baktığımızda Open Graph meta etiketlerini görebiliriz.

Yukarıdaki örnek paylaşımlarda yer alan sitenin meta etiketleri

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

    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

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 gerekiyorsa kullanılabilecek alternatif URL’yi temsil eder.

  • “og:image:type”: Görüntü için medya türü 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))

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

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

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

Kaynaklar

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay