Подготовка сайта к публикации
Сайт ADC Hub готов. HTML-структура создана, CSS-стили применены, JavaScript работает. Страницы выглядят красиво в браузере на вашем компьютере. Но прежде чем показать сайт миру, нужна подготовка. Как квартира перед приходом гостей. Визуально чисто, но нужно проверить, что всё на месте и работает.
Метатеги для поисковых систем
Когда публикуете сайт, его увидят не только люди, но и поисковые роботы. Гугл, Яндекс, другие поисковики отправляют ботов, которые читают страницы и индексируют их. Чтобы сайт нашёлся в поиске, нужно правильно подготовить метатеги. Как визитка компании, которая рассказывает, кто вы и чем занимаетесь.
Откройте index.html. Посмотрите на секцию <head>. Сейчас там минимум: кодировка, заголовок, ссылка на CSS. Добавим важные метатеги. Начнём с базовых для SEO (лучшему поиску в интернете).
Первый важный тег <meta name="description">:
<meta name="description" content="ADC — пространство для творчества и профессионального развития дизайнеров и разработчиков. Регулярные митапы, образовательные проекты и нетворкинг.">Описание показывается под ссылкой в поисковой выдаче. Это как аннотация книги. Человек читает и решает, кликать или нет. Максимум 160 символов. Включите ключевые слова естественно, без спама. Опишите, что получит посетитель на странице.
Второй тег <meta name="keywords">. Раньше был важен, сейчас поисковики игнорируют, но не повредит добавить:
<meta name="keywords" content="ADC, дизайн, программирование, UX/UI, творческое пространство, митапы">Просто перечислите ключевые слова через запятую. Не больше 10-15 слов.
Третий тег для управления индексацией:
<meta name="robots" content="index,follow">Это говорит поисковым роботам: «Индексируй эту страницу и переходи по ссылкам». index разрешает индексацию, follow разрешает переход по ссылкам. Есть противоположные значения noindex и nofollow, если нужно скрыть страницу от поиска.
Кодировка уже должна быть, но проверьте:
<meta charset="UTF-8">UTF-8 обеспечивает корректное отображение кириллицы, эмодзи, любых символов. Без неё русский текст превратится в кракозябры.
Open Graph теги для социальных сетей
Теперь Open Graph теги. Когда делитесь ссылкой в соцсетях, ВКонтакте или Telegram показывают превью: картинка, заголовок, описание. Это формируют OG-теги. Без них соцсеть возьмёт случайную картинку и текст, результат непредсказуемый.
Добавьте базовые OG-теги:
<meta property="og:title" content="ADC — Сообщество дизайнеров и разработчиков">
<meta property="og:description" content="Пространство для творчества, образовательные проекты и нетворкинг для дизайнеров и разработчиков">
<meta property="og:image" content="https://adchub.ru/images/og-image.jpg">
<meta property="og:url" content="https://adchub.ru/"> <!-- После публикации заменим ссылку на вышу -->
<meta property="og:type" content="website">og:title заголовок в превью. Может отличаться от <title>, быть чуть длиннее и эмоциональнее. og:description описание в превью. og:image картинка для превью. Должна быть абсолютная ссылка, размер минимум 1200×630 пикселей. og:url адрес страницы. og:type тип контента, обычно website. Картинку для og:image вы можете скачать из Figma в разделе SEO.
Полный пример <head>
Соберём всё вместе. Вот как должен выглядеть <head> готовой к публикации страницы:
<head>
<!-- Базовые метатеги -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO метатеги -->
<title>ADC Hub</title>
<meta
name="description"
content="ADC — пространство для творчества и профессионального развития дизайнеров и разработчиков. Регулярные митапы, образовательные проекты и нетворкинг"
>
<meta
name="keywords"
content="ADC, дизайн, программирование, UX/UI, творческое пространство, митапы"
>
<meta name="robots" content="index,follow">
<!-- Open Graph для соцсетей -->
<meta property="og:title" content="ADC Hub">
<meta property="og:description" content="Пространство для творчества, образовательные проекты и нетворкинг для дизайнеров и разработчиков">
<meta property="og:image" content="https://adchub.ru/images/og-image.jpg">
<meta property="og:url" content="https://adchub.ru/"> <!-- После публикации заменим ссылку на вашу -->
<meta property="og:type" content="website">
<!-- Подключение стилей -->
<link rel="stylesheet" href="style.css">
</head>Уникальность метатегов
Важный момент: каждая страница сайта должна иметь уникальные <title> и <meta name="description">. Не копируйте одинаковые теги на все страницы. Страница «О нас» должна иметь свой тайтл и описание. Страницы «Наши работы» и «Наша история» свои. Уникальность помогает поисковикам понять, чем страницы отличаются.
Подготовьте все страницы ADC Hub к публикации. Добавьте полный набор метатегов в <head>. Создайте уникальные title и description для каждой страницы. Подготовьте картинку для OG-image. Проверьте превью в отладчиках соцсетей. Это последний шаг перед тем, как загрузить сайт на хостинг и показать миру.
Для чего нужен метатег <meta name="description">?
Какой минимальный размер изображения рекомендуется для og:image?
Какие значения может принимать метатег robots?
Meta теги для SEO — полное руководство