SEO Optimization Guide

seo

SEO optimization guide for beginners and advanced developers

SEO Optimallashtirish

Qidiruv tizimlaridan yuqori reyting olish orqali sayt trafikingizni va konversiyalaringizni oshiring. Ushbu maqolada React ilovalarda texnik, kontent va lokal SEO usullarini chuqurroq ko‘rib chiqamiz.

1. SEO Nima va Nega Muhim?

  • SEO (Search Engine Optimization) — veb-sahifalarning Google, Bing kabi qidiruv tizimlarida yuqori o‘rinlarga chiqishi uchun optimallashtirish.
  • Foydalari:
    • 🌍 Ko‘proq organik trafik
    • 🎯 Tuzilgan kontent orqali aniq auditoriyaga murojaat
    • 💰 Reklamaga sarflanadigan xarajatlarni tejash

2. Texnik SEO (Technical SEO)

2.1. Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

  • CSR (React Create‑React‑App): JavaScript yuklangachgina kontent ko‘rinadi → qidiruv tizimlari ba’zan sahifani to‘liq indekslay olmasligi mumkin.
  • SSR (Next.js, Remix): Sahifa HTML serverda yaratiladi → qidiruv botlari uchun to‘liq tayyor sahifa.
// pages/index.tsx (Next.js)
import Head from 'next/head'
 
export default function Home({ posts }) {
	return (
		<>
			<Head>
				<title>Blog — Udemere</title>
				<meta
					name='description'
					content='Eng so‘nggi maqolalarimiz bilan tanishing'
				/>
			</Head>
			<main>
				{posts.map(post => (
					<article key={post.id}>
						<h2>{post.title}</h2>
						<p>{post.excerpt}</p>
					</article>
				))}
			</main>
		</>
	)
}
 
export async function getStaticProps() {
	const res = await fetch('https://api.udemere.uz/posts')
	const posts = await res.json()
	return { props: { posts }, revalidate: 60 }
}

2.2. Robots.txt va Sitemap.xml

  • robots.txt: qidiruv botlariga ruxsat/taqiq berish

    User-agent: *
Disallow: /admin/

  • sitemap.xml: sayt xaritasini qidiruv tizimlariga taqdim etadi

    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://udemere.uz/</loc><changefreq>daily</changefreq></url>
</urlset>

2.3. Canonical Tags

<link rel="canonical" href="https://udemere.uz/page" />
  • Takrorlangan yoki parametrli URL’larni indekslashdan saqlaydi.

3. Kontent SEO (On-Page SEO)

3.1. Meta Teglar

  • <title> va <meta name="description"> aniq, qiziqarli va kalit so‘zlar bilan boyitilgan bo‘lsin.

  • Open Graph & Twitter Card:

    <meta property="og:title" content="Udemere Resume Builder" />
<meta
	property="og:description"
	content="AI yordamida zamonaviy rezyume yarating"
/>
<meta name="twitter:card" content="summary_large_image" />

3.2. Sarlavha Tuzilishi (H1–H6)

# H1: Sahifa Asosiy Sarlavhasi
 
## H2: Bo‘lim 1
 
### H3: Nogiron Bo‘lim
  • Faqat bitta H1 bo‘lsin.
  • H2–H6 to‘g‘ri ketma‑ketlikda ishlatilsin.

3.3. URL Struktura

  • 🗝️ Kalit so‘zni o‘z ichiga olsin

  • Qisqa va tushunarli bo‘lsin:

    /blog/react-seo-optimallashtirish

3.4. Alt Teglari va Rasmlar

<img src='/images/seo-guide.png' alt='React SEO qo‘llanma' />
  • Har bir rasm uchun alt atributini to‘ldiring.

4. Off-Page SEO

  • Backlinklar: sifatli saytlardan havola oling.
  • Guest Posting: boshqa bloglarda maqola joylashtiring.
  • Social Signals: ijtimoiy tarmoqlarda kontentingizni baham ko‘ring.

5. Lokal SEO

<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Organization",
		"name": "ShahNur Software",
		"address": {
			"@type": "PostalAddress",
			"streetAddress": "Chilonzor ko‘chasi 12",
			"addressLocality": "Toshkent",
			"addressCountry": "UZ"
		},
		"telephone": "+998901234567"
	}
</script>
  • JSON-LD yordamida biznes ma’lumotlarini ko‘rsatish.
  • Google My Business profili.

6. SEO Monitoring & Testing

6.1. Lighthouse Auditi

npx lighthouse https://udemere.uz --output html --output-path report.html
  • SEO bo‘limini tekshiring.

6.2. Google Search Console

  • Indeks holati
  • Qidiruv so‘rovlar bo‘yicha statistikalar
  • Xatoliklar (Crawl Errors)

7. Yaxshi Amaliyotlar

  • 🔄 Revalidate/ISR (Next.js) bilan dinamik kontentni yangilang

  • ⚡️ Preload & Prefetch script va link’larni:

    <link
	rel="preload"
	href="/fonts/inter.woff2"
	as="font"
	type="font/woff2"
	crossorigin
/>
<link rel="prefetch" href="/blog/react-seo-optimallashtirish" />

  • 🔗 Internal linking — sahifalar o‘rtasida ichki havolalar yarating

  • 🕒 PageSpeed: Web Vitals (LCP, FID, CLS) optimallashtiring

Xulosa

React ilovalarda SEO — bu texnik, kontent va marketing jihatlarni birlashtiruvchi jarayon. SSR, to‘g‘ri meta teglar, strukturaviy ma’lumotlar, rasm optimallashtirish va monitoring vositalaridan foydalanish orqali reytingda yuqori o‘rinlarni qo‘lga kiritish mumkin.

Ajoyib kontentga hech kim osonlikcha yetmaydi, lekin to‘g‘ri optimallashtirish bilan sizni topishlari oson.