SEO_для_SPA_презентация

1. SEO для одностраничных приложений и метаданные страниц

ГБПОУ НСО «Новосибирский авиационный технический колледж имени Б.С.Галущака»
Тема 2 · Доклад
SEO для
одностраничных
приложений и
метаданные страниц
Выполнили: студент группы ПР-24.103 Краснопеев Степанов Филатов и
Медведь
Преподаватель: Зиберева А.А.
Новосибирск, 2026
<head>
<title>SEO для SPA</title>
<meta name="description" />
</head>

2. 1. Что такое SPA

Тема 2 · SEO для одностраничных приложений и метаданные страниц
SPA (Single Page Application) — одна HTMLстраница, контент которой строит JavaScript в
браузере.
React + Vite отдаёт только «оболочку» и ссылку
на скрипт.
<body>
<div id="root"></div>
<script src="/main.js"></script>
</body>
Робот без выполнения JS видит пустой div.
2

3. 2. Способы отрисовки: CSR, SSR, SSG

Способ
Где формируется HTML
Что получает робот
Примеры
CSR
В браузере, после загрузки JS
Пустую оболочку; контент появляется после
рендеринга
React + Vite
SSR
На сервере, при каждом запросе
Готовый HTML с контентом
Next.js
SSG
При сборке проекта, заранее
Готовые HTML-файлы
Astro, Next.js
Для SEO надёжнее SSR и SSG: HTML с контентом приходит сразу.
3

4. 3. Обработка JavaScript в Google и Яндекс

1
2
3
Сканирование
Очередь рендеринга
Индексация
Googlebot берёт URL из очереди,
учитывает robots.txt, загружает
HTML и находит ссылки.
Страница ждёт своей очереди,
затем Chromium выполняет
JavaScript. Это занимает время.
В индекс попадает отрендеренный
HTML: контент, метатеги и ссылки.
Яндекс
Робот Яндекса тоже выполняет JavaScript, но менее предсказуемо и с задержкой. Контент и метатеги надёжнее
отдавать в готовом HTML (SSR/SSG).
4

5. 4. Маршрутизация SPA

Адрес с #
History API
site.ru/#/about
site.ru/about
Всё после # не уходит на сервер: для робота это одна
страница.
У каждого экрана свой адрес (pushState). Сервер
отдаёт index.html на любой путь.
Ссылки
Робот переходит только по <a href="/about">. Кнопка или div с onClick ссылкой не считается.
5

6. 5. Уникальные title и description

React 19
React 18 + react-helmet-async
Теги в компоненте React сам поднимает в head.
App оборачивается в HelmetProvider.
<title>О нас — HeartLink</title>
<meta name="description"
content="Команда и миссия" />
<Helmet>
<title>О нас — HeartLink</title>
<meta name="description" content="…" />
</Helmet>
Ориентиры: title до 60 символов, description 120–160. На каждой странице свои.
6

7. 6. Open Graph

Свойства
Картинка превью
og:title
1200×630 px (1,91 : 1)
og:type
JPG или PNG, до 5 МБ
og:image
Абсолютный URL
og:url
og:description
(рекомендуется)
Почему не видно JS-теги
Боты соцсетей не выполняют
JavaScript и читают только
HTML ответа сервера. Нужны
SSR, SSG или пререндер.
7

8. 7. Микроразметка Schema.org (JSON-LD)

JSON-LD — блок данных в script
type="application/ld+json", который описывает
страницу для поисковика.
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Главная",
"item": "https://site.ru/"
}]
BreadcrumbList: в выдаче вместо URL
показываются хлебные крошки «Главная ›
Блог».
Проверка: Rich Results Test.
}
8

9. Вывод:D4n1la - kazah

10. Список источников

Google Search Central. Основы SEO для JavaScript [Электронный ресурс]. URL: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics (дата обращения: 30.10.2026).
Google Search Central. Устранение проблем с JavaScript, влияющих на поиск [Электронный ресурс]. URL: https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript (дата обращения: 30.10.2026).
Google Search Central. Заголовки страниц в результатах поиска (title links) [Электронный ресурс]. URL: https://developers.google.com/search/docs/appearance/title-link (дата обращения: 30.10.2026).
Google Search Central. Описания страниц в результатах поиска (snippets) [Электронный ресурс]. URL: https://developers.google.com/search/docs/appearance/snippet (дата обращения: 30.10.2026).
Google Search Central. Хлебные крошки (BreadcrumbList), структурированные данные [Электронный ресурс]. URL: https://developers.google.com/structured-data/breadcrumbs (дата обращения: 30.10.2026).
Яндекс Вебмастер. Индексирование страниц с JavaScript [Электронный ресурс]. URL: https://yandex.ru/support/webmaster/yandex-indexing/rendering.html (дата обращения: 30.10.2026).
React. React 19 [Электронный ресурс]. URL: https://react.dev/blog/2024/12/05/react-19 (дата обращения: 30.10.2026).
react-helmet-async [Электронный ресурс]. URL: https://github.com/staylor/react-helmet-async (дата обращения: 30.10.2026).
MDN Web Docs. History API [Электронный ресурс]. URL: https://developer.mozilla.org/ru/docs/Web/API/History_API (дата обращения: 30.10.2026).
React Router. Документация [Электронный ресурс]. URL: https://reactrouter.com (дата обращения: 30.10.2026).
Next.js. Документация [Электронный ресурс]. URL: https://nextjs.org/docs (дата обращения: 30.10.2026).
Astro. Документация [Электронный ресурс]. URL: https://docs.astro.build (дата обращения: 30.10.2026).
The Open Graph protocol [Электронный ресурс]. URL: https://ogp.me (дата обращения: 30.10.2026).
Schema.org. BreadcrumbList [Электронный ресурс]. URL: https://schema.org/BreadcrumbList (дата обращения: 30.10.2026).

11. Спасибо за внимание!

PS. ZA memы И zvyk1 0tve4al d1mk4/