21 элемент
видимости.
Простым языком — что это такое, зачем нужно и что даёт вашему сайту. Без воды, с примерами из реального кода. Всё это внедряется в каждую страницу при разработке.
Title — название страницы, которое отображается в трёх местах: во вкладке браузера, в результатах поиска (синяя ссылка) и в превью ссылки в мессенджере. Это самый важный SEO-тег — именно его поисковик использует как главный сигнал о содержании.
Оптимальная длина — 50–60 символов: Google и Яндекс обрезают всё что длиннее. Ключевые слова в начале, название сайта в конце через «|». Каждая страница — уникальный title.
<title>Разработка сайтов СПб — чистый код, без конструкторов | NordDigital</title>
Meta description — короткий текст под синей ссылкой в результатах поиска. Напрямую на позицию не влияет, но влияет на кликабельность: хорошее описание убеждает пользователя перейти именно на ваш сайт.
Оптимальная длина — 130–160 символов. Должен отвечать на вопрос: «почему нужно зайти именно на эту страницу».
<meta name="description" content="Коммерческие сайты без Tilda и шаблонов. Чистый HTML/CSS, SEO 21 из 21, Lighthouse 97+, PHP-формы. Пример работы — 42olenya.ru.">
Заголовки — не просто «большой текст», это смысловая структура страницы. Поисковики сканируют заголовки чтобы понять тему и подтемы.
H1 — главный заголовок. Один на странице, содержит главный ключевой запрос. H2 — заголовки разделов. H3 — подзаголовки внутри разделов.
H1: Разработка сайтов в Санкт-Петербурге
H2: Почему не конструктор
H3: Tilda — аренда, а не актив
H2: Состав работ
Meta robots — тег-инструкция для поисковых роботов: заходить или нет, индексировать страницу или нет.
index / noindex — добавлять страницу в поиск или нет. follow / nofollow — учитывать ссылки с этой страницы или нет. Юридические и служебные страницы (оферта, политика, реквизиты) закрываются noindex — в поиске им делать нечего.
<!-- Обычная страница -->
<meta name="robots" content="index, follow">
<!-- Юридическая / служебная -->
<meta name="robots" content="noindex, follow">
<!-- С AI-директивами (полный вариант) -->
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
Canonical (канонический URL) — тег, который говорит поисковику: «эта страница существует по такому адресу». Нужен для защиты от дублей.
Проблема: одна страница может быть доступна по нескольким адресам — с www и без, с http и https, с / в конце и без. Поисковик может посчитать их разными и «размыть» ранжирующий вес. Canonical исправляет это.
<link rel="canonical" href="https://norddigital.ru/sites">
Open Graph — набор мета-тегов, которые контролируют как выглядит ссылка на сайт когда её публикуют в VK, Telegram, WhatsApp, Facebook.
Без OG-тегов платформа сама угадывает заголовок и картинку — обычно плохо. С OG вы точно задаёте: картинку 1200×630, заголовок, описание, тип страницы, язык.
<meta property="og:type" content="website">
<meta property="og:url" content="https://norddigital.ru/sites">
<meta property="og:title" content="Разработка сайтов — чистый код | NordDigital">
<meta property="og:description" content="Сайты без конструкторов. SEO 21/21, Lighthouse 97+.">
<meta property="og:image" content="https://norddigital.ru/assets/og-cover.jpg">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="NordDigital">
Twitter Card — аналог Open Graph, но специально для X (Twitter). Некоторые инструменты (Slack, LinkedIn) тоже читают именно эти теги.
Рекомендуется ставить оба набора (OG + Twitter Card) — они дублируют друг друга, но каждая платформа читает «свои». Занимает 4 строки кода, зато ссылка везде выглядит хорошо.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Разработка сайтов — чистый код | NordDigital">
<meta name="twitter:description" content="Сайты без конструкторов. SEO 21/21, Lighthouse 97+.">
<meta name="twitter:image" content="https://norddigital.ru/assets/og-cover.jpg">
Schema.org — стандарт разметки, который позволяет поисковику понять структуру информации: что это за бизнес, какой адрес, телефон, список товаров или услуг.
Schema пишется в формате JSON-LD — маленький блок кода в <head>, невидимый пользователю. Правильная Schema даёт «расширенные сниппеты» в поиске — звёздочки рейтинга, вопросы-ответы, адрес прямо под ссылкой, ещё до перехода на сайт.
Organization — компания: название, адрес, телефон, email
LocalBusiness — местный бизнес: регион, координаты
Service — услуга с ценами
BreadcrumbList — хлебные крошки навигации
FAQPage — блок вопрос-ответ на странице
GEO-теги — мета-теги, которые указывают поисковику географическое местоположение бизнеса. Важны для локального поиска: когда пользователь ищет «разработка сайтов Санкт-Петербург» — GEO-теги помогают показать сайт именно ему.
Стандарт старый, но Яндекс по-прежнему их учитывает. Google больше ориентируется на Schema.org LocalBusiness, но GEO тоже не помешает. ICBM — дополнительный тег с координатами в формате широта, долгота.
<meta name="geo.region" content="RU-SPE">
<meta name="geo.placename" content="Санкт-Петербург">
<meta name="geo.position" content="59.934280;30.335098">
<meta name="ICBM" content="59.934280, 30.335098">
С появлением AI-поисковиков (ChatGPT, Perplexity, Google AI Overview, Яндекс Нейро) появилось новое направление — GEO (Generative Engine Optimization). Это оптимизация не для традиционного поиска, а для ИИ-систем которые «читают» сайты и включают информацию в свои ответы.
AI-директивы добавляются в тег robots и дают ИИ-системам разрешение: сколько текста использовать, показывать ли изображения.
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<!-- max-snippet:-1 = показывать любой объём текста -->
<!-- max-image-preview:large = показывать картинки полного размера -->
Preconnect — подсказка браузеру заранее установить соединение с внешним сервером (шрифты Google, CDN), пока пользователь ещё читает страницу. Убирает задержку в 100–300мс на загрузку первого ресурса.
Preload — говорит браузеру загрузить критический ресурс (главное изображение, шрифт) с высоким приоритетом, раньше чем браузер сам до него доберётся. Прямо влияет на LCP — ключевой показатель Core Web Vitals.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
Alt (alternative text) — текстовое описание изображения. Поисковик не видит картинки — он читает alt. По нему он понимает что на картинке и включает её в поиск по изображениям.
Alt также важен для доступности: если изображение не загружается или пользователь использует скринридер — alt озвучивает что было на фото.
❌ alt="" — пустой, поисковик ничего не знает о картинке
❌ alt="image001.jpg" — имя файла, бесполезно
✅ alt="Разработчик пишет чистый HTML-код для коммерческого сайта"
Hreflang — атрибут ссылки, который говорит поисковику на каком языке написана страница и для какой страны она предназначена. Даже для чисто русскоязычного сайта нужен, чтобы Google не путал страницы с возможными дублями на других доменах.
Обязательно ставить x-default — «версия по умолчанию» для пользователей язык которых не совпадает ни с одним из указанных. Для русскоязычного сайта достаточно двух тегов: ru и x-default.
<link rel="alternate" hreflang="ru" href="https://norddigital.ru/sites">
<link rel="alternate" hreflang="x-default" href="https://norddigital.ru/sites">
Sitemap.xml — XML-файл в корне сайта со списком всех страниц для индексации. Поисковый робот находит его по адресу /sitemap.xml и использует как «оглавление» при обходе сайта.
Без sitemap поисковик находит страницы только по ссылкам — медленнее и ненадёжнее. С sitemap новая страница может попасть в индекс за часы, а не недели.
<url>
<loc>https://norddigital.ru/sites</loc>
<lastmod>2026-06-17</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
Robots.txt — текстовый файл в корне сайта, который задаёт правила для поисковых роботов: что можно сканировать, а что нет. Не закрывает страницы от пользователей — только от роботов.
Не путайте с meta robots (п.04): тот тег управляет одной страницей, robots.txt — всем сайтом сразу. Адрес sitemap.xml указывается именно здесь.
User-agent: *
Disallow: /admin/
Allow: /
Sitemap: https://norddigital.ru/sitemap.xml
Breadcrumbs (хлебные крошки) — навигационная цепочка в верхней части страницы: «Главная / Услуги / Разработка сайтов». Показывает пользователю где он находится в структуре сайта.
Когда breadcrumbs размечены Schema.org типом BreadcrumbList, поисковик показывает их прямо в результатах поиска вместо URL — это делает сниппет информативнее и повышает кликабельность.
"@type": "BreadcrumbList",
"itemListElement": [{"@type":"ListItem","position":1,"name":"Главная","item":"https://norddigital.ru"},
{"@type":"ListItem","position":2,"name":"Разработка сайтов","item":"https://norddigital.ru/sites"}]
Если на странице есть блок «Вопрос — Ответ», его можно разметить Schema.org типом FAQPage. Тогда Google может показать эти вопросы и ответы прямо в результатах поиска в виде раскрывающегося аккордеона.
Это занимает больше места в выдаче — ваша ссылка визуально «вырастает» и привлекает больше внимания. Особенно полезно для страниц услуг и портфолио.
WebP — современный формат изображений от Google. В среднем на 30–40% легче JPEG и PNG при том же визуальном качестве. Меньше вес — быстрее загрузка — выше PageSpeed — лучше позиции.
Тег <picture> позволяет задать несколько версий изображения: браузер сам выбирает WebP если поддерживает, и JPEG как запасной вариант для старых браузеров.
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Описание" width="800" height="600">
</picture>
Атрибут loading="lazy" говорит браузеру не загружать изображение или iframe пока пользователь не прокрутил страницу до него. Так браузер не тратит трафик на картинки в «подвале» страницы при первой загрузке.
Главное изображение (hero) должно иметь fetchpriority="high" и NOT иметь loading="lazy" — наоборот, его нужно загрузить как можно быстрее для хорошего LCP.
<!-- Главная картинка — высокий приоритет -->
<img src="hero.webp" fetchpriority="high" alt="...">
<!-- Картинки ниже на странице — ленивая загрузка -->
<img src="card.webp" loading="lazy" alt="...">
Core Web Vitals — три показателя скорости и удобства, которые Google использует как фактор ранжирования с 2021 года. Быстрый сайт занимает позицию выше медленного конкурента с одинаковым контентом.
LCP (Largest Contentful Paint) — время до загрузки главного элемента. Хорошо: менее 2.5 сек. INP (Interaction to Next Paint) — отклик на нажатие. Хорошо: менее 200 мс. CLS (Cumulative Layout Shift) — прыжки контента при загрузке. Хорошо: менее 0.1.
LCP < 2.5 с — главный элемент загрузился быстро
INP < 200 мс — страница откликается мгновенно
CLS < 0.1 — контент не прыгает при загрузке
Внутренняя перелинковка — ссылки с одних страниц сайта на другие. Помогает поисковику обойти весь сайт, понять иерархию и передать «вес» от популярных страниц к важным но менее посещаемым.
Анкор (текст ссылки) должен быть осмысленным — «Читать о разработке сайтов» вместо «кликните здесь». Поисковик читает анкоры и использует их как дополнительный сигнал о содержании целевой страницы.