JavaScript için SEO: Arama motorlarını test etmek için bir deney

Bu makale, JavaScript için en iyi SEO kaynaklarını ve arama motorlarının (Google, Bing ve Yandex) JS aracılığıyla oluşturulan sayfaları taramaları ve dizine eklemeleri gerektiğinde nasıl davrandığını anlamak için bir testi incelemektedir. Ayrıca SEO uzmanlarına ve geliştiricilerine yönelik bazı hususlara da bakacağız.

JavaScript bugünün web'inde önemli bir oyuncu ve John Mueller'in dediği gibi, “ Kolay kolay ortadan kalkmayacak. ”

JavaScript konusu genellikle SEO topluluğu tarafından kötülenir, ancak bunun JavaScript geliştirme ve web sayfası oluşturma konusundaki teknik beceri eksikliğinden kaynaklandığına inanıyorum. Ancak bu aynı zamanda SEO uzmanları ve geliştirme ekipleri arasındaki iletişimin zorluğuna da bağlıdır.

Bu gönderi iki bölüme ayrılmıştır: ilki (kısa) konuya daha ayrıntılı bakmak için bazı kaynaklar sunar; ikincisinde (daha derinlemesine) JavaScript kullanılarak oluşturulmuş bir web sayfasında arama motorlarını test eden çok basit bir deneye bakıyoruz.

JavaScript için SEO'yu tanıtan bazı kaynaklar

Aşağıdaki videoda Martin Splitt , Google'a atıfta bulunarak konuyu tanıtıyor ve JavaScript'te proje geliştirirken SEO perspektifinden düşünmenin önemini açıklıyor. Özellikle JS'de kritik içerik oluşturan sayfalara ve tek sayfalık uygulamalara atıfta bulunuyor.

“Varlıkların mümkün olan en kısa sürede dizine eklenmesini istiyorsanız, en önemli içeriğin sayfa kaynağında (işlenmiş sunucu tarafında) olduğundan emin olun.”

Sebebi nedir? Çünkü aşağıdaki şemayı her zaman aklımızda tutmalıyız, yani indekslemenin iki dalgası .

Tarama, dizin oluşturma, oluşturma ve yeniden değerlendirme akışı. Ve iki işlem dalgası.

JavaScript tarafından oluşturulan içerik , oluşturma aşamasını beklemesi gerektiğinden, indekslemenin ikinci dalgasında değerlendirilir.

Aşağıdaki videoda ise JavaScript ile geliştirilen projelerle ilgili temel SEO ipuçları anlatılmaktadır.

"Olağanüstü kullanıcı deneyimlerine doğru ilerliyoruz, ancak aynı zamanda her zamankinden daha fazla teknik beceri ihtiyacına doğru gidiyoruz."

Arama motorlarının JavaScript'i nasıl ele aldığını netleştirmek için basit bir test

Yalnızca Google dokümantasyonunda açıklanan adımları ( tarama, dizine ekleme, oluşturma, yeniden değerlendirme) yeniden izlemek için yaptığım bir testi anlatacağım. Bununla birlikte, Mountain View arama motorunun ötesine geçen bir test.

Not: Uygulanan teknik çözüm açısından oldukça "aşırı" bir testtir ve belirli çerçeveler kullanılmadan basit JavaScript işlevleri kullanılarak yapılmıştır. Amaç, bir stil alıştırması değil, yalnızca arama motorunun dinamiklerini anlamaktır.

1) web sayfası

İlk olarak, aşağıdaki özelliklere sahip bir web sayfası oluşturdum:

• <title> etiketinin içeriği, bir <h4> etiketinde bir alt yazı ve altbilgide bir dize dışında hiçbir metin içermeyen, ana yapısal ETİKETLERİ içeren bir HTML sayfası .
• Kaynak HTML'de bulunan içeriğin belirli bir amacı vardır: ilk işlemeden hemen sonra arama motorlarına veri vermek.
• Bir JavaScript işlevi, DOM ( Document Object Model ) tamamlandıktan sonra tüm içeriği ( GPT-3 kullanılarak oluşturulan eksiksiz bir gönderi ) işlemekle ilgilenir.

 $(belge).ready( function () {
  nemlendirme();
});

• İşlev tarafından oluşturulan içerik, sayfada JavaScript veya JSON dizelerinde bulunmaz, ancak uzak çağrılar (AJAX) yoluyla elde edilir.
• Yapılandırılmış veriler ayrıca bir uzak çağrı yoluyla JSON dizesini elde eden JavaScript aracılığıyla " enjekte edilir ".
• JavaScript işlevinin <title> etiketinin içeriğini geçersiz kıldığından, <h1> etiketinin içeriğini oluşturduğundan ve açıklamayı oluşturduğundan bilerek emin oldum. Sebebi ise şu: JS tarafından oluşturulan veriler dikkate alınsaydı, SERP'deki sonucun snippet'i tamamen değişecekti.
• JS aracılığıyla oluşturulan iki resimden biri, bu işlemin kaynağın indekslenmesini hızlandırıp hızlandıramayacağını anlamak için sayfa başlığında bir <link> etiketinde ( rel = "preload" ) belirtilmiştir.

2) Sayfanın arama motorlarına sunulması ve test edilmesi

Sayfayı yayınladıktan sonra, arama motorlarına ve özellikle Google'a (Search Console'un “ URL kontrolü ” aracılığıyla), Bing'e (Web Yöneticisi Aracının “ URL'yi Gönder ” aracılığıyla) ve Yandex'e (“ Reindex sayfaları aracılığıyla” bildirdim. ” Web Yöneticisi Aracı).

Bu aşamada bazı testler yaptım.

• Genellikle render testleri yapmak için kullandığım Merkle'nin “Fetch & Render” aracı sayfayı doğru bir şekilde oluşturdu. Araç, Googlebot'u Chromium 79 başsız kullanarak simüle eder.
  Not: Merkle araçları arasında, istekte bulunan kullanıcı aracısına dayalı olarak HTML yanıtını doğrulamanıza olanak tanıyan bir Pre-rendering Tester da vardır.

Merkle Fetch & Render: test aracı oluşturma

• Google'ın Zengin Sonuçlar Testi , sayfanın DOM'sini ve ekran görüntüsünü başarıyla oluşturdu. Araç ayrıca yapılandırılmış verileri doğru bir şekilde algılayarak " Makale " türündeki varlığı tanımladı.

Google Zengin Sonuç Testleri tarafından oluşturulan DOM

• Search Console URL kontrol aracı, başlangıçta zaman zaman kusurlu oluşturma gösterdi. Ama bence sebebi çalışma süresiydi.

3) İndeksleme

Bu aşamada tüm arama motorları aynı şekilde davrandı: Birkaç saat sonra sonuç tüm SERP'lerde mevcuttu.

Bing, Yandex ve Google'da ilk aşamada oluşturulan snippet

Snippet'ler, görsellerde görüldüğü gibi, <title> etiketinin içeriğinden ve ana içerikte bulunan verilerden elde edilen bir açıklamadan oluşmaktadır.

Sayfadaki hiçbir resim dizine eklenmedi.

4) Düzenleme işlemleri, site haritası, Google indeksleme API'sı

Ertesi gün, fragmanlar aynıydı. Arama motorlarına sinyal göndermek için bazı işlemleri tamamladım.

• Favicon'u, yazının yazarının adını ve yayın tarihini ekleyerek sayfanın HTML'sini değiştirdim. Amaç, oluşturulan içeriğin potansiyel bir analizinden önce arama motorlarının snippet'i güncelleyip güncellemeyeceğini anlamaktı.
• Aynı zamanda, değişiklik tarihini (“dateModified”) güncelleyerek yapılandırılmış verilerin JSON'unu güncelledim.
• Web sayfasının URL'sini içeren site haritasını farklı arama motorlarının web yöneticisi araçlarına gönderdim.
• Sayfanın değiştirildiğini ve özellikle Google için indeksleme API'si aracılığıyla arama motorlarına bildirdim.

[Örnek Olay] Yeniden tasarımınızın SEO'nuzu cezalandırmasını önleyin

Web sitelerinin yeniden tasarımından bir yıl sonra, EasyCash kısa süre sonra umdukları performansın orada olmadığını fark etti. Birkaç SEO engelini belirlediler ve çözdüler.

Örnek olayı okuyun

Sonuçlar

Birkaç gün sonra ne oldu?

Google, snippet'i oluşturdu ve üzerinde yeniden çalıştı

1) Google, JavaScript'i işleyerek içeriği oluşturdu, ardından içeriği doğru kullanarak SERP'de sonucu yeniden çalıştı.

Google, JavaScript kullanarak oluşturulan içeriği dizine ekledi

2) Gönderinin ilk resmi de dizine eklendi ve Google Görseller'de göründü.

JavaScript aracılığıyla oluşturulan gönderi resmi Google Görseller'de görünür

3) Bing ve Yandex'deki snippet'ler değişmedi. Bu, yayını takip eden günlerde nihai DOM'yi dikkate almadıkları anlamına gelir.

4) Ön yükleme için bağlantıda gösterilen görüntü, diğerine kıyasla olumlu muamele görmedi.

Yandex tarafından JavaScript sayfa oluşturma (β)

Yandex web yöneticisi araçlarında, sayfaları tararken robotun davranışını belirlemenizi sağlayan bir "beta" özelliği vardır.

Yandex işleme yapılandırma paneli

Oluşturmayı tamamlamak için JavaScript'i çalıştırmayı veya çalıştırmamayı önerebilirsiniz. Varsayılan seçenek, algoritmaya en iyi eylemi seçme özgürlüğü verir.

İçeriğin neredeyse tamamının istemci tarafında oluşturulduğu özel durumda, ancak daha genel olarak, örneğin bir JavaScript çerçevesi için, oluşturmayı zorlamanız önerilir.

Dinamik oluşturma

Testin son aşamasında, Bing ve Yandex için dinamik bir işleme çözümü uyguladım. Bu çözüm, istemciye gönderilen yanıtı şu şekilde ayırt etmeyi sağlar:

• Kullanıcıların tarayıcıları, işlemeyi tamamlamak için gereken HTML ve JavaScript'i içeren yanıtı alır;
• Tarayıcı, kaynaktaki tüm kritik içeriği içeren sayfanın statik bir sürümünü alır.

Dinamik oluşturma nasıl çalışır?

Uygulamayı tamamladıktan sonra Bing ve Yandex araçları üzerinden tekrar indeksleme talebinde bulundum.

Yandex, birkaç saat içinde SERP'deki snippet'i aşağıdaki gibi yeniden oluşturdu. Bu nedenle Yandex, yeni sürümün sunucu tarafı tarafından oluşturulduğunu düşündü.

Dinamik oluşturmadan sonra Yandex snippet'i

Bing, test için mevcut olan sürede sonucu değiştirmedi, ancak kesinlikle ( ehm.. en azından umarım ) sonraki günlerde entegre ederdi.

Sonuçlar

Bu basit test, Google'ın, gönderinin ilk bölümünde görülen planın iki aşamasına uygun olarak, belgelerin belirttiği gibi çalıştığını gösterir. İlk aşamada, aslında, sayfa kaynağında bulunan içeriği neredeyse anında indeksledi (sunucu tarafında oluşturulan HTML); ikincisinde, birkaç gün içinde JavaScript aracılığıyla oluşturulan parçaları dizine ekledi.

Bing ve Yandex ise JavaScript aracılığıyla oluşturulan içeriği en azından yayınlandıktan sonraki günlerde algılamıyor gibi görünüyor.

Bu öğeler, aşağıda biraz daha ayrıntılı olarak açıklamaya çalışacağım JavaScript ile ilgili bazı yönleri vurgulamaktadır.

• İletişim için referans pazarlara odaklanma korunmalıdır: Google dışındaki arama motorlarını kullanan bir kitleye hitap edersek, istediğimiz kadar görünür olamama riskini alırız.
• Kullanıcılar Google'ı kullansa bile, SERP'deki tüm bilgileri almak için gereken süreyi dikkate almalıyız. Oluşturma aşaması, aslında, kaynaklar açısından çok pahalıdır: test durumunda, yalnızca bir sayfa çevrimiçi olarak, snippet birkaç gün içinde doğru bir şekilde elde edilmiştir. Ama çok büyük bir web sitesinde çalışırsak ne olur? Arama motorunun bize sunduğu “bütçe” ve web sitesinin performansı belirleyici oluyor.
• JavaScript'in kullanıcılara üstün kullanıcı deneyimleri sunmamıza izin verdiğine inanıyorum, ancak bunu başarmak için gereken beceriler çok sayıda ve pahalı. SEO uzmanları olarak, en iyi çözümleri önermek için gelişmemiz gerekiyor. Ön işleme veya dinamik oluşturma, küresel görünürlük sağlaması gereken projelerde kritik içerik oluşturmak için hala yararlı tekniklerdir.
• Astro, Gatsby, Jekyll, Hugo, NuxtJS ve Next.JS gibi JAMstack mimarisine dayanan tüm modern JavaScript çerçeveleri, içeriğin statik sürümünü sağlamak için içeriği sunucu tarafında oluşturma olanağı sunar. sayfalar. Ayrıca, bence en gelişmişi olan Next.JS, “Artımlı Statik Yenileme” (ISR) adı verilen bir “hibrit” oluşturma moduna izin verir. ISR, sabit arka plan işleme ile aşamalı olarak statik sayfaların oluşturulmasına izin verir. Bu teknik, çok yüksek navigasyon performansı sağlar.

"Soru şu ki, böyle bir "karmaşıklığı" bir projeye dahil etmeye değer mi? Cevap basit: evet, eğer harika bir kullanıcı deneyimi üreteceksek!”

ek Notlar

• "Belge hazır" ve "pencere yüklendi" olayları arasındaki farka dikkat etmeliyiz: Birincisi, DOM oluşturulduktan sonra, ikincisi ise DOM oluşturulduğunda ve kaynaklar yüklendiğinde yürürlüğe girer.
• Açıkçası, bu tür testler için Google'ın önbellek kopyasını analiz etmenin bir anlamı yoktur, çünkü sayfalar açıldığında JS yeniden yürütülür ve Google tarafından dikkate alınan içeriğin algısını vermez.

İyi JavaScript ve iyi SEO!