Open Graph Denetleyici
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
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
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
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
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
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_imageiç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:titlekolayca yakalanır. - Göreli görüntü yolu.
og:imagemutlak bir URL olmalıdır;/img/card.jpggibi 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
Meta Açıklaması Uzunluk Denetleyicisi
Meta açıklamayı karakter ve tahmini piksel cinsinden ölçün, editoryal ölçütlerle karşılaştırın ve masaüstü ile mobil düzen örneklerini inceleyin.
HTTP Güvenlik Başlık Kontrolcüsü
HTTP yanıt başlıklarını yapıştırın; HSTS, CSP, clickjacking, MIME, referrer ve cross-origin ilkelerini tarayıcıda inceleyin.
Dış Bağlantı Çıkarıcı
Ham HTML yapıştırın, isteğe bağlı olarak bir temel URL belirleyin ve kod içindeki tüm harici http/https bağlantılarının temiz, kopyasız bir listesini bağlantı denetimleri ve SEO incelemeleri için alın.
FAQ Şeması Oluşturucu
Soru-cevap çiftlerinden FAQPage JSON-LD işaretlemesi oluşturun ve sayfanızı Google'ın zengin sonuçlarına ve yanıt kutusuna aday hâle getirin.
Google SERP Simülatörü
Mobil ve masaüstü için karakter sınırlarıyla yaklaşık bir Google tarzı snippet inceleyin. Taslağınız bu tarayıcı oturumunda kalır.
XML Site Haritası Doğrulayıcı
Site haritası XML kodunu tarayıcıda ayrıştırma hataları, eksik konumlar, yinelenen URL'ler ve yaygın alan değerleri açısından kontrol edin.
Araç diğer dillerde mevcuttur
- فاحص Open Graph [AR]
- Vérificateur Open Graph [FR]
- Open Graph-kontroll [SV]
- Open Graph Checker [DE]
- ตัวตรวจสอบ Open Graph [TH]
- Pemeriksa Open Graph [ID]
- Open Graph チェッカー [JA]
- Open Graph 체커 [KO]
- Open Graph Checker [NL]
- Trình kiểm tra Open Graph [VI]
- Verificador de Open Graph [ES]
- Walidator Open Graph [PL]
- Validador de Open Graph [PT]
- Open Graph Checker [EN]
- Verifica Open Graph [IT]
- Проверка тегов Open Graph [RU]
- Open Graph 检查器 [ZH]