Перейти к содержимому

11. SEO Basics

SEO (Search Engine Optimization) — это оптимизация сайта для поисковых систем. Правильная базовая SEO = больше органического трафика без рекламного бюджета.

Структура HTML для SEO

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Критически важно! -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title: 50-60 символов, ключевое слово вначале -->
  <title>Купить iPhone 15 Pro в Москве — Лучшие цены | МагазинТехники.ru</title>

  <!-- Description: 150-160 символов -->
  <meta name="description" content="iPhone 15 Pro от 89 990₽. Официальная гарантия, бесплатная доставка по России. 1000+ отзывов покупателей. Заказывайте онлайн!">

  <!-- Canonical — избегаем дубликатов -->
  <link rel="canonical" href="https://example.com/iphone-15-pro/">

  <!-- Robots -->
  <meta name="robots" content="index, follow">

  <!-- Open Graph (Facebook, Telegram, VK) -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="iPhone 15 Pro — МагазинТехники.ru">
  <meta property="og:description" content="Купить iPhone 15 Pro по лучшей цене">
  <meta property="og:image" content="https://example.com/images/iphone-15-pro.jpg">
  <meta property="og:url" content="https://example.com/iphone-15-pro/">
  <meta property="og:locale" content="ru_RU">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="iPhone 15 Pro — МагазинТехники.ru">
  <meta name="twitter:image" content="https://example.com/images/iphone-15-pro.jpg">
</head>

Семантическая HTML структура

<!-- ❌ Нет смысловой структуры -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="title">Заголовок</div>
  <div class="text">Текст</div>
</div>

<!-- ✅ Семантичный HTML -->
<header>
  <nav aria-label="Главная навигация">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/catalog">Каталог</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Один H1 на страницу — основной запрос</h1>

    <section>
      <h2>Подраздел — связанный запрос</h2>
      <h3>Детальная информация</h3>
      <p>Текст контента...</p>
    </section>
  </article>

  <aside>
    <h2>Похожие товары</h2>
  </aside>
</main>

<footer>
  <p>© 2026 МагазинТехники.ru</p>
</footer>

Иерархия заголовков

H1 — Один на страницу! Главный ключевой запрос
  H2 — Основные разделы (3-6 на страницу)
    H3 — Подразделы
      H4-H6 — Редко, только при необходимости

URL-структура

✅ Хорошо:
https://example.com/katalog/smartfony/iphone-15-pro/
  - Короткий и понятный
  - Ключевые слова в URL
  - Через дефис, не underscore
  - Нижний регистр

❌ Плохо:
https://example.com/product?id=12345&cat=3&ref=home
https://example.com/PRODUCT_CATEGORY/iPhone_15_Pro.html
https://example.com/p/i/i-p-h-o-n-e-1-5-p-r-o/

Robots.txt и Sitemap

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /checkout/
Disallow: /?* # параметры

Sitemap: https://example.com/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-01-15</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/catalog/</loc>
    <lastmod>2026-01-14</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Next.js SEO

// app/page.tsx — Metadata API
export const metadata = {
  title: 'iPhone 15 Pro | МагазинТехники',
  description: 'Купить iPhone 15 Pro по лучшей цене',

  openGraph: {
    title: 'iPhone 15 Pro',
    description: 'Официальная гарантия',
    images: [{ url: '/og-iphone.jpg', width: 1200, height: 630 }],
    locale: 'ru_RU',
    type: 'website',
  },

  robots: {
    index: true,
    follow: true,
  },
};

// Динамические метатеги
export async function generateMetadata({ params }) {
  const product = await getProduct(params.slug);

  return {
    title: `${product.name} | МагазинТехники`,
    description: product.shortDescription,
    openGraph: {
      images: [product.image],
    },
  };
}

Интерактивный пример