Next.js-də SEO Optimallaşdırması — Azərbaycan Bazarı Üçün Tam Bələdçi

Next.js-də SEO Optimallaşdırması — Azərbaycan Bazarı Üçün

Salam, developer dostum. Əgər bu məqaləni oxuyursansa, çox güman ki, artıq Next.js ilə layihə qurmusan və ya qurmaq istəyirsən. Amma gəl bir reallıqdan danışaq: Azərbaycanda çoxlu sayt var ki, texniki cəhətdən yaxşı qurulub, amma Google-da axtaranda tapılmır. Niyə? Çünki SEO "sonra edərik" deyib keçilən şeydir. Bu gün bunu dəyişirik.

Mən bu məqalədə sənə Next.js 14/15 (App Router) ilə SEO-nu necə düzgün quracağını, xüsusilə Azərbaycan bazarına uyğun detalları göstərəcəm. Real kod, real rəqəmlər, real nəticələr.

Niyə Next.js SEO üçün İdealdır?

React ilə SPA (Single Page Application) quranda Google bot-u səhifəni render edə bilmir — yəni kontentini görə bilmir. Next.js isə sənə SSR (Server-Side Rendering) və SSG (Static Site Generation) verir. Bu o deməkdir ki, Google bot-u hazır HTML görür.

Azərbaycan bazarında bu xüsusilə vacibdir, çünki:

• google.az axtarışlarında rəqabət nisbətən azdır — düzgün SEO ilə tez irəliləyə bilərsən
• Yerli bizneslərin 70%-dən çoxunun saytında əsas SEO xətaları var
• Tap.az, Boss.az, Turbo.az kimi saytlar SEO ilə milyonlarla trafik toplayır — sən də öz nişində bunu edə bilərsən

1. Metadata API — Əsas Quraşdırma

Next.js 14+ App Router-də hər səhifə üçün metadata export edə bilərsən. Bu ən vacib addımdır:

typescriptKopyala
// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: 'Saytın Adı — Azərbaycanda Ən Yaxşı Xidmət',
    template: '%s | Saytın Adı',
  },
  description:
    'Bakıda və bütün Azərbaycanda xidmət göstərən platforma. Qeydiyyatdan keç və başla.',
  keywords: ['Bakı', 'Azərbaycan', 'xidmət', 'onlayn sifariş'],
  authors: [{ name: 'Şirkətin adı' }],
  openGraph: {
    title: 'Saytın Adı',
    description: 'Azərbaycanda ən yaxşı xidmət platforması',
    url: 'https://saytinadi.az',
    siteName: 'Saytın Adı',
    locale: 'az_AZ',
    type: 'website',
    images: [
      {
        url: 'https://saytinadi.az/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Saytın Adı — Əsas şəkil',
      },
    ],
  },
  alternates: {
    canonical: 'https://saytinadi.az',
    languages: {
      'az-AZ': 'https://saytinadi.az',
      'ru-RU': 'https://saytinadi.az/ru',
    },
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

Burada locale: 'az_AZ' çox vacibdir. Google-a deyirsən ki, bu sayt Azərbaycan dilindədir. Çox developer bunu unudur.

2. Dinamik Səhifələr Üçün generateMetadata

Tutaq ki, blog və ya məhsul səhifələrin var. Hər səhifə üçün unikal metadata lazımdır:

typescriptKopyala
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

type Props = {
  params: { slug: string };
};

export async function generateMetadata(
  { params }: Props
): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.coverImage }],
      type: 'article',
      publishedTime: post.createdAt,
      locale: 'az_AZ',
    },
  };
}

3. Sitemap və Robots — Avtomatik Generasiya

Google Search Console-a sitemap vermədən heç bir SEO işləməyəcək. Next.js-də bunu avtomatik edə bilərsən:

typescriptKopyala
// app/sitemap.ts
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();

  const blogEntries = posts.map((post) => ({
    url: `https://saytinadi.az/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }));

  return [
    {
      url: 'https://saytinadi.az',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...blogEntries,
  ];
}

typescriptKopyala
// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/admin/',
    },
    sitemap: 'https://saytinadi.az/sitemap.xml',
  };
}

4. Structured Data (JSON-LD) — Azərbaycan Biznesi Üçün

Google-un axtarış nəticələrində ulduzlar, qiymətlər, FAQ görürsən? Bunların hamısı structured data ilə olur:

typescriptKopyala
// components/JsonLd.tsx
export default function LocalBusinessJsonLd() {
  const data = {
    '@context': 'https://schema.org',
    '@type': 'LocalBusiness',
    name: 'Şirkətin Adı',
    address: {
      '@type': 'PostalAddress',
      streetAddress: '28 May küçəsi 15',
      addressLocality: 'Bakı',
      addressCountry: 'AZ',
      postalCode: 'AZ1000',
    },
    telephone: '+994-50-123-45-67',
    priceRange: '₼₼',
    openingHours: 'Mo-Fr 09:00-18:00',
    url: 'https://saytinadi.az',
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

Bunu layout.tsx-ə əlavə et və Google sənin biznesi xəritədə və axtarışda daha yaxşı göstərəcək.

5. Performance — Core Web Vitals

Google-un sıralamasında saytın sürəti birbaşa təsir edir. Next.js-in Image və Font komponentlərini mütləq istifadə et:

typescriptKopyala
import Image from 'next/image';

<Image
  src="/hero.webp"
  alt="Bakıda xidmət — Əsas banner"
  width={1200}
  height={630}
  priority
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

Bir statistika: Lighthouse skoru 90+-dan 50-yə düşən saytlar Google-da orta hesabla 3-5 pozisiya itirir. Azərbaycan bazarında rəqiblərin çoxunun Lighthouse skoru 40-60 arasındadır. Sən 90+ skor ilə ciddi üstünlük qazanırsan.

Azərbaycan Bazarında Real Rəqəmlər

Bu biliklər sənin karyerana necə təsir edir? Gəl rəqəmlərə baxaq:

• Junior Frontend Developer (Bakıda, SEO bilməyən): 800-1200 AZN
• Mid Frontend Developer (Next.js + SEO + Performance): 1500-2500 AZN
• Freelance SEO-optimized sayt layihəsi: 1500-5000 AZN per project
• ABB, Kapital Bank, PASHA Holding kimi şirkətlər SEO bilən developer axtarır

SEO optimallaşdırması bilən Next.js developer olmaq sənin bazarda fərqlənməyindir. Çünki Azərbaycanda bu bilikləri olan developer çox azdır.

Checklist — Hər Layihədə Yoxla

• ✅ Hər səhifədə unikal title və description
• ✅ locale: 'az_AZ' təyin edilib
• ✅ Open Graph şəkilləri var (1200x630)
• ✅ sitemap.xml avtomatik generasiya olunur
• ✅ robots.txt düzgün konfiqurasiya edilib
• ✅ Structured Data (JSON-LD) əlavə edilib
• ✅ next/image ilə şəkillər optimize edilib
• ✅ Lighthouse Performance skoru 90+
• ✅ Google Search Console-a sayt əlavə edilib
• ✅ Canonical URL-lər düzgün təyin edilib

Son Söz

SEO bir dəfəlik iş deyil, proses-dir. Amma Next.js bu prosesi çox asanlaşdırır. Bu məqalədəki kodları öz layihənə tətbiq et, Google Search Console-u izlə, və 2-3 ay ərzində nəticəni görəcəksən.

Əgər sualın varsa, şərhlərdə yaz. Gələn həftə "Next.js + Azərbaycan dili: i18n tam bələdçi" mövzusunda yazacağıq.

Uğurlar, developer! 🚀