SEO для разработчиков: технические аспекты оптимизации

Почему SEO важно для разработчиков

SEO (Search Engine Optimization) — это не только контент и ссылки. Техническая оптимизация критически важна для индексации и ранжирования. Разработчики влияют на SEO через код, архитектуру и производительность.

Мета-теги

Правильные мета-теги — основа SEO:

// app/layout.tsx (Next.js)
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: 'Название сайта',
    template: '%s | Название сайта'
  },
  description: 'Описание сайта до 160 символов',
  keywords: ['ключевое слово 1', 'ключевое слово 2'],
  authors: [{ name: 'Автор' }],
  openGraph: {
    type: 'website',
    locale: 'ru_RU',
    url: 'https://example.com',
    siteName: 'Название сайта',
    images: [{
      url: '/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Описание изображения'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    site: '@username'
  },
  robots: {
    index: true,
    follow: true
  },
  alternates: {
    canonical: 'https://example.com',
    languages: {
      'ru-RU': '/ru',
      'en-US': '/en'
    }
  }
};

// Динамические мета-теги для страницы
export async function generateMetadata({ params }): Promise {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.coverImage]
    }
  };
}

Структурированные данные (Schema.org)

// Компонент для JSON-LD
function StructuredData({ data }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

// Статья
const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'Заголовок статьи',
  description: 'Описание статьи',
  image: '/placeholders/image-placeholder.svg',
  author: {
    '@type': 'Person',
    name: 'Имя автора'
  },
  publisher: {
    '@type': 'Organization',
    name: 'Название компании',
    logo: {
      '@type': 'ImageObject',
      url: '/placeholders/logo-placeholder.svg'
    }
  },
  datePublished: '2024-01-15',
  dateModified: '2024-01-20'
};

// Организация
const organizationSchema = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'Название компании',
  url: 'https://example.com',
  logo: '/placeholders/logo-placeholder.svg',
  contactPoint: {
    '@type': 'ContactPoint',
    telephone: '+7-999-999-99-99',
    contactType: 'customer service'
  },
  sameAs: [
    'https://t.me/channel',
    'https://vk.com/group'
  ]
};

// Хлебные крошки
const breadcrumbSchema = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: 'Главная', item: 'https://example.com' },
    { '@type': 'ListItem', position: 2, name: 'Блог', item: 'https://example.com/blog' },
    { '@type': 'ListItem', position: 3, name: 'Статья' }
  ]
};

Core Web Vitals

Google использует Core Web Vitals как фактор ранжирования:

• LCP (Largest Contentful Paint) — время загрузки главного контента. Цель: < 2.5 сек
• FID (First Input Delay) — задержка первого взаимодействия. Цель: < 100 мс
• CLS (Cumulative Layout Shift) — визуальная стабильность. Цель: < 0.1

// Оптимизация LCP — приоритетная загрузка изображений
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // Загружать первым
  sizes="100vw"
/>

// Предзагрузка критичных ресурсов
<link rel="preload" href="/fonts/inter.woff2" as="font" crossOrigin />
<link rel="preconnect" href="https://api.example.com" />

// Избегаем CLS — резервируем место
.image-container {
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

// Оптимизация шрифтов
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin', 'cyrillic'],
  display: 'swap'  // Показывать fallback пока грузится
});

Sitemap и Robots.txt

// app/sitemap.ts (Next.js)
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise {
  const posts = await getPosts();
  
  const postUrls = posts.map(post => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly' as const,
    priority: 0.8
  }));
  
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1
    },
    {
      url: 'https://example.com/blog',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.9
    },
    ...postUrls
  ];
}

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

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/api/', '/private/']
    },
    sitemap: 'https://example.com/sitemap.xml'
  };
}

Семантическая вёрстка

<!-- Правильная структура -->
<header>
  <nav aria-label="Главная навигация">...</nav>
</header>

<main>
  <article>
    <h1>Единственный H1 на странице</h1>
    <section>
      <h2>Подзаголовок</h2>
      <p>Контент...</p>
    </section>
  </article>
  
  <aside>
    <h2>Связанные статьи</h2>
  </aside>
</main>

<footer>...</footer>

Чек-лист технического SEO

1. ✅ Уникальные title и description на каждой странице
2. ✅ Один H1 на странице, иерархия заголовков
3. ✅ Alt-теги для всех изображений
4. ✅ Структурированные данные Schema.org
5. ✅ Sitemap.xml и robots.txt
6. ✅ Canonical URL для дублей
7. ✅ Core Web Vitals в зелёной зоне
8. ✅ Mobile-friendly дизайн
9. ✅ HTTPS везде
10. ✅ Быстрая загрузка (< 3 сек)

Заключение

Техническое SEO — фундамент для успешного продвижения. Правильные мета-теги, структурированные данные, быстрая загрузка и семантическая вёрстка — всё это в руках разработчика.

SEO начинается с кода. Оптимизируйте техническую часть, и контент-маркетологам будет проще продвигать сайт.