CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Open Graph

HTML kursu · İleri seviye · Ders 25/56

og:title, og:image, og:type ile sosyal paylaşım meta verisi kurarsın.

Open Graph nedir?

Bir bağlantıyı sosyal medyada paylaştığında bir kart görürsün: başlık, açıklama ve büyük görsel. Bu kart Open Graph protokolüyle kurulur.

Open Graph etiketleri <meta property="og:..."> biçimindedir. Burada property özniteliği kullanılır, name değil. En temel üç etiket: og:title, og:image ve og:type.

og:title ve og:image

og:title paylaşım kartının başlığıdır; sayfa başlığıyla aynı veya farklı olabilir. og:image kartta çıkan görselin URL'sidir.

og:image için mutlak URL kullan: https://site.com/kapak.jpg. Görsel genelde 1200x630 piksel olmalı; daha küçük olunca kart düzgün görünmez. Görselin https üzerinde olmasına dikkat et. Büyük ve net bir görsel, tıklanma oranını yükseltir.

og:type ve og:url

og:type sayfanın türünü belirtir. Bir blog yazısı için article, bir ürün sayfası için product, ana sayfa için website kullanılır.

og:url sayfanın asıl URL'sidir. Birden fazla adresten aynı içerik ulaşılıyorsa og:url arama motorlarına ve sosyal platformlara asıl kaynağı söyler.

Uygulama Blog yazısı için OG etiketleri ekle

Head içine bir blog yazısı için dört Open Graph etiketi ekle: <meta property="og:title" content="...">, <meta property="og:image" content="https://...">, <meta property="og:type" content="article"> ve <meta property="og:url" content="https://...">.

Örnek çözümü göster 
<head>
  <title>Köşe Yazısı</title>
  <meta property="og:title" content="Köşe Yazısı: Web Tasarımı">
  <meta property="og:image" content="https://ayseblog.com/kapak/tasarim.jpg">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://ayseblog.com/yazi/web-tasarimi">
</head>

Kendini test et

  1. Open Graph etiketleri hangi özniteliği kullanır?

    <meta ?="og:title" content="...">
    • name
    • id
    • property
    • class
    Cevabı göster

    property — Doğru. Open Graph etiketleri property özniteliğiyle yazılır.

  2. OG özelliğini rolüyle eşleştir

    og:title
    Paylaşım başlığı
    og:image
    Kapak görseli
    og:type
    İçerik türü
    og:url
    Sayfa URL'si

  3. og:title etiketini tamamla

    <meta property="og:title" content="____">
    Cevabı göster 
    <meta property="og:title" content="Köşe Yazısı: Web Tasarımı">

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi