8 самых важных HTML-тегов для SEO

Используете ли вы HTML-теги в процессе SEO?

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

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

В этом посте мы рассмотрим некоторые ключевые HTML-теги SEO, которые по-прежнему будут иметь смысл в 2020 году.

1. Тег заголовка

Теги заголовков используются для настройки тех интерактивных заголовков, которые вы видите в поисковой выдаче:

Вообще говоря, Google должен создать заголовок SERP для вашей страницы, и он может использовать любой из заголовков разделов внутри страницы - или он может даже создать новый заголовок в целом.

Но первое место, где Google собирается проверить идеи заголовков, - это тег заголовка, а там, где присутствует тег заголовка, Google, скорее всего, сделает его основным заголовком в соответствующем списке. Таким образом, оптимизация тега заголовка дает вам некоторый контроль над тем, как ваша страница представлена ​​в поисковой выдаче.

Лучшие практики

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

• Следите за длиной - Google отобразит только первые 50-60 символов вашего заголовка, а остальные обрежет. Заголовок длиной более 60 символов - не проблема, если вы умещаете важную информацию до точки отсечения.
• Включите разумное количество ключевых слов - наполнение ключевыми словами может быть наказано, но одно или два ключевых слова подойдут. Просто убедитесь, что ваш заголовок образует связное предложение.
• Напишите хороший текст - не продавайте и не будьте общими. Создавайте описательные заголовки, которые подчеркивают ценность вашего контента и устанавливают правильные ожидания, чтобы пользователи не разочаровывались при посещении страницы.
• Добавьте название своего бренда. Если у вас есть узнаваемый бренд, который, вероятно, увеличит ваши клики, не стесняйтесь добавлять его и в заголовок.

HTML код

Ниже приведен фрагмент кода, взятого из статьи BBC о статистике коронавируса. Вы можете увидеть правильно настроенный тег заголовка, расположенный прямо над мета-тегом описания - это то, что мы собираемся обсудить дальше:

2. Мета-тег описания.

Мета-теги описания используются для настройки описаний в сниппетах результатов поиска:

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

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

По сути, Google выберет лучший вариант для увеличения ваших шансов перехода по ссылке.

Лучшие практики

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

• Следите за длиной - так же, как и в случае с заголовками, Google сохранит первые 150–160 символов вашего метаописания и урежет остальные. Убедитесь, что важные аспекты включены на раннем этапе, чтобы максимизировать интерес поисковиков.
• Напишите хороший текст - хотя мета-описание не используется для ранжирования, все же важно оптимизировать его для целей поиска. Чем более релевантно ваше описание, основанное на соответствующем запросе, тем больше вероятность того, что пользователь посетит вашу страницу.
• Подумайте о том, чтобы пропустить метаописание - может быть сложно создать хорошую копию для особо длинных ключевых слов или для страниц, нацеленных на различные ключевые слова. В таких случаях подумайте о том, чтобы не указывать метаописание - Google будет очищать вашу страницу и вставлять в фрагмент несколько релевантных цитат.

HTML код

Ниже приведен фрагмент кода, взятый из той же статьи BBC о статистике коронавируса, и вы можете видеть, что за тегом заголовка следует мета-тег описания, который дает краткое изложение того, о чем статья:

3. Заголовочные теги (H1-H6).

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

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

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

Лучшие практики

Правила для заголовков основаны на общих правилах копирайтинга - разбейте текст на небольшие части и сохраните единообразное форматирование:

• Не используйте более одного заголовка H1 - H1 стоит отдельно от других заголовков, потому что поисковые системы обрабатывают его как заголовок страницы. Не путать с тегом заголовка - тег заголовка отображается в результатах поиска, а тег H1 отображается на вашем веб-сайте.
• Сохраняйте неглубокую структуру - редко бывает нужно спускаться ниже H3. Используйте H1 для заголовка, H2 для заголовков разделов и H3 для подразделов. Все, что угодно, сбивает с толку.
• Формируйте заголовки, похожие на запросы. Рассматривайте каждый заголовок как дополнительную возможность для ранжирования в поиске. Для этого каждый заголовок должен звучать либо как запрос, либо как ответ на запрос, включая ключевые слова.
• Будьте последовательны со всеми заголовками. Все заголовки должны быть написаны таким образом, чтобы, если бы вы удалили весь текст и оставили только заголовки, они читались бы как список.

HTML код

Ниже приведен фрагмент кода, полученный из той же статьи BBC о статистике коронавируса, и вы можете видеть, что там правильно настроен заголовок H2, за которым следуют два абзаца:

4. Альтернативный текст изображения

В то время как основная цель альтернативного текста - это веб-доступность, цель SEO атрибута alt - индексация изображений.

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

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

Лучшие практики

Обязательным условием для добавления тегов alt-текста является поиск всех изображений без него.

Вы можете использовать такой инструмент, как WebSite Auditor, для сканирования вашего веб-сайта и составления списка изображений с отсутствующим замещающим текстом.

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

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

HTML код

Вот пример фрагмента альтернативного текста из изображения болезненных клеток:

5. Разметка схемы.

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

Schema.org содержит набор тегов, совместно разработанных Google, Bing, Yahoo !, и Яндекс, и теги используются веб-мастерами для предоставления поисковым системам дополнительной информации о различных типах страниц. В свою очередь, поисковые системы используют эту информацию для расширения своих фрагментов результатов поиска с помощью различных функций.

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

Лучшие практики

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

HTML код

Вот примерный фрагмент кода, в котором указаны сведения о питательной ценности рецепта. Вы можете посетить schema.org для получения полного списка элементов, доступных для разметки:

6. Семантические теги HTML5.

Элементы HTML5 используются для лучшего описания различных компонентов страницы:

До введения элементов HTML5 мы в основном использовали теги div для разделения HTML-кода на отдельные компоненты, а затем мы использовали классы и идентификаторы для дальнейшего определения этих компонентов. Каждый веб-мастер определил компоненты по-своему, и в результате получился небольшой беспорядок, и поисковым системам было сложно понять, что к чему на каждой странице.

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

Как вы понимаете, поисковые системы с большим энтузиазмом относятся к семантическому HTML5.

HTML код

Вот некоторые из самых удобных семантических элементов HTML5, используйте их для улучшения взаимодействия с поисковыми системами:

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

7. Мета-тег роботов.

Мета-тег роботов - это правила взаимодействия между веб-сайтами и поисковыми системами.

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

Лучшие практики

Мета тег Robots должен быть помещен в головной части коды страницы, и он должен указать , какие искатель оно адрес и какие инструкции должны быть применены:

• Обращайтесь к роботам по имени. Используйте роботов, если ваши инструкции предназначены для всех поисковых роботов, но используйте определенные имена для адресации отдельных поисковых роботов. Стандартный поисковый робот Google, например, называется Googlebot . Обращение к отдельным роботам обычно делается для того, чтобы запретить вредоносным поисковым роботам заходить на страницу, в то же время позволяя поисковым роботам продолжать работу.
• Сопоставьте инструкции с вашими целями - обычно вы хотите использовать метатеги роботов, чтобы поисковые системы не индексировали документы, результаты внутреннего поиска, дублированные страницы, промежуточные области и все остальное, что вы не хотите отображать в поиске.

HTML код

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

• noindex - страница не должна индексироваться
• nofollow - по ссылкам на странице переходить нельзя
• следовать - по ссылкам на странице нужно переходить, даже если страница не будет индексироваться
• noimageindex - изображения на странице не должны индексироваться
• noarchive - в результатах поиска не должна отображаться кешированная версия страницы
• unavailable_after - страница не должна индексироваться после определенной даты.

8. Канонический тег

Канонический тег избавляет вас от риска дублирования контента:

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

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

Лучшие практики

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

• Страницы доступны по разным URL-адресам
• Страницы с очень похожим содержанием
• Динамические страницы, которые создают свои собственные параметры URL

Последние мысли

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

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