Open Graph Denetleyici

Sonraki

Sayfanızın HTML’sini yapıştırın (yalnızca <head> yeterlidir) ve bu denetleyici bulduğu her og: ve twitter: meta etiketini ayrıştırsın, ardından altı temel etiketten hangilerinin bulunduğunu, hangilerinin eksik olduğunu ve her birinin tam değerini bildirsin. Canlı bir URL’yi getirmek yerine yapıştırdığınız işaretlemeyi okuduğu için, hiçbir çevrimiçi tarayıcının erişemediği hazırlık sunucularında, localhost’ta ve oturum açma arkasındaki sayfalarda da çalışır.

Denetleyici etiketlerinizi nasıl okur

  1. 1

    Sayfa kaynağını açın

    Sosyal tarayıcıların gerçekte aldığı ham HTML'yi görmek için Ctrl+U (macOS'ta Cmd+Option+U) tuşlarına basın.

  2. 2

    Head bölümünü kopyalayın

    `<head>` etiketinden `</head>` etiketine kadar seçin. `<body>` gerekli değildir, ancak tüm sayfayı yapıştırmanın bir zararı da yoktur.

  3. 3

    Denetleyiciye yapıştırın

    Her `<meta>` etiketi siz yazdıkça ayrıştırılır. Hiçbir URL getirilmez: yalnızca yapıştırdığınız işaretleme incelenir.

  4. 4

    Kontrol listesini okuyun

    Altı denetim yeşile ya da kırmızıya döner: og:title, og:description, og:type, og:url, og:image ve twitter:card.

  5. 5

    Bulunan değerleri inceleyin

    Her og: ve twitter: etiketi içeriğiyle listelenir, böylece yazım hataları, boş değerler ve göreli görüntü yolları hemen göze çarpar.

Denetleyicinin aradığı Open Graph etiketleri

Etiket Amaç Kontrol listesinde mi?
og:title Kart başlığı Evet, zorunlu
og:description Kart alt başlığı Evet, zorunlu
og:type website, article, video vb. Evet, zorunlu
og:url Kanonik URL Evet, zorunlu
og:image Önizleme görüntüsü URL’si Evet, zorunlu
og:site_name Başlığın üstündeki marka satırı Varsa listelenir
og:locale en_US, es_ES vb. Varsa listelenir

İşaretlemenizdeki diğer her og: etiketi de, kontrol listesinin parçası olmasa bile listelenir.

Twitter Card etiketleri

X (Twitter), kendi etiketleri yoksa Open Graph’a geri döner, bu yüzden kontrol listesinde yalnızca twitter:card bulunur. Denetleyici diğerlerini bulduğunda hepsi listelenir.

Etiket Amaç
twitter:card summary, summary_large_image vb.
twitter:site Yayımlayan hesabın @kullanıcı adı
twitter:creator Yazarın @kullanıcı adı
twitter:title og:title değerini geçersiz kılar
twitter:description og:description değerini geçersiz kılar
twitter:image og:image değerini geçersiz kılar

Her yerde çalışan görüntü belirtimi

Denetleyici og:image etiketinin bildirildiğini doğrular, ancak dosyayı asla indirmez, bu yüzden bunları elle doğrulayın:

  • Boyutlar: 1200 x 630 px (Facebook, LinkedIn, büyük Twitter kartları).
  • En boy oranı: summary_large_image için 1.91:1.
  • Dosya boyutu: 5 MB altında, tarayıcı zaman aşımına uğramasın diye ideal olarak 1 MB altında.
  • Format: JPG veya PNG. WebP ve AVIF hâlâ tutarsız biçimde destekleniyor.
  • Mutlak URL: her zaman tam https://... adresi, asla protokole göreli ya da köke göreli bir yol değil.

Raporun ortaya çıkardığı yaygın sorunlar

  • og:image yok. En sık görülen tek hata. Bir görüntü olmadan kart, biçimlendirilmemiş mavi bir bağlantıya dönüşür.
  • Bulunan ama boş bir etiket. Denetleyici her değeri yazdırdığı için, arkasında hiçbir şey olmayan bir og:title kolayca yakalanır.
  • Göreli görüntü yolu. og:image mutlak bir URL olmalıdır; /img/card.jpg gibi bir yol taramayı bozar.
  • og:url uyumsuzluğu. og:url, gerçek kanonikten farklı olduğunda platformlar sayfayı taramayı reddedebilir.
  • JavaScript ile eklenen etiketler. view-source içinde hiç görünmedikleri için burada da görünmezler ve çoğu tarayıcı onları görmez.
  • Facebook’ta eski bir kart. Bir işaretleme sorunu değildir: Facebook taramalarını önbelleğe alır. Sharing Debugger üzerinden zorla yenileyin.

Sık Sorulan Sorular

Çünkü işaretlemeyi yapıştırmak, bir sosyal tarayıcının ham yanıtta tam olarak ne gördüğünü gösterir ve hiçbir tarayıcının erişemediği sayfalarda da çalışır: hazırlık sunucuları, localhost, intranetler ve oturum açma arkasındaki her şey. Sayfanızı açın, Ctrl+U tuşlarına basın, kaynağı kopyalayın, buraya yapıştırın.

Kesinlikle değil. X, twitter: etiketleri eksik olduğunda Open Graph etiketlerine geri döner, bu yüzden kontrol listesinde yalnızca twitter:card bulunur. Diğerlerini yalnızca X’te tüm platformlardakinden farklı bir başlık, açıklama veya görüntü istediğinizde ekleyin.

Denetçi, JavaScript çalıştıktan sonraki DOM’u gösterir; sosyal tarayıcılar ise ham HTML yanıtını okur. Denetçiyi değil, view-source (Ctrl+U) kaynağını kullanın ve onu yapıştırın. Etiket yalnızca DOM’da varsa, tarayıcıların görebilmesi için sunucu tarafı işleme veya bir önişleme hizmeti ekleyin.

1200 x 630 px, JPG veya PNG. Büyük Facebook ve LinkedIn kartları için önerilen boyuttur, X tarafından kabul edilir ve Slack, Discord ile bağlantı açan diğer uygulamalarda temiz biçimde ölçeklenir. Denetleyici og:image etiketinin bildirildiğini doğrular ama dosyayı açmaz, bu yüzden boyutları kendiniz kontrol edin.

Facebook tarama sonuçlarını 30 güne kadar önbelleğe alır. URL’yi developers.facebook.com/tools/debug adresindeki Sharing Debugger’a yapıştırın ve önbelleği geçersiz kılmak için yeniden tarayın.

İlgili Araçlar

Araç diğer dillerde mevcuttur