Eğer hem havaya konfeti fırlatıp hem de arkadaşlarınızla paylaşma isteği uyandıran etkileyici, etkileşimli bir web sitesine gittiyseniz, büyük olasılıkla JavaScript ile oluşturulmuştur.

Aslında, Google Analytics'i (ve diğer izleme araçlarını) kullanan veya etkileşimli öğeler veya web uygulamaları sunan herhangi bir site Ayrıca neredeyse her yerde bulunan bir kodlama dili olan JavaScript'i kullanır. Olasılıklar sınırsızdır.

Dezavantajı mı? Yanlış yapılırsa SEO'nuzu sarsabilir. Peki, JavaScript SEO'yu kendi avantajınıza nasıl kullanabilir ve arama performansınızı nasıl artırabilirsiniz? Hadi dalalım.

JavaScript SEO nedir?

JavaScript'inizi SEO Dostu Hale Getirme

JavaScript SEO En İyi Uygulamaları

Denemek

JavaScript SEO nedir?

JavaScript SEO'yu tanımlamadan önce, JavaScript'in en yaygın kullanım örneklerinden bahsedelim. Web sitesi geliştirmenin yanı sıra, JavaScript oyun oynamak, bilgisayar programları ve daha fazlası için mükemmel bir seçenektir.

Web geliştirmede öncelikle etkileşimli bir web sitesi, web ve mobil uygulamalar ve dinamik içerik için kullanılır.

Programlama dilinin nasıl kullanıldığını öğrendikten sonra JavaScript SEO, arama motorlarının JavaScript ile oluşturulmuş herhangi bir siteyi kolayca bulmasını sağlamakla ilgilidir.

SEO anlayışınız öncelikle anahtar kelime optimizasyonuyla sınırlıysa, yalnız değilsiniz. Sonuçta üç tür SEO vardır – sayfa içi, sayfa dışı ve teknik.

Sayfa içi SEO, sitenizdeki içeriğe odaklanır (anahtar kelime optimizasyonu). Sayfa dışı SEO, sitenizin itibarı, popülerliği ve kullanışlılığıyla ilgilidir ve esas olarak sizin kontrolünüz dışındadır.

JavaScript SEO üçüncü kategoriye girer — teknik SEO — insanların sunduğunuz bilgileri araması için sitenizin aranabilir, dizine eklenebilir ve taranabilir olmasını sağlamaya odaklanır onu bulabilir.

Sayfa İçi ve Teknik SEO hakkında daha fazla bilgi edinmek ister misiniz? Ücretsiz eğitimimizi buradan alın!

JavaScript'inizi SEO Dostu Hale Getirme

Web sitelerinde kullanılan JavaScript'lerin çoğu, seninki dahil ve mayın, SEO'yu önemli ölçüde etkilemez. En büyük zorluk, geliştiricinizin birçok önemli bilgi içeren bölümler veya sayfaların tamamını oluşturmak için JavaScript kullanması durumunda ortaya çıkar.

Nedeni basit: JavaScript, arama motorlarının sitenizi okumasını zorlaştırabilir.

1. Geçici çözüm olarak dinamik oluşturmayı (az miktarda) kullanın.

JavaScript SEO ve dizine eklemeyle ilgili en önemli sorunlardan biri, kodunuzun nasıl oluşturulduğuyla veya Google'ın sitenizi nasıl dizine eklediği (veya dizine eklemediği) ile ilgilidir.

Bu, sitenizin nasıl oluşturulabileceğini anlamanız gerektiği anlamına gelir; sunucu tarafı oluşturma, istemci tarafı oluşturma ve dinamik oluşturma.

Sunucu Tarafı Oluşturma (SSR)

Ne olduğunu: JavaScript, tarayıcınızda veya Google tarayıcılarında görünmeden önce sunucuda oluşturulduğunda.

SEO'yu nasıl etkiler?: Sayfanızın en önemli içeriğinin yüklenme süresini azaltır, bu da SEO performansını artırır.

SSR'nin olumsuz tarafı: Kullanıcı girişlerine ihtiyacınız varsa SSR, gereken süreyi önemli ölçüde artırabilir.

İstemci Tarafında İşleme (CSR)

Ne olduğunu: CSR, JavaScript'in tarayıcınızda yalnızca temel bir HTML sürümüyle görüntülenmesi ve içeriğin geri kalanının JavaScript aracılığıyla teslim edilmesidir.

SEO'yu nasıl etkiler?: İçeriğinizin çoğu JavaScript aracılığıyla iletildiği için dizine eklenebilirliği azaltır.

KSS'nin olumsuz tarafı: Oluşturma daha hızlı olsa da arama performansı çok daha düşüktür; bu nedenle, içeriğinizi uygun şekilde dizine ekleyebilmesi için Google'a mümkün olduğunca fazla bilgi vermeye odaklanmanız gerekir.

Uzman ipucu: Kristina AzarenkoÖnde gelen bir teknik SEO uzmanı şunları söylüyor: "İstemci tarafı oluşturmanın kullanılması, Googlebot'un hiçbir içeriğe erişemeyeceği anlamına geliyor.

Çok daha iyi ve daha başarılı bir yaklaşım, sunucu tarafı oluşturmayı kullanmaktır; böylece Googlebot, sunucudaki içeriği de sunar."

Dinamik İşleme

Ne olduğunu: Dinamik oluşturma, JavaScript'i oluşturamayan botları tanımlar ve bir SSR sürümü sunar.

SEO'yu nasıl etkiler?: Botların içeriğinizin bir sürümünü dizine eklemesine olanak tanır, bu da onu daha bulunabilir hale getirir.

Dinamik Oluşturmanın olumsuz tarafı: Sonuçta dinamik oluşturma, Google'ın "ek karmaşıklıklar ve kaynak gereksinimleri yarattığı" için uzun vadeli bir çözüm olmaması gerektiğini söylediği bir geçici çözümdür.

Dinamik oluşturma, hızlı içerik değişiklikleri yaşayan veya tarayıcılarla uyumlu olmayan JavaScript kullanan içeriğe sahip siteler tarafından kullanılabilir. Çoğu site için en uygun seçenek değildir ve her site sayfasında kullanılması gerekmez.

2. Benzersiz, açıklayıcı meta içerik kullanın.

Google'ın her sayfanın ne içerdiğini aşağıdakileri kullanarak kolayca bulabildiğinden emin olun: meta içerik, sayfa başlıkları ve meta açıklamaları. Bu içerir

• Başlık etiketleri.
• Meta açıklamalar.
• Görseller için alternatif metin ve nitelikler.

Meta içerik eklemek, Google'ın sitenizin veya sayfanızın neyle ilgili olduğunu anlamasına olanak tanıyarak sitenizin ve sayfalarınızın dizine eklenmesini daha basit ve doğru hale getirir.

3. Tembel yüklemeyi uygulayın.

Yavaş yüklenme İçeriği yalnızca gerektiğinde veya okunmak üzereyken sunarak sayfa yüklemeyi hızlandırır. Büyük görsellerin veya çok fazla kaynak gerektiren içeriğin yüklenmesinde özellikle faydalıdır.

Resimleriniz ve kaynak ağırlıklı içerik ve öğeleriniz, sayfanın üst kısmındaki içeriğin geri kalanıyla birlikte yüklenmez, ancak kullanıcılar içeriği okudukça yüklenirler.

Kullanıcınız sayfanın altına kadar okumazsa gereksiz görseller yüklemezsiniz.

Dezavantajı ise, hızlı bir şekilde kaydıran biri varsa, görsellerin yüklenmesini bekleyebilir. Dahası, Google'ın web sayfanızı nasıl gördüğünü etkileyebilir. Bu nedenle, eğer bu uygulamayı takip ediyorsanız, bunu dikkatli bir şekilde yapın.

4. JavaScript'inizin Google ile uyumlu olduğundan emin olun.

Içine git Arama Konsolu ve özel sayfanızın URL'sini şuraya yapıştırın: URL İnceleme Google'ın onu nasıl oluşturduğunu görmek için bir araç.

Test etmek için başka bir araç mı istiyorsunuz? Oluşturulan HTML'yi görmek için Google Zengin Sonuçlar Testi'ni ve Google Mobil Uyumluluk Testi'ni de kullanabilirsiniz.

Uzman ipucu: david zimmerman Güvenilir Acorn, Google Mobil Uyumluluk Testi gibi araçların kullanılmasını önerir çünkü bunlar size Google örümceğinin gördüklerini gösterir.

Zimmerman şunu ekliyor: "Geliştiricinizin Google'ın JavaScript'i okuyabildiği 'bir yeri okuması', onların SEO dostu bir JavaScript web sitesinin nasıl yazılacağını anladıkları anlamına gelmediğini."

Sonuç burada mı? Her şeyin üstünde durmak iyi bir fikirdir.

5. Aramayla ilgili hataları düzeltin.

Google'ın sayfayı dizine eklediğini onayladıktan sonra test edilen sayfayı önizleyebilirsiniz. Google yalnızca görebildiği içeriği işler; bu nedenle, test edilen sayfa düzgün görüntülenmezse Google onu dizine ekleyemeyecektir.

Hepsinden iyisi, ne olduğunu ve nedenini keşfedebilir ve sorunu çözmek için gerekli adımları atabilirsiniz.

6. Düzeltin ve yeniden test edin.

JavaScript oluşturma ve uyumluluğuyla ilgili hataları düzelttikten sonra, JavaScript'inizin canlı modda doğru şekilde çalıştığından emin olmak için URL inceleme aracını kullanabilir ve Google'ın güncellenen kodu dizine eklemesini isteyebilirsiniz.

JavaScript SEO En İyi Uygulamaları

En iyi uygulamalarını öğrenmek için birkaç JavaScript SEO uzmanıyla görüştüm ve bunlara birazdan değineceğiz. Ancak her şeyden önce en son bilgilerle çalıştığınızdan emin olun.

1. JavaScript SEO hakkında bilgi edinin.

JavaScript SEO'ya çok şey harcanıyor ve tarayıcıların düzenli olarak güncellenmesi nedeniyle, bir süredir JavaScript SEO yapmadıysanız bir başlangıç ​​kitabına ihtiyacınız olabilir.

Konu JavaScript olduğunda arama motorlarının ne aradığını tekrar gözden geçirmeniz veya neyin ve nasıl düzeltileceği hakkında ayrıntılı talimatlar almanız gerekiyorsa Google, bilmeniz gereken her şeyi şu şekilde özetler: Google Arama Merkezi.

Bir web sitesi olan herkesin gizli silahıdır çünkü web sitenizi tam olarak nasıl SEO dostu hale getireceğinizi anlatır ve JavaScript'e ayrılmış bir bölümün tamamını içerir.

2. Tüm önemli içeriği kaynak koduna koyun.

Google'ın yalnızca görebildiklerini dizine ekleyebileceğini söylediğimi hatırlıyor musunuz? Sitenizin dizine eklenebilir olduğundan emin olmak için aşağıdakileri yapın: Azarenko'nin tavsiyesi ve "JavaScript sorunlarının SEO çalışmalarınızı aksatmayacağından emin olun."

Kendisi şu tavsiyede bulunuyor: "Tüm önemli içeriğin kaynak kodunda mevcut olduğundan emin olun (yani, JavaScript çalıştırılmadan önce). Bu, Google'ın bilgilerinizi JavaScript'e bağlı olmadan 'okumasına' olanak tanır.

Tüm meta verileri (başlık, meta robotlar, kanonik etiketler vb.), gövde kopyasını ve yapılandırılmış verileri ekleyin.

3. Sitenizi düzenli olarak JavaScript'in SEO uyumluluğu açısından test edin.

JavaScript kodunuzda veya içeriğinizde yapılacak küçük düzenlemeler bile Google'ın sitenizi görme biçimini değiştirebilir. Üstelik bu yalnızca JavaScript'inizle sınırlı değildir; sayfa performansını izlemek için Google Arama Konsolu gibi araçları kullanmak, sitenizin arama sonuçlarında üst sıralarda kalmasını sağlamaya yardımcı olabilir.

Uzman ipucu: tristan harris SEO performansını test etmek ve iyileştirme alanlarını belirlemek için Google PageSpeed ​​Insights ve Lighthouse gibi araçların kullanılmasını önerir.

En İyi Uygulama #4. Google Yönergelerini yakından takip edin.

Google, algoritmalarını ve dolayısıyla en iyi uygulamalarını düzenli olarak günceller. Bunu akılda tutarak, güncellemeler için Google'ın sayfasını takip etmek iyi bir fikirdir.

Zimmerman takip etmek için Hexomatic gibi bir sayfa monitörü kullanmanızı önerir Google'ın JavaScript SEO yönergeleri, "Sayfa monitörü bana Google'ın bir güncelleme yaptığını gösterirse, süreçlerimi herhangi bir şekilde değiştirmesi gerekip gerekmediğini görmek için kontrol ederim."

En İyi Uygulama #5. Sayfadaki en iyi SEO uygulamalarını takip edin.

Elbette burada özellikle JavaScript SEO'ya odaklanıyorum, ancak SEO'nun temel ilkeleri hala geçerli. JavaScript, arama motorlarının gördüğü içerik miktarını azaltabilse de içeriğinizin en iyi SEO uygulamaları için optimize edilmesini sağlamak hala önemlidir.

Uzman ipucu: Dave Ver Meer JavaScript'in devre dışı bırakılmasını önerir.

“Bir dizi daha büyük sorunu tanımlamanın en hızlı yolu. Sitenizdeki sayfaları ziyaret ettiğinizde, sayfa yüklenmeden önce oluşturulmaması ve bazı bağlantıların çalışmaması nedeniyle eksik içerik gibi kırmızı bayraklarla karşılaşabilirsiniz." Ver Meer diyor.

Denemek

Yeni becerilerimi nispeten (tamamen okuyun) güvenli bir ortamda test etmek için bazen arkadaşım, bazen de düşmanım olan ChatGPT'ye gittim.

İstemim: "Potansiyel müşteri toplamak için bir Javascript kod formu oluşturmak istiyorum. Lütfen ad, e-posta, bütçe ve mesaj için eğlenceli yer tutucular kullanın."

GPT'nin yanıtı: “Elbette! Aşağıda potansiyel müşterileri toplayan basit bir JavaScript formu örneği verilmiştir. Bu formda ad, e-posta, bütçe ve mesaj alanları bulunur. İstediğiniz gibi eğlenceli yer tutucular ekledim.

Form ayrıca ad, e-posta ve mesaj alanlarının boş bırakılmamasını sağlamak için temel doğrulamayı da içeriyor.

İşte formun HTML'si.

Eğlenceli yer tutuculara gelince? GPT, Iron Man'in eğlenceli olacağını düşündü. HTML'deki kodun tamamı şu şekilde görünür:

Ve işte JavaScript:

Elbette ChatGPT'nin bir sorumluluk reddi beyanı vardı:

Şimdi işin eğlenceli kısmına geçelim. ChatGPT'nin bu JavaScript'i SEO için nasıl optimize ettiğini görelim.

Şaşırtıcı olmayan bir şekilde, kodun HTML sürümü çok daha sağlamdı. Farkları karşılaştırabilmeniz için iki bölüme ayırdım. (Aşağıda bunları açıklayacağım.)

Değişikliklerin çoğu varsayımsal öncü sayfa içeriğiyle ilgili olduğundan, gövde oldukça benzer görünüyor.

Şimdi güncellenen JavaScript'e bakalım.

Tanıdık geliyor mu? Kodu yan yana karşılaştıralım.

Hepsi aynı. Şaşırmış?

İşte nedenidir.

Yepyeni potansiyel müşteri oluşturma formumun işlevselliğinden yepyeni JavaScript kodum sorumludur.

Ve yalnızca işlevsellik.

Yapıdan veya “sayfa” içeriğinden sorumlu değildir. HTML'nin devreye girdiği yer burasıdır. Ayrıca SEO optimizasyonu önerilerinin de geçerli olduğu yer burasıdır.

JavaScript SEO'yu Optimize Etmek İçin ChatGPT'yi Nasıl Kullandım

ChatGPT'nin JavaScript SEO'sunu optimize etmek için önerdiği belirli değişiklikleri merak mı ediyorsunuz?

1'yi değiştirin. Bir sayfa başlığı ve meta açıklaması ekleyin.

2'yi değiştirin. Başlık etiketlerini kullanın.

3'yi değiştirin. SEO ve erişilebilirlik için form alanlarını etiketleyin.

4'yi değiştirin. Resimlere alternatif metin ekleyin.

5'yi değiştirin. Sayfayı mobil uyumlu hale getirmek için duyarlı tasarım kullanın.

6'yi değiştirin. Arama motorlarının sayfanızın içeriğini anlamasına yardımcı olmak için şema işaretlemesi ekleyin.

JavaScript SEO'nun Özeti

Web sitenizde JavaScript kullanmaya karar vermek, SEO açısından sonuçları anlamayı ve sitenizin SEO dostu kalmasını veya arama motorları tarafından bulunabilir, taranabilir ve dizine eklenebilir kalmasını sağlamak için buna göre planlama yapmayı gerektirir.

Bu sizi JavaScript'e karşı uyarmak anlamına gelmez. Aksine, etkileşimli özelliklerinizden en iyi şekilde yararlanmak için, JavaScript ve SEO'yu anlayan ve bulunurken öne çıkmanıza yardımcı olabilecek geliştiricileri bulup işe almanız gerekir.

En büyük paket servisi? JavaScript'inizi SEO dostu yapmak için yapabileceğiniz en önemli şey, onun doğru şekilde görüntülendiğinden ve sayfa HTML'nizin, sayfanın içeriği hakkında mümkün olduğunca fazla bilgi sağlayacak şekilde yapılandırıldığından emin olmaktır.

Belki şaşırtıcı bir şekilde (ve belki de değil), sayfa içi SEO kuralları JavaScript SEO için de geçerlidir; anahtar, arama motorlarının içeriğinizi "görebilmesini" sağlamaktır.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoData.Network Dikey Üretken Yapay Zeka. Kendine güç ver. Buradan Erişin.
• PlatoAiStream. Web3 Zekası. Bilgi Genişletildi. Buradan Erişin.
• PlatoESG. karbon, temiz teknoloji, Enerji, Çevre, Güneş, Atık Yönetimi. Buradan Erişin.
• PlatoSağlık. Biyoteknoloji ve Klinik Araştırmalar Zekası. Buradan Erişin.
• Kaynak: https://blog.hubspot.com/marketing/javascript-seo