Anasayfa

Hakkımda

Çalışmalar

Yazılar

Mağaza

Hedefler

İletişime Geç

Next.js ile Site Haritası Dosyası Oluşturma

Next.js'de bulunan farklı yöntemleri kullanarak site haritası dosyası oluşturabilir ve web sitenizin arama motoru optimizasyonunu (SEO) geliştirebilirsiniz.

03 Mart 2024 (2 ay önce)

3 dk okuma süresi

Yazılım, Next.js, SEO

Next.js, React tabanlı statik web siteleri ve sunucu taraflı işlenen uygulamalar oluşturmak için popüler bir framework'tur. SEO açısından optimize edilmiş web siteleri oluşturmak için Next.js birçok güçlü özellik sunar. Bunlardan biri de site haritası oluşturma yeteneğidir.

Site Haritası Nedir?

Site haritası, bir web sitesindeki tüm sayfaların ve diğer önemli dosyaların listesini içeren bir XML dosyasıdır. Arama motorları, sitenizi taramak ve dizine eklemek için site haritanızı kullanır. Bu nedenle, SEO açısından optimize edilmiş bir web sitesi için site haritası oluşturmak çok önemlidir.

Next.js ile site haritası oluşturmak oldukça basittir. Bunu yapmanın iki yolu vardır:

Sitemap dosyası (.xml)

  • Ana dizine (app) sitemap.xml adında bir dosya oluşturun.
  • Dosyaya aşağıdaki XML kodunu ekleyin:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://kursadsimsek.com</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://kursadsimsek.com/about</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>
  • loc etiketlerine, site haritanızda yer almak istediğiniz sayfaların URL'lerini ekleyin.
  • lastmod etiketlerine, sayfaların son güncelleme tarihlerini ekleyin.
  • changefreq etiketlerine, sayfaların ne sıklıkla güncellendiğini ekleyin.
  • priority etiketlerine, sayfaların önemini ekleyin.

Javascript ile Sitemap Dosyası Oluşturma (.js)

  • Ana dizininize(app) sitemap.js adında bir dosya oluşturun.
  • Dosyaya aşağıdaki javascript kodunu ekleyin:
export default function sitemap() {
  return [
    {
      url: 'https://kursadsimsek.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1
    },
    {
      url: 'https://kursadsimsek.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8
    }
  ]
}

Çıktı:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://kursadsimsek.com</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://kursadsimsek.com/about</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Örnek Çalışma

menu.js dosyası

export const Menu = [
  {
    name: 'home',
    title: 'Anasayfa',
    slug: '/'
  },
  {
    name: 'about',
    title: 'Hakkımda',
    slug: '/about'
  },
  {
    name: 'work',
    title: 'Çalışmalar',
    slug: '/work'
  },
  {
    name: 'blog',
    title: 'Yazılar',
    slug: '/blog'
  },
  {
    name: 'contact',
    title: 'İletişime Geç',
    slug: '/contact'
  }
]

sitemap.js dosyası

import { Menu } from '@/data/menu'
 
export default function sitemap() {
  const allMenu = Menu.map((item) => ({
    url: 'https://kursadsimsek.com' + item.slug,
    lastModified: new Date(),
    changeFrequency: 'daily',
    priority: 1
  }))
 
  return [...allMenu]
}

sitemap.xml çıktısı

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.kursadsimsek.com/</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://www.kursadsimsek.com/about</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://www.kursadsimsek.com/work</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://www.kursadsimsek.com/blog</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://www.kursadsimsek.com/contact</loc>
    <lastmod>2024-02-29T00:44:37.418Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1</priority>
  </url>
</urlset>

Oluşturulan Site Haritası Dosyası

Tarayıcınızdan localhost:3000/sitemap.xml adresine gidin.

Notlar

Oluşturulan bir sitemap.(xml|ts|js) dosyası aşağıdaki veri tiplerine ve değerlerine sahip olmalıdır.

  • url => string
  • lastModified => string, Date
  • changeFrequency => 'always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never'
  • priority => number

Site Haritanızı Google Search Console'a Gönderme:

Site haritanızı oluşturduktan sonra, Google Search Console'a göndermeniz gerekir. Bunu yapmak için aşağıdaki adımları izleyin:

  • Google Search Console: Google Search Console adresine gidin ve web sitenizi ekleyin.
  • Site Haritaları sekmesine gidin.
  • Yeni Site Haritası Ekle düğmesine tıklayın.
  • Site haritanızın URL'sini girin ve Gönder düğmesine tıklayın.

Next.js ile site haritası dosyası oluşturmak ve SEO'yu optimize etmek oldukça kolaydır. Site haritanızı oluşturduktan sonra, Google Search Console'a göndermeniz gerekir. Bu, arama motorlarının sitenizi daha kolay taramasına ve dizine eklemesine yardımcı olacaktır. Bu adımları takip ederek web sitenizin arama motorlarında daha üst sıralarda yer almasını sağlayabilirsiniz.

Anasayfa

Hakkımda

Çalışmalar

Yazılar