Видео урока скоро будет доступно
Мета-теги, Open Graph, Sitemap, Google Search Console, Яндекс Вебмастер, SEO-статьи с AI.
После этого урока вы:
SEO (Search Engine Optimization) — это набор действий, которые помогают вашему сайту занимать высокие позиции в результатах поиска (Google, Яндекс). Чем выше сайт, тем больше людей его увидят.
Почему это важно?
Основные факторы ранжирования:
| Элемент | Где находится | Зачем нужен |
|---|---|---|
| Title | В <head> | Заголовок страницы в поиске. До 60 символов. |
| Description | В <head> | Описание страницы в сниппете. До 160 символов. |
| H1 | Первый заголовок на странице | Отражает суть страницы. Должен быть один. |
| Alt-тексты | У изображений | Описание картинки для поиска и незрячих. |
| Open Graph | В <head> | Мета-теги для соцсетей (Facebook, Telegram, VK). |
| Sitemap.xml | В корне сайта | Карта сайта для поисковых роботов. |
| Robots.txt | В корне сайта | Инструкции для роботов (что индексировать). |
Попросите AI сгенерировать мета-теги для вашего лендинга. Пример промпта:
«Сгенерируй мета-теги (title, description) для лендинга школы английского языка. Title: до 60 символов, description: до 160 символов, включая ключевые слова: "изучение английского", "школа английского", "преподаватели". Также создай Open Graph мета-теги (og:title, og:description, og:image, og:url) для соцсетей. Предложи изображение для og:image.»
AI предложит готовый код для вставки в <head> вашего index.html.
Важно: Укажите в промпте свою тему (не английский, а то, чему учит ваш сайт) — AI подставит правильные ключевые слова.
Должны появиться:
Совет: Если AI не сгенерировал Twitter Cards, попросите его добавить: «Добавь Twitter Card meta-теги (twitter:card, twitter:title, twitter:description, twitter:image).»
Должен появиться красивый блок с заголовком, описанием и картинкой.
Не отображается? Проверьте, что og:image указывает на существующее изображение, и что все meta-теги внутри <head> (не в <body>).
Дополнительно: Используйте Facebook Debugger или Twitter Card Validator для диагностики.
2.1. Создание sitemap.xml
Попросите AI создать sitemap.xml для вашего сайта:
«Напиши sitemap.xml для моего сайта [укажите URL]. Страницы: index.html, course.html, wiki.html, lesson1.html ... lesson8.html. Укажи приоритеты (priority от 0.5 до 1.0) и частоту обновления (changefreq: weekly).»
Создайте файл sitemap.xml в корне проекта, вставьте код от AI.
2.2. Создание robots.txt
Попросите AI написать robots.txt:
«Напиши robots.txt для моего сайта. Разреши индексацию всех страниц, укажи ссылку на sitemap.xml.»
Создайте robots.txt в корне, вставьте код.
Готово: Если зелёная галочка — сайт подтверждён.
Отправка sitemap в Search Console:
Проверка индексации:
Важно: Индексация может занять от нескольких часов до нескольких дней. Проверьте, что robots.txt не блокирует страницы.
Оба инструмента: Google Search Console + Яндекс Вебмастер — не дублируют друг друга. Используйте оба для максимального охвата аудитории.
Попросите AI предложить темы для блога:
«Предложи 5 тем для статей в блог школы [ваша тема]. Темы должны быть полезными для родителей/клиентов. Включи ключевые слова: [ваши ключевые слова].»
AI предложит темы. Выберите одну — самую актуальную для вашей аудитории.
Примеры тем для школы английского:
Выберите одну тему и попросите AI написать статью:
«Напиши статью для блога на тему "[выбранная тема]". Объём 500–700 слов. Включи ключевые слова: [ваши ключевые слова]. Сделай вступление, 5 пунктов с пояснениями, заключение с призывом записаться на пробный урок.»
Важно: Отредактируйте текст AI — добавьте примеры из своего опыта, проверьте факты. Чистый AI-текст может быть распознан как некачественный.
5.3. Создание страницы блога
5.4. Оптимизация статьи
Что мы узнали?
Главный итог: Ваш сайт готов к продвижению. Когда поисковые системы проиндексируют его, люди смогут находить вас через Google и Яндекс. Вы сделали важный шаг к тому, чтобы ваш сайт приносил реальную пользу.
На следующем занятии мы займёмся безопасностью и финальной презентацией — SSL, капча, политика конфиденциальности и запуск проекта.