Gatsby.js Siteleriniz İçin Özel Bir Sitemap Nasıl Oluşturulur?
Web sitenizin arama motorları tarafından doğru ve eksiksiz bir şekilde taranması, dijital varlığınızın başarısı için kritik öneme sahiptir. Bu sürecin temel taşlarından biri de sitemap’lerdir. Özellikle Gatsby.js gibi modern, performans odaklı bir statik site jeneratörü kullanıyorsanız, sitenizin dinamik yapısı ve veri kaynaklarının çeşitliliği göz önüne alındığında, özel bir sitemap oluşturmak hem bir gereklilik hem de güçlü bir SEO stratejisinin parçasıdır. Bu makalede, Gatsby.js siteniz için özel bir sitemap’i adım adım nasıl oluşturacağınızı, farklı veri kaynaklarını nasıl entegre edeceğinizi ve arama motorlarına nasıl bildireceğinizi detaylı bir şekilde inceleyeceğiz.
Giriş: Sitemap Nedir ve Neden Önemlidir?
Sitemap, web sitenizdeki sayfaların, videoların ve diğer dosyaların bir listesini içeren bir dosyadır ve arama motorlarına sitenizin organizasyonu hakkında bilgi verir. Temel olarak, bir sitemap arama motoru botlarının sitenizdeki tüm önemli sayfaları bulmasına ve taramasına yardımcı olan bir yol haritasıdır.
Sitemap’in SEO İçin Önemi
* Yeni Sayfaların Keşfi: Özellikle yeni bir siteye sahipseniz veya sitenize sık sık yeni sayfalar ekliyorsanız, sitemap arama motorlarının bu yeni içerikleri daha hızlı bulmasını sağlar.
* İçerik Hiyerarşisi: Sitemap, sitenizin yapısı hakkında bilgi vererek, hangi sayfaların daha önemli olduğunu (öncelik) ve ne sıklıkla güncellendiğini (değişim sıklığı) arama motorlarına iletmenize olanak tanır.
* Taranma Bütçesi Optimizasyonu: Büyük sitelerde, arama motorları sitenizin tüm sayfalarını her zaman tarayamaz. Sitemap, arama motorlarının taranma bütçesini en verimli şekilde kullanmasına yardımcı olur ve önemli sayfaların atlanmamasını sağlar.
* Medya İçeriklerinin Taranması: Geleneksel HTML sitemap’lerinin yanı sıra, video ve görsel sitemap’leri de arama motorlarının bu tür içerikleri daha iyi anlamasına ve dizine eklemesine yardımcı olur.
* Hata Tespit ve Çözümü: Google Search Console gibi araçlar aracılığıyla sitemap’inizi izleyerek, taranma hatalarını veya eksik sayfaları tespit edebilir ve hızla düzeltebilirsiniz.
Gatsby ve Sitemap İlişkisi
Gatsby.js, verileri farklı kaynaklardan (Markdown dosyaları, headless CMS’ler, API’ler vb.) çekerek statik HTML sayfaları oluşturan güçlü bir framework’tür. Bu statik yapı, hızlı yükleme süreleri ve yüksek performans sunarken, sitemap oluşturma sürecini de biraz farklı bir yaklaşımla ele almayı gerektirir. Geleneksel bir dinamik web sitesinde sitemap genellikle bir veritabanı sorgusuyla anında oluşturulurken, Gatsby’de bu süreç derleme zamanında (build time) gerçekleşir. Bu, sitemap’inizin siteniz dağıtılmadan önce tamamen oluşturulduğu ve optimize edildiği anlamına gelir. Gatsby’nin modüler yapısı sayesinde, sitemap oluşturma işlemi için özel olarak tasarlanmış eklentileri kullanarak bu süreci kolayca otomatikleştirebilir ve özelleştirebiliriz.
Gatsby’de Sitemap Oluşturmanın Temel Yöntemleri
Gatsby siteniz için sitemap oluşturmanın birkaç temel yöntemi vardır, ancak en yaygın ve önerilen yol, Gatsby’nin zengin eklenti ekosisteminden faydalanmaktır.
gatsby-plugin-sitemap Kullanımı
Bu, Gatsby siteleri için sitemap oluşturmanın standart ve en etkili yoludur. Eklenti, sitenizin GraphQL katmanından sayfa verilerini çekerek otomatik olarak bir sitemap.xml dosyası oluşturur. Çoğu senaryo için yeterli esnekliği ve özelleştirme seçeneklerini sunar.
Manuel Sitemap Oluşturma (Daha Az Tercih Edilen)
Çok özel ve nadir durumlar dışında manuel sitemap oluşturmak genellikle önerilmez. Bu yöntem, her sayfa için XML girdilerini elle yazmayı veya özel bir Node.js betiği ile oluşturmayı gerektirir. Bakımı zordur ve siteniz büyüdükçe veya değiştikçe hızla güncelliğini yitirebilir. Ancak, gatsby-plugin-sitemap‘in sunduğu esnekliğin yetersiz kaldığı çok spesifik bir ihtiyacınız varsa düşünülebilir.
Dinamik Sitemap Oluşturma (Veri Kaynaklarından Çekilen İçerikler İçin)
Gatsby’nin en güçlü yanlarından biri, farklı veri kaynaklarından (Contentful, Sanity, WordPress REST API’si, lokal Markdown dosyaları vb.) içerik çekebilmesidir. gatsby-plugin-sitemap bu dinamik verilerle oluşturulan sayfaları da otomatik olarak algılayabilir ve sitemap’e dahil edebilir. Önemli olan, bu sayfaların Gatsby’nin createPages API’si aracılığıyla derleme zamanında oluşturulmuş olmasıdır. Eklenti, GraphQL sorgusu aracılığıyla bu sayfaların URL’lerini ve diğer meta verilerini çekerek sitemap’e ekler.
gatsby-plugin-sitemap ile Otomatik Sitemap Oluşturma
gatsby-plugin-sitemap, Gatsby siteniz için bir sitemap oluşturmanın en kolay ve en güçlü yoludur. Bu eklenti, sitenizin derleme zamanında (build time) tüm sayfalarınızı tarar ve XML formatında bir sitemap dosyası oluşturur.
Kurulum
İlk adım olarak, eklentiyi projenize yüklemeniz gerekir:
npm install gatsby-plugin-sitemap
veya
yarn add gatsby-plugin-sitemapYapılandırma (gatsby-config.js)
Eklentiyi yükledikten sonra, gatsby-config.js dosyanızda yapılandırmanız gerekir. En temel yapılandırma aşağıdaki gibidir:
// gatsby-config.js
module.exports = {
siteMetadata: {
siteUrl: https://www.example.com, // Kendi site URL'nizi buraya yazın
},
plugins: [
gatsby-plugin-sitemap,
],
};siteMetadata.siteUrl: Bu alan kritik öneme sahiptir. gatsby-plugin-sitemap, sitemap’teki her URL’nin tam yolunu oluşturmak için bu değeri kullanır. Eğer bu değer doğru ayarlanmazsa, sitemap’inizdeki URL’ler geçersiz olacaktır. Genellikle https://www.yourdomain.com şeklinde, protokol ve domain adı ile birlikte tam URL’yi belirtmelisiniz.
query Kullanımı: Eklenti, varsayılan olarak Gatsby’nin dahili allSitePage GraphQL sorgusunu kullanarak tüm sayfaları çeker. Ancak, eğer sitenizdeki sayfaların changefreq, priority veya lastmod gibi özel alanlara sahip olmasını istiyorsanız veya belirli veri kaynaklarından gelen sayfaları sitemap’e dahil etmek istiyorsanız, kendi GraphQL sorgunuzu tanımlayabilirsiniz.
Aşağıdaki örnekte, sitenizdeki tüm sayfaları ve Markdown (veya MDX) ile oluşturulmuş blog yazılarını içeren bir sitemap nasıl oluşturulur gösterilmektedir:
// gatsby-config.js
module.exports = {
siteMetadata: {
siteUrl: https://www.example.com,
},
plugins: [
{
resolve: gatsby-plugin-sitemap,
options: {
query:
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
allMarkdownRemark { // Eğer Markdown dosyalarınız varsa
nodes {
fields {
slug
}
frontmatter {
date // lastmod için kullanılabilir
}
}
}
# Eğer Contentful gibi başka bir kaynaktan veri çekiyorsanız
# allContentfulBlogPost {
# nodes {
# slug
# updatedAt // lastmod için kullanılabilir
# }
# }
}
,
resolveSiteUrl: () => 'https://www.example.com', // siteMetadata'dan da çekilebilir
resolvePages: ({
allSitePage: { nodes: allPages },
allMarkdownRemark: { nodes: allMarkdownPages },
// allContentfulBlogPost: { nodes: allContentfulPosts },
}) => {
const pages = allPages.map(page => {
return { ...page };
});
const markdownPages = allMarkdownPages.map(page => {
return {
path: page.fields.slug, // Kendi slug alanınızı buraya yazın
lastmod: page.frontmatter.date, // Son güncelleme tarihi
changefreq: weekly,
priority: 0.7,
};
});
// const contentfulPosts = allContentfulPosts.map(post => {
// return {
// path: /blog/${post.slug},
// lastmod: post.updatedAt,
// changefreq: daily,
// priority: 0.8,
// };
// });
return [...pages, ...markdownPages /, ...contentfulPosts /];
},
serialize: ({ path, lastmod, changefreq, priority }) => {
return {
url: path,
lastmod,
changefreq,
priority,
};
},
// Hariç tutulacak sayfalar
exclude: ["/dev-404-page/", "/404/", "/404.html", "/offline-plugin-app-shell-fallback/", "/_dsg/"],
output: "/sitemap.xml", // Sitemap dosyasının kaydedileceği yol
createLinkInHead: true, // HTML head'e sitemap linki ekler
},
},
],
};resolveSiteUrl: Bu fonksiyon, siteMetadata.siteUrl‘dan farklı bir URL kullanmak isterseniz veya karmaşık bir mantıkla site URL’sini belirlemeniz gerekirse kullanışlıdır. Çoğu durumda, siteMetadata‘dan çekmek yeterlidir.
resolvePages: Bu fonksiyon, GraphQL sorgunuzdan gelen verileri işleyerek sitemap’e dahil edilecek sayfa nesneleri dizisini döndürür. Burada, farklı veri kaynaklarından gelen sayfaları birleştirebilir ve her sayfa için özel path, lastmod, changefreq ve priority değerlerini belirleyebilirsiniz.
serialize: resolvePages tarafından döndürülen her sayfa nesnesini alır ve sitemap XML formatına uygun bir şekilde dönüştürür. url alanı zorunludur. Diğer alanlar isteğe bağlıdır.
exclude: Sitemap’inizde yer almasını istemediğiniz belirli yolları (örneğin, 404 sayfaları, geliştirme sayfaları) bu diziye ekleyebilirsiniz.
output: Oluşturulan sitemap dosyasının adını ve yolunu belirtir. Varsayılan olarak /sitemap.xml‘dir.
createLinkInHead: true olarak ayarlandığında, sitenizin her HTML sayfasının bölümüne sitemap’e bir etiketi ekler. Bu, arama motorlarının sitemap’inizi daha kolay keşfetmesine yardımcı olabilir.
Bu yapılandırma ile, Gatsby projenizi derlediğinizde (gatsby build), public klasörünüzde otomatik olarak bir sitemap.xml dosyası oluşturulacaktır.
Dinamik Verilerle Özel Sitemap Oluşturma
Gatsby’nin gücü, farklı veri kaynaklarından içerik çekip dinamik olarak sayfalar oluşturabilmesidir. Bu, headless CMS’lerden (Contentful, Sanity, Strapi), API’lerden veya hatta yerel Markdown dosyalarından gelen blog yazıları, ürün sayfaları veya portföy öğeleri gibi içerikleri içerir. gatsby-plugin-sitemap bu dinamik olarak oluşturulan sayfaları da sitemap’e dahil etmek için oldukça esnektir.
Gereksinimler ve Yaklaşım
Dinamik verilerle oluşturulan sayfaların sitemap’e dahil edilmesi için temel olarak iki şeye ihtiyacımız var:
1. Veri Kaynağı: İçeriği sağlayacak bir headless CMS, API veya dosya sistemi.
2. gatsby-node.js: Gatsby’nin createPages API’si aracılığıyla bu verilerden programatik olarak sayfalar oluşturmak.
gatsby-plugin-sitemap, gatsby-node.js‘de createPages API’si ile oluşturduğunuz tüm sayfaları otomatik olarak algılayabilir. Ancak, bu sayfalar için lastmod, changefreq ve priority gibi özel alanları sitemap’e eklemek isterseniz, gatsby-config.js dosyasındaki query ve resolvePages fonksiyonlarını kullanmanız gerekir.
Örnek Senaryo: Blog Yazıları İçin Sitemap Girişi
Diyelim ki blog yazılarınızı Markdown dosyalarında tutuyor ve her bir yazı için ayrı bir sayfa oluşturuyorsunuz.
1. gatsby-node.js dosyanızda sayfaları oluşturma:
// gatsby-node.js
const path = require('path');
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const result = await graphql(
query {
allMarkdownRemark {
nodes {
fields {
slug
}
}
}
}
);
result.data.allMarkdownRemark.nodes.forEach(node => {
createPage({
path: node.fields.slug,
component: path.resolve(./src/templates/blog-post.js), // Şablon dosyanız
context: {
slug: node.fields.slug,
},
});
});
};2. gatsby-config.js dosyanızda sitemap yapılandırmasını güncelleme:
gatsby-plugin-sitemap‘in query alanına allMarkdownRemark sorgusunu ekleyerek blog yazılarınızın verilerini çekmelisiniz. Ardından, resolvePages fonksiyonunda bu verileri işleyerek sitemap’e özel girişler oluşturabilirsiniz.
// gatsby-config.js (sadece plugin kısmı)
{
resolve: gatsby-plugin-sitemap,
options: {
query:
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
allMarkdownRemark {
nodes {
fields {
slug
}
frontmatter {
date // Markdown dosyanızdaki tarih alanı
updatedDate // Eğer varsa, son güncelleme tarihi için
}
}
}
}
,
resolvePages: ({
allSitePage: { nodes: allPages },
allMarkdownRemark: { nodes: allMarkdownPages },
}) => {
const pages = allPages.map(page => {
return { ...page };
});
const markdownPages = allMarkdownPages.map(node => {
const lastModDate = node.frontmatter.updatedDate || node.frontmatter.date;
return {
path: node.fields.slug,
lastmod: lastModDate, // Son güncelleme veya oluşturulma tarihi
changefreq: weekly, // Haftalık olarak değiştiğini varsayalım
priority: 0.8, // Normal sayfalardan biraz daha yüksek öncelik
};
});
return [...pages, ...markdownPages];
},
serialize: ({ path, lastmod, changefreq, priority }) => {
return {
url: path,
lastmod,
changefreq,
priority,
};
},
exclude: ["/dev-404-page/", "/404/", "/404.html", "/offline-plugin-app-shell-fallback/", "/_dsg/"],
output: "/sitemap.xml",
createLinkInHead: true,
},
},Bu yapılandırma ile, blog yazılarınızın URL’leri, son değişiklik tarihleri, değişim sıklıkları ve öncelikleri ile birlikte sitemap’e eklenecektir. Benzer bir mantıkla Contentful, Sanity veya diğer headless CMS’lerden çektiğiniz veriler için de sitemap girişleri oluşturabilirsiniz. Önemli olan, GraphQL sorgunuzda ilgili verileri çekmek ve resolvePages fonksiyonunda bunları sitemap formatına uygun nesnelere dönüştürmektir.
Birden Fazla Sitemap (Sitemap Index) Oluşturma
Çok büyük siteler, milyonlarca sayfaya sahip olabilir. Tek bir sitemap dosyası, 50.000 URL veya 50 MB dosya boyutu (sıkıştırılmamış) sınırını aşabilir. Bu tür durumlarda, birden fazla sitemap dosyası oluşturmak ve bunları bir “sitemap index” dosyası aracılığıyla gruplamak gerekir. Sitemap index dosyası, diğer sitemap dosyalarının konumlarını belirtir.
gatsby-plugin-sitemap varsayılan olarak tek bir sitemap.xml dosyası oluşturur. Ancak, eğer siteniz gerçekten çok büyükse ve bu sınırlara yaklaşıyorsanız, gatsby-plugin-sitemap‘in doğrudan bir sitemap index oluşturma özelliği yoktur. Bu durumda, birkaç farklı yaklaşım izlenebilir:
1. Manuel Bölme: Birden fazla gatsby-plugin-sitemap örneğini farklı output değerleri ve exclude/filter seçenekleriyle kullanarak farklı sitemap dosyaları oluşturabilirsiniz (örneğin, /sitemap-blog.xml, /sitemap-products.xml). Ardından, bu ayrı sitemap dosyalarını listeleyen manuel bir sitemap-index.xml dosyası oluşturmanız gerekir. Bu, bakım açısından biraz karmaşık olabilir.
2. Özel Betikler: Gatsby’nin build sürecine dahil edebileceğiniz özel bir Node.js betiği yazarak, gatsby-plugin-sitemap tarafından oluşturulan tek sitemap dosyasını alıp, belirli bir sayfa sayısını aşan durumlarda birden fazla dosyaya bölerek bir sitemap index dosyası oluşturabilirsiniz. Bu, daha esnek bir çözüm sunar ancak daha fazla geliştirme çabası gerektirir.
3. Harici Araçlar/Servisler: Bazı çok büyük siteler, sitemap oluşturma ve yönetimi için harici SEO araçları veya servisleri kullanmayı tercih edebilir. Ancak Gatsby’nin statik yapısı göz önüne alındığında, genellikle ilk iki yöntem daha uygun olacaktır.
Çoğu Gatsby sitesi için tek bir sitemap.xml dosyası yeterli olacaktır. Yalnızca on binlerce veya yüz binlerce sayfaya sahip çok büyük siteler için sitemap index oluşturma ihtiyacı doğar.
Sitemap’i Daha da Özelleştirmek ve İleri Düzey Kullanım
Sitemap’inizi daha etkili hale getirmek için XML şemasının sunduğu ek etiketleri kullanabilirsiniz. gatsby-plugin-sitemap‘in serialize fonksiyonu, bu etiketleri sitemap’inize eklemenize olanak tanır.
changefreq ve priority
* changefreq (Değişim Sıklığı): Bir sayfanın ne sıklıkla değiştiğini arama motorlarına bildirir. Olası değerler: always, hourly, daily, weekly, monthly, yearly, never. Bu, arama motorlarına sayfanın ne sıklıkla tekrar taranması gerektiği konusunda bir ipucu verir, ancak kesin bir komut değildir.
* Örnek: changefreq: 'weekly'
* priority (Öncelik): Bir sayfanın sitenizdeki diğer sayfalara göreceli önemini belirtir. Değerler 0.0 ile 1.0 arasında değişir, varsayılan 0.5’tir. Daha yüksek bir değer, sayfanın daha önemli olduğunu gösterir. Yine, bu bir ipucudur, kesin bir sıralama faktörü değildir.
* Örnek: priority: 0.7
Bu değerleri gatsby-config.js dosyanızdaki resolvePages fonksiyonunda her sayfa için dinamik olarak belirleyebilir ve serialize fonksiyonu aracılığıyla sitemap’e ekleyebilirsiniz.
lastmod (Son Değişiklik Tarihi)
lastmod etiketi, bir sayfanın en son ne zaman değiştirildiğini belirtir. Bu, arama motorlarının sitenizdeki güncel içeriği daha hızlı fark etmesine yardımcı olur. Tarih, W3C Datetime formatında (YYYY-MM-DD veya YYYY-MM-DDTHH:MM:SS+ZZ:ZZ) olmalıdır.
* Örnek: lastmod: '2023-10-27T10:00:00+03:00'
Dinamik içerikler için (blog yazıları, ürünler vb.), bu değeri veri kaynağınızdan (örneğin, Markdown frontmatter’daki date veya headless CMS’deki updatedAt alanı) çekerek kullanmalısınız.
image:loc ve video:loc (Medya Sitemap Girişleri)
Arama motorları, görselleri ve videoları da dizine ekleyebilir. Özel medya sitemap’leri veya mevcut sitemap’inize medya bilgileri ekleyerek bu içeriklerin keşfedilmesini artırabilirsiniz. gatsby-plugin-sitemap varsayılan olarak bunları desteklemez. Medya sitemap’leri için genellikle ayrı bir eklentiye veya özel bir yaklaşıma ihtiyacınız olacaktır.
Örneğin, görseller için gatsby-plugin-image kullanıyorsanız, görsellerinizin URL’lerini sitemap’e dahil etmek için serialize fonksiyonunu genişletebilir veya ayrı bir sitemap oluşturabilirsiniz. Bu, daha karmaşık bir özelleştirme gerektirir.
// Örnek bir yaklaşım (gatsby-plugin-sitemap doğrudan desteklemediği için bu kısım teoriktir veya ek plugin gerektirir)
// gatsby-config.js içinde serialize fonksiyonu
serialize: ({ path, lastmod, changefreq, priority, images }) => {
const url = path;
const entry = { url, lastmod, changefreq, priority };
if (images && images.length > 0) {
entry.img = images.map(image => ({
url: image.src,
caption: image.caption,
title: image.title,
loc: image.src, // img:loc etiketi için
// diğer img etiketleri...
}));
}
return entry;
},Bu tür bir medya entegrasyonu için, resolvePages sorgunuzun her sayfa için ilgili görsel URL’lerini de çekmesi ve serialize fonksiyonunun bu verileri doğru XML formatına dönüştürmesi gerekir. Bu genellikle gatsby-plugin-sitemap‘in standart yeteneklerinin ötesine geçer ve ek bir gatsby-plugin-sitemap-images gibi bir eklenti veya özel bir betik gerektirebilir.
Çoklu Dil Sitemap’leri (hreflang)
Uluslararası siteler için, aynı içeriğin farklı dillerdeki veya bölgelerdeki versiyonlarını belirtmek için hreflang etiketlerini kullanmak önemlidir. Bu, arama motorlarının doğru dil sürümünü doğru kullanıcıya göstermesine yardımcı olur. Sitemap içinde hreflang eklemek, her sayfa için alternatif dil URL’lerini belirtmeyi gerektirir.
https://www.example.com/en/page
gatsby-plugin-sitemap doğrudan hreflang desteği sunmaz. Bu özelliği eklemek için serialize fonksiyonunu genişletmeniz ve her sayfa için alternatif dil URL’lerini içeren bir veri yapısını sorgulamanız ve XML çıktısına uygun şekilde dönüştürmeniz gerekir. Bu, genellikle sitenizdeki çoklu dil stratejisine ve sayfa oluşturma mekanizmasına bağlı olarak karmaşık bir özelleştirme olabilir.
Oluşturulan Sitemap’i Kontrol Etme ve Arama Motorlarına Bildirme
Sitemap’inizi oluşturduktan sonra, doğruluğunu kontrol etmek ve arama motorlarına bildirmek son derece önemlidir.
Sitemap URL’si
Gatsby projenizi derledikten sonra (gatsby build), sitemap dosyanız genellikle public/sitemap.xml yolunda bulunur. Siteniz canlıya alındığında, bu dosya https://www.yourdomain.com/sitemap.xml adresinden erişilebilir olacaktır.
Tarayıcıda Kontrol
Sitemap’inizin doğru XML formatında olduğundan emin olmak için tarayıcınızda https://www.yourdomain.com/sitemap.xml adresine gidin. XML yapısını görebilmeniz gerekir. Hatalı bir XML yapısı, arama motorlarının sitemap’inizi okumasını engelleyebilir.
Google Search Console’a Gönderme
1. Google Search Console’a Giriş Yapın: Eğer henüz yapmadıysanız, sitenizi Google Search Console’a ekleyin ve doğrulayın.
2. “Sitemaps” Bölümüne Gidin: Sol menüden “Sitemaps” (Sitemap’ler) seçeneğini tıklayın.
3. Sitemap’i Ekleyin: “Add a new sitemap” (Yeni sitemap ekle) bölümüne sitemap.xml (tam URL değil, sadece dosya adı) yazın ve “Submit” (Gönder) butonuna tıklayın.
4. Durumu İzleyin: Google, sitemap’inizi işlemeye başlayacak ve durumu hakkında bilgi verecektir. Herhangi bir hata varsa burada görebilirsiniz.
Benzer şekilde, Bing Webmaster Tools gibi diğer arama motoru araçlarına da sitemap’inizi göndermelisiniz.
robots.txt Dosyasına Ekleme
Arama motorlarına sitemap’inizin konumunu bildirmek için robots.txt dosyanıza da bir giriş ekleyebilirsiniz. Bu, arama motorlarının sitemap’inizi daha hızlı keşfetmesine yardımcı olur.
robots.txt dosyanızı static klasörünüze yerleştirin (Gatsby, build sırasında static klasöründeki dosyaları public klasörünün köküne kopyalar).
# robots.txt
User-agent: *
Allow: /
Sitemap: https://www.example.com/sitemap.xmlSitemap: yönergesinin yanına tam sitemap URL’nizi yazdığınızdan emin olun.
Sık Karşılaşılan Sorunlar ve Çözümleri
Sitemap oluşturma sürecinde bazı yaygın sorunlarla karşılaşabilirsiniz. İşte bunlardan bazıları ve olası çözümleri:
* Sayfaların Sitemap’te Görünmemesi:
* Çözüm: gatsby-config.js dosyasındaki query alanınızı kontrol edin. Tüm sayfalarınızı (hem allSitePage hem de dinamik olarak oluşturduğunuz sayfalar için sorgular) doğru bir şekilde çekiyor musunuz? resolvePages fonksiyonunuzun bu sayfaları döndürdüğünden emin olun. exclude dizinizde yanlışlıkla dahil edilmemesi gereken sayfalar var mı kontrol edin.
* Yanlış URL’ler (Örn: localhost:8000 URL’leri):
* Çözüm: gatsby-config.js dosyanızdaki siteMetadata.siteUrl ve/veya resolveSiteUrl değerlerinin doğru, tam alan adınızı (örneğin, https://www.example.com) içerdiğinden emin olun. Bu, en yaygın sitemap sorunlarından biridir.
* Sitemap Dosyasının Oluşturulmaması:
* Çözüm: gatsby build komutunu çalıştırdığınızdan ve herhangi bir hata mesajı alıp almadığınızı kontrol edin. gatsby-plugin-sitemap‘in plugins dizisinde doğru bir şekilde yapılandırıldığından emin olun.
* GraphQL Sorgu Hataları:
* Çözüm: gatsby develop komutuyla geliştirme sunucunuzu çalıştırın ve http://localhost:8000/__graphql adresindeki GraphiQL arayüzünü kullanarak sorgunuzu test edin. Sorgunuzun beklediğiniz verileri döndürdüğünden emin olun.
* Performans Sorunları (Çok Büyük Sitemap’ler):
* Çözüm: Eğer sitenizde on binlerce sayfa varsa ve gatsby build süreci sitemap oluştururken yavaşlıyorsa, query sorgunuzu optimize etmeyi düşünebilirsiniz. Yalnızca sitemap için gerekli minimum veriyi çekmeye çalışın. Ayrıca, yukarıda bahsedilen sitemap index oluşturma yaklaşımlarını değerlendirebilirsiniz.
* Sitemap’in Google Search Console’da İşlenmemesi:
* Çözüm: Sitemap URL’nizin doğru olduğundan (yani tarayıcıda erişilebilir olduğundan) emin olun. XML dosyasının geçerli XML formatında olup olmadığını kontrol edin. Google’ın sitemap’inizi işlemesi biraz zaman alabilir, bu yüzden sabırlı olun. Hata mesajlarını dikkatlice okuyun.
Sonuç
Gatsby.js, modern web siteleri oluşturmak için harika bir platform sunarken, SEO optimizasyonunun önemli bir parçası olan sitemap oluşturma sürecini de oldukça kolaylaştırır. gatsby-plugin-sitemap eklentisi sayesinde, sitenizdeki tüm sayfaları (statik, Markdown tabanlı veya headless CMS’lerden gelen dinamik içerikler) otomatik olarak algılayabilir ve özelleştirilebilir bir sitemap.xml dosyası oluşturabilirsiniz.
Bu makalede ele aldığımız adımları izleyerek, Gatsby sitenizin arama motorları tarafından daha etkili bir şekilde keşfedilmesini, taranmasını ve dizine eklenmesini sağlayabilirsiniz. Doğru yapılandırılmış bir sitemap, sitenizin SEO performansını önemli ölçüde artıracak ve dijital dünyadaki görünürlüğünü güçlendirecektir. Unutmayın, sitemap’inizi oluşturduktan sonra düzenli olarak kontrol etmek ve arama motoru araçlarında (özellikle Google Search Console) durumunu izlemek, uzun vadeli başarınız için kritik öneme sahiptir.