JavaScript Çerçevelerinde Canonical Etiketleri Doğru Şekilde Nasıl Uygulanır

JavaScript çerçevelerindeki canonical etiketler, arama motorlarını bir sayfanın tercih edilen sürümüne yönlendirmek için esastır. React, Vue veya Angular gibi çerçeveler kullandığınızda, bu etiketleri sunma biçiminiz Google’ın indeksleme tercihlerinize saygı duyup duymayacağını belirler. İyi yerleştirilmiş bir canonical etiket, URL parametreleri veya bölgesel varyasyonlar gibi kopya içeriğin neden olduğu karışıklığı çözen net bir sinyal görevi görür ve birincil sayfalarınızın arama otoritesini korumasını sağlar.

Modern çerçeveler genellikle belge başlığını dinamik olarak değiştirdiğinden, canonical etiketinizin tarayıcılar tarafından erişilebilir olmasını sağlamalısınız. Arama sistemi indekslemeden önce JavaScript’i tamamen oluşturmazsa, bu etiketleri enjekte etmek için istemci tarafındaki yürütmeye güvenmek gecikmelere veya kaçırılan sinyallere yol açabilir. Bu etiketlerin nerede ve nasıl göründüğünü standartlaştırarak sitenizin arama performansı için istikrarlı bir temel oluşturursunuz.

JavaScript Çerçevelerinde Canonical Etiketleri Doğru Şekilde Nasıl Uygulanır

JavaScript çerçeveleri neden canonical’izasyonu karmaşıklaştırır?

Birçok JavaScript çerçevesi, sunucunun minimum bir HTML kabuğu sağladığı istemci tarafı işlemeye varsayılan olarak ayarlanır. Belge başlığı etiketleri dahil olmak üzere gerçek sayfa içeriği, yalnızca tarayıcı JavaScript paketini çalıştırdıktan sonra oluşturulur. Bir tarayıcı sayfanızı ziyaret ederse, ilk kabuğu görebilir ancak canonical etiketinizin bulunduğu son oluşturulmuş belgeyi göremeyebilir.

Bu tutarsızlık, Google’ın ham HTML’de tercih ettiğiniz canonical sinyalini bulamadığı için yanlış URL’yi indekslemesi riskini yaratır. Tipik bir hesapta, tarayıcıların karmaşık komut dosyalarını işlemek için sınırlı süreye sahip olduğunu gözlemliyoruz. Canonical etiketiniz yavaş yüklenen bir bileşenin arkasına gömülmüşse, tarayıcı etiket ayrıştırılmadan önce ilerleyebilir.

Ayrıca, tek sayfalık uygulamalar genellikle tam bir sayfa yeniden yüklemesi tetiklemeden URL’yi günceller. Uygulama mantığınız bu dahili geçişler sırasında belge başlığındaki canonical etikeyi yenileyemezse, uygulamanızın her durumu aynı temel URL’yi bildirebilir. Bu, arama motorlarına tüm farklı sayfalarınızın aslında aynı olduğunu yanlış bir şekilde bildirir ve benzersiz içeriğinizi arama sonuçlarından etkili bir şekilde gizler.

JavaScript Çerçevelerinde Canonical Etiketleri Doğru Şekilde Nasıl Uygulanır — 2

Dinamik canonical etiketler için en iyi uygulamalar nelerdir?

Arama motorlarının doğru talimatları almasını sağlamak için kritik SEO sayfaları için tamamen istemci tarafı işlemeden uzaklaşmalısınız. Sunucu tarafı işleme veya statik site üretimi uygulamak, sunucunuzun tam ve tamamlanmış HTML’yi hemen tarayıcıya göndermesini sağlar. Bu, canonical etiketinin ilk yanıtta mevcut olduğu ve arama motoru tarafından yorumlanmaya yer bırakmadığı anlamına gelir.

Çerçeve mimariniz kesinlikle istemci tarafı işleme gerektiriyorsa, belge başlığı yönetim araçlarını kullanmalısınız. Bu amaç için tasarlanmış kitaplıklar, uygulama durumu değiştikçe belgenizin başlık bölümünü değiştirmenize olanak tanır. Bu, her benzersiz rotanın geçerli URL’yi yansıtan eşleşen, doğru bir canonical etiketine sahip olmasını sağlar.

  • Canonical etikeyi ilk HTML yanıtında sunmak için sunucu tarafı işlemeyi kullanın.
  • Canonical URL’nin tam protokol ve etki alanı dahil olmak üzere mutlak yola işaret ettiğinden emin olun.
  • Kullanıcı farklı sayfa durumları arasında gezindiğinde canonical etikeyi dinamik olarak güncelleyin.
  • Oluşturulan HTML’nin beklentilerinizle eşleştiğini onaylamak için URL İnceleme aracıyla sayfalarınızı test edin.
  • Sayfa rotalarınız ile ilgili canonical beyanları arasında 1:1 eşleme koruyun.

Alien Road bu teknolojiyi nasıl uygular

Alien Road olarak, her müşteri projesi için işleme ardışık düzeninin kapsamlı bir denetimini gerçekleştiriyoruz. Tipik bir çalışma sırasında, canonical etiketinin tam olarak ne zaman ve nasıl oluşturulduğunu belirlemek için kaynak kodunu analiz ederiz. Ham HTML yanıtında etiketlerin eksik olduğunu tespit edersek, sunucu tarafı sunum mantığını ayarlamak için geliştirme ekibiyle birlikte çalışırız.

Binlerce yönlü gezinme URL’si ile uğraşan e-ticaret müşterileri için genellikle özel bir ara yazılım (middleware) uygularız. Bu ara yazılım istekleri ele geçirir ve sayfa müşteriye ulaşmadan önce yanıt üstbilgisine veya HTML üstbilgisine uygun canonical bağlantıyı enjekte eder. Bu yöntem son derece etkilidir çünkü sunucu düzeyinde çalışır ve istemci tarafı komut dosyası yürütmeyle ilişkili tüm sınırlamaları veya gecikmeleri atlar.

Canonical uygulamanızı nasıl doğrularsınız?

Doğrulama, tarayıcınızda gördüğünüzün ötesine bakmayı gerektirir. Arama motorları kendi işleme sistemlerini kullandığından, botun aslında neyi işlediğini görmek için oluşturulmuş kaynak kodunu kontrol etmelisiniz. Standart tarayıcı geliştirici araçlarını kullanmak genellikle yanıltıcıdır çünkü yerel makineniz bir arama motoru tarayıcısından farklı bir işleme gücüne sahiptir.

Uygulamanızın amaçlandığı gibi çalıştığından emin olmak için belirli bir doğrulama rutini izlemenizi öneririz. Bu süreç hem kodun ham teslimatını hem de sitenizin komut dosyaları çalışmayı bitirdikten sonra nasıl göründüğünü kapsar; bu, Google’ın indekslediği son durumdur.

  • Sayfaya sağ tıklayın ve canonical etiketinin ham HTML’de mevcut olup olmadığını görmek için ‘Sayfa Kaynağını Görüntüle’ seçeneğini seçin.
  • Googlebot’un gördüğü gibi oluşturulmuş HTML’yi görmek için Google Search Console URL İnceleme aracını kullanın.
  • Birden fazla canonicals veya farklı etki alanlarına işaret eden etiketler gibi çakışan etiketleri kontrol edin.
  • Canonical URL’nizin robots.txt dosyanız tarafından engellenmediğini doğrulayın.
  • Belirsizlikten kaçınmak için canonical etiketinizin göreceli yollar yerine mutlak URL’ler kullandığından emin olun.

Statik sunum neden dinamik enjeksiyondan daha iyidir?

Statik sunum, SEO sinyallerinizin anında ve kesin olmasını sağlar. İlk HTML belgesi içinde bir canonical etiket sunduğunuzda, arama motorunun JavaScript’inizi oluşturmak için ek kaynaklar harcama ihtiyacını ortadan kaldırırsınız. Bu, indeksleme sürecini hızlandırır ve tarayıcının site yapınızı yanlış yorumlama olasılığını azaltır.

Dinamik enjeksiyona güvenmek, kararsız olabilen komut dosyası yürütmeye bir bağımlılık sunar. Bir komut dosyası başarısız olursa, bileşeninizde bir sözdizimi hatası varsa veya ağ yavaşsa, tarayıcı hangi sayfanın canonical olduğuna dair kendi kararını verebilir. Etiketi statik hale getirerek bu kararın kontrolünü ele alır ve tarayıcı performansından bağımsız olarak kalıcı olan net, güvenilir bir sinyal sağlarsınız.

Kopya veya çok benzer sayfalar için Google Arama’ya bir canonical URL belirtmek üzere, bir dizi yöntemi kullanarak tercihinizi belirtebilirsiniz.

Google Search Central

Bu hafta nereden başlamalı

En önemli beş ürün veya kategori sayfanızı kontrol ederek bu hafta işinize başlayın. Canonical etiketinin ham kodda mevcut olduğunu onaylamak için sağ tıklayın ve ‘Sayfa Kaynağını Görüntüle’ seçeneğini seçin. Etiketlerin eksik olduğunu veya yalnızca sayfa yüklendikten sonra göründüğünü fark ederseniz, bu mantığı sunucu tarafı işleme yapılandırmanıza taşımak için bir görev planlayın.

Etiketlerinizin statik varlığını doğruladıktan sonra, önümüzdeki iki hafta boyunca Google Search Console’daki indekslenmiş sayfalarınızı izleyin. Kopya indeksleme raporlarında bir düşüş aramalısınız. Bunun gibi tutarlı teknik ayarlamalar sitenizin genel sağlığını iyileştirir ve arama motorlarının içeriğinizi daha verimli bir şekilde taramasına yardımcı olur.

Paylaş