14 ключевых целей и HTML-тегов, которые следует знать для эффективного SEO

<title>10 важнейших meta-тегов, которые нужно знать для SEO</title>

<title>Простые здоровые вкусные рецепты ужина Лучшие здоровые рецепты ужина</title>

<title>Легкие и полезные рецепты ужина для вкусных домашних блюд</title>

<meta name="description" content="HTML-теги сегодня более важны для SEO, чем когда-либо. В этой статье я рассказываю о 10 основных meta-тегах, которые следует знать." />

<meta name="robots" content="noindex">

<meta name="robots" content="nofollow">

<meta name="robots" content="noindex,nofollow">

<meta name="googlebot-news" content="noindex">

<meta name="googlebot-news" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">

<link rel="canonical" href="https://www.example.com" />

<meta property="og:title" content="Название вашей страницы" />

2. og:url
   Здесь указывается URL страницы, которая должна отображаться при распространении ссылки. Обычно этот адрес совпадает с каноническим URL.

3. og:description
   Описание вашей страницы. Учтите, что Facebook отображает около 300 символов описания.

4. og:image
   URL изображения, которое будет отображаться вместе с вашей ссылкой в ​​соцсетях.

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

Хотя это не влияет напрямую на позиции в поисковиках, правильное оформление ссылок существенно повышает кликабельность (CTR) и общий опыт пользователей (UX).

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

• Добавляйте основные и релевантные метаданные по протоколу Open Graph и проверяйте, каким образом ваши URL выглядят при распространении.

• Настройте Twitter Cards для платформы X (бывший Twitter) и обязательно проверяйте их корректность после настройки.

6. Метатег Viewport

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

Эта настройка гарантирует, что ширина окна просмотра совпадает с шириной устройства, благодаря чему страница становится адаптивной. Атрибут initial-scale=1.0 означает, что страница загружается без увеличения или уменьшения — контент отображается в соотношении 1:1.

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

• Позвольте пользователям масштабировать страницу – это важно для доступности. Избегайте использования user-scalable=no , запрещающее масштабирование.

• Если метатег viewport не установлен , Google Search Console может показать ошибку viewport not set.

• Убедитесь, что ваши CSS и HTML являются адаптивными . Метатег viewport – только одна составляющая адаптивного дизайна; также важно, чтобы верстка, изображения и другие элементы подстраивались под разные размеры экранов.

7. Метатег Meta Charset

Метатег charset — это HTML-элемент, который задает кодировку символов для вашей веб-страницы.

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

8. Метатег Meta Refresh

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

9. Метатег Keywords

Метатег keywords использовался для перечисления ключевых слов, описывающих содержание страницы.

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

Второй по популярности поисковик, Bing , тоже прекратил его использование в 2014 году.

Популярный плагин для WordPress – Yoast SEO – имеет настройку «focus keyword» , которую может сбивать с толку. Эта настройка не связана с метатегом keywords, а служит для анализа контента и рекомендаций по улучшению его оптимизации под конкретное ключевое слово.

10. Разметка Schema

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

Ее внедрение приносит двойной выигрыш:

• Улучшает пользовательский опыт (UX).

• Имеет значительную SEO ценность.

• Помогает поисковикам лучше понять содержание страницы.

• Дает возможность попасть в специальные блоки результатов поиска (SERP features).

• Повышает шансы получить расширенные снипеты (rich snippets).

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

К примеру, для интернет-магазинов обязательно нужно добавлять разметку продуктов на страницах товаров. Без нее ваш снипет просто потеряется среди конкурентов.

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

Конечно, вы хотите, чтобы ваш сайт был там — в топе поисковой выдачи.

Стоит отметить, что большинство современных популярных систем управления контентом, особенно ориентированные на ecommerce , таких как Shopify , уже имеют встроенную поддержку структурированных данных по умолчанию.

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

Именно структурированная разметка помогает поисковым системам не просто прочесть текст, но и понять, как связаны отдельные термины и идеи.

Поисковая выдача (SERP) развилась настолько, что часто ответ на ваш вопрос можно получить даже без перехода на сайт.

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

Назначение тегов schema для различных элементов страницы делает ваш снипет информативным и привлекательным для пользователей.

И не забывайте, что поведенческие факторы пользователей – такие как CTR (клікабельність) и показатель отказов — оказывают непосредственное влияние на позиции вашего сайта в поисковых системах.

Лучшие SEO-практики для работы со schema markup:

• Изучите доступные типы схем на schema.org.

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

• Тщательно вводите разметку , при необходимости используя инструмент Structured Data Markup Helper.

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

HTML Elements

11. Заголовки (H1-H6)

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

Сегодня использование заголовков вызывает некоторые дискуссии.

Если теги H2-H6 считаются менее важными для поисковиков, то правильное применение H1 тегов многократно подчеркивается в многочисленных исследованиях индустрии.

Хотя первоначально H2-H6 использовали преимущественно для улучшения пользовательского опыта, с появлением индексации фрагментов (passage indexing) в 2021 году их роль стала более значимой. Теперь Google может проиндексировать и ранжировать даже часть страницы, если пользовательский запрос совпадает с заголовком H3 и соответствующим текстом.

Следовательно, заголовки имеют критическое значение для структурирования текста.

Правильное использование заголовков оказывает существенное влияние на архитектуру контента:

• Для поисковиков: хорошо структурированный текст легче понять и проиндексировать, чем контент с хаотической структурой.

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

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

Лучшие практики использования заголовков:

• Делайте заголовки максимально релевантными тексту, который они описывают . Даже если заголовки не являются прямым фактором ранжирования, поисковики все равно их учитывают.

• Заголовки должны отображать сущность и настроение текста под ними . Избегайте нейтральных или бессодержательных заголовков типа «Раздел 1», «Раздел 2», «Раздел 3».

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

Должны ли совпадать Title tag и H1?

Согласно рекомендациям Google, желательно, чтобы title и H1 на странице были похожи или соответствовали друг другу, допуская небольшие вариации в формулировке или порядке слов.

Если трудно придумать идеальный H1, то можно просто использовать тот же текст, что и в заголовке страницы (title).

12. HTML5 Semantic Tags

HTML5 семантические теги – это современные HTML элементы, которые помогают поисковым системам лучше понимать структуру и содержание страницы.

Пример в коде:

Основные HTML5 семантические теги:

• <article> — большой самостоятельный блок содержания (статья, сообщение в форуме).

• <audio> — встроенный аудиопоток или звук.

• <details> — виджет для дополнительной информации, открывающейся по необходимости.

• <dialog> — диалоговое окно или подоконник для взаимодействия с пользователем.

• <embed> — встраивание мультимедийного контента (видео, звук, внешние приложения).

• <footer> — футер страницы или раздела.

• <header> — хедер страницы или раздела.

• <main> — главная, самая важная часть страницы.

• <nav> — навигационная секция с ссылками.

• <picture> — контейнер для нескольких источников изображения.

• <source> — альтернативные источники для медиа (audio, video).

• <summary> — краткое описание, показываемое пользователю в <details> .

• <svg> —встраивание SVG-графики.

• <time> — дата или время в машиносчитывающем формате.

• <video> — встраивание видео без дополнительных плагинов.

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

• Замещайте бесконечные <div> правильными семантическими тегами
  HTML5 теги – это не просто новые названия, а четкие обозначения частей страницы, помогающие поисковикам понять структуру вашего контента.

• Используйте теги в соответствии с их назначением.
  Например, <article> для основного контента, <nav> — для навигации, <video> — для видео. Не применяйте тег <video> , если это просто текст.

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

• Не пытайтесь обманывать поисковики.
  Некорректное использование тегов, например, обертывание обычного текста в <video> , только повредит SEO.

Важные HTML-атрибуты

13. Атрибут alt для изображений

Атрибут alt – это текстовое описание, которое добавляется к изображению, чтобы объяснить его содержание. Пример в коде:

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

1. Если изображение не загружается или у пользователя отключены изображения, текст из атрибута alt будет отображен вместо него.

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

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

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

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

Лучшие практики для атрибутов alt

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

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

• Сочиняя alt, делай его максимально понятным и точным , добавляй релевантные ключевые слова, но делай это органично, чтобы описание гармонично вписывалось в контекст страницы.

14. Атрибут Nofollow

Внешние ссылки – это те, что ведут с вашего сайта на другие ресурсы.

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

Для SEO такие ссылки очень важны: они могут подчеркнуть, что ваш контент тщательно проработан и основывается на надежных источниках, или наоборот — создать впечатление ссылки «на все подряд» без пользы.

Google строго наказывает за манипулятивные ссылки и с каждым годом все лучше распознает подобные попытки.

Кроме того, в эру семантического поиска Google рассматривает сайты, на которые вы ссылаетесь, как контекст для лучшего понимания вашего контента.

Поэтому важно внимательно относиться к тому, куда и как вы ставите ссылку.

По умолчанию все ссылки есть "follow" - это будто ваш голос доверия к тому сайту.

Атрибут nofollow указывает поисковым работам не переходить по ссылке и не передавать ему "вес".

Пример в HTML:

Кроме классического nofollow , Google добавил еще два варианта:

• rel="sponsored" — для платных ссылок,

• rel="UGC" — для ссылок в пользовательском контенте (комментарии, форумы).

Например:

Для чистоты SEO следует соблюдать баланс между "follow" и "nofollow" ссылками.

Обычно к nofollow относят:

• Ссылки на ненадежные или сомнительные ресурсы.

• Платные или спонсорские ссылки, чтобы избежать штрафов Google за ссылку.

• Ссылки по комментариям и пользовательскому контенту, который может быть спамом.

• Внутренние ссылки типа "Войти" или "Зарегистрироваться" – они не несут SEO ценности и тратят бюджет сканирования.

Вывод

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

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

Сегодня, во времена стремительного развития искусственного интеллекта, правильное применение HTML-тегов становится еще более важным — они помогают поисковым системам лучше интерпретировать содержание, строить связи между данными и способствуют «обучению» AI.

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