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

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

'Blog_PostController_actionUpdateHtml';

'#layouts_templates_updateHtml';

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

Давай разберёмся, как использовать все возможности HTML и почему это основа для SEO, видимости в ИИ и структуры сайта.
<h3>Что такое семантический HTML?</h3>
HTML &ndash; это язык разметки, который придаёт тексту структуру. Например:
<ul>
<li>Тег &lt;p&gt; обозначает абзац.</li>
<li>Тег &lt;h1&gt; обозначает главный заголовок страницы.</li>
<li>Тег &lt;ol&gt;&nbsp;создаёт нумерованный список.</li>
<li>Тег <img loading="lazy"> &lt;img&gt; загружает изображение.</li>
</ul>
Раньше сайты делали именно так: контент оборачивали в нужные теги, а CSS использовали для оформления. Это помогало поисковикам и людям понимать структуру страницы.
Но потом появились WYSIWYG-редакторы и JavaScript-фреймворки, и HTML отошёл на второй план. Вместо понятных тегов вроде &nbsp;&lt;p&gt; или &lt;table&gt; появились бесконечные вложенные &lt;div&gt; и &lt;span&gt;&nbsp;. Теперь страницы стали бесструктурными, и их смысл можно понять, только когда браузер полностью загрузит и отрисует их.
<h2>Почему важна правильная структура HTML для SEO</h2>
Именно поэтому Google тратит ресурсы на рендеринг страниц в процессе индексации (хотя на самом деле не особо хочет этого делать).
Мы знаем, что Google обычно не успевает отрендерить новостную статью до того, как ей нужно попасть в блок Top Stories и другие места выдачи. Поэтому исходный HTML имеет огромное значение для новостных сайтов.
Качественный HTML позволяет Google без лишних усилий извлечь контент статьи и разместить её на достойных позициях в экосистеме поиска.
<h3>Роль семантического HTML</h3>
Семантическая разметка играет ключевую роль. Именно поэтому специалисты по SEO настаивают, чтобы заголовок статьи был обёрнут в тег <code>&lt;h1&gt;</code> и чтобы на странице статьи был только один такой тег.
<h4>Почему это важно</h4>
<ul>
<li>Тег <code>&lt;h1&gt;</code> указывает основной заголовок страницы.</li>
<li>Он показывает, где начинается статья.</li>
<li>Помогает Google быстро найти и понять основной контент.</li>
</ul>
Google и другие поисковики тратят ресурсы на рендеринг страниц, но предпочитают работать с чистым HTML. Особенно это важно для новостных сайтов &ndash; если контент не видно в исходном коде, шансы попасть в топ снижаются.
<h2>Какие HTML теги являются семантическими</h2>
Помимо заголовка &lt;h1&gt;, существует множество других семантических HTML-элементов, которые помогают Google легче извлекать и индексировать контент вашей статьи.
<h3>Основные семантические теги для контента</h3>
<ul>
<li>Абзацы: Используйте тег &lt;p&gt; для разделения текста на абзацы, а не &lt;div&gt; или &lt;span&gt;. Этот тег существует столько же, сколько и HTML, и предназначен именно для этого.</li>
<li>Подзаголовки: Применяйте теги &lt;h2&gt;, &lt;h3&gt; и &lt;h4&gt;, чтобы структурировать страницу. Они помогают выделить разделы статьи и улучшить восприятие как пользователями, так и поисковыми системами.</li>
<li>Изображения: Для отображения картинок, которые должны индексироваться Google, используйте тег &lt;img&gt;. Поисковик напрямую рекомендует это.</li>
<li>Кликабельные ссылки: При создании ссылок на внутренние или внешние страницы применяйте тег &lt;a&gt; с атрибутом href, содержащим целевой URL. Это единственный формат, который Google гарантированно обрабатывает.</li>
<li>Связанные ссылки: Тег &lt;link&gt; помогает установить связь между текущим URL и другим &ndash; например, для канонических страниц, таблиц стилей или языковых версий.</li>
<li>Списки: Для маркированных списков используйте &lt;ul&gt;, а для нумерованных &ndash; &lt;ol&gt;. Стиль можно изменить с помощью CSS, но семантическую основу должны составлять именно эти теги.</li>
<li>Выделение: Для акцентирования текста применяйте &lt;em&gt; (курсив) и &lt;strong&gt; (полужирное начертание).</li>
</ul>
<h3>Семантические теги для структуры страницы</h3>
<ul>
<li>&lt;head&gt; и &lt;body&gt; разделяют метаданные страницы (в &lt;head&gt;) и основной контент (в &lt;body&gt;).</li>
<li>&lt;header&gt; &ndash; обертка для верхней части сайта: логотип, меню, элементы навигации.</li>
<li>&lt;nav&gt; &ndash; контейнер для основного меню сайта (включая мегаменю или компактные навигационные панели).</li>
<li>&lt;section&gt; &ndash; выделяет отдельные смысловые блоки страницы, например, статью или блок комментариев.</li>
<li>&lt;article&gt; &ndash; область основного контента, включая заголовок и текст статьи. Особенно ценен для новостных ресурсов.</li>
<li>&lt;aside&gt; &ndash; дополнительный контент: боковые панели, рекомендации, последние новости.</li>
<li>&lt;footer&gt; &ndash; нижняя часть сайта с контактами, ссылками и копирайтом.</li>
</ul>
<h3>Почему это важно для SEO</h3>
Применение семантических тегов помогает поисковым системам понять назначение каждого элемента на странице, ускоряет индексацию и повышает релевантность контента. Перед тем как использовать &lt;div&gt;, проверьте, нет ли уже подходящего HTML-тега для вашей задачи.
```html
<h2>Как это помогает искусственному интеллекту</h2>
Известно, что LLM-модели, такие как ChatGPT и Perplexity, используют открытый веб для обучения, а также для выполнения пользовательских запросов, требующих контента из интернета.
Однако мало кто знает, что LLM не обрабатывают JavaScript при анализе веб-страниц.
Исключением является Google, который вложил значительные ресурсы в рендеринг страниц для их индексации.
Поскольку Google Gemini &ndash; это единственная LLM, созданная на основе поискового индекса Google, именно она использует контент с полностью отрендеренных страниц.
Если вы хотите повысить шансы на то, что ChatGPT или Perplexity будут ссылаться на ваш ресурс, необходимо, чтобы весь контент страницы был доступен в исходном HTML-коде без необходимости рендеринга.
Использование семантической HTML-разметки для структурирования кода помогает LLM проще находить и определять основной контент страницы.
Моделям вроде ChatGPT гораздо легче проанализировать несколько десятков семантических тегов, чем сотни или тысячи вложенных <code>&lt;div&gt;</code>, чтобы выделить главное содержимое.
Если когда-либо появится так называемый &laquo;агентский веб&raquo; (в чем есть сомнения), семантический HTML, скорее всего, станет одним из ключевых факторов успеха.
При использовании бессмысленных <code>&lt;div&gt;</code> и <code>&lt;span&gt;</code> вероятность того, что ИИ неправильно поймёт, какие действия нужно выполнить, значительно выше.
Применяя семантические HTML-теги для кнопок, ссылок и форм, вы снижаете риск того, что ИИ-агент не справится с задачей.
Смысл, заложенный в корректные HTML-теги, подскажет ИИ, куда перейти и что сделать.
<h2>Что насчет структурированных данных</h2>
Можно подумать, что структурированные данные сделали семантический HTML устаревшим.
Действительно, с помощью структурированных данных можно в удобном машинном формате передать системам информацию о содержимом и назначении страницы.
Однако структурированные данные не были задуманы как замена семантическому HTML &ndash; у них совершенно иное назначение.
У структурированных данных есть ограничения, которых нет у семантической разметки.
<ul>
<li>Они не укажут, какая кнопка добавляет товар в корзину.</li>
<li>Не покажут, какой подзаголовок относится к важному абзацу текста.</li>
<li>Не определят, по каким ссылкам стоит перейти для получения дополнительной информации.</li>
</ul>
Используйте структурированные данные, чтобы обогатить страницы и помочь системам понять ваш контент, но не забывайте и про семантический HTML.
Вместе семантический HTML и структурированные данные создают непревзойденную комбинацию.
<h2>Создавайте сайты, а не веб-приложения</h2>
Сайты для доставки контента (например, новостные порталы) в большинстве случаев значительно лучше работают в виде традиционных HTML-страниц, чем в формате веб-приложений.
Настоящие сайты строятся на HTML. Используя все возможности HTML, вы автоматически избегаете большинства технических проблем с SEO, характерных для веб-приложений.
Разрабатывайте именно сайты, и вы уже сделаете огромный шаг к лучшей видимости и индексируемости в поисковых системах.

Краткое название: Почему семантический HTML важен для SEO и ИИ

Полное название Почему семантический HTML важен для SEO и ИИ

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

Название

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

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

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

Описание

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

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

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