Перейти к содержанию

Лабораторная работа №3 — Сниппеты, SEO-теги и семантическая разметка

1. Теория

1.1. Что такое сниппет

Сниппет — это фрагмент информации, который поисковая система отображает в результатах выдачи. Обычно включает:

  • <title> — заголовок страницы
  • URL
  • meta description — краткое описание
  • дополнительные расширения (фавикон, хлебные крошки, рейтинг, быстрые ссылки)

Хорошо оформленный сниппет:

  • повышает CTR (кликабельность),
  • помогает поисковым роботам интерпретировать содержание страницы,
  • влияет на ранжирование в сочетании с поведенческими факторами.

1.2. SEO-теги страницы

Ключевые элементы:

  • <title> — до 55–60 символов
  • <meta name="description"> — до 155–160 символов
  • <h1> — уникальный заголовок страницы
  • <img alt=""> — альтернативный текст изображений
  • OpenGraph:
<meta property="og:title">  
<meta property="og:description">  
<meta property="og:image">

Назначение SEO-тегов:

Тег Назначение
<title> влияет на ранжирование, формирует заголовок сниппета
<meta description> формирует описание сниппета
<h1> основной заголовок содержимого
alt доступность и SEO изображений
og:* формирование сниппета в соцсетях

1.3. Семантическая разметка

Семантические теги помогают поисковым роботам и пользователям понимать структуру страницы:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <footer>

Преимущества:

  • улучшение доступности,
  • улучшение индексации,
  • логичность структуры,
  • корректная работа адаптивных интерфейсов.

2. Задание

2.1. Создание сайта из 3 страниц

Необходимо разработать сайт, состоящий из:

  • index.html
  • about.html
  • contacts.html

Требования:

  • каждая страница содержит корректную структуру (header/nav/main/footer);
  • на главной странице SEO оформлены идеально;

  • на двух страницах — преднамеренные типичные ошибки:

  • два <h1>;

  • пустой alt;
  • отсутствующий description;
  • слишком длинный <title>.

2.2. Публикация на GitHub Pages

  1. Создать GitHub-репозиторий
  2. Загрузить HTML-файлы
  3. Включить GitHub Pages
  4. Проверить доступность:
https://имя.github.io/репозиторий/

2.3. Проверки SEO и качества кода

Провести анализ каждой страницы:

  1. W3C Validator — валидность HTML
  2. PageSpeed Insights — показатели Core Web Vitals

  3. Яндекс.Вебмастер:

  4. подключение сайта;

  5. загрузка файла подтверждения;
  6. проверка индексации.

Сделать скриншоты:

  • Валидация HTML (ошибки/предупреждения)
  • Результаты скорости
  • Уведомления Вебмастера

2.4. Описание и анализ ошибок

Для двух страниц с ошибками составить:

  • таблицу ошибок,
  • описание причины,
  • влияние на SEO,
  • что нужно исправить и почему.

2.5. Итоговый отчёт

Отчёт должен содержать:

  1. Цели работы
  2. Структура сайта
  3. Правильные и ошибочные SEO-теги
  4. Скриншоты валидаторов и PageSpeed
  5. Таблица ошибок (что → почему → влияние → решение)
  6. Выводы о влиянии ошибок на индексацию

3. Контрольные вопросы

  1. Что формирует сниппет и как на него влияет HTML-код?
  2. Какие SEO-теги обязательны на каждой странице?
  3. Почему нельзя использовать несколько <h1>?
  4. Зачем нужен alt и как он влияет на SEO?
  5. Почему важно уникализировать <title> и <description>?
  6. Чем OpenGraph отличается от поисковых тегов?
  7. Какие ошибки чаще всего приводят к плохой индексации?
  8. Как скорость загрузки влияет на ранжирование?

4. Чек-лист для самопроверки

Баллы Критерии
6 Сайт из 3 страниц опубликован на GitHub Pages. Главная страница полностью корректна. На двух страницах преднамеренные ошибки — подробно описаны. Проведена проверка в W3C, PageSpeed, Яндекс.Вебмастере. Отчёт содержит таблицу ошибок, скриншоты всех этапов и подробные выводы. Работа оформлена аккуратно и проверяется пошагово.
5 На всех 3 страницах есть SEO-теги. Ошибки на 2 страницах внесены и зафиксированы. Сайт подключён к Яндекс.Вебмастеру. В отчёте есть ссылки, таблица, скриншоты и краткие выводы.
3–4 Сайт состоит из 3 страниц. Главная оформлена корректно. Ошибки на двух страницах есть, но отчёт поверхностный. Скриншоты валидаторов приложены. Таблица ошибок упрощённая.
1–2 Сайт неполный (1 страница). SEO-теги частично отсутствуют. Ошибочные страницы не сделаны. Нет скриншотов проверок. Отчёт минимальный.
0 Нет сайта на GitHub Pages. Работа выполнена формально или скопирована. Отчёт отсутствует.

Скачать шаблон отчёта

👉 Скачать шаблон отчёта