18 сентябряЮрий Дюпин
Теги и атрибуты — HTML для новичков в SEO

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

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


Теги и атрибуты — что это такое?

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

Теги — это строительный материал для каркаса сайта. Атрибуты — это инструмент для модификации тегов, а точнее их функциональности. Поэтому закавыченный “атрибут” всегда вписан в <тег> с помощью следующей формулы: <имя="значение">.

В HTML-документах используются теги двух типов — парные (открывающие и закрывающие часть структуры) и одиночные (указывающие на какой-либо элемент). Парные варианты обозначаются с помощью следующей последовательности — <имя>...</имя>. Для обозначения непарной разновидности тегов достаточно использовать следующую конструкцию: <имя>.

Типовая структура документа обычно выглядит вот так:

tegi-i-atrybuty-1.png

Первую строчку занимает непарный тег с обозначением типа документа. Вторую и десятую строчки — парный тег границы структуры. На четвертой строчке расположен парный тег, обозначающий название документа, который находится внутри конструкции <head> … </head> — она обозначает участок документа, контактирующий с поисковой системой. Ну а видимую часть текста, отображаемую в окне браузера, задает содержимое конструкции <body> … </body> (седьмая и восьмая строчка в документе). И если вы желаете разобраться с правилами оптимизации кода сайта, вам придется начать изучение тегов с содержимого конструкции <head> … </head>.


Тег <title> — что это такое на самом деле?

Этот «кирпичик» отвечает за очень важную часть документа — SEO-наименование страницы. Внутри парного тега находится заголовок для поисковой выдачи, который отображается в окне браузера, в закладке и в ссылке. Основная задача SEO-заголовка — объяснить поисковому роботу, о чем «говорит» эта страница. Поэтому содержимое тега <title> влияет на ранжирование документа самым непосредственным образом.

Примеры отображения <title> в поисковой выдаче, браузере и закладках:

tegi-i-atrybuty-2.png


Теги <meta> — зачем они нужны

Кроме имени страницы в парный <head> … </head> вписывают дополнительные конструкции, обозначаемые с помощью тега <meta> (из-за этого их называют метатеги). С помощью таких конструкций SEO-специалист может управлять индексацией страницы. Для этого ему нужно прописать параметры целой группы метатегов — description, robots, charset, viewport и keywords.


Конструкция meta description

За этой конструкцией скрывается краткое описание содержимого индексируемой страницы. Прямого влияния на ранжирование эта информация не имеет, однако именно из description «вытягивается» сниппет — фрагмент текста, предъявляемый пользователю, вбившему в адресную строку поисковый запрос. Обычные размеры сниппетов — до 329 символов на латинице или до 280 знаков на кириллице, из-за этого выбрать что-то связанное непосредственно из текста у поисковой машины попросту не получиться. В итоге источником сниппета становится description. Поэтому грамотно составленный дескрипшен играет роль крючка, цепляющего внимание и читателя (посетителя) и поисковой машины.

В поисковой выдаче description выглядит вот так:

tegi-i-atrybuty-3.png


Конструкция meta robots

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

Для этого в связке с meta robots используют следующие атрибуты:

  • index — индексация включена для всей страницы;

  • noindex — индексация отключена;

  • follow — индексация включена для всех ссылок, интегрированных в текущую страницу;

  • nofollow — индексация ссылок отключена;

  • all или none — полное включение или отключение процесса индексации для всего содержимого конкретной страницы.

tegi-i-atrybuty-4.png

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


Конструкция meta charset

Смысл этого метатега заключается в обозначении кодировки страницы. Без этой информации браузер превратит латинские буквы или кириллический шрифт в набор малопонятных закорючек. Поэтому meta charset стоит сразу за <head> и является первым метатегом блока.

Большинство браузеров умеют определять кодировку без указаний со стороны meta charset, однако, в целях перестраховки, верстальщики продолжают использовать этот тег и в наши дни.


Конструкция meta viewport

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

tegi-i-atrybuty-5.png

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


Конструкция meta keywords

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


Теги link — что это и зачем они нужны

Теги <link> — это дорожные знаки, указывающие на возможность перехода на другие HTML страницы. Для обозначения связи кода с другими страницами тег <link> использует набор атрибутов: canonical, next / prev, alternate .


Атрибут «rel="canonical"»

Эта конструкция обрезает дублирующий контент, включая индексацию страниц с аналогичным текстовым наполнением. Например, в интернет-магазинах можно встретить абсолютно идентичные описания товаров или похожие тексты в описании разделов, и тогда, с помощью атрибута «rel="canonical"», веб-мастер может скрыть от поисковых систем страницы-дубли, собрав в пользу оригинала их ссылочных вес. Для этого нужно задать в атрибуте «href» адрес индексируемой страницы, привязав к «canonical» ссылки на отключенные описания.

tegi-i-atrybuty-6.png

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


Атрибуты next/prev

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

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

При этом на одной странице может стоять указание на следующую публикацию:

tegi-i-atrybuty-7.png

Или на предыдущую и следующую публикацию:

tegi-i-atrybuty-8.png

Последняя страница в серии обозначается следующим образом:

tegi-i-atrybuty-9.png

Единственный недостаток атрибута next/prev — это избирательное восприятие со стороны поисковых машин. Теги с такими расширениями воспринимаются только Гуглом и не работают в Яндексе.


Атрибут «rel="alternate"»

Такой атрибут используют для указания ссылок на альтернативные версии верстки страниц с одинаковым контентом. Он может отображаться на разных языках или пройти адаптацию под мобильные устройства. В последнем случае содержимое страницы не меняется, что создает риск возникновения дублей со всеми вытекающими негативными последствиями. Поэтому «мобильную» страницу отделяют от основной с помощью конструкции «rel="alternate"». Она помогает показать оптимизированные результаты поиска конкретному пользователю.

Деление страниц по языку организуют следующим образом:

tegi-i-atrybuty-10.png

Используя вместо условных символов хх кодировку языка страницы по стандартам ISO 639-1. За символами YY в этом случае скрыт регион (по кодировке ISO 3166-1 Alpha 2), а под условным URL понимается альтернативная страница. Эту конструкцию необходимо внедрить в код каждой альтернативной страницы.

Выделение мобильной версии страницы организуют с помощью следующего приема:

tegi-i-atrybuty-11.png

Обратите внимание — в атрибут «media» можно вложить и разрешение экрана, а с помощью «href» обозначается альтернативный, мобильный домен сайта, начинающийся с буквы «m». При этом, руководствуясь принципом зеркальности, вам придется указать в коде «мобильной» страницы информацию о существовании «компьютерной» версии:

tegi-i-atrybuty-12.png


Оптимизация видимого контента

Внутренняя поисковая оптимизация предполагает работу не только с метатегами и ссылками — для продвижения в выдаче вам придется пересмотреть методики форматирования контента, делая видимую (заключенную в теги <body>...</body>) часть более удобной для чтения и восприятия. Для этих целей вам придется поработать с заголовками, абзацами и маркированными списками, а помогут вам в этом особые теги, упрощающие восприятие текста и для поисковых роботов, и для читателей.


Управляйте содержимым страницы— <div>, <span>, <table>

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

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

Стилистика оформления элементов страницы задается двумя способами:

1. При помощи тега link и внешней таблицы стилей, подключаемой с помощью атрибутов class и id.

tegi-i-atrybuty-13.png

2. На основе атрибута style, указывающего на CSS страницы.

tegi-i-atrybuty-14.png

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

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

Грамотное употребление <div>, <span> и  <table> помогает оптимизировать структуру страницы под общепринятые стандарты. Прямого влияния на SEO-оптимизацию этот факт не имеет, но вам нужно помнить о том, что нестандартные страницы могут выпасть из поля зрения поискового робота или уступить свое место в выдаче содержимому грамотно оформленного сайта.


Привлекайте внимание к заголовкам — H1-H6

С помощью тегов H1-H6 в тексте страницы выделяют заголовки и подзаголовки. Например, подзаголовок этого абзаца оформлен с помощью тега Н3, а в названии статьи использовался Н1.

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


Выделяйте абзацы — <p>

Простыня текста, не разбитого на абзацы (параграфы), будет интересна только специалистам. Рядовой читатель привык к структурированной подаче информации — один абзац = одна мысль. Поэтому при форматировании страницы необходимо использовать парный тег <p>, указывающий на начало и конец абзаца. Кроме того, уделите внимание первому абзацу — на его основе формируется сниппет (если поисковой машины не заданы другие инструкции).


Используйте маркированные и нумерованные списки — <ul>, <ol>

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

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

  • <ul> — он открывает и закрывает маркированный список;

  • <ol> — он открывает и закрывает нумерованный список;

  • <li> — он задает строчки маркированного или нумерованного типа.

tegi-i-atrybuty-15.png


Расставляйте акценты — <b>, <strong>, <i>, <em>

Если вам понадобится выделить в строчке или абзаце одно или несколько слов, вам придется задействовать теги акцентирования:

  • <b> и <strong> — для выделения жирным шрифтом;

  • <i> и <em> — для выделения курсивом;

Причем первые теги отвечают лишь за эстетику оформления, а с помощью <em> и <strong> можно акцентировать логическую важность акцентированного участка текста.

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


Следите за правильным оформлением ссылок — <a>

В языке гипертекстовой разметки для перехода по ссылкам используется специальный тег — <a>...</a>, и особый атрибут — «href». С их помощью можно выделить ссылку и в глазах читателя, и в восприятии поисковой машины.

tegi-i-atrybuty-16.png

Такая конструкция очень важна для поисковой оптимизации, поскольку именно с ее помощью формируется ссылочная масса. Однако некоторые ссылки могут ухудшить ранжирование страницы, поэтому их приходится закрывать вручную, используя атрибут «rel="nofollow"». Обозначенные с его помощью URL не читаются поисковыми роботами.

tegi-i-atrybuty-17.png

Помимо атрибута «rel="nofollow"» можно использовать и другой вариант закрытия ссылок — тег <noindex>...</noindex>, который прячет URL от поискового робота Яндекса. Однако этот тег не воспринимается поисковой машиной Гугла.

tegi-i-atrybuty-18.png


Оформляйте картинки по правилам — <img>

Для оформления изображений в HTML используется особый тег — <img>, дополненный атрибутом «src="URL"», указывающим на ссылку (URL) картинки. Сама картинка при этом может находиться как в медиабиблиотеке сайта, так и в банке изображений. В последнем случае img можно дополнить рассмотренным выше тегом <a>. Однако с точки зрения SEO от указания голого URL картинки толку будет мало. Для успеха в продвижении тег img придется дополнить двумя атрибутами — «title» и «alt» картинки.

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

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

К желательным атрибутам тега <img> относятся и параметры ширины (width) и высоты (height), причем в коде достаточно упомянуть только один из них — второй загрузится автоматически, исходя из пропорций картинки.

tegi-i-atrybuty-19.png


Проверяйте скрипты — <script>

Парный тег <script> отвечает за подключение скрипта к странице. При этом HTML предполагает две методики подключения:

1. С использованием внешнего файла с кодом скрипта — он подключается к странице с помощью атрибута src.

tegi-i-atrybuty-20.png

2. С размещением кода скрипта внутри тега <script>.

Если используется первый подход — веб-мастер может задействовать один и тот же файл для нескольких страниц, ускорив их загрузку, ведь скрипт-файл кэшируется браузером только один раз (во время первой загрузки).

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

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

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

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


Выводы

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

  • Вначале стоит пересмотреть содержимое блока <head>, не стесняя себя в средствах и методиках оптимизации. Особое внимание при этом стоит уделить тегам <title> и <link>.

  • После этого необходимо пересмотреть содержимое блока <body>, добиваясь максимально валидного кода.

  • В финале стоит пройтись по коду каждой страницы, очищая ее от мусора, тормозящего загрузку в браузере.

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


Мы очень любим и умеем продвигать крупные и нестандартные проекты

Юрий Дюпин

Смотрите также


Блог

27 августа
Завершив генерацию посадочной страницы и запустив рекламу, пользователи задаются вопросом возможного итога кампании. С помощью Яндекс.Метрики можно оценить, насколько эффективно работает сайт, опираясь на различные показатели, главным из которых является конверсия - отношение выгодных для владельца сайта действий посетителей ресурса к числу посещений вообще. Но как понять, какое из действий целевое (или выгодное), а какое нет? Для этого владельцу ресурса необходимо задать цель.
23 августа
На этой неделе Яндекс объявил об отказе от показателя тИЦ и анонсировал новый комплексный индекс качества сайта (ИКС). По заверениям представителей поисковика, тИЦ исчезнет из всех сервисов Яндекса уже на следующей неделе, вместо него в Яндекс.Вебмастере появится новая метрика в бета-режиме, которая учитывает не только ссылочные показатели (как некогда тИЦ), но и другие группы факторов.
Все посты