SEO

JS geçişi için nasıl hazırlanılır?

Organik trafiğin yüzde 80 azalması, her işletmenin kabusu. Ne yazık ki, bir web sitesi göçü yanlış yapıldığında böyle bir kabus senaryo gerçek olabilir. Mevcut durumu iyileştirmek yerine, sonunda felakete neden olur.

Kaynak: http://take.ms/V6aDv

Alanların değiştirilmesi, birleştirilmesi veya bölünmesi, yeniden tasarlanması gibi birçok türde geçiş vardır. Web sitesi ya da yeni bir çerçeveye geçme

Web geliştirme eğilimleri, son yıllarda JavaScript kullanımının arttığını ve JavaScript çerçevelerinin gittikçe daha popüler hale geldiğini açıkça gösteriyor. Gelecekte, daha fazla web sitesinin JavaScript'i kullanmasını bekleyebiliriz.

Kaynak: https://httparchive.org/reports/state-of-javascript

Bunun bir sonucu olarak SEO'lar JavaScript çerçevelerine geçiş zorluğu.

Bu makalede, statik bir HTML ile oluşturulmuş bir web sitesinin bir JavaScript çerçevesine taşınması için nasıl hazırlanacağınızı göstereceğim.

Arama motorları ve JavaScript

Google JavaScript ile çalıştırılsa bile JavaScript'i çalıştırabilen ve içerik ve gezinme gibi öğeleri “görebilen” tek arama motoru. Bununla birlikte, bir JS çerçevesindeki değişiklikleri dikkate alırken her zaman hatırlamanız gereken iki şey vardır.

İlk olarak, Google, sayfalar oluşturmak için Chrome 41'i kullanmaktadır. Bu, gelişmiş özellikleri sunmak için gereken tüm modern özellikleri desteklemeyen üç yıllık bir tarayıcıdır. JS web sitelerini genel olarak işleyebilseler bile, Google'ın işleyemediği teknolojiye güvenmesi nedeniyle bazı önemli parçaların keşfedilmeyeceği ortaya çıkmış olabilir.

İkincisi, JS'nin çalıştırılması son derece ağır bir süreçtir. İki dalga halinde JS siteleri. İlk dalga, indekslenen ham HTML'yi alır. JS tarafından desteklenen web sitelerinde, bu neredeyse boş bir sayfaya çevirir. İkinci dalga sırasında Google, JavaScript'i yükler, böylece JS tarafından yüklenen ek öğeleri “görebilir”. Ardından, sayfanın tüm içeriğini dizine eklemeye hazırlar.

Bu iki öğenin birleşimi, mevcut web sitenizi JavaScript çerçevesine değiştirmeye karar verirseniz, Google'ın etkili bir şekilde taranıp taramadığını kontrol etmeniz gerekir. Web sitenizi dizine ekleyin.

Doğru bir JS çerçevesine geçiş

SEO'lar JavaScript'i beğenmeyebilir, ancak popülaritesinin büyümeyi durduracağı anlamına gelmez. Modern çerçeveyi doğru şekilde uygulayabildiğimiz kadar hazırlamalıyız.

Aşağıda, mevcut çerçeveyi değiştirme sürecinde gezinmenize yardımcı olacak bilgileri bulacaksınız. “Gitmeye hazır” çözümler sağlamıyorum çünkü durumunuz farklı faktörlerin sonucu olacak ve evrensel bir reçete yok. Bununla birlikte, özellikle dikkat etmeniz gereken unsurları vurgulamak istiyorum.

Standart göçün temellerini örtün

Google'ın bu değişikliği yardımınız olmadan anlayacağı mucizeye güvenemeyebilirsiniz. Göç sürecinin tamamı detaylı bir şekilde planlanmalıdır.

Bu makalenin odak noktası olarak JS göçüne odaklanmak istiyorum. Bu nedenle, detaylı göçmenlik kurallarına ihtiyacınız varsa, Bastian Grimm bunu zaten ele almıştı.

Kaynak: 推特

İçeriği Google'a sunmak açısından gereksinimlerinizi anlayın

Bu adım, başka bir şeyden önce yapılmalıdır. Google’ın web sitenizin içeriğini nasıl alacağına karar vermeniz gerekir. İki seçeneğiniz var:

1. İstemci tarafı oluşturma: Bu, görüntüleme için Google'a tamamen güveneceğiniz anlamına gelir. Ancak, bu seçenek için giderseniz, bazı verimsizliği kabul edersiniz. Bu çözümün ilk önemli dezavantajı, yukarıda bahsedilen iki endeksleme dalgası nedeniyle içeriğinizin ertelenmiş endekslenmesidir. İkincisi, Chrome 41'in tüm modern özellikleri desteklememesi nedeniyle her şeyin düzgün şekilde çalışmaması olabilir. Ve son olarak, ama en önemlisi, tüm arama motorları JavaScript'i çalıştıramaz, böylece JS web siteniz Bing, Yahoo, Twitter ve Facebook'a boş görünecektir.

Kaynak: YouTube

2. Sunucu tarafı oluşturma: Bu çözüm, harici bir mekanizma veya JS web sitelerinin oluşturulmasından sorumlu ek mekanizma / bileşen tarafından oluşturulmasına, statik bir anlık görüntü oluşturmaya ve onu arama motoru tarayıcılarına sunmaya dayanır. Google I / O konferansında Google, web sitenizin ayrı bir sürümünü yalnızca tarayıcıya sunmanın iyi olduğunu açıkladı. Buna Dinamik Rendering denir. Bu, tarayıcının Kullanıcı Aracısı'nı algılayabileceğiniz ve sunucu tarafında oluşturulmuş sürümü gönderebileceğiniz anlamına gelir. Bu seçeneğin dezavantajları da vardır: ek bir altyapı oluşturmak ve korumak, sunucuda ağır bir sayfa oluşturulduğunda olası gecikmeler veya önbelleğe alma ile ilgili sorunlar (Googlebot, sayfanın yeni bir sürümünü alabilir).

Kaynak: Google [19659004] Göç etmeden önce, A veya B seçeneğine ihtiyacınız varsa cevap vermeniz gerekir.

İşletmenizin başarısı yeni içerik (haberler, emlak teklifleri, kuponlar) etrafında inşa edilmişse, sadece istemci tarafı oluşturulmuş sürüm. Endekslemede önemli gecikmeler yaşanabilir, böylece rakipleriniz bir avantaj kazanabilirler.

Eğer küçük bir web siteniz varsa ve içerik çok sık güncellenmiyorsa, istemci tarafında render edilmiş olarak bırakabilirsiniz, ancak test etmelisiniz. Google, içeriği ve gezinmeyi gerçekten görüyorsa web sitesini başlatmadan önce. Bunu yapmanın en kullanışlı araçları Google’da Google Gibi Getir ve Chrome 41 tarayıcısı.

Ancak, Google, sık sık değişen içeriği doğru ve hızlı bir şekilde keşfedeceklerinden emin olmak için Dinamik Render’i kullanmanın daha iyi olduğunu resmi olarak açıkladı.

Framework vs solution

Eğer seçiminiz Dynamic Rendering'i kullanmaksa, içeriğin tarayıcılara nasıl sunulacağını belirleme zamanı. Evrensel bir cevap yok. Genel olarak, çözüm, teknolojiye ve geliştiricilere, bütçeye ve ihtiyaçlarınıza bağlıdır.

Aşağıda, birkaç yaklaşımdan elde ettiğiniz seçeneklere ilişkin bir inceleme bulacaksınız, ancak seçim sizinki gibidir:

  • Mümkün olduğunca basit bir çözüm .

Muhtemelen prerender.io gibi ön-render için giderdim. Web sitenizi taranan, sayfalarınızı oluşturan ve belirli bir Kullanıcı Aracısı istekte bulunursa bunları sunmak için statik anlık görüntüler oluşturan harici bir hizmettir. Bu çözümün büyük bir avantajı, kendi altyapınızı oluşturmanıza gerek olmamasıdır.

Yeniden sayfalandırmayı planlayabilir ve sayfalarınızın yeni anlık fotoğraflarını oluşturabilirsiniz. Ancak, daha büyük ve sıklıkla değişen web siteleri için, tüm sayfaların zamanında yenilendiğinden ve aynı içeriği hem Googlebot hem de kullanıcılara gösterdiğinden emin olmak zor olabilir.

  • evrensel bir çözüme ve Trendleri takip ediyorum.

Web sitesini React, Vue veya Angular gibi popüler çerçevelerden biri ile oluşturursanız, belirli bir çerçeveye ayrılmış Sunucu Tarafı Oluşturma yöntemlerinden birini kullanabilirsiniz. İşte bazı popüler eşleşmeler:

React veya Vue öğesinin üstünde yüklü olan bu çerçevelerden birinin kullanılması, evrensel bir uygulama oluşturulmasına neden olur; yani, aynı kodun hem sunucuda (Sunucu Tarafı oluşturma) hem de istemci (İstemci Tarafı Oluşturma). Anlık görüntülerde olduğu gibi, anlık görüntü ve ağır önbellek oluşturmaya güveniyorsanız, sahip olabileceğiniz bir içerik boşluğu ile sorunları en aza indirir.

  • Evrensel bir çözüme ihtiyacım var ve ben popüler bir çerçeve kullanmayın .

Evrensel bir uygulama oluşturmak için kullanıma hazır bir çözümü olmayan bir çerçeve kullanacaksınız. Bu durumda, altyapınızı oluşturma için oluşturabilirsiniz. Bu, sunucunuza, web sitenizin tüm alt sayfalarını oluşturacak ve arama motoru tarayıcılarına sunulan anlık görüntüleri oluşturacak bir başsız tarayıcı yükleyebileceğiniz anlamına gelir. Google bunun için bir çözüm sunar – Puppeteer, prender.io gibi benzer bir işi yapan bir kütüphanedir. Ancak, her şey altyapınızda gerçekleşir.

  • uzun ömürlü bir çözüm istiyorum .

Bunun için melez oluşturma özelliğini kullanıyorum. Bu çözümün hem kullanıcılar hem de tarayıcılar için en iyi deneyimi sağladığı söylenir, çünkü kullanıcılar ve tarayıcılar ilk istekte sayfanın sunucu tarafında oluşturulmuş bir sürümünü alırlar. Çoğu durumda, bir SSR sayfası sunmak, tarayıcıdaki tüm ağır dosyaları yürütmek yerine, kullanıcılar için daha hızlıdır. Sonraki tüm kullanıcı etkileşimleri JavaScript tarafından sunulmaktadır. Tarayıcıların tıklanması veya kaydırılmasıyla web sitesiyle etkileşimde bulunmamakta, böylece sunucuya her zaman yeni bir talepte bulunulmakta ve her zaman bir SSR sürümü elde edilmektedir. Kulağa hoş geliyor, ancak uygulanması kolay değil.

Kaynak: YouTube

Seçtiğiniz seçenek, teknoloji, geliştiriciler ve bütçeler gibi birçok faktöre bağlı olacaktır. Bazı durumlarda, birkaç seçeneğiniz olabilir, ancak çoğu durumda, birçok kısıtlama olabilir, bu yüzden bir çözüm seçmek tek seçenekli bir süreç olacaktır.

Uygulamayı test etme

Bir göç hayal edemiyorum. Evreleme ortamı oluşturmadan ve her şeyin nasıl çalıştığını test etmeden. Bir JavaScript çerçevesine geçiş, dikkat etmeniz gereken karmaşıklığı ve ek tuzakları ekler.

İki senaryo vardır. Herhangi bir nedenden dolayı, istemci tarafı oluşturma işlemine güvenmeye karar verdiyseniz, Chrome 41'i yüklemeniz ve nasıl işlediğini ve çalıştığını kontrol etmeniz gerekir. Bir denetimin en önemli noktalarından biri, Chrome Dev Tools'daki konsoldaki hataları kontrol etmektir. JavaScript'i işlemede küçük bir hata bile oluşturma ile ilgili sorunlara yol açabileceğini unutmayın.

İçeriği tarayıcıya sunma yöntemlerinden birini kullanmaya karar verdiyseniz, bu çözümle birlikte bir deneme sitesine sahip olmanız gerekir. Aşağıda, web sitesine katılmadan önce kontrol edilmesi gereken en önemli öğeleri özetleyeceğim:

1. İçerik paritesi

Kullanıcıların ve tarayıcıların tam olarak aynı içeriği görüp görmediklerini her zaman kontrol etmelisiniz. Bunu yapmak için tarayıcılara gönderilen sürümü görmek için tarayıcıdaki kullanıcı aracısını değiştirmeniz gerekir. Oluşturma ile ilgili genel tutarsızlıkları doğrulamanız gerekir. Ancak, resmin tamamını görmek için web sitenizin DOM (Belge Nesne Modeli) kontrol etmeniz gerekir. Kaynak kodunu tarayıcınızdan kopyalayın, ardından Kullanıcı Aracını Googlebot’a değiştirin ve kaynak kodunu da alın. Diffchecker, iki dosya arasındaki farkları görmenize yardımcı olacaktır. Özellikle içerik, gezinme ve meta verilerindeki farklılıkları aramalısınız.

Aşırı bir durum, tıpkı Disqus'un yaptığı gibi, Googlebot'a boş bir HTML dosyası gönderdiğinizde ortaya çıkıyor.

Kaynak: Google

Bu onların SEO Görünür gibi görünüyor:

Kaynak: http://take.ms/Fu3bL

Daha iyi günler gördük. Şimdi ana sayfa bile endekslenmedi.

2. Gezinme ve köprüler

Google'ın bağlantı suyunu gördüğü, tarandığından ve geçirdiği yüzde 100 emin olmak için, Google I / O Konferansı 2018'de paylaşılan dahili bağlantıların uygulanmasına ilişkin net tavsiyeyi uygulamanız gerekir.

Kaynak: YouTube [19659004] Sunucu tarafı oluşturma yöntemlerine güveniyorsanız, bir sayfanın önceden yazdırılmış bir sürümünün HTML'sinin beklediğiniz tüm bağlantıları içerip içermediğini kontrol etmeniz gerekir. Diğer bir deyişle, istemci tarafında oluşturulmuş sürümle aynı gezinme varsa. Aksi halde, Google sayfalar arasındaki dahili bağlantıyı görmez. Sorun yaşayabileceğiniz kritik alanlar faset gezinme, sayfalama ve ana menüdür

3. Meta veriler

Meta veriler kesinlikle JS'ye bağımlı olmamalıdır. Google, kurallı etiketi JavaScript ile yüklerseniz, muhtemelen bunu dizinin ilk dalgasında görmeyeceklerini ve bu öğeyi ikinci dalgada tekrar kontrol etmeyeceklerini söylüyor. Sonuç olarak, kanonik sinyaller göz ardı edilebilir.

Aşama sahasını test ederken, her zaman bir SSR versiyonunun kafa bölümünde kanonik etikete sahip olup olmadığını kontrol edin. Evet ise, kural etiketinin doğru olduğunu onaylayın. İstemci veya sunucu tarafı oluşturmayı kullanıp kullanmadığınıza dair bir kural her zaman arama motoruna tutarlı sinyaller gönderir.

Web sitesini kontrol ederken her zaman hem CSR hem de SSR sürümlerinin aynı başlıklar, açıklamalar ve robot yönergeleri olup olmadığını doğrulayın. 19659005] 4. Yapısal veriler

Yapısal veriler, arama motorunun web sitenizin içeriğini daha iyi anlamasına yardımcı olur.

Yeni web sitesini başlatmadan önce, web sitenizin SSR sürümünün, işaretlemek istediğiniz tüm öğeleri görüntülediğinden emin olun. yapısal veriler ve biçimlendirmeler, önceden oluşturulmuş sürümde yer alıyorsa. Örneğin, kırıntıların gezinmesine işaretlemeler eklemek isterseniz. İlk adımda, kırıntıların SSR sürümünde görüntülenip görüntülenmediğini kontrol edin. İkinci adımda, işaretlemelerin geçerli olup olmadığını görmek için testi Rich Results Tester'de çalıştırın.

5. Lazy loading

Gözlemlerim, modern web sitelerinin, tembel yükleme ile resim ve içeriği (ör. Ürünler) yüklemeyi sevdiğini gösteriyor. Ek öğeler kaydırma olayına yüklenir. Belki de kullanıcılar için güzel bir özellik olabilir, ancak Googlebot bunu yapamaz, bu nedenle bu öğeler keşfedilmeyecek.

Birçok web yöneticisinin Google’da tembel yükleme konusunda sorun yaşamaya başladığı görülüyor. tembel yükleme en iyi uygulamaları için bir kılavuz yayınladı. Görüntüleri bir kaydırma üzerinde yüklemek istiyorsanız, sayfalara ayrılmış yüklemeyi desteklediğinizden emin olun. Bu, eğer siz kaydırırsanız, URL'lerin değişmesi (örneğin, sayfalandırma tanımlayıcılarını ekleyerek:? Sayfa = 2,? Sayfa = 3, vb.) Ve en önemlisi, URL'ler uygun içerikle güncellenir. History API.

Sayfaların sırasını belirtmek için head kısmına rel = ”prev” ve rel = ”next” işaretlemeleri eklemeyi unutmayın.

Anlık görüntü oluşturma ve önbellek ayarları

Arama motoru tarayıcıları için bir anlık görüntü oluşturun, birkaç ek şeyi izlemeniz gerekir.

Anlık fotoğrafın web sitenizin istemci tarafından oluşturulmuş sürümünün tam bir kopyası olup olmadığını kontrol etmeniz gerekir. Standart bir kullanıcıya görünmeyen ek içerik veya bağlantılar yükleyemezsiniz, çünkü gizleme olarak değerlendirilebilir. Anlık görüntü oluşturma işlemi etkin değilse, ör. Sayfalarınız çok ağır ve sunucunuz o kadar hızlı değil, kırık anlık görüntüler oluşturmanıza neden olabilir. Sonuç olarak, örn. Tarayıcıya kısmen işlenmiş sayfalar.

İşleme altyapısının, fiyatları çok hızlı bir şekilde güncellemek istediğiniz Black Friday gibi yüksek hızlarda çalışması gereken bazı durumlar vardır. Oluşturmayı zorlu koşullarda test etmeli ve belirli sayıda sayfayı güncellemek için ne kadar zaman gerektiğini görmelisiniz.

Son şey önbellekleme. Önbelleği düzgün bir şekilde ayarlamak verimliliğinizi korumanıza yardımcı olacak bir şeydir çünkü birçok sayfa hızlı bir şekilde doğrudan bellekten sunulabilir. Ancak, önbelleği doğru şekilde planlamıyorsanız, Google eski içeriği alabilir.

追踪

Göç sonrası izleme, doğal bir adımdır. Bununla birlikte, bir JS çerçevesine geçme durumunda, bazen izlemek ve optimize etmek için ek bir şey vardır.

Bir JS çerçevesine geçmek web performansını etkileyebilir. Çoğu durumda, özellikle mobil kullanıcılar için daha uzun yükleme süreleriyle sonuçlanabilecek yükler artar. İyi bir uygulama, kullanıcılarınızın web sitesinin performansını nasıl algıladıklarını izler ve verileri taşıma işleminden önce ve sonra karşılaştırır. Bunu yapmak için Chrome Kullanıcı Deneyimi Raporu'nu kullanabilirsiniz.

Kaynak: Google

Gerçek Kullanıcı Metrikleri zamanla değiştiğinde bilgi sağlayacaktır. Her zaman onları geliştirmeyi ve web sitesini olabildiğince hızlı yüklemeyi hedeflemelisiniz.

摘要

Göç her zaman riskli bir süreçtir ve sonuçlardan emin olamazsınız. Tüm süreci ayrıntılı olarak planladığınızda riskler hafifletilebilir. Her türlü göç durumunda, planlama yürütme kadar önemlidir. JS çerçevesine geçişte yer alırsanız, ek karmaşıklık ile uğraşmanız gerekir. Ek kararlar vermeniz ve ek şeyleri doğrulamanız gerekiyor. Ancak, web geliştirme eğilimleri JavaScript'i daha fazla kullanma yönünde ilerlemeye devam ettikçe, er ya da geç bir JS göçü ile karşılaşmanız gerekeceğine hazırlıklı olmalısınız. İyi şanslar!


Bu yazıda dile getirilen görüşler misafir yazara aittir ve mutlaka Arama Motoru Arazi değildir. Personel yazarları burada listelenmiştir.


关于作者

Maria Cieslak, Avrupa'nın "En İyi Küçük SEO Ajansı" olan Elephate'da Kıdemli Teknik SEO Danışmanıdır. Her gün, büyük uluslararası yapılar için SEO stratejileri oluşturmayı ve yürütmeyi ve JavaScript çerçeveleriyle oluşturulmuş modern web sitelerine olan ilgisini sürdürmeyi içerir. Maria, SEO'nun Avrupa'daki SEO konferanslarında konuşmacı olarak yer aldı ve 2018'in SMX Londra'sı da dahil olmak üzere, teknik SEO ve JavaScript de dahil olmak üzere çok çeşitli konularda konuştu. Bu konuyla ilgili daha fazla bilgi almak isterseniz, Elephate'ın "SEO SEO için En İyi Kılavuzu" nu kontrol etmelisiniz.