Некорректная верстка в SEO

Поисковый робот читает HTML сверху вниз и количество текста, который он читает - ограничено. Если в начале страницы идут большие блоки CSS и JavaScript, то основной контент оказывается ниже. Робот может прочитать только служебный код и не дойти до текста страницы.

Поэтому в HTML должна оставаться только разметка, а стили и скрипты нужно выносить в отдельные файлы.

Пример 1

Плохо, когда CSS пишут прямо на странице в теге style. Особенно если таких блоков много и они стоят до основного контента.

Такой код сложнее поддерживать. Если один и тот же стиль нужен на многих страницах, его придется копировать снова и снова. А робот сначала прочитает CSS, а не содержание страницы.

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

<style>
	.header { background: #fff; }
	.menu { display: flex; }
	.price { color: red; }
</style>
<h1>Каталог</h1>
<p class="price">1200 руб.</p>

Правильно подключать отдельный CSS-файл:

<head>
	<link rel="stylesheet" href="/css/style.css">
</head>
<body>
	<h1>Каталог</h1>
	<p class="price">1200 руб.</p>
</body>

Пример 2

Та же проблема возникает, когда JavaScript пишут прямо в HTML в теге script. Большой скрипт в начале страницы загромождает код и отодвигает основной контент.

Длинный JavaScript-код в HTML занимает место в начале страницы и мешает роботу быстрее дойти до основного текста.

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

<script>
	function formatPrice(value) {
		return value.toLocaleString('ru-RU') + ' руб.';
	}
	function initGallery() {
		// код галереи
	}
</script>
<h1>О компании</h1>
<p>Мы работаем с 2010 года.</p>

Правильно подключать JavaScript отдельным файлом:

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

Пример 3

Плохо и когда оформление задают через атрибут style у каждого элемента. Один и тот же набор стилей приходится повторять снова и снова прямо в HTML.

Из-за этого верстка занимает намного больше места. Робот читает длинные повторяющиеся атрибуты вместо самого содержания страницы.

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

<h1 style="font-size: 24px; margin: 0 0 16px; color: #222;">
	Каталог
</h1>
<p style="margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #333;">
	128 товаров
</p>
<p style="margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #333;">
	Бесплатная доставка от 3000 руб.
</p>

Правильно вынести оформление в CSS-файл и оставить в HTML короткую разметку:

<head>
	<link rel="stylesheet" href="/css/style.css">
</head>
<body>
	<h1 class="title">Каталог</h1>
	<p class="text">128 товаров</p>
	<p class="text">Бесплатная доставка от 3000 руб.</p>
</body>

Практические задачи

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

<h1>Каталог</h1>
<style>
	.note { color: gray; }
</style>
<p class="note">128 товаров</p>

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

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

<script>
	function showBanner() {
		// код баннера
	}
</script>
<h1>О компании</h1>

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

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

<p style="margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #333;">
	Доставка по городу за 1 день
</p>
<p style="margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #333;">
	Самовывоз из пункта выдачи
</p>

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