Доступность контента в SEO

Поисковый робот загружает HTML страницы и читает то, что в нем есть. Если важный контент уже есть в HTML, робот увидит его сразу.

Это называют доступностью контента для робота. Если текст, заголовки, тег title и метаописание появляются только после выполнения JavaScript, робот может их не получить.

Плохой вариант:

<div id="app"></div>
<script>
	document.getElementById('app').innerHTML =
		'<h1>О компании</h1><p>Мы работаем с 2010 года.</p>';
</script>

В исходном HTML нет ни заголовка, ни текста. Они появляются только после работы скрипта. Робот может увидеть пустой контейнер.

Хороший вариант:

<div id="app">
	<h1>О компании</h1>
	<p>Мы работаем с 2010 года.</p>
</div>

Заголовок и текст уже есть в исходном коде. Робот увидит их без выполнения JavaScript.

Разработчик должен следить, чтобы в HTML сразу были:

основной текст страницы;
заголовки;
тег title;
метаописание.

Проверить контент можно в исходном коде страницы. Откройте ее в браузере и нажмите Ctrl + U.

В исходном коде не выполняются скрипты. Если там нет текста страницы и заголовка, а только пустой контейнер и тег script, контент для робота недоступен.

Такое часто бывает на сайтах, собранных на React, Vue или Angular, если весь контент рисуется только в браузере. Об этом будет в одном из следующих уроков.

Объясните, почему контент, который появляется только после выполнения JavaScript, может быть недоступен роботу.

Дана верстка:

<div id="app"></div>
<script>
	document.getElementById('app').innerHTML =
		'<h1>Каталог</h1><p>128 товаров</p>';
</script>

Объясните, в чем ошибка и исправьте ее.

Дана верстка:

<head>
	<title></title>
</head>
<body>
	<div id="root"></div>
	<script src="/app.js"></script>
</body>

Объясните, в чем ошибка и исправьте ее.