Webflow tasarımcıları için Open Graph & Twitter Kart Kontrolü

Webflow tasarımcıları neden buna ihtiyaç duyar?

Müşterinin sitesini Webflow'da bitirdiniz, linki Slack'e yapıştırdınız ve önizleme çıplak bir URL olarak düştü. Webflow'da Open Graph ayarları sayfa bazında, CMS koleksiyonlarında ise alanlara bağlı olduğu için yanlış eşleşen tek bir alan yüzlerce öğeyi görselsiz bırakabilir. Üstelik webflow.io hazırlık adresi dizine girerse canlı sitenin kopyası gibi davranabilir; robots.txt ile engellemek de Google'da zaten bulunan sayfaları kaldırmaz. Schema işaretleme için yerleşik bir özellik olmaması gibi, alttaki koda erişimin sınırlı olması da sorunu görmeyi zorlaştırır; en güvenilir yol, yayındaki sayfanın gerçekte ne gönderdiğine bakmaktır.

Open Graph & Twitter Kart Kontrolü yayınlanmış tek bir sayfanın og: ve twitter: etiketlerini sunucunun gönderdiği haliyle okur ve Open Graph Tags ile Twitter Card Tags tablolarında listeler. Eksik her etiket uyarı rozetiyle ve missing yazısıyla görünür. Yanında SeoMods'un bu etiketlerden çizdiği bir Social Preview kartı çıkar. Böylece lansmandan ya da müşteriye teslimden önce hangi alanın boş kaldığını dakikalar içinde görürsünüz. Tablodaki eksik satırların çoğu, Webflow'da düzeltmeniz gereken somut bir ayara, CMS alanına ya da özel koda karşılık gelir. Sonuç yalnızca yayınlanmış adres için geçerlidir; Designer'daki taslak durumu okunmaz.

Webflow tasarımcıları için rehber

Önce hangi URL'yi yapıştırmalı

Koleksiyon şablon sayfasının kendi başına bir adresi yoktur; yapıştıracağınız şey yayınlanmış bir öğenin adresi olmalı, örneğin siteadi.com/blog/webflow-seo-kontrol-listesi. Önce Designer'da Pages panelinden koleksiyon sayfasının ayarlarını açın ve Open Graph Settings bölümünde Open Graph Image alanının bir CMS alanına bağlı olduğunu görün. Sonra siteyi Publish edin ve o öğenin canlı adresini araca verin. Araç JavaScript çalıştırmaz, sayfayı sunucunun gönderdiği haliyle okur; bu yüzden Designer'da gördüğünüz değil, yayındaki durum esastır. Aynı işi iki öğe için yapın: biri görseli dolu, diğeri görseli boş bırakılmış olsun. İki sonuç, boş bırakılan alanın etiketi nasıl etkilediğini gösterir. Zaman ayırabilirseniz koleksiyondaki en eski öğeyi de deneyin; eski kayıtlar çoğunlukla sonradan eklenen alanları taşımaz. Sonuç, sayfanın dizine girdiğini ya da tarandığını göstermez.

Tabloyu nasıl okumalı

Open Graph Tags tablosunda og:title, og:description, og:image, og:url, og:type ve og:site_name satırlarını, Twitter Card Tags tablosunda twitter:card, twitter:title, twitter:description, twitter:image ve twitter:site satırlarını görürsünüz. Eksik satırlar uyarı rozeti ve missing ile işaretlenir. Önce og:image değerine bakın: değeri kopyalayıp tarayıcıda açın ve görselin gerçekten yüklendiğini doğrulayın; çünkü araç dosyayı indirmez, boyutunu ölçmez ve adresin 200 döndüğünü sınamaz. Ardından og:url satırının canlı alan adınızı gösterdiğinden emin olun; webflow.io yazıyorsa kart hazırlık adresine işaret ediyordur. Social Preview kartı bu etiketlerden çizilmiş bir yaklaşımdır, Facebook, LinkedIn ve X'in birebir yerleşimi değildir. Araç puan vermez ve etiketleri sayfa başlığı ya da H1 ile karşılaştırmaz.

Hangi sırayla düzeltmeli

Önce görseli düzeltin: CMS öğesinde görsel alanını doldurun ya da Open Graph Image'ı sabit bir yedek görsele çevirin. Ardından başlık ve açıklamayı SEO Settings ile uyumlu olacak şekilde bağlayın, değişiklikleri Publish edin ve aracı aynı URL ile yeniden çalıştırın. X için twitter:card satırı hâlâ missing ise sayfa ya da şablon ayarlarındaki Custom Code alanına ilgili meta etiketini ekleyip bir kez daha yayınlayın. Tablo düzelse bile Facebook ve LinkedIn eski önizlemeyi önbellekte tutabilir; Sharing Debugger ve Post Inspector ile yenilemeniz gerekir, bu araç önbellek temizlemez. Son olarak webflow.io adresinde de aynı kontrolü yapın, ama o alan adının dizine girip girmediğini ayrıca Site settings üzerinden inceleyin; bu, aracın değil Webflow ayarlarının işidir.

Örnek senaryolar

Sık yapılan hatalar

• Şablon sayfasını test etmek. Koleksiyon şablonunun kendi adresi olmadığı için sonuç vermez ya da yanıltır. Her zaman yayınlanmış gerçek bir öğenin URL'sini yapıştırın.
• Yayınlamadan sonuç beklemek. Designer'da ya da önizlemede yaptığınız değişiklik, siteyi Publish edene kadar canlı HTML'ye yansımaz. Araç da yalnızca yayındaki sayfayı okur.
• Tek bir öğeye bakıp geçmek. Görseli dolu bir öğede her şey düzgün görünür, boş bırakılmış bir öğede ise etiket kaybolabilir. En az iki farklı öğeyi deneyin.
• Tablo düzeldi diye paylaşımı beklemek. Facebook ve LinkedIn eski önizlemeyi önbellekte tutabilir. Kendi Sharing Debugger ve Post Inspector araçlarıyla yenilemeden eski kart görünmeye devam edebilir.
• Görsel yüklendi sanmak. Araç og:image adresini okur ama dosyayı indirmez ve açılıp açılmadığını sınamaz. Değeri tarayıcıda kendiniz açıp doğrulayın.

Sık sorulan sorular

Webflow CMS koleksiyon sayfalarında og:image neden boş görünüyor?

Çoğunlukla koleksiyon sayfasının Open Graph Image alanı hiçbir CMS alanına bağlanmamıştır ya da bağlı alan o öğede boştur. Yayınlanmış bir öğenin adresini araca yapıştırın ve Open Graph Tags tablosunda og:image satırına bakın; missing yazıyorsa etiket sayfaya hiç yazılmamıştır. Değer varsa onu tarayıcıda açıp dosyanın yüklendiğini doğrulayın, çünkü araç görselin açılıp açılmadığını sınamaz. Boş alanı doldurun veya sabit bir yedek görsel tanımlayın, ardından siteyi yeniden yayınlayın. Aynı kontrolü görseli dolu ikinci bir öğede de yapın; fark, sorunun şablonda mı içerikte mi olduğunu gösterir.

Webflow SEO kontrol listesine Open Graph kontrolü de girmeli mi?

Evet, ama yeri lansman öncesi kalite kontroldür. Webflow SEO listesindeki başlık, açıklama ve canonical adımları arama sonuçlarını ilgilendirir; Open Graph etiketleri ise yalnızca link paylaşıldığında görünen kartı belirler. Araç sayfanın og: ve twitter: etiketlerini listeler, fakat sıralama, dizine girme ya da hız hakkında bir şey söylemez. Kontrol listenize, her koleksiyondan bir yayınlanmış öğe adresini bu tabloda denemeyi tek satır olarak ekleyin. Böylece teslim notunuzda sosyal paylaşım tarafı da kayıtlı olur; müşteri ilk linki paylaştığında neyle karşılaşacağını bilirsiniz.

webflow.io adresini kontrol edebilir miyim, dizine girmesi engellenir mi?

Hazırlık adresindeki yayınlanmış bir sayfanın etiketlerini okutabilirsiniz; araç herkese açık her URL'yi aynı şekilde çeker. Ancak dizine girme konusunda bir şey söylemez ve robots.txt ya da dizin ayarını denetlemez. Hazırlık alan adının dizine girmesini kapatmak için Webflow'da Site settings altındaki SEO sekmesinde Disable Webflow subdomain indexing seçeneğine bakın. robots.txt ile engellemek Google'da zaten bulunan sayfaları kaldırmaz; bu yüzden robots.txt test aracıyla ayrıca doğrulayın ve sonucu ayrı bir kayıt olarak tutun.

Webflow'da schema markup ekledim, bu kontrol onu da doğrular mı?

Hayır. Webflow'da yerleşik bir schema özelliği olmadığı için JSON-LD'yi sayfa veya şablon ayarlarındaki Custom Code alanına elle eklersiniz; bu araç ise yalnızca og: ve twitter: etiketlerini okur. Örneğin Article JSON-LD'si doğru çalışırken og:image boş olabilir, tersi de mümkündür. Schema doğrulaması için ayrı bir şema denetleyicisi kullanın. İki kontrolü aynı gün yapmak yararlıdır, çünkü ikisi de sayfanın head bölümünde yer alır ve biri düzelirken diğeri gözden kaçabilir.

Araç Open Graph görselinin boyutunu ve oranını ölçüyor mu?

Hayır, görseli indirmez; genişlik, yükseklik, dosya boyutu, oran ya da biçim ölçümü yapmaz. Yalnızca og:image ve twitter:image değerini okuyup kartta göstermeye çalışır. Boyutu Webflow'daki Assets panelinden dosya bilgisine bakarak ya da görseli tarayıcıda açarak kontrol edin. Görsel CMS alanından geliyorsa yüklenen tüm dosyaların aynı oranda olmasına dikkat edin; yaygın öneri olan 1200 x 630 piksel gibi bir ölçüyü kendiniz sınamalısınız, çünkü oranlar farklıysa kartlar farklı kırpılır.

Kaynak: Webflow'un varsayılan webflow.io hazırlık alan adının dizine girerse kopya içerik sorunu yaratabildiğini ve robots.txt'in taramayı denetleyip dizinlemeyi denetlemediğini Webflow SEO rehberi: webflow.io alan adı ve dizinleme sayfasında okuyabilirsiniz.