Web bileşenleri ve Shadow DOM, geliştiricilerin kendi stillerini ve mantıklarını koruyan modüler ve kapsüllenmiş arayüz elementleri oluşturmasına olanak tanır. Bu elementlerin arama motorları için görünür kalmasını sağlamak amacıyla, Googlebot’un oluşturma (rendering) sürecinde dahili içeriğe erişmesine izin verecek bir şekilde uygulamalısınız. Açık bir gölge kökü (shadow root) kullanmak ve Declarative Shadow DOM’u benimsemek, özel elementlerinizin tamamen dizine eklenmesini ve arama sonuçlarında doğru şekilde sıralanmasını sağlamanın en etkili yollarıdır.
Googlebot bir Shadow DOM içindeki içeriği nasıl görür?
Googlebot, web sayfalarını işlemek için Chrome oluşturma motorunun modern bir sürümünü kullanır. Bu, teorik olarak normal bir kullanıcının tarayıcıda gördüğü her şeyi görebileceği anlamına gelir. Tarayıcı (crawler) bir web bileşeniyle karşılaştığında, gölge ağacını (shadow tree) oluşturmak için gereken JavaScript’i çalıştırır. Ancak bu süreç, gölge kökünün erişilebilir olmasına bağlıdır. Gölge kökü gizliyse veya tetiklenmek için karmaşık kullanıcı etkileşimleri gerektiriyorsa, tarayıcı içeriği tamamen kaçırabilir. İşte bu yüzden bileşenlerinizin teknik kurulumu, arama görünürlüğünüz için kilit bir faktördür.
JavaScript ağırlıklı siteler için oluşturma süreci iki dalga halinde gerçekleşir. İlk olarak tarayıcı, başlangıçtaki HTML’e bakar. Daha sonra kaynaklar müsait olduğunda sayfanın tam bir oluşturmasını gerçekleştirir. Web bileşenleri genellikle bu ikinci dalgaya bağlı olduğundan, komut dosyası yürütmedeki herhangi bir gecikme veya hata, dizinde boşluklara yol açabilir. Bu boşluklardan kaçınmak için içeriği oluşturma döngüsünde mümkün olduğunca erken erişilebilir hale getirmeyi hedeflemelisiniz.
SEO için neden kapalı Shadow Roots’tan kaçınmalısınız?
JavaScript kullanarak bir gölge kökü oluşturduğunuzda, modu açık veya kapalı olarak ayarlama seçeneğine sahip olursunuz. Kapalı bir gölge kökü, arama motoru komut dosyaları dahil olmak üzere dış dünyanın dahili DOM ağacına erişmesini engeller. SEO perspektifinden bakıldığında bu önemli bir risktir. Bileşenin içindeki içerik shadowRoot özelliği aracılığıyla erişilemez durumdaysa, Googlebot bu bileşende yer alan metni, bağlantıları veya görselleri ayrıştıramayabilir.
Çoğu geliştirici varsayılan olarak açık modu seçer çünkü bu, diğer komut dosyalarıyla daha kolay hata ayıklama (debugging) ve entegrasyon sağlar. Arama optimizasyonu için açık mod bir zorunluluktur. Oluşturulan içeriğin, JavaScript çalışmayı bitirdikten sonra Googlebot’un analiz ettiği erişilebilir ağacın bir parçası olmasını sağlar. Bir bileşenin içinde ürün açıklamaları veya navigasyon bağlantıları gibi kritik içeriğiniz varsa, gölge kökünü açık tutmak, sayfanızın alakalarına katkıda bulunmalarını sağlamanın tek yoludur.
Dinamik oluşturma (dynamic rendering), arama motorlarında JavaScript tarafından oluşturulan içerik sorunları için uzun vadeli bir çözüm değil, geçici bir yama idi.
Google Search Central
Arama görünürlüğü için Declarative Shadow DOM nasıl uygulanır?
Declarative Shadow DOM (DSD), gölge ağacını doğrudan HTML kaynak kodunda tanımlamanıza olanak tanıyan bir özelliktir. Bir JavaScript dosyasının yüklenmesini ve gölge kökünü eklemek için bir fonksiyon çağırmasını beklemek yerine, özel bir niteliğe (attribute) sahip bir şablon (template) etiketi kullanırsınız. Bu SEO için devasa bir gelişmedir çünkü içerik, tarayıcıya gönderilen HTML’in ilk baytında mevcuttur. Bu özel bileşen için ikinci indeksleme dalgasına olan bağımlılığı ortadan kaldırır.
shadowrootmode niteliği açık (open) olarak ayarlanmış bir template etiketi kullanarak, hem tarayıcı hem de arama motoru için net bir yol haritası sağlarsınız. Bu yaklaşım sunucu taraflı oluşturma (SSR) ile mükemmel bir şekilde çalışır. Sunucunuz tüm gölge ağacını önceden oluşturabilir ve istemciye gönderebilir. Bu, JavaScript yüklenemese veya engellense bile içeriğin görünür kalmasını sağlar. Bu yöntem, ana düzenleri için özel elementlere güvenen siteler için sağlam bir temel oluşturur.
- Tüm kritik UI bileşenleri için kullanın.
- Sunucu taraflı oluşturma motorunun deklaratif gölge ağaçlarının dışarı aktarılmasını desteklediğinden emin olun.
- Googlebot bunu yerel olarak desteklese de, DSD’yi desteklemeyen eski tarayıcılar için bir polyfill ekleyin.
- Yalnızca istemci tarafında oluşturulan bileşenlerin içine birincil navigasyon bağlantıları yerleştirmekten kaçının.
- Gölge içeriğinin oluşturulan HTML’de görünüp görünmediğini görmek için URL İnceleme aracını kullanarak çıktıyı test edin.
Alien Road Web Bileşenleri ve Shadow DOM’u Nasıl Uygular
Alien Road olarak, modern frontend framework’leri kullanan müşterilerimizin arama sıralamalarını kaybetmemelerini sağlamak için belirli bir süreç izliyoruz. Her özel etiketi belirlemek için belge yapısını denetleyerek (audit) başlıyoruz. Örneğin, bir Shopify mağazası ürün ızgarası için özel bir bileşen kullanıyorsa, ürün başlıklarının ve fiyatlarının ilk HTML akışında görünür olup olmadığını doğrularız. Ekibimiz, sayfa kullanıcıya sunulmadan önce bu bileşenleri Declarative Shadow DOM’a dönüştüren sunucu taraflı oluşturma sarmalayıcıları (wrappers) uygular.
Tipik bir proje sırasında, oluşturulan sayfanın tarayıcıya nasıl göründüğünü izlemek için Google Search Console’u da kullanıyoruz. Sunucuda önceden oluşturulduklarını (pre-rendered) garanti edemediğimiz sürece, yüksek değerli anahtar kelimeler içeren elementler için gölge kökleri kullanmaktan kaçınıyoruz. Ayrıca bu bileşenlerin başlatılmasının ana içeriğin görünmesini geciktirmediğinden emin olmak için En Büyük İçerikli Boyama (LCP) izlemesi kuruyoruz. Bu ayrıntılı yaklaşım, en son web teknolojilerini kullanırken güçlü bir arama varlığını korumaya yardımcı olur.
Web Bileşenleri Core Web Vitals’ı Etkileyebilir mi?
Web bileşenleri, doğru şekilde ele alınmadıkları takdirde performans metrikleri üzerinde doğrudan bir etkiye sahip olabilir. Birçok bileşen başlatılmak için JavaScript gerektirdiğinden, tarayıcı sayfa yüklenmeye başladıktan sonra onlar için yer ayırmak zorunda kalırsa düzen kaymalarına (layout shifts) neden olabilir. Bu, Kümülatif Düzen Kayması (CLS) puanını etkiler. Bunu önlemek için, komut dosyaları çalışmadan önce özel elementlerinizin boyutlarını CSS’inizde tanımlamalısınız. Bu, bileşenler hidrate olurken sayfa düzeninin sabit kalmasını sağlar.
Bir diğer faktör ise En Büyük İçerikli Boyama’dır (Largest Contentful Paint). Ana kahraman görseliniz veya başlığınız, büyük bir JavaScript paketinin yüklenmesini bekleyen bir web bileşeninin içine sarılmışsa, LCP puanınız zarar görür. Declarative Shadow DOM kullanarak, tarayıcının HTML’i ayrıştırır ayrıştırmaz bileşeni oluşturmaya başlamasına izin verirsiniz, bu da bu performans metriklerini önemli ölçüde iyileştirir. Daha hızlı yükleme süreleri daha iyi kullanıcı deneyimlerine yol açar ve arama sıralamalarınızı olumlu yönde etkileyebilir.
Shadow DOM’da tembel yüklenen (lazy-loaded) içeriği yönetme
Birçok geliştirici bant genişliğinden tasarruf etmek için web bileşenleri içinde tembel yükleme (lazy loading) kullanır. Bu performans için iyi bir uygulama olsa da, uygulama kaydırma gibi bir kullanıcı eylemi gerektiriyorsa içeriği Google’dan gizleyebilir. Googlebot kaydırma yapmaz. Bileşeniniz verilerini yalnızca bir kaydırma olayı aracılığıyla görünüm alanına (viewport) girdiğinde yüklerse, bu veriler asla dizine eklenmeyecektir. İçeriğin herhangi bir etkileşim olmadan tarayıcı için erişilebilir olduğundan emin olmalısınız.
Bunu ele almanın en iyi yolu IntersectionObserver API’sini kullanmaktır. Bu API, bir elementin görünüm alanında ne zaman görünür olduğunu tespit etmenize ve içeriği buna göre yüklemenize olanak tanır. Arama motorları için, algılama mantığının oluşturma aşamasında doğru şekilde tetiklendiğinden emin olmalısınız. Ayrıca bir noscript etiketinde yedek içerik sağlamalı veya bileşenin sunucu tarafında tamamen önceden oluşturulabileceğinden emin olmalısınız.
- Bileşenlerin içindeki tüm görsellerin uygun alt metne sahip olduğunu ve keşfedilebilir olduğunu doğrulayın.
- Tembel yükleme için kaydırma olayı dinleyicileri yerine IntersectionObserver API’sini kullanın.
- Gölge ağaçlarındaki bağlantıların href niteliklerine sahip standart çapa (anchor) etiketleri kullandığından emin olun.
- Hiçbir kritik içeriğin, Googlebot’un gerçekleştiremeyeceği bir ‘genişletmek için tıkla’ etkileşiminin arkasında gizli olmadığını kontrol edin.
- Robots.txt tarafından engellenmediklerinden emin olmak için JavaScript dosyalarınızın taranma hızını (crawl rate) izleyin.
SEO dostu bileşenler için adım adım kontrol listesi
Web bileşenleriyle arama dostu bir site oluşturmak, modern geliştirme pratikleri ile tarayıcıların teknik sınırlamaları arasında bir denge gerektirir. Görünür olduğunu kanıtlayana kadar her özel elementi potansiyel bir indeksleme engeli olarak ele almalısınız. Yapılandırılmış bir kontrol listesini takip ederek, bir site taşınması veya büyük bir tasarım güncellemesi sırasında organik trafik kaybetme riskini en aza indirebilirsiniz. En iyi sonuçları elde etmek için başlangıçtaki HTML teslimine ve son oluşturulan duruma odaklanın.
Bileşenlerinizi JavaScript’in devre dışı olduğu kısıtlı bir ortamda test ederek başlayın. Sayfanın ana mesajı kaybolursa, SSR ile ele alınması gereken bir sorununuz demektir. Ardından, Googlebot oluşturma ortamını simüle eden araçları kullanarak daha gelişmiş testlere geçin. Bu ikili kontrol, sitenizin hem başlangıç hem de oluşturulan sürümlerinin arama için optimize edilmesini sağlar.
Bu hafta nereden başlamalı
İlk göreviniz mevcut özel elementlerinizi denetlemektir. Web sitenizi açın ve DOM’u incelemek için tarayıcının geliştirici araçlarını kullanın. Herhangi bir shadow-root (closed) işaretçisi arayın. Bulursanız, hemen açık moda geçirmek için geliştirme ekibinizle çalışın. Bu, içeriğinizin ne kadarının dizine eklendiği üzerinde doğrudan bir etkiye sahip olabilecek hızlı bir düzeltmedir.
Ardından sunucu taraflı oluşturma stratejinizi değerlendirin. Lit veya Stencil gibi bir framework kullanıyorsanız, Declarative Shadow DOM desteği için belgelerini kontrol edin. En önemli sayfalarınız için DSD’yi uygulamak, hem kullanıcılar hem de arama motorları için daha güvenilir bir deneyim sağlayacaktır. Son olarak, ana URL’lerinizde canlı bir test çalıştırmak ve bileşenlerinizdeki tüm metnin oluşturulan HTML sekmesinde görünür olduğunu doğrulamak için Google Search Console’u kullanın.