Muhtemelen geliştiricilerin DOM hakkında konuştuğunu duymuşsunuzdur. Belki DevTools'ta incelediniz veya Google Search Console'da referans olarak gördünüz.
Ama tam olarak nedir? Ve SEO'lar neden önemsemeli? Ne olduğuna, neden önemli olduğuna ve en iyi nasıl optimize edileceğine bir göz atalım.
Dom nedir?
. Belge Nesne Modeli(Dom), bir tarayıcının web sayfanızın canlı, bellek içi temsilidir. JavaScript gibi programların içeriğinizle etkileşime girmesine izin veren arayüz görevi görür.
DOM, aile ağacına benzer şekilde hiyerarşik bir ağaç olarak düzenlenmiştir:
- Belge:Bu ağacın köküdür.
- Bileşenler :Şunun gibi HTML etiketleri
</body>No mess 'all." ifadesinde kullanıldığında, "Her şeyi temizledim.& Lt; p gt;, ve<a>dallar (veya “düğümler ”) haline gelir. - İlişkileri:Elementlerin ebeveynleri, çocukları ve kardeşleri vardır.
Bu hiyerarşi, tarayıcının (ve arama motorlarının) içeriğinizin farklı bölümleri arasındaki ilişkiyi anlamasını sağladığı için kritik öneme sahiptir. Örneğin, uygun hiyerarşik düzen, tarayıcınızın belirli bir paragrafın belirli bir başlığa ait olduğunu anlamasını sağlar.
Dom nasıl denetlenir
DOM'un kendisi aslında bellekte saklanan bir JavaScript nesne yapısıdır, ancak tarayıcılar bunu size HTML'ye çok benzeyen bir biçimlendirme olarak gösterir.
DOM'un bu HTML gösterimini bir sayfaya sağ tıklayıpDenetle > ÖğelerBu tekniğin adıÖğelerPano. Aşağıdaki kırmızı kutuda özetledim:
içindeÖğelerdevTools içindeki panelde şunları yapabilirsiniz:
- Yapıyı keşfetmek için düğümleri genişletin ve daraltın.
- Öğeler panelinde bir PC'de Ctrl+F veya Mac'te Cmd+F kullanarak belirli öğeleri arayın.
- JavaScript tarafından hangi öğelerin eklendiğini veya değiştirildiğini görün (değiştirildiğinde genellikle kısa bir süre yanıp sönerler).
DevTools'un size Googlebot'un ne gördüğünü göstermeyeceğini unutmayın. Bu makalenin ilerleyen bölümlerinde bunun ne anlama geldiğine döneceğim.
DOM nasıl inşa edilir?
Dom'un neden genellikle HTML dosyanızdan farklı göründüğünü anlamak için öncelikle tarayıcının onu nasıl oluşturduğunu anlamanız gerekir. Bu, tarayıcınızın Dom ağacını oluşturmasıyla başlar.
Dom ağacının oluşturulması
Tarayıcınız bir sayfa istediğinde, sunucu bir HTML dosyasını geri gönderir. Tarayıcı bu yanıtı satır satır okur ve “belirteçlere” çevirir (</html>No mess 'all." ifadesinde kullanıldığında, "Her şeyi temizledim. </body>No mess 'all." ifadesinde kullanıldığında, "Her şeyi temizledim. <div>Sınıflar).
Bu tokenlar daha sonra sayfanın yapı taşları olarak işlev gören farklı "düğümlere" dönüştürülür. Tarayıcı, ağaç yapısını oluşturmak için bu düğümleri bir üst - alt hiyerarşide birbirine bağlar.
Süreci şu şekilde görselleştirebilirsiniz:
Tarayıcının aynı anda CSS için ağaç benzeri bir yapı oluşturduğunu bilmek önemlidir, CSS Nesne Modeli olarak bilinir (CSSOM), bu da JavaScript'e izin veriro CSS'yi dinamik olarak okuma ve değiştirme. Ancak SEO için CSSOM, DOM'dan çok daha az önemlidir.
JavaScript yürütme
JavaScript genellikle ağaç oluşturulurken yürütülür. Tarayıcı bir <script> etiketiyle karşılaşırsa (öznitelikleri ertele veya eşzamansızlaştırkomut dosyasının eşzamansız olarak yüklenmesine izin veren), inşaatı duraklatır, komut dosyasını çalıştırır ve ardından ağacı oluşturmayı bitirir.
Bu yürütme sırasında, komut dosyaları yeni içerik ekleyerek, düğümleri kaldırarak veya bağlantıları değiştirerek DOM'u değiştirebilir. Bu nedenle, içinde gördüğünüz HTMLKaynağı Göstergenellikle içinde gördüğünüzden farklı görünürÖğelerPanel
İşte ne demek istediğime bir örnek. Aşağıdaki düğmeye her tıkladığımda, kullanıcının gördüklerini güncelleyerek DOM'a yeni bir paragraf öğesi ekler.
HTML'niz başlangıç noktasıdır, eğer isterseniz bir taslaktır, ancak DOM tarayıcının ne olduğudur.derlemelerbu plandan.
DOM oluşturulduktan sonra, temeldeki HTML dosyasına hiç dokunmadan dinamik olarak değişebilir.
Daha çok araştırJavaScript SEO: Dinamik içerik nasıl taranabilir hale getirilir?
DOM SEO için neden önemlidir?
Google gibi modern arama motorları sayfaları birbaşsız tarayıcı (Chromium). Bu, yalnızca HTML yanıtını değil DOM'u değerlendirdikleri anlamına gelir.
Googlebot bir sayfayı taradığında önce HTML'yi ayrıştırır, ardından JavaScript'i yürütmek ve dizine ekleme amacıyla bir DOM anlık görüntüsü almak için Web Oluşturma Hizmetini kullanır.
Süreç şöyle görünüyor:
Ancak web siteniz için anlaşılması ve akılda tutulması gereken önemli sınırlamalar vardır:
- Googlebot bir insan gibi etkileşime girmiyor. DOM'u oluştururken,tıklanmıyor, fareyle üzerine gelme olaylarını yazın veya tetikleyin; böylece yalnızca kullanıcı etkileşiminden sonra görünen içerik görülmeyebilir.
- Diğer tarayıcılar JavaScript'i hiç oluşturamayabilir.Google'ın aksine, bazı arama motorları ve AI tarayıcılarıyalnızca ilk HTML yanıtını işleyin, JavaScript'e bağımlı içeriği görünmez hale getirir.
Yapay zekaya daha bağımlı hale gelen bir dünyaya baktığımızda, yapay zeka aracılarının yalnızca dizine eklemek için tarama yapmak yerine, kullanıcılar için görevleri tamamlamak üzere web siteleriyle giderek daha fazla etkileşime girmesi gerekecek.
Bu aracıların görevlerini tamamlamak için DOM'unuzda gezinmeleri, öğeleri tıklamaları, formları doldurmaları ve bilgi çıkarmaları gerekecek; bu da iyi yapılandırılmış, erişilebilir bir DOM'u her zamankinden daha kritik hale getirecek.
Google'ın gerçekte ne gördüğünü doğrulama
. URL inceleme aracıGoogle Search Console'da Google'ın, SEO terimlerinde "oluşturulan HTML" olarak da bilinen sayfanızın DOM'sini nasıl oluşturduğunu gösterir ve Googlebot'un karşılaşmış olabileceği sorunları vurgular.
Bu araç çok önemlidir çünkü yalnızca tarayıcınızın ne oluşturduğunu değil, Google'ın indekslediği sayfanın sürümünü de ortaya çıkarır. Google bunu göremezse dizine ekleyemez ve bu da SEO çalışmalarınızı etkileyebilir.
GSC'de buna tıklayarak erişebilirsiniz.URL denetimi, bir URL girme veTaranan Sayfayı Görüntüle.
Aşağıdaki kırmızıyla işaretlenmiş panel, Googlebot'un oluşturulan HTML sürümünü görüntüler.
Mülke erişiminiz yoksa Google'ın hizmetini de kullanabilirsiniz.Zengin Sonuçlar Testi, aynı şeyi herhangi bir web sayfası için yapmanıza olanak tanır.
Daha çok araştırGoogle Search Console URL Denetleme aracı: 7 pratik SEO kullanım örneği
Gölge DOM: Gelişmiş bir değerlendirme
. gölge DOMgeliştiricilerin DOM'un bölümlerini kapsüllemesine olanak tanıyan bir web standardıdır. Bunu, ana DOM'dan gizlenmiş, bir öğeye eklenmiş ayrı, yalıtılmış bir DOM ağacı olarak düşünün.
Gölge ağacı bir gölge köküyle başlar ve öğeler, hafif (normal) DOM'da olduğu gibi ona bağlanır. Şuna benziyor:
Bu neden var? Öncelikle stilleri, komut dosyalarını ve işaretlemeyi bağımsız tutmak için kullanılır. Burada tanımlanan stiller sayfanın geri kalanına taşamaz (veya tersi). Örneğin, bir sohbet widget'ı veya geri bildirim formu, görünümünün ana sitenin stillerinden etkilenmediğinden emin olmak için gölge DOM kullanabilir.
Pratikte nasıl göründüğünü göstermek için aşağıdaki örnek sayfamıza bir gölge DOM ekledim. HTML dosyasında yeni bir div var ve JavaScript daha sonra içinde metin bulunan bir div ekliyor.
Googlebot, sayfaları oluştururken hem gölge DOM'u hem de açık DOM'u düzleştirir ve gölge DOM'a, oluşturulduktan sonra diğer DOM içeriğiyle aynı şekilde davranır.
Aşağıda görebileceğiniz gibi, oluşturulan HTML'yi görüntülemek için bu sayfanın URL'sini Google'ın Zengin Sonuçlar Testine koydum ve paragraf metninin görünür olduğunu görebilirsiniz.
DOM optimizasyonu için en iyi teknik uygulamalar
Arama motorlarının içeriğinizi etkili bir şekilde tarayabilmesini, oluşturabilmesini ve dizine ekleyebilmesini sağlamak için bu uygulamaları izleyin.
Önemli içeriği varsayılan olarak DOM'a yükleyin
En önemli içeriğiniz DOM'da olmalı ve kullanıcı etkileşimi olmadan görünmelidir. Bu, doğru indeksleme için zorunludur. Googlebot'un sayfanızın başlangıç durumunu oluşturduğunu ancak öğeleri tıklamadığını, yazmadığını veya öğelerin üzerine gelmediğini unutmayın.
Yalnızca bu etkileşimlerden sonra DOM'a eklenen içerik tarayıcılar tarafından görülmeyebilir. Bir uyarı, içerik DOM'da mevcut olduğu sürece akordeonların ve sekmelerin sorun olmayacağıdır.
Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, paragraf metniÖğelerAkordeon sekmesi açılmamış veya tıklatılmamış olsa bile panel.
Bağlantılar için uygun etiketlerini kullanın
Hepimizin bildiği gibi, bağlantılar SEO için temeldir. Arama motorları standart arıyor<a>href niteliklerine sahip etiketleryeni URL'ler keşfetmek için. Bağlantılarınızı keşfettiklerinden emin olmak için DOM'un gerçek bağlantıları gösterdiğinden emin olun. Aksi takdirde, tarama çıkmazları riskiyle karşı karşıya kalırsınız.
Ayrıca JavaScript tıklama işleyicilerini kullanmaktan da kaçınmalısınız (ör.) gezinme için kullanılır, çünkü tarayıcılar genellikle bunları yürütmez.
Bunun gibi:
Anlamsal HTML yapısını kullanın
Başlık etiketlerini kullanın (No mess 'all." ifadesinde kullanıldığında, "Her şeyi temizledim. ,
Sitenin içeriğini doğru şekilde tanımlayan. Arama motorları sayfaları anlamak için bu yapıyı kullanır.
Sayfa oluşturucularla ilgili yaygın bir sorun, DOM'ların iç içe geçmiş öğelerle dolu hale getirilmesidir.<div>Anlamsal anlamı olmayan öğeler. Bu, arama motorlarının sayfanızı anlamasına çok az yardımcı olur ve siz veya sitenizdeki kodu korumaya çalışan gelecekteki geliştiriciler için sorunlar yaratır.
Statik HTML'de takip ettiğiniz anlamsal standartların aynısını koruduğunuzdan emin olun.
Örnek olarak anlamsal HTML'nin bir parçasını burada bulabilirsiniz:
Anlamsal olmayan ve arama motorları ve yardımcı teknolojilerin anlaması daha zor olan "div çorbası" HTML'sinin bir örneğini burada bulabilirsiniz.
Performansı artırmak için DOM boyutunu optimize edin
İdeal olarak DOM'u yalın tutun~ 1.500 düğümün altındave aşırı yuvalamadan kaçının. Stilin yeniden hesaplanmasını, düzenini ve boyama maliyetlerini azaltmak için gereksiz sarmalayıcı öğeleri kaldırın.
İşte bir örnekweb.devaşırı yuvalama ve gereksiz derecede derin bir DOM:
DOM boyutu Core Web Vital'in kendisi olmasa da aşırı vederinlemesine yuvalanmış DOM'larözellikle alt uç cihazlarda performansı dolaylı olarak etkileyebilir.
Bu etkileri azaltmak için:
- Kümülatif Düzen Kaymasını (CLS) azaltmak için ilk oluşturma sonrasında düzeni etkileyen DOM değişikliklerini sınırlayın.
- En Büyük İçerikli Boyama'yı (LCP) geliştirmek için kritik ekranın üst kısmındaki içeriği erken oluşturun.
- Next Paint ile Etkileşimi (INP) geliştirmek için JavaScript yürütmeyi ve uzun görevleri en aza indirin.
DOM'un önemi giderek artmaya devam edecek
DOM'un uygulanabilir bir şekilde anlaşılması, yalnızca SEO sorunlarını teşhis etmenize değil, aynı zamanda geliştiriciler ve ekibinizdeki diğer kişilerle etkili bir şekilde iletişim kurmanıza da yardımcı olabilir.
DOM'un Önemli Web Verilerini, taranabilirliği ve dizine eklemeyi etkilediğini biliyoruz. Yapay zeka aracıları web siteleriyle giderek daha fazla etkileşime girdikçe DOM optimizasyonu daha kritik hale geliyor. Gelişen arama ve yapay zeka teknolojilerinin ilerisinde kalabilmek için bu temel konularda uzmanlaşmak artık çok önemli.
