.

— это блочный элемент, предназначенный для управления содержимым определенных фрагментов документа, будь то текст, изображение, ссылка или другое. Особенность блочных тегов в том, что они начинаются с новой строки и занимают всю доступную ширину области, в которой размещены.

С помощью можно задавать стили определенным объектам страницы. Аналогичным образом установить стили для определенной части информации на странице позволяют теги . . Отличие от состоит в том, что — это строчный элемент, поэтому его следует использовать для фрагментов контента, размещенных горизонтально, тогда как отображает элементы друг за другом по вертикали.

Задать фрагменту документа стили можно двумя способами:

• использовать внешние таблицы стилей, подключенные с помощью тега :

Нужный фрагмент текста связывается с определенным стилем посредством атрибутов «class» или «id».

• использовать атрибут «style», который применяется непосредственно в HTML-коде с указанием правил CSS, например:

Заголовок красного цвета

Задавать стили с помощью атрибута следует в единичных случаях. Массовое добавление атрибута «style» к тегам лишь неоправданно увеличит размер кода и скорость его загрузки.

Прямого отношения к поисковой оптимизации перечисленные выше теги не имеют, но ошибки в разметке контента могут повлиять на валидность кода, то есть — соответствие структуры кода стандартам. Некорректная верстка исказит отображение страницы в браузере и может привести к неправильной интерпретации ее содержимого поисковыми системами. А это уже серьезная проблема для SEO-специалиста.

Заголовки H1 — H6

Существует множество тегов для оформления текстового контента сайта. Наиболее важные из них — теги заголовков «Н1 — Н6», и особенно — главный заголовок страницы — «Н1». Наряду с значение этого тега сообщает пользователям и поисковым роботам о содержании конкретной страницы сайта. Также теги заголовков зачастую содержат основные тезисы текста, бегло просмотрев их, пользователь понимает, будет он читать текст целиком или нет.

Пример кода:

HTML-теги и атрибуты в SEO: что должен знать начинающий оптимизатор

Внедряя заголовки, важно соблюдать их иерархию: после заголовка «Н1» должен следовать «Н2», если «H2» отсутствует, то «H3» и так далее.

Тег параграфа

Чтобы разделить текст на параграфы, нужно использовать теги

.

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

Оформление списков

Поисковые системы положительно относятся к маркированным и нумерованным спискам в контенте страницы. Они помогают представить информацию в краткой и структурированной форме.

Для формирования списков используют теги:

Пример кода:

• элемент маркированного списка

1. элемент нумерованного списка

Теги акцентирования

Наиболее важные мысли в тексте можно выделять тегами . и . , которые отображают заключенный в них текст жирным начертанием и курсивом соответственно.

Аналогичного визуального эффекта можно добиться с помощью тегов . (жирный) и . (курсив).

Теги и — теги физической разметки и просто устанавливают начертание текста, в то время как и — теги логической разметки и подчеркивают важность размеченного ими текста.

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

Оформление ссылок

Для создания ссылок используют тег . Подробнее: в атрибуте «href» указываем адрес страницы, на которую происходит переход. Между тегами . прописываем кликабельную часть текста, при нажатии на которую будет осуществляться переход на другую страницу. Согласно рекомендациям поисковых систем, текст ссылки должен отличаться от остального контента страницы и быть заметным пользователю.

На странице сайта могут быть обнаружены нежелательные ссылки, когда вебмастер не может поручиться за качество документов, на которые ведет ссылка (например, она размещена в комментарии пользователя). Такие ссылки можно закрывать атрибутом «rel=»nofollow»», который укажет роботам, что конкретно по этой ссылке следовать и передавать указанной странице вес не нужно.

Пример кода:

Тег

Тег добавляет изображение в HTML-документ. Обязательный атрибут — «src=»https://netpeak.net/ru/blog/optimizatsiya-dlya-novichkov-html-tegi-i-atributy-v-seo/URL»» определяет имя и местоположение файла изображения. При необходимости, картинку можно оформить ссылкой на другой файл. Для этого нужно поместить тег в контейнер .

С точки зрения SEO обязательны атрибуты картинок «alt» и «title».

Атрибут «title» — подсказка пользователю: когда он наводит курсор на изображение и видит описание того, что на картинке. Для поисковых систем это скорее вспомогательный тег, но в него все же стоит добавить ключевое слово.

Атрибут «alt» — это альтернативное текстовое описание изображения, которое выводится пользователю, если картинка не может быть загружена. Также содержимое тега «alt» помогает системам поиска картинок проиндексировать изображения с вашего сайта. Текст именно этого тега учитывается в поиске по картинкам, поэтому в него нужно добавлять ключевые слова.

Пример кода:

Также для картинок нужно указывать атрибут «width» (ширина) или «height» (высота). Лучше задать что-то одно, браузер автоматически подстроит второй параметр, чтобы пропорции не были искажены.

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

Тег

Тег предназначен для подключения скриптов в HTML-документ. Есть два способа добавить код на страницу:

• подключить внешний файл с кодом, разместив в теге путь к файлу скрипта с помощью атрибута src:

• разместить непосредственно сам код в теге .

Предпочтительнее подход, при котором скрипты выносятся во внешний подключаемый файл. Этот метод позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, потому что внешний файл кэшируется браузером при первой загрузке, и в последующем браузер берет его из своего кэша.

Ускорить загрузку страниц помогут также атрибуты «defer» и «async» тега . Браузер загружает и отображает веб-страницы постепенно, то есть одновременно читает и отображает уже обработанный HTML-код. Обнаружив скрипт, браузер сначала загружает и выполняет его, и лишь потом продолжает обработку оставшейся части страницы.

Решить эту проблему поможет использование атрибутов «async» или «defer». Они позволяют загружать скрипты асинхронно: браузер не ждет загрузки и отработки скрипта, а продолжает обрабатывать HTML-код.

«defer», в отличие от «async», сохраняет относительную последовательность загрузки скриптов на странице, поэтому скрипты будут загружаться в порядке их размещения в коде. Кроме того, они начнут загружаться лишь после полной загрузки HTML.

«Async» следует применять для скриптов, от которых не зависит отображение других элементов страницы, например, для подключения кодов аналитики. Defer — элементов, для которых не обязательна мгновенная загрузка.

Существует также тег , содержащийся в нем текст будет выводиться пользователю, когда его браузер не поддерживает работу со скриптами или их поддержка отключена вручную.

В заключение отметим: нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняют свою функцию, и неправильное использование любого из них может привести к печальным последствиям. Главное — понять, когда, как и зачем их нужно внедрять. И делать контент, в первую очередь для людей, а не для поисковых роботов.

Выводы

1. Теги и атрибуты — это основа языка HTML. Оптимизация сайта немыслима без базового знания языка гипертекстовой разметки.
2. Основной фронт работ SEO-специалиста связан с оптимизацией тегов из блока HTML-документа, ведь именно там располагается информация для браузеров и поисковых систем. В контейнере помещаются тег , метатеги, теги . В них содержится информация о документе, помогающая поисковым системам понять о чем страница и как следует ее интерпретировать.
3. Не менее важна оптимизация тегов и атрибутов, расположенных в , поскольку информацию именно из этого блока видят на странице пользователи. Контент должен быть структурирован, а код валидным, что служит залогом правильного отображения сайта в любом браузере.
4. Нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняют свою функцию и неправильное применение любого их них может привести к печальным последствиям. Главное — понять, как и зачем их нужно использовать. И делать контент в первую очередь для людей, а не для поисковых роботов.

Начала карьеру в Netpeak в 2016 году. Специалист отдела по работе с крупными проектами.

Узнайте больше

193

Продвижение HTML-сайта

HTML – язык разметки любого сайта. Убедиться в этом просто – достаточно открыть вкладку с исходным кодом с помощью Ctrl+U. Все ресурсы по умолчанию используют эту технологию, но когда говорят о продвижении HTML-сайта, то имеют в виду то, что он состоит только из HTML-страниц и не использует систему управления (CMS).

Что такое HTML-сайт и его особенности, которые важны для продвижения

Особенности сайта на чистом HTML:

• Представляет собой набор отдельный страниц, для каждой из них создан свой HTML-файл;
• Нет централизованного управления, нет админки, через которую можно было бы менять информацию;
• Сайт всегда небольшого объема (встречаются только корпоративные на несколько страниц);
• Весит мало, быстро грузится;
• Требуется больше действий, чтобы поменять информацию (подключиться по FTP/SSH, скачать файл, изменить в исходном коде, залить обратно).

При работе с таким сайтом главная проблема – это необходимость вносить изменения на каждой странице. Допустим, он насчитывает 20 файлов и требуется установить счетчик Яндекс.Метрики на него. Если сайт был бы на любой CMS, можно было бы сделать это в одном месте – чаще всего добавить код в index.html или index.php. Но в данном случае нужно эту процедуру проделать со всеми 20-ю файлами. А если их будет 100? 100-200 страниц – это тоже небольшой сайт и его также можно сделать на чистом HTML.

Вывод: при работе с таким ресурсом будет больше рутинных операций, продвижение HTML-сайта – затратное по времени мероприятие. Более того некоторые вещи технически сложно будет реализовать, например, форму обратной связи – она делается на PHP или с использованием других серверных языков (например, Perl, Python). HTML с такими задачами не справится, он нужен для визуального преображения страницы.

Как оптимизировать? Продвижение HTML-сайта

Работа с таким сайтом проста и сложна одновременно, потому что все предельно ясно, с одной стороны, но с другой – больше рутины и увеличивается время на выполнение элементарных, казалось бы, действий.

Первый месяц продвижения начинается с изучения ситуации:

• Анализ ниши сайта и спроса;
• Изучение конкурентов;
• Аудит сайта, оценка видимости в поисковых системах;
• Сканирование на технические ошибки;
• Проверка сервисами Google и Яндекса на соответствие рекомендациям.

Дальнейшие работы включают в себя исправление ошибок – в первую очередь для продвижения HTML-сайта. Нужно составить семантическое ядро, сформировать отчет по позициям, чтобы понять, на каком месте находится в данный момент ресурс по целевым запросам. Следующий этап – детальная работа с контентом и ссылочной массой. Закупать ссылки – необязательно. Но поскольку есть ограничения на добавление новых страниц (это трудоемко), то внешним факторам нужно уделять больше внимания.

Главные недочеты

Основные ошибки продвижения, которые встречаются с сайтами на HTML:

• Отсутствие или неправильно сформированный robots.txt;
• Отсутствие или неправильно сформированный sitemap.xml;
• Отсутствие Title, Description на всех или некоторых страницах;
• Отсутствие контента на страницах или его слишком мало (менее 500 симв.);
• Несколько H1 на одной странице;
• «Грязный» код – смешение стилей, скриптов, разметки, незакрытые теги и пр.;
• Дублирующийся контент;
• Открытые для индексации внешние ссылки;
• Страницы без четкой структуры.

Все они нуждаются в исправлении. Важно оптимизировать все имеющиеся страницы, а уже потом по необходимости создавать новые.

Чистый HTML и CMS – главная разница в продвижении сайта

Много новых страниц не сделаешь, т.к. будет сложно управлять сайтом в целом. Когда число файлов становится более 30-50, нужно задуматься над переездом в любую CMS. Благо, есть много систем со свободной лицензией – Joomla!, Drupal, WordPress, Webasyst и других. Платить придется только за создание темы под сайт, если нужно сохранить дизайн, но есть более доступный по цене вариант – использовать готовый шаблон. В этом случае о сохранении дизайна речи быть не может, но редко для HTML-сайтов он отрисовывается, поэтому обычно и держаться не за что бывает.

У HTML-сайта есть только одно преимущество в продвижении – это его вес. Он небольшой, страницы быстро грузятся, что тоже дает плюс для поисковика. Ресурс на любой CMS занимает больше места на сервере, одними из самых тяжелых считаются системы «1С:Битрикс» и Umi.CMS – их не на каждый хостинг можно поставить. Однако вес страницы, отдаваемой пользователю, с использованием CMS может быть минимальным, как у HTML-сайта. Если правильно оптимизировать код, то можно добиться такого результата.

Резюме: Продвижение HTML-сайта отличается только в методах работы и времени на выполнение определенных операций (его требуется больше). В остальном же – точно такой же набор работ.

Источник https://netpeak.net/ru/blog/optimizatsiya-dlya-novichkov-html-tegi-i-atributy-v-seo/

Источник https://prodvizhenie-saitov.top/articles/seo/prodvizhenie-html-sayta