SEO Kalitesini Kaybetmeden Bir WordPress Sitesini Gatsby'ye Nasıl Geçirirsiniz?

Bir WordPress sitesini farklı bir sağlayıcıya taşımak bir avuç gibi görünebilir, ancak giderek daha fazla blog, eskiden en popüler çevrimiçi içerik yönetim sisteminden uzaklaşıyor. Yeni teknoloji büyümeye başladıkça seçenekler de artıyor ve son yıllarda WordPress, en umut verici olanı Gatsby olan rakiplerinin adil payıyla karşı karşıya kaldı.

Nispeten benzer bir şekilde çalışırken, birçok site sahibinin Gatsby'yi WordPress'e tercih etmesinin çeşitli nedenleri vardır.

İşlevsellik ve hizmetten performans kalitesine ve mevcut avantajlara kadar, burada hem WordPress'e hem de Gatsby'ye daha yakından bir bakış ve ardından WordPress tabanlı bir sitenin SEO kalitesini kaybetmeden Gatsby çerçevesine güvenli bir şekilde nasıl taşınacağına dair ayrıntılı bir kılavuz bulunmaktadır. .

WordPress'i Tanımlamak

WordPress onlarca yıldır bir numaralı içerik yönetim sistemini temsil ediyor. Açık kaynaklı bir model olarak WordPress, eklentiler ve uzantılar gibi çok sayıda ücretsiz içerik ve SEO yönetim aracı sunarken, yıllar boyunca binlerce blog ve web sitesi için kaliteli hizmet sunmaya devam etti.

İstatistikler, site sahiplerinin yaklaşık %29'unun hala WordPress kullandığını ve bu da platformu bariz bir ilk tercih haline getirdiğini belirtiyor. WordPress'in birçok kullanıcı tarafından tercih edilmesinin nedenleri, basitleştirilmiş içerik yüklemesi ve içeriğin ve SEO'sunun tüm yönlerini değiştirmedeki hassaslığından kaynaklanmaktadır. WordPress, hem ücretsiz hem de ücretli cömert bir eklenti galerisine sahiptir, ancak çoğu kullanıcı ikincisini çok daha işlevsel bir seçenek olarak görmektedir.

Bununla birlikte, WordPress kullanmanın dezavantajları da açıktır. Birincisi, sistem PHP tabanlıdır ve optimizasyon sürecini karmaşıklaştıran kapsamlı eski kodla birlikte gelir. Çeşitli kullanım durumları nedeniyle, WordPress yapılandırması basit bir site yapar, ancak hızlı değildir ve bildiğiniz gibi, bir site ne kadar yavaşsa, trafik o kadar az olur. Sadece bu değil, kaliteli içeriğin yanı sıra Google'ın önde gelen sıralama kriterleri bir web sitesinin yüklenme hızıdır.

Kullanıcıların WordPress kullanmaktan kaçınmasının diğer nedenlerinden bazıları şunlardır:

Sorunlu İçerik Yöneticisi

WordPress'in içerik düzenleyicisini yenilemesi biraz zaman aldı ve buna rağmen başarılı olamadılar. Yeni içerik yöneticisi (Gutenberg), kullanıcı deneyimi idealden daha az olduğu için, birçok kullanıcının zor bulduğu içeriği bloklara ayırır. Şey, bilmiyorum - ben gerçekten iyi buluyorum - alışınca.

Çoğu kullanıcı, bildikleriyle devam etmek için klasik editör eklentisini kuruyor.

PHP Yazma

Bir WordPress sitesini değiştirmek için değişikliklerin PHP ile yazılması gerekir. WordPress'te özel değişiklikler mevcut olsa da, birçok kullanıcı bunları aşırı talepkar ve zaman alıcı buluyor. Ve PHP, WordPress siteleri dışında en popüler dil olmadığı için, onunla uğraşmak biraz gereksiz geliyor.

Bazı kullanıcılar, bir sitenin tasarımını kod kullanmadan kolayca özelleştirmeye ve değiştirmeye yardımcı olan sayfa oluşturucuları kullanmayı tercih eder. Ancak yine de WordPress ile dünyadaki TÜM özelliklere sahip olamaz veya istediğiniz kadar özellik içeren bir rüya sitesi oluşturamazsınız. Daha karmaşık bir site muhtemelen WordPress'i ön uç olarak kullanmayı zor bulacaktır.

GatsbyJS'yi Tanımlamak

Birçoğu WordPress'i modası geçmiş bir teknoloji olarak görüyor, ancak rakipler arttıkça GatsbyJS en uygun alternatiflerden biri haline geldi. Çoğu site oluşturucu ve kullanıcı, JavaScript ve React.js gibi dilleri kullanan sitelere başvurur ve bu tam olarak Gatsby'nin masaya getirdiği şeydir. WordPress'in açık kaynaklı yapısından farklı olarak GatsbyJS, öncelikle React'te yerleşik statik bir site oluşturucudur.

Kullanıcılar Gatsby tabanlı bir siteyi ziyaret ettiğinde, platform sayfaları oluşturmaz. Bunun yerine, GatsbyJS, derleme sırasında sayfalar oluşturur ve ardından hepsini çevrimiçi ortama taşır. Sistem sunucu veya bunların bakımı gerektirmez ve JS, HTML ve CSS gibi statik dosyalarla uyumludur. Son olarak, Gatsby PHP'yi hiç kullanmaz, bu da eski WordPress kullanıcıları için büyük bir rahatlama sağlar.

Platformun dezavantajları da yok değil; bunlardan biri, yaptığınız herhangi bir site değişikliğinin sonucunu doğrudan görememektir, Gatsby'de olduğu gibi, her şeyin önce derlenmesi gerekir. Bununla birlikte, soruna yardımcı olmak için, çoğu kişi önce bir web sitesini derlemek ve daha sonra çevrimiçi duruma getirmek için Gitlab CI/CD ardışık düzenlerine güveniyor. Gatsby, kullanıcıların blog yazısı şablonları oluşturmasına ve tüm içeriği markdown'da yazmasına olanak tanır.

Gatsby kullanmanın diğer önemli faydaları şunlardır:

• Sıfır Yeniden Yükleme

Tek sayfalık bir uygulama veya SPA olarak Gatsby, yepyeni bir kaynak yüklemek için tıklanmış bir site sayfasına ihtiyaç duymaz.

• Görüntü İyileştirme

Platformda kullanılan tüm görüntüler, meta veriler gibi dış izlerden otomatik olarak filtrelenir ve hemen yeniden boyutlandırılır, sıkıştırılır, optimize edilir ve geç yüklenir.

• Kaynakları Ön Getirme

Gatsby, belirli bir sayfada bulunan tüm bağlantıları tespit etme ve verileri site önbelleğine yükleme kapasitesine sahiptir.

• Kod Değişiklikleri

Gatsby ile kullanılan kod basitleştirildi, gruplandırıldı, küçültüldü ve ne yazık ki sunuldu.

WordPress Verilerini Gatsby Framework'e Taşıma

Tüm içeriğinizi WordPress'ten Gatsby'ye taşımayı düşündüğünüzde, göz önünde bulundurmanız gereken en önemli husus mevcut SEO değerinizi kaybetmemektir.

Neyse ki Gatsby, diğer platformların içeriğinin alınmasını oldukça kolaylaştırıyor.

İçeriğinizi aktarmak için ihtiyaç duyacağınız ilk şey bir kaynak eklentidir. Bir kaynak eklentisi, Gatsby'nin Graphql mağazasını sorunsuz ve otomatik olarak doldurmasına yardımcı olurken, tüm girdi bilgilerine erişmenizi sağlar. Kaynak eklenti, ihtiyaçlarınıza uyacak şekilde değiştirilebilir ve hatta platformunuzu statik yerine açık kaynaklı hale getirebilir.

Graphql, API verilerinin elde edilmesinde rafine bir çözüm sunar ve öncülü REST API'den önemli ölçüde farklıdır. Graphql, sistemin kendisinin bir parçası olarak kullanılması amaçlanan Gatsby platformunu tamamlayıcı bir varlıktır. Graphql'i tamamen atlamak mümkündür, ancak çeşitli önemli özelliklere erişmenize izin vermeyeceği için bir seçenek olarak büyük ölçüde göz ardı edilir.

Atılacak bir sonraki adım, yazma sürecini kolaylaştırmak ve her şeyi Markdown'a taşımaktır. Markdown veya .md dosyaları, kullanıcıların daha sonra HTML'ye daha kolay dönüştürülebilecek basit ve düz metinler yazmasına olanak tanır. Dahası, Markdown tüm .md dosyalarını sitenin Github koduyla birlikte teslim edecek ve süreç sürümünün kontrollü olmasını sağlayacaktır. Bazı kullanıcılar Gatsby Advanced Started'ı (GAS) da faydalı bulabilir, çünkü bu proje SEO odaklı Gatsby sitelerinin oluşturulmasını sağlar.

WordPress Gönderilerini Markdown'a Nasıl Aktarırım?

Her şeyden önce, geçerli tüm WordPress makalelerini dışa aktarmanız gerekecek. Bu yapıldıktan sonra, bunları düz metne veya Markdown'a dönüştürmeniz gerekecektir. Bunu yapan bir araç var ve buna WordPress Markdown'a Aktarma adı veriliyor. Bu araçla, tüm WordPress içeriğini, etiketlerini, kategorilerini ve temel SEO özelliklerini çıkarabilirsiniz. Araç, yalnızca makale içeriğini dönüştürmek için değil, aynı zamanda resim göndermek için de fazladan bir adım atar.

Dosyalar alındıktan sonra proje içerik klasörüne indirilmeye hazırdır. Gatsby'yi bir sonraki çalıştırışınızda, yalnızca birkaç makale fark edeceksiniz, ancak siteyi oluşturduğunuzda, tüm içerik edinilmiş olarak temsil edilecektir.

Gatsby ile Gönderiler ve Sayfalar Nasıl Oluşturulur

Gatsby'nin performansı, WordPress'te kullanılan PHP'ye benzer. Ancak Gatsby, React'in tamamını kullandığından, dil bileşiklerini sayfaların klasörlerinin altına yerleştirir ve böylece onları otomatik olarak site sayfalarına dönüştürür. Bu özellik, 'Dizin' ve 'Hakkımda' gibi tek boyutlu sayfa içeriği için idealdir.

Kategoriler veya blog gönderileri gibi dinamik içerik açısından, kullanıcılar belirli sayfalar oluşturmak için Gatsby'nin kullanıma hazır şablonlarına güvenebilirler. GAS kullanacak olanlar, etiketleri ve kategorileri ile birlikte gönderi şablonlarına zaten sahip olacaklar. İçeriğinizi yeniden tahmin etmekten çekinmeyin ve onu daha dinamik ve dolayısıyla Gatsby ile daha uyumlu hale getirin. Yaptığınız tüm değişiklikler tarayıcınızda bir kerede gösterilecek ve bu da Gatsby'yi hızlı yineleme için oldukça kolay hale getiriyor.

Unutmayın, Gatsby'nin özü, gatsby-node.js dosyasında yatmaktadır. Burada, hem şablon hem de sayfa davranışlarının yanı sıra bilgi, öğeler ve kullanılacak ekstra verileri tahmin edebilirsiniz. Dosya, düğümleri doldurmanıza yardımcı olduğundan veya başka bir deyişle, veriler GraphQL'nizde depolandığından, dikkate alınması da zararlıdır.

Gatsby Sitesine Nasıl Stil Verilir

Site stilleri yazma açısından Gatsby, .css dosyaları, Sass, CSS-in-JS ve daha fazlası gibi birçok uygun seçenek sunar. Gatsby sitenizi nasıl tasarlayacağınızla ilgili birkaç ipucu:

• Ant, MaterialUI ve Materialize gibi mevcut tasarım kaynaklarını keşfedin.
• Dağıtıma hazır olun! Gatsby gibi statik siteler, site dağıtımını son derece kolay ve uygun maliyetli hale getirir. Bunu yapmak için Netlify, AWS Amplify, Now ve Surge gibi bir dizi ücretsiz ve hızlı aracı kullanabilirsiniz.
• Optimize edin, optimize edin, optimize edin! Gatsby'yi kullanmak, daha hızlı bir siteye sahip olmak anlamına gelir ve her zaman daha hızlı, SEO destekli ve erişilebilir hale getirmek için platformu kullanabilirsiniz. En iyi optimizasyon araçlarından biri Lighthouse'dur, çünkü her şeyi otomatik olarak yapar: denetleme, ölçümler, web uygulamaları, ayrıntılı veriler ve hatta yardımcı bağlantılar. Lighthouse denetiminizi Google, Firefox üzerinden çalıştırabilir veya Lighthouse CLI seçeneğini kullanabilirsiniz.

Gatsby Web Sitenizin Hızlı Çalışmasını Nasıl Sağlarsınız?

Tüm içerik taşındıktan sonra, Gatsby sitenizi aşağıdakileri yaparak daha hızlı hale getirebilirsiniz:

• Tüm Gatsby verilerinin GraphQL aracılığıyla işlenmesi.
• Siteyi yavaşlatabilecekleri için moment.js gibi ağır kitaplıkları kullanmaktan kaçının.
• Tarihleri ​​değiştirmek, bu verileri sayfalarınıza göndermek ve diğer ağır iş görevlerini yapmak için sunucunuza güvenin.
• GraphQL kullanarak daha az veriyi yönetin. Bu sayede yalnızca ihtiyacınız olan verilere erişecek ve yanlışlıkla aşırı veri miktarlarının yığılmasının önüne geçeceksiniz.
• Erişilebilir hale getirin. Kullanıcılarınız sitenizle sizin yaptığınız gibi etkileşime girmeyecek, bu nedenle, iyileştirilmiş HTML ve optimize edilmiş SEO puanları ile sonuçlanabilecek kaliteli bir a11y ekleyerek sitenin tüm kullanıcı kategorilerini kapsadığından emin olun. 11 yıllık sorunları çözmek için Axe gibi ilgili araçları kullanabilirsiniz.

Yüksek Kaliteli SEO Nasıl Korunur?

Google'ın siteleri nasıl sıraladığına ilişkin temel bilgileri anlayarak, Gatsby sitenizi bir adım öteye taşıyabileceksiniz. Bunu yapmak için aşağıdaki hususlara dikkat edin:

• Yıldız ve ilgili içerik
• Kullanıcılar için daha fazla erişilebilirlik
• Daha hızlı çalışan bir site
• Bağlantılar oluşturmak veya sitenizi diğer alanlarda sergilemek

WordPress'ten Gatsby'ye Geçiş Hakkında Basitleştirilmiş Bir Kılavuz

Süreci özetlemek ve kolaylaştırmak için, sitenizi WordPress'ten GatsbyJS'ye tamamen taşımak için adım adım bir kılavuz burada.

• Araçlar > Dışa Aktar'da bulunan XML'i WordPress'ten indirin.
• XML'i Markdown'a veya düz metne dönüştürmek için bir araç kullanın; bu, bazen blog gönderilerini dönüştürme işinin yarısından fazlasını yapar.
• Tüm görüntüleri ve sunucu içeriğini indirin. WordPress yüklemelerinden görüntüleri bir resim klasörüne çekin.
• Gatsby stiline uyum sağlamak için bozuk listeleri ve girintili kod bloklarını düzeltin.
• Küçük resimleri kaydedin ve yeniden kullanmak üzere ilgili klasöre taşıyın.
• Otomatik dağıtımı ayarlamak için Netlify'a bağlanın. JavaScript ile yazılmışsa, etkinleştirmek için onu typescript'e taşıyın.
• CSS-in-JS'yi kullanabilmeleri için stil seçeneklerini değiştirin. Stili ve düzeni güncelleyin.
• Blog içeriğinin '/blog/' kategorisine girmesi için güncellemeleri çalıştırın.
• Tüm URL'ler için yönlendirmeyi kullanın.
• Bir gece modu oluşturmak için bir sarmalayıcı olarak React Context API'yi kullanın.
• Manuel veya otomatik bir içe aktarıcı kullanarak WordPress yorumlarını Gatsby'ye taşıyın.

Tüm bu adımlar işlendikten sonra geriye sayfaları oluşturmak, GraphQL'de ustalaşmak, uygun sorgulamalar yapmak ve gerektiğinde küçük karışıklıkları temizlemek kalıyor.

Geçiş Süreci Ne Kadar Sürecek?

Tüm içeriği WordPress'ten Gatsby'ye taşımak, kişisel çabalarınızın yanı sıra, emrinizde olan içerik hacmine bağlı olacaktır. İdeal olarak, tüm içeriği en fazla iki hafta içinde aktarabilmelisiniz. Ancak, React'te yeniyseniz, buna uyum sağlamak için zamana ihtiyacınız olacağını unutmayın.

Bir kez alıştıktan sonra, MySQL veritabanınızda daha az HTML tahribatı ve erişmesi, yönetmesi, düzenlemesi, okuması, yedeklemesi ve başkalarıyla paylaşması kolay dosyalar gibi Gatsby ile gelen avantajların keyfine varacaksınız.

Son bir şey…

Gatsby'yi yönetmek, CSS, HTML, JavaScript, Node.js, React, ES6 ve GraphQL'de bir dizi beceri ve arka plan gerektirirken, birkaçını saymak gerekirse, yavaş başlayın ve her teknolojiyi geldiği gibi öğrenin.

Süreç bir zorluk teşkil etse bile, nihayetinde, geçiş süreciyle ilgili daha ayrıntılı bir kılavuz için Gatsby Başlangıç ​​Eğitimi'ni takip edebilirsiniz.

Hadi kodlamaya geçelim mi?