< P > Вот разбивка всего, что может предложить HTML, и почему он является фундаментальным для SEO, видимости ИИ и веб -структур.

< img width = "1600" height = "840" src = "https://www.searchenginejournal.com/wp-content/uploads/2025/08/semanty-html-915.png" Class WP-POST-IMAGE "ALIL =" HHY Semant Html Rentl Ratell Ratell Rentll Rentll Ratentl Rentll Rentll Rentll Rentl Rentl Rentll Arty и Menty Rentriply Rentls и FETL. Decoding = "async" srcset = "https://www.searchenginejournal.com/wp-content/uploads/2025/08/semanty-html-915.png 1600W, https://www.searchenginejournal.com/wp-content/uploads/2025/08/semantic-html-915-480x252.png 480w, https://www.searchenginejournal.com/wp-content/uploads/2025/08/semantic-html-915-680x357.png 680w, https://www.searchenginejournal.com/wp-content/uploads/2025/08/semantic-html-915-384x202.png 384w, https://www.searchenginejournal.com/wp-content/uploads/2025/08/semantic-html-915-768x403.png 768w, https://www.searchenginejournal.com/wp-content/uploads/2025/08/semantic-html-915-1024x538.png 1024w "Размеры =" (макс-122: < p >Я & Rsquo; У VSE какое -то время занимала эту позицию в проектах, в основном в качестве контейнера для меня, чтобы бросить кусочки, когда я получаю время, чтобы расширить их до надлежащей рассылки.

< P > Тогда мой хороший друг Джоно Олдерсон опубликовал свою замечательную работу о семантическом HTML, и через несколько недель я потерял свою волю, чтобы сделать свою.

< P > Но я думал, что мне все еще нужно закончить свою версию, потому что мое внимание немного отличается и, возможно, немного более практично, чем Jono & Rsquo; с

< P > Вы все еще должны читать именно блог Jono ‘S; Все, что я хочу сказать, написано там больше.

< H2 > SEMANTIC HTML < P > Let & Rsquo; S начнется с быстрого обзора того, что такое семантический HTML.

< p > Как язык, на котором строится сеть, HTML – это разметка, которая окружает текст, чтобы обеспечить его структурой.

< p >& Amp; LT; P & GT; Тег вокруг блока контента указывает, что это абзац текста.

< p > the & LT; H1 & GT; Тэг вокруг предложения показывает, что это страница “rsquo; s Основное название.

< p > the & LT; OL & GT; Тег указывает начало упорядоченного (обычно пронумерованного) списка.

< p > the & LT; Img & GT; Теги точки на веб -страницу Скачать изображения на веб -странице. И т. Д.

< P > Семантический HTML использовался для кодирования каждой веб -страницы.

< p > Содержание было окружено конкретными тегами, которые указывали, что было назначено каждый BT содержимого, а затем использовал CSS, чтобы выглядеть хорошо. Это не было никому, но это сработало.

< p >Это также означало, что вы могли взглянуть на страницы с сыром HTML -WEB и посмотреть, что пытается доставить страницу и как. HTML отметил структуру и значение каждого контента на странице. Вы могли бы увидеть & NBSP; Назначение & NBSP; Страницы только глядя на его код.

< P > Затем на сцену прибыли редакторы Wysiwyg, а затем кадр JavaScript, и HTML занял заднее сиденье. Вместо & LT; P & GT; и & LT; Таблица & GT;, у нас бесконечные гнезда & LT; Div & GT; и & LT; Span & GT; Теги.

< P > Конечный результат – это веб -страница HTML, которая не имеет структуры и не имеет значения, пока она не будет полностью дана в браузере и визуально нарисована на экране. Только тогда пользователь (и система машин, которая пытается подражать пользователю) поймет, какова цель страницы ” < p > it & Rsquo; Почему Google прилагает усилия для визуализации страниц как часть процесса индексации (хотя это действительно & nbsp; < p >Мы знаем, что у Google нет времени, как обычно, нет времени, чтобы предоставить новостную статью, прежде чем она понадобится в верхней и других местах. RAW HTML чрезвычайно важен для издателей новостей.

< p > Хороший HTML позволяет Google извлекать содержимое вашей статьи без особых усилий и классифицировать вашу историю, где он заслуживает Google & Rsquo; S Экосистема.

< p > Семантический HTML является ключевым фактором здесь. Это причина, по которой SEO, как и я, настаивает на том, что статья & Rsquo; S Название обернуто в & LT; H1 & GT; Заголовок тега, и это единственный экземпляр & LT; H1 & GT; На странице статьи.

< P > H1 Название указывает на веб -страницу & Rsquo; S Основной заголовок. Это обозначение, где начинается статья, поэтому Google может легко найти содержание статьи.

< H2 > Какие теги HTML являются семантическими ? < p >Снаружи & LT; H1 & GT; Тег заголовка, есть много других семантических элементов HTML, которые вы можете реализовать, что Google облегчает извлечение и индекс содержания статьи.

< p > В любом конкретном порядке элементы, которые вы должны использовать,:

< ul > < li >< Стронг > параграфы : don & Rsquo; t Использование & LT; Div & GT; и & LT; Span & GT; Теги для форматирования статьи в параграфах. Там & Rsquo; S был тегом для этого, пока существовал HTML, и это & LT; P & GT; Ярлык. Используйте его.

< li >< Strong > подзаголовки : Использование & LT; H2 & gt;/& LT; H3 & gt;/& LT; H4 & GT; Отечь подзаголовки, чтобы дать структуру вашей страницы. Используйте подзаголовки в статье, чтобы предисловать конкретные разделы контента в вашей статье. Используйте заголовки над бетонными структурными элементами, такими как рекомендуемые статьи.

< l >< Стронг > Изображения : всегда используйте & LT; Img & GT; Теги, если вы хотите показать изображение, которое вы также видите Google. Google & NBSP; ясно рекомендует это.

< li > < Стронг > Нажатие ссылки : Когда ссылка на другую страницу, или внутренняя или внешняя, используйте & LT; A & GT; Тег с & ldquo; href & Rdquo; значение, содержащее целевой URL. Это & Rsquo; S Единственный вид ссылки, какой будет Google, безусловно, будет.

< li >< Strong > Относительные связи : & Усилитель; LT; Link & GT; Тег позволяет создавать отношения между текущим URL и другим URL. Это может быть каноническая страница, таблица стилей, альтернативная языковая версия текущей страницы и т. Д. < li >< Strong > Списки : Списки мяч должны использовать & LT; ul & GT; Теги и пронумерованные списки должны использовать & LT; OL & GT; Ярлык. Вы можете заставить их выглядеть так, как вам нравится, с CSS, но использовать теги списка в качестве базы.

< l >< Стронг > Акцент : Когда вы хотите выделить определенное слово или фразу, существуют семантические теги HTML, которые вы должны использовать для этого: & LT; Em & GT; для < em >Итальянец и & LT; Сильный & GT; для & NBSP; < Стронг > Жир .

< p > Все вышеперечисленные теги, кроме & LT; Link & GT; < P > Существуют дополнительные семантические теги HTML, которые направлены на то, чтобы обеспечить структуру и значения для & NBSP; Код страницы.

< P > Эти теги позволяют Google идентифицировать различные элементы на странице, такие как навигация по боковой панели, и обрабатывать их соответственно.

< Img decoding = "async" src = "https://www.searchenginejournal.com/wp-content/uploads/2025/08/semantic-html-685 =" wp-image-504 small-img "Загрузка =" > Семантическое изображение Html с W3schooles.com “Lazyry). < ul > < li > the & NBSP; < Стронг > & LT; голова & GT; & NBSP; и & NBSP; < Стронг > & LT; Тело & GT; amp; NBSP; Page & Rsquo; Каждая HTML -страница начинается с этих двух.

< li >< Strong > & LT; заголовок & GT; & NBSP; Его можно использовать, чтобы обернуть голову страницы, где расположены логотип, навигация и другие стилистические элементы.

< li >< Strong > & LT; NAV & GT; & NBSP; следует использовать для вашего сайта & Rsquo; S Главная навигация. Мега -люди, меню гамбургера, верхние ссылки, независимо от того, что ваша навигация принимает, вы должны обернуть его в & LT; NAV & GT; Ярлык.

< li > Вы можете использовать & NBSP; < Стронг > & LT; Раздел & GT; Теги, чтобы разделить вашу страницу на несколько разделов. Один раздел может быть статьей; Другие могут быть комментариями ниже статьи.

< li >< Strong > & LT; Статья & GT; & NBSP; это тег, который показывает, где начинается страница; Это очень ценный тег для издателей новостей.

< li > с & NBSP; < Стронг > & LT; в сторону & gt;, & NBSP; Вы можете указать блоки контента в качестве тренда боковой панели -гисториум, рекомендуемые статьи или последние новости.

< li >< Strong > & LT; нижний колонтитул & GT; & NBSP;

< p >Эти структурные семантические теги помогают поисковым системам понять цель и важность каждого раздела HTML.

< P > Это позволяет Google быстро индексировать ваш контент и правильно обрабатывать различные элементы ваших страниц.

< P > В вашем распоряжении гораздо больше HTML -семантических метков для разных целей. Скорее всего, есть элемент HTML; < p >, не накапливайте свой код полным & LT; Div & GT; Теги, чтобы случиться что -то, сначала посмотрите, есть ли усилитель; Rsquo; S -правильный HTML -элемент, который делает трюк.

< H2 > Как это помогает Ai ? < P > Мы знаем, что LLM, например, CHATGPT и удивление, спрыгните открытую сеть для данных обучения, а также для конкретных запросов пользователей, которые требуют контента из Интернета.

< P > Что из вас может не знать, что LLMS не предоставляет JavaScript при обработке веб -страниц.

< p >Google является исключением из правила, потому что он посвятил много ресурсов для предоставления веб -страниц как часть индексации.

< P > С момента Google & Rsquo; S Gemini – единственный LLM, встроенный в Google & Rsquo; S Индекс, Gemini – единственный LLM, который использует содержание полностью предоставленных веб -страниц.

~ < p > Итак, если вы хотите иметь возможность появиться в качестве цитируемого источника в Chatgpt или удивление, вы & Rsquo; < P > Использование семантического HTML для разработки вашего кода и осмысления также помогает этому LLM легко идентифицировать ваш основной контент.

< p > it & Rsquo; S гораздо проще для Chatgpt проанализировать несколько десятков семантических тегов HTML, а не несколько сотен (или даже усилителей; тысяча) прикрепленных & LT; Div & GT; Теги, чтобы найти основной контент веб -страниц.

< p >Если и когда & ldquo; агент веб -сайт & Rdquo; оживает (я скептически), Semantic HTML, вероятно, является решающим аспектом успеха.

< p > с бессмысленным & LT; Div & GT; и & LT; Span & GT; Теги, это & Rsquo; S намного проще понять агента ИИ, какие действия он должен выполнить.

< P > Когда вы используете семантический HTML для таких вещей, как кнопки, ссылки и формы, шансы агента ИИ, которые не поддаются его задаче, намного ниже.

< P > Значение, присущее тегу HTML, уведомит агента ИИ, куда идти и что делать.

< H2 > Как насчет структурированных данных ?

< p > Вы можете подумать, что & NBSP; Структурированные данные сделали семантический HTML устаревшим.

< p >В конце концов, с структурированными данными вы можете предоставить машинные системы с необходимой информацией о контенте и RSQUO; S Содержание в простом машине -читаемом формате.

< p > Это правда. Тем не менее, структурированные данные никогда не были предназначены для замены семантического HTML. Это служит совершенно другой цели.

< P > Структурированные данные имеют ограничения, которые семантический HTML не имеет & Rsquo; Т.

< p > Структурированные данные WON & Rsquo; T будет уведомить машину, какая кнопка добавляет продукт в тележку, которая предшествует критическому параграфе текста, и который подключает читатель, должен нажать дополнительную информацию.

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ < P > Любое -Что означает использование структурированных данных для обогащения страниц и помощи машинах понимать ваш контент. Но вы также должны использовать семантический HTML по тем же причинам.

< P > Используемые вместе, семантические HTML и структурированные данные являются непревзойденной комбинацией.

< H2 > Создание веб -сайтов, а не веб -приложения

< p > Я мог бы перейти к рисунку 2500 слов о том, почему мы должны создавать веб -сайты вместо веб -приложений и как ускорение Интернета является анафемой для принципов, на которых всемирная паутина, но я & Rsquo; < P > Достаточно сказать, что веб-программы для веб-сайтов для доставки контента (например, новостей) почти всегда уступают простым старомодным сайтам.

< P > и веб -пародии созданы или должны быть на HTML. Используйте все, что может предложить HTML, и вы & Rsquo; Повторно 90% технических подводных подводных камней Seo Stones, с которыми обычно сталкиваются веб -приложения.

< p > that & Rsquo; S для другого издания. Спасибо за чтение и подписку и я & Rsquo; LL увидит вас на следующем!

< P >< em > Этот пост был первоначально опубликован в SEO для Google News.