Headless CMS için SEO: Dikkat Edilmesi Gerekenler

Yayınlanan: 2020-11-30

İçindekiler

Temel olarak, başsız bir CMS için SEO hala geleneksel bir CMS ile aynı kuralları takip eder. Bu nedenle, içine girmek istediğinizde taranabilirlik, hız ve içerik kalitesi hedef olarak kalır. Ancak ulaşılması gereken benzer hedeflerimiz olmasına rağmen, bu hedeflere ulaşmanın yolları, başsız bir CMS'de farklıdır.

Başsız bir CMS'de SEO nasıl farklıdır?

Başsız bir CMS'de, tüm süreci kolaylaştırmak için genellikle hiçbir eklenti veya eklenti bulunmadığından, SEO çalışmalarının çoğu manuel olarak yapılmalıdır - ve bu, sizin için daha fazla iş ve bunun yerine süreçte öğrenilecek daha fazla şey anlamına gelir. üçüncü taraf araçlara güvenmek. Ayrıca, çoğu başsız CMS ve ön uç çerçeveleri şu anda JavaScript tabanlı olduğundan, tarayıcıların JavaScript'i kolayca oluşturamaması nedeniyle bu tür ortamlar için SEO karmaşık hale gelebilir.

Googlebot JavaScript oluşturabilse de buna güvenmek istemiyoruz.
Martin Splitt, dinamik oluşturmanın uygulanması hakkında

 Önerilen okuma: Headless CMS ve Geleneksel CMS

Başsız bir CMS'de dikkat edilmesi gerekenler

Alternatif metinler

Alternatif metinler, resim içeriğinizin Google botları tarafından okunabilmesine yardımcı olur. Özel meta verilere benzer şekilde, resimler için alternatif metin, çoğu başsız CMS'de kullanıma hazır bir özellik değildir ve bu, CMS sağlayıcınız tarafından uygulanması gerektiği anlamına gelir.

Yerleşik bir Alt Metin özelliği olmayan başsız bir CMS için, resimlerinize yalnızca bir <alt> özniteliği eklemeniz gerektiğinden, resim başına alternatif metni çok fazla çaba harcamadan manuel olarak ekleyebiliriz.

 <img src="image.png" alt="alt metnimiz">

meta veri

Meta veri etiketleri, Google Arama'nın anladığı özel etiketlerdir. Bu etiketler sitenizin içeriğini tanımlar ve sayfalarınızın Google Arama'da nasıl görüneceğini kontrol etmeye yardımcı olur. Ve geleneksel bir CMS'nin aksine, başsız bir CMS genellikle meta veri etiketlerini anında düzenleme özelliğine sahip değildir ; bu, sayfanızın başlığının, açıklamalarının ve diğer meta etiketlerin içerik modellerinize manuel olarak eklenmesi gerektiği anlamına gelir.

Örneğin, React tabanlı bir ön ucu olan ancak özel meta veri desteği olmayan başsız bir web sitesi için, meta verileri uygun bir şekilde <head> dosyamıza eklemek için tepki kaskını kullanırız.

Özel meta verileri destekleyen başsız bir CMS için, genellikle içerik modelinize özel meta veri etiketleri içeren alanlar eklemeniz veya tüm gerekli meta etiketleri içeren özel bir SEO modeli oluşturmanız gerekir. Oluşturulan SEO modeli, ihtiyacı olan tüm sayfalarla ilişki kuracak şekilde yapılandırılmalıdır.

GraphCMS'de bir SEO modeli — *GraphCMS'de* bir *SEO modeli*

Ek açıklamalı veri snippet'leri

Yapılandırılmış veri snippet'leri, Google Arama'nın sayfanızı ve içindeki tüm içeriği daha iyi anlamasına yardımcı olur. Geçerli yapılandırılmış veri snippet'leri sağlayarak siteniz zengin sonuçlar için uygundur.

Yapılandırılmış bir veri parçacığı oluşturmak için sitenizin <head> bölümünde depolanan bir JSON-LD dizisi kullanıyoruz. Ve tüm sürecin bir eklenti (ör. Yoast SEO) ile otomatikleştirildiği geleneksel CMS'den farklı olarak, başsız bir CMS'de şunları yapmanız gerekir:

Sayfalarınız için doğru yapılandırılmış veri türlerini seçin
Gereken tüm yapılandırılmış verilerin oluşturulmasına veya sunucu tarafında oluşturulan yapılandırılmış verilere daha fazla bilgi eklenmesine yardımcı olan özel JavaScript kodu ekleyin

 getir('https://api.example.com/recipes/123')
.then(yanıt => yanıt.text())
.then(yapılandırılmışDataText => {
  const komut dosyası = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structDataText;
  document.head.appendChild(komut dosyası);
});

Zengin Sonuçlar Testini kullanarak uygulamanızı test edin

Sayfa görüntüleme izleme sorunları

Google Analytics'i başsız bir web sitesine uygulamayı denediyseniz, muhtemelen web sitenizin yalnızca ilk sayfa görüntülemesinin izlendiğini fark etmişsinizdir. Bu, büyük ölçüde, başsız bir CMS'nin ön ucunun doğası gereği Tek Sayfa Uygulaması olması gerçeğinden kaynaklanmaktadır; bu, sayfanın yalnızca bir kez yüklendiği ve oturum başına yalnızca bir pageView olayının tetiklendiği anlamına gelir. Bu sorunu aşmak için, Google Etiket Yöneticisi'nde Geçmiş Değişikliği tetikleyicisi kullanılarak izlenebilen sanal sayfa görüntülemelerini etkinleştirmek için Geçmiş API'sini uyguluyoruz.

URL parçasındaki veya geçmiş durum nesnesindeki değişiklikler için geçmiş değişikliği tetikleyici izleri. Bu ikisi arasında bir değişiklik meydana geldiğinde, aşağıdaki değişkenlere sahibiz:

Geçmiş eski URL parçası: Eskiden URL parçası neydi.
Geçmiş yeni URL parçası: URL parçasının şimdi ne olduğu.
Geçmiş eski durum: Sitenin pushState çağrıları tarafından kontrol edilen eski geçmiş durum nesnesi.
Geçmiş yeni durum: Sitenin pushState çağrıları tarafından kontrol edilen yeni geçmiş durumu nesnesi.

Bir geçmiş değişikliği tetikleyicisi oluşturmak için Google Etiket Yöneticisi'ne gidin ve:

Tetikleyiciler > Yeni'yi seçin
Tetikleme Yapılandırması > Geçmiş Değişikliği'ni seçin

Bundan sonra, az önce oluşturduğumuz Geçmiş Değişikliği tetikleyicisini tetiklemek için yeni bir Google Analytics Yapılandırma etiketi oluşturmamız gerekecek, örneğin:

Ve bu kadar. Artık başsız web sitenizdeki sayfa görüntülemelerini izleyebilmelisiniz.

SEO denetim sorunları

Başsız web siteniz çoğunlukla istemci tarafı JavaScript'ten yapıldığından, SEO denetimi, çoğu ücretsiz SEO denetim aracında kullanılan tarayıcıların JavaScript oluşturma yeteneği ile gelmediğinden bir sorun oluşturabilir.

JavaScript oluşturma, çoğu SEO denetim aracında ücretsiz bir özellik değildir — *JavaScript oluşturma,* *çoğu SEO denetim aracında ücretsiz bir özellik* ***değildir***

Bu özellik için desteği etkinleştirmek için bir sonraki premium plana yükseltebileceğiniz için bu sorun, daha fazla ödeme yaparak çözülebilir. Ayrıca, çoğu SEO denetim aracında JavaScript oluşturmanın varsayılan olarak etkin olmadığını da unutmayın; bu, başsız web sitenizi taramak için manuel olarak etkinleştirmeniz gerektiği anlamına gelir.

*ScreamingFrog'da JavaScript oluşturmayı etkinleştirme*

Kod bölme

Tipik bir başsız CMS büyük ölçüde JavaScript tabanlı olduğundan, web sitenizde kullanılan JavaScript kodunun miktarı - özellikle çok sayıda üçüncü taraf kitaplığı kullandığınızda - bunaltıcı noktaya gelebilir.

JavaScript başlatma süresi çok yüksek — Kaynak: Kod bölme ile JavaScript yüklerini azaltın

Ve hepimizin bildiği gibi, sayfa hızı SEO'yu etkiler, bu yüzden JavaScript kodumuzu bu şekilde tutamayız, bu yüzden bu sorunu aşmak için kod bölme yapılır. Kod bölme ile JS kodunuzu daha sonra çalışma zamanında dinamik olarak yüklenebilen daha küçük paketlere bölebilirsiniz. Bu özellik şu anda faktör paketi aracılığıyla Webpack ve Browserify gibi paketleyiciler tarafından desteklenmektedir.

 React, { Suspense, lazy } 'tepkiden' içe aktar;
'tepki-yönlendirici-dom'dan { BrowserRouter as Router, Route, Switch } içe aktarın;

const Home = tembel(() => import('./routes/Home'));
const Hakkında = tembel(() => import('./routes/Hakkında'));

const Uygulama = () => (
  <Yönlendirici>
    <Suspense yedeği={<div>Yükleniyor...</div>}>
      <Anahtar>
        <Route tam yol="/" bileşen={Ana Sayfa}/>
        <Route path="/about" component={Hakkında}/>
      </Anahtar>
    </Gerilim>
  </Yönlendirici>
);

Dinamik oluşturma

Başsız web sitelerinin çoğu doğası gereği JavaScript olduğundan, JavaScript oluşturma ile aynı büyük SEO zorluğuyla karşı karşıyadırlar.

[…], JavaScript'i işlemek zordur ve tüm arama motoru tarayıcıları onu başarıyla veya hemen işleyemez.
Dinamik İşleme Uygulaması, Google

Tarayıcılar JavaScript'i etkili bir şekilde oluşturamazlar, bu nedenle Google'ın kendisi bu arada bir geçici çözüm çözümü olarak Dinamik İşleme'yi önerir. Google I/O '18'de tanıtılan dinamik oluşturma, istemci tarafı oluşturmayla gelen tüm avantajları korurken SEO zorluklarını çözmenin kolay bir yolunu arayan JavaScript tabanlı web siteleri için ideal bir çözümdür. Bu yeni oluşturma yöntemiyle, web sunucunuz kullanıcılara normal, istemci tarafında oluşturulmuş içerik gönderirken, arama motoru tarayıcıları tamamen sunucu tarafından oluşturulmuş, statik HTML içeriği alır.

Dinamik oluşturma nasıl çalışır? — *Dinamik oluşturma nasıl çalışır (basitleştirilmiş)*

Tüm bunların anlamı, dinamik oluşturma ile her iki dünyanın da en iyisine sahip olmanızdır - sunucu tarafı oluşturmanın taranabilirlik kolaylığı ve ardından istemci tarafı oluşturmanın hızlı oluşturulması.

Dinamik oluşturmayı uygulamak için tüm süreci kısaltmak için Rendertron veya Puppeteer gibi dinamik oluşturuculara güvenmemiz gerekecek. Bu işlemeler, sitenizin içeriğini tarayıcılar tarafından anlaşılabilir statik HTML'ye dönüştürecektir.

Dinamik oluşturucunuzu yüklemeyi ve yapılandırmayı bitirdikten sonra, kullanıcı aracılarının davranışlarını yapılandırmak için Google'ın resmi belgesindeki ek adımları izleyin.

Çözüm

Başsız bir CMS için SEO, en basit yol değildir ve her şeyi doğru yapmak için geliştiricilerinizin biraz çalışması gerekir. Ancak bir kez alıştığınızda, SEO söz konusu olduğunda, başsız bir CMS, geleneksel bir CMS kadar etkili olabilir. Dahası, istediğiniz şekilde içerik oluşturmak için çok daha fazla özgürlük ve esneklik elde edersiniz.