#3-Правка текста поста

'#8. Посты : posts';

'Blog_PostController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

В этом посте:
<ul>
<li>Имена классов CSS не влияют на SEO и не считываются Google как контент.</li>
<li>Слишком большие файлы CSS могут замедлить загрузку страниц и ухудшить показатели Core Web Vitals.</li>
<li>Google рекомендует сохранять возможность сканирования CSS для обеспечения корректной визуализации и индексации.</li>
</ul>
В недавнем выпуске подкаста Google Search Off the Record Мартин Сплитт и Джон Мюллер объяснили, как CSS влияет на SEO.
Хотя некоторые аспекты CSS не имеют никакого отношения к SEO, другие могут напрямую влиять на то, как поисковые системы интерпретируют и ранжируют контент.
Вот что имеет значение, а что нет.
<h2>Названия классов не имеют значения для рейтингов</h2>
Один из самых очевидных выводов из этого эпизода заключается в том, что имена классов CSS не оказывают никакого влияния на поиск Google.
Сплитт заявил:
<blockquote>
&laquo;Не думаю. Не думаю, что нас это волнует, потому что названия классов CSS &ndash; это просто имена. Они просто назначают элементам конкретный, довольно узнаваемый фрагмент правил таблицы стилей, и всё. Вот и всё. Можно назвать их все &laquo;аннотациями&raquo;. С точки зрения SEO это ничего не изменит&raquo;.
</blockquote>
Они объяснили, что имена классов используются только для визуального оформления. Они не считаются частью содержимого страницы. Поэтому Googlebot и другие HTML-парсеры игнорируют их при извлечении содержательной информации.
Даже если вы передаете HTML в языковую модель или базовый сканер, имена классов не будут учитываться, если ваша система явно не предназначена для чтения этих атрибутов.
<h2>Почему контент в псевдоэлементах является проблемой</h2>
Хотя имена классов безвредны, команда предостерегла от размещения значимого контента в псевдоэлементах CSS, таких как&nbsp;:before и&nbsp;:after.
Сплитт заявил:
<blockquote>
&laquo;Идея, повторюсь, &ndash; первоначальная идея &ndash; заключается в том, чтобы отделить представление от контента. Таким образом, контент находится в HTML, а его представление &ndash; в CSS. Поэтому before, after если вы добавляете декоративные элементы, например, маленький треугольник, маленькую точку, маленькую лампочку или маленького единорога &ndash; что угодно, &ndash; я думаю, это нормально, потому что это декоративно. С точки зрения контента это не имеет значения. Без него всё было бы прекрасно&raquo;.
</blockquote>
Добавление визуальных эффектов приемлемо, но вставка заголовков, абзацев или любого контента, с которым сталкивается пользователь, в псевдоэлементы нарушает основной принцип веб-разработки.
Этот контент становится невидимым для поисковых систем, программ чтения с экрана и любых других инструментов, которые полагаются на прямой анализ HTML.
Мюллер привел реальный пример того, как это может пойти не так:
<blockquote>
&laquo;Однажды команда индексации обратилась к нам с требованием связаться с сайтом и потребовать прекратить использование before и after&hellip;&nbsp; Они использовали before псевдокласс для добавления знака номера ко всему, что считали хэштегами. И наша система индексации подумала: было бы здорово, если бы мы могли распознавать эти хэштеги на странице, ведь, возможно, они для чего-то полезны&raquo;.
</blockquote>
Поскольку символы хэштега были добавлены с помощью CSS, они никогда не были видны системам Google.
Сплитт протестировал это вживую во время записи и подтвердил:
<blockquote>
&laquo;Его нет в DOM... поэтому он не учитывается при рендеринге&raquo;.
</blockquote>
<h2>Слишком большой размер CSS может снизить производительность</h2>
В эпизоде также затрагивались проблемы производительности, связанные с раздутыми таблицами стилей.
По данным веб-альманаха HTTP Archive за 2022 год, средний размер CSS-файла вырос примерно до 68 КБ для мобильных устройств и 72 КБ для настольных компьютеров.
Мюллер заявил:
<blockquote>
&laquo;Веб-альманах&raquo; сообщает, что каждый год мы видим рост размера CSS, а в 2022 году медианный размер таблицы стилей составил 68 или 72 килобайта. &hellip; Они также упомянули, что самый большой из найденных ими файлов весил 78 мегабайт. &hellip; Это текстовые файлы&raquo;.
</blockquote>
Подобное раздувание может негативно сказаться на основных показателях сайта (<a title="Core Web Vitals" href="https://shopnseo.ru/texts/spravochnik-po-seo-onlayn-torgovle-i-internetu/cwb-core-web-vitals/">Core Web Vitals</a>) и общем пользовательском опыте, которые действительно влияют на рейтинг. Часто причиной являются фреймворки и готовые библиотеки.
Хотя разработчики могут смягчить это с помощью минимизации и удаления неиспользуемых правил, не все это делают. Поэтому оптимизация CSS &ndash; достойный пункт в вашем контрольном списке технического SEO.
<h2>Сохраняйте CSS сканируемым</h2>
Несмотря на ограниченную роль CSS в ранжировании, Google все равно рекомендует сделать файлы CSS доступными для сканирования.
Мюллер пошутил:
<blockquote>
&laquo;Согласно рекомендациям Google, CSS-файлы должны быть доступны для сканирования. Должно же быть, тут есть какая-то магия, верно?&raquo;
</blockquote>
Настоящая причина скорее техническая, чем магическая. Googlebot использует CSS-файлы для отображения страниц такими, какими их видят пользователи.
Блокировка CSS может повлиять на интерпретацию ваших страниц, особенно в плане макета, удобства для мобильных устройств или таких элементов, как скрытый контент.
<h2>Практические советы для SEO-специалистов</h2>
Вот что этот эпизод означает для вашей практики SEO:
<ul>
<li>Прекратите оптимизировать имена классов: ключевые слова в классах CSS не помогут вашим рейтингам.</li>
<li>Проверьте псевдоэлементы: любой реальный контент, например текст, предназначенный для чтения, должен находиться в HTML, а не в :before или :after.</li>
<li>Проверьте размер таблицы стилей: большие файлы CSS могут снизить скорость загрузки страницы и показатели Core Web Vitals.</li>
<li>Сократите всё, что возможно.</li>
<li>Убедитесь, что CSS доступен для сканирования: блокировка таблиц стилей может нарушить рендеринг и повлиять на то, как Google распознает вашу страницу.</li>
</ul>
Команда также подчеркнула важность использования правильных HTML-тегов для содержательных изображений:
<blockquote>
&laquo;Если изображение является частью контента и вы думаете: &laquo;Посмотрите на этот дом, который я только что купил&raquo;, то вам нужен imgтег изображения или pictureтег, который фактически содержит фактическое изображение как часть DOM, потому что вы хотите, чтобы мы увидели что-то вроде: &laquo;Ага, на этой странице есть изображение, которое не просто украшение&raquo;.
</blockquote>
Используйте CSS для оформления и HTML для передачи смысла. Такое разделение удобно как для пользователей, так и для поисковых систем.

Краткое название: CSS не влияют на SEO

Полное название Google подтверждает, что названия классов CSS не влияют на SEO

Активен Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!