Где h руководства это - Instruktiruet.ru - инструкции по эксплуатации и многое другое

Редкий покупатель в поиске товара пойдет дальше первой-второй страницы результатов поиска Google или Яндекс, поэтому для каждого интернет-магазина очень важно находиться на как можно выше в рейтинге поисковых систем по товарам, которые он предлагает. А попасть в заветный ТОП-10 вам помогут правильно сформированные SEO-теги и уникальный контент для всех карточек товара, которые воспринимаются поисковыми системами как релевантные и полезные для потенциальных покупателей.

Что такое мета-теги?
Почему необходимо уделять особое внимание формированию мета-тегов title, description, keywords и h1?
Как найти мета-теги страниц сайта в WEB-браузере?
Формирование тега TITLE
Формирование тега DESCRIPTION
Формирования тегов заголовков H1-H6
Формирование тега KEYWORDS
К чему может привести неправильное формирование SEO-тегов?
Где и как найти и подобрать ключевые слова для заполнения SEO-тегов?
Как автоматизировать заполнение тегов?
Программы для автоматизации формирования SEO-тегов

Что такое метатеги?

Метатеги (от англ. meta tags) — это элементы (инструкции) разметки HTML-страниц, предназначенные для хранения и передачи данных предназначенной для браузеров и поисковых систем. Как правило, они размещаются в блоке <head> HTML-документа:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Заголовок страницы для поисковых систем</title> <meta name="description" content="Описание страницы для поисковых систем"> <meta name="keywords" content="Наиболее важные ключевые слова страницы для поисковых систем"> … </head> <body> <h1>Заголовок документа</h1> <p>Текст документа</p> … </body> </html>

Наиболее важные html-теги, связанные в ранжирование страниц сайта в поисковых системах, это теги:

title;
description;
keywords;
заголовки h1, h2, h3, …

Многие продавцы понимают важность поискового продвижения, но не знают, как правильно формировать основные SEO-теги: title, description, keywords и заголовок h1 для страниц каталога и страниц товаров интернет-магазинов. В этой статье мы рассмотрим, зачем нужны SEO-теги, на что они влияют и как их легко и быстро заполнять для высокого ранжирования разделов и товаров в поисковых системах Google и Яндекс.

Полный список рекомендаций по созданию и внутренней поисковой оптимизации сайтов всегда можно найти на сайтах поисковых систем:

Руководство по поисковой оптимизации от Google;
Рекомендации по созданию сайтов от Яндекс.

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

Для высокого ранжирования сайта вашего интернет-магазина в поисковой выдаче. Мета-теги прописываются в части <head> программного кода каждой из страниц интернет-магазина. Они предназначены для того, чтобы поисковые системы понимали, какая информация находится на страницах сайта, и рекомендовали ее пользователям, ищущим ваши товары.
Для формирования развернутого сниппета – текстовой информации, отбираемой поисковой машиной для презентации страницы вашего интернет-магазина в результатах поиска. Для сниппета может быть выбран отрывок из текста с ключевым словом или текст из тега description.

Результаты поиска по запросу «купить пальто в Минске»

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

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

Как посмотреть мета-теги страниц интернет-сайта в WEB-браузере?

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

Для просмотра тегов в коде страницы, для браузеров Google Chrome, Mozilla Firefox и Opera, вам необходимо:

Открыть в ВЕБ-браузере интересующую вас страницу.
Нажать сочетание клавиш «CTRL» + «U».
В новой вкладке браузера откроется HTML-код страницы.
При необходимости, Нажать сочетание клавиш «CTRL» + «F» для поиска в коде страницы тега, например: <title>, <description>, <keywords> или <h1>.

Правила заполнения тега TITLE

Мета-тег title в коде страницы

Мета-тег title

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

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

Как правильно заполнить тег title для страниц товаров и разделов интернет-магазина?

1. Тег title должен быть уникальным для каждой страницы

Если у вас в разделе каталога несколько страниц пагинации, обязательно добавьте в конце тега title: стр 1, стр 2, стр 3.

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

Пример:

<title>Подарки для женщин - стр 1</title>
<title>Подарки для женщин - стр 2</title>
<title>Комплект постельного белья ‘Бабочки’ двуспальный</title>
<title>Комплект постельного белья ‘Бабочки’ полуторный</title>
<title>Сковорода чугунная Emsa 18 см с крышкой</title>
<title>Сковорода чугунная Emsa 18 см без крышки</title>

2. Тег title должен быть отличным от тегов description и h1

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

Тег h1 – это видимый пользователю заголовок, расположенный вверху страницы раздела или товара. Тег h1 должен кратко и четко описывать товар: наименование, производитель, модель и т.д. К примеру, если в заголовке <h1> товар просто назван, то в title и description вы можете добавить самые частотные коммерческие запросы, в том числе названия брендов кириллицей.

Пример:

<h1>LED Телевизор SAMSUNG UE40J6330AU</h1>
<title>Купить телевизор Samsung UE40J6330AU с бесплатной доставкой по Минску</title>
<meta name="Description" content="В интернет-магазине 5-й элемент можно купить led телевизор SAMSUNG UE40J6330AU с гарантией и доставкой.">

3. Тег title должен быть оптимизирован под поисковые запросы, соответствующие тематике страницы

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

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

Купить смартфон в Минске — цены, характеристики, отзывы;
Купить автомобиль в рассрочку — без процентов и переплат;
Холодильники no frost с доставкой и подъемом на этаж.

Тег title для страниц товаров нужно формировать из конкретизированных запросов, когда покупатель уже определился с тем, что купить, и выбирает, где это сделать:

Купить фен Philips HP8233/00 в Минске цена;
Купить духовой шкаф Bosch HBG634BB1 с доставкой по Беларуси;
Заказать кондиционер General Climate GC/GU-S09HRIN1 с доставкой и установкой.

Пример:

<title>Купить цифровой фотоаппарат в Минске - цены, характеристики, инструкции</title>
<title>Посудомоечная машина Siemens WS12K247OE в рассрочку без процентов - Гарантия 2 года‎</title>
<title>Широкий выбор конвертов для новорожденных - разные цвета для мальчиков и девочек</title>

Пример подбора поисковых (ключевых) слов для title статьи об этом теге

4. Тег title должен отражать реальное содержимое страницы

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

Пример:

<title>Купить шубу в магазине ‘Меха’ со скидкой 50% в рождественские каникулы</title>
<title>Каталог и прайс издательства ‘Гном’ - скидка 30% на оптовые закупки</title>

5. Тег title должен иметь структуру законченного предложения

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

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

Идеальная структура тега title отвечает на вопросы «Что? Где? Когда?» Иными словами, какой товар сможет купить потенциальный покупатель в вашем интернет-магазине и при каких условиях? Причем высокочастотный запрос должен стоять в начале тега. Допустимы также назывные предложения, которые часто встречаются в объявлениях контекстной рекламы.

Обратите внимание: при формирования мета-тега title нельзя использовать «.» !

Пример:

<title>Купи оригинальные подарки ко дню автомобилиста в магазине ‘Автолюбитель’</title>
<title>Зимние шины в Минске - Скидка 55% на шиномонтаж - Только 3 Дня‎</title>

6. Тег title должен быть составлен грамотно

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

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

Исключение в этом правиле иногда допускается, если в языке устойчиво закрепилось (и это показывает парсинг ключевиков) нелитературное наименование продукта (посудомойка – посудомоечная машина) или некорректное написание бренда (Scarlett – Scarlet).

Пример:

<title>Распродажа коллекции шуб в ТЦ ‘Bigzz’ со скидкой до 80%</title>
<title>Скидка 40% на последние модели духовок и посудомоек Bosch по карте ХАЛВА</title>

7. Тег title должен содержать не более 70 символов

На самом деле, в этот тег можно «впихнуть» даже 1200 символов, но какой в этом смысл, в результатах поиска отображается не более 70 символов?

50–57 символов для Google;
65–70 символов для Яндекс.

Если title длинный, поисковая система сама выберет, какие 70 символов показать пользователю в соответствии с введенным запросом. И этот выбор непредсказуем. Лучше облегчить задачу поисковикам и стараться уместить все или самое важное в первые 50-70 символов, иначе все лишнее будет заменено троеточием. Причем поисковая система может сократить не только конец фразы, но и середину, и самое начало. Поэтому позаботьтесь о лаконичных и емких тайтлах для ваших страниц. Да, это не просто, но необходимо.

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

Пример:

<title>Купи нервущиеся колготки ElaSlim в Минске по низкой цене</title> (56 символов с пробелами);
<title>Купить шведскую стенку с бесплатной доставкой и установкой в Минске</title> (67 символов с пробелами).

Правила заполнения мета-тега DESCRIPTION

Мета-тег description в коде страницы

Мета-тег description

Мета-тег description существует для описания страницы, которое помогает покупателю определиться, стоит ли переходить на страничку интернет-магазина или нет. Текст этого тега часто выводится поисковыми системами сразу под ссылкой на ваш интернет-магазин, а также подтягивается к ссылкам на товары в социальных сетях. По данным экспертного анализа сайтов, в 60% случаев Google формирует сниппет из мета-тега description. А это значит, что, описывая товар в теге description, вы повышаете шансы своего интернет-магазина оказаться выше в поисковой выдаче, чем те магазины, у которых этот тег не заполнен.

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

Как правильно заполнить тег description для страниц товаров и разделов интернет-магазина?

1. Мета-тег description должен описывать содержимое страницы

В случае интернет-магазина мета-тег description должен не только описывать, но и привлекать внимание, рекламировать товар и содержать заманчивое предложение для потенциальной аудитории. Это могут быть выгодные условия доставки, разные способы оплаты, гарантия 5 лет или ассортимент из 10 000 товаров.

Пример:

<meta name="Description" content="Детские книги от 155 издательств по закупочным ценам с доставкой по всему миру. Скидка 20% при покупке от 5 книг + открытка в подарок!">
<meta name="Description" content="Каталог Onliner.by - это удобный способ купить смартфон Xiaomi Mi 5 32GB White. Характеристики, отзывы, сравнение ценовых предложений в Минске.">

2. Мета-тег description должен быть уникальным и отличным от тегов h1 и title

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

Пример:

<meta name="Description" content="133 000 книг для детей напрямую от издательств. Доставка почтой по России и всему миру. Заказывай со скидкой 20% от пяти книг и получай открытку в подарок!">
<meta name="Description" content="Смартфон Xiaomi Mi 5 32GB White можно купить в Минске через каталог Оnliner.by. В каталоге вы найдете отзывы владельцев, предложения продавцов, сравнение характеристик и цен по вашему региону.">

3. Мета-тег description может содержать все связанные с содержимым страницы ключевые запросы

Тег description может быть более развернутым, чем title, поэтому вам не составит труда составить четкое описание товара или раздела каталога с употреблением самых частотных ключевых слов, по которым ищут данный товар. В этом вам поможет составление семантического ядра с сортировкой ключевых фраз по частотности. К примеру, ключевые запросы для утюга Tefal могут выглядеть так:

купить утюг Tefal
утюг с парогенератором
утюги Tefal цены
купить утюг в Минске
утюги Tefal отзывы
заказать утюг Tefal со скидкой
утюг Tefal гарантия

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

Пример:

<meta name=»Description» content=»В магазине TEFAL.BY вы можете купить утюг Tefal с парогенератором в Минске по ценам производителя. Гарантия 3 года. Отзывы покупателей помогут вам выбрать и заказать утюг Tefal со скидкой 10% на первую покупку!»>

4. Мета-тег description должен быть написан человеческим языком

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

Пример:

<meta name="Description" content="Интернет-магазин ‘Коптер тайм’ – продажа квадрокоптеров в Москве: ★ Бесплатная доставка при покупке от 10000 руб ★ Большой выбор ★ Привлекательные цены.">

5. Мета-тег description не должен превышать 150 символов

Это оптимальная длина описания, доступная для отображения в поисковиках. В среднем это две строчки текста с учетом пробелов. Также этот тег не должен быть слишком коротким (2-3 слова), иначе поисковику снова придется искать более развернутое описание для страницы вашего интернет-магазина.

Пример:

<meta name="Description" content="Продажа, доставка и установка водонагревателей Ariston в Минске. Только в магазине Teplo.by можно купить бойлеры Ariston с гарантией 3 года!"> (140 символов с пробелами)
<meta name="Description" content="Заказать контактные линзы всех известных производителей по самым выгодным ценам вы можете в нашем интернет-магазине Optik.by."> (125 символов с пробелами)

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

Тег h1 в коде страницы

Как правильно заполнить тег H1 для страниц товаров и разделов интернет-магазина?

Итак, мы дошли до заголовков карточек товаров и их разделов, а также страниц, посвященных оплате, доставке, контактам и другой информации о магазине. Заголовок, заключенный в тег <h1>TEXT</h1>, обычно размещается вверху страницы и должен содержать наименование товара или название раздела. Теги <h2>-<h6> служат для выделения подзаголовков по уровням. К примеру, в этом тексте использованы подзаголовки трех уровней:

<h1>Как правильно формировать SEO-теги для страниц интернет-магазина?</h1>
<h2>Правила заполнения тега TITLE</h2>
<h3>1. Тег title должен быть уникальным для каждой страницы</h3>

Если в каком-то из этих пунктов возникнут еще подпункты, то их нужно будет взять в теги <h4>-<h6>. Как правило, тексты на сайтах интернет-магазинов редко имеют сложную структуру, поэтому до <h4>-<h6> дело обычно не доходит.

1. Тег h1 должен встречаться на странице только один раз

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

Пример правильного использования тегов:

<h1>Как выбрать утюг?</h1>
<h2>Утюги с парогенератором</h2>
<h2>Утюги дорожные</h2>
<h3>Беспроводные утюги</h3>

Правильная иерархия заголовков h1-h6 на странице интернет-сайта

2. Тег h1 должен быть уникальным

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

Пример:

<h1>Телевизор Philips 49PUS7100/60</h1>
<h1>LED Телевизор Philips 49PUS7100/60, 49 дюймов</h1>

3. Тег h1 должен содержать поисковый запрос, соответствующий названию товара или раздела каталога

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

Пример:

<h1>Форма для футболистов</h1>
<h1>Спортивная форма для футболистов</h1>
<h1>Футбольная форма любимой команды</h1>
<h1>Футбольная форма бразильской сборной</h1>

4. Тег h1 должен быть информативным

Тег заголовка должен содержать максимум информации, поэтому вода и мусор тут не допустимы. Уберите из заголовков:

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

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

Пример:

<h1>Брюки в черно-белую полоску Forever21, размер 34</h1>
<h1>Карнавальный костюм «Фея» с крылышками, колпаком и волшебной палочкой, рост 104</h1>

5. Тег h1 не должен превышать более 7-8 слов

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

Пример:

<h1>Развивающий конструктор «Репейник» Banchems, 200 деталей</h1>
<h1>Детская настольная игра «Пираты-прятки» Bondibon, 4+</h1>

Правила заполнения тега KEYWORDS

Мета-тег keywords в коде страницы

Как правильно заполнить тег keywords?

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

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

1. Мета-тег keywords должен содержать ключевые запросы

В теге можно перечислить все поисковые запросы, но нельзя одни и те же запросы повторять несколько раз:

Пример:

<meta name="keywords" content="Посуда Zepter, купить посуду Zepter в Минске">

2. Мета-тег keywords может содержать тематические слова и синонимы

Если вы продаете товар, который имеет несколько названий-синонимов, то это стоит перечислить в ключевых словах.

Пример:

<meta name="keywords" content="свежая форель, пеструшка, лосось, ишхан, кумжа, царская рыба, королевская рыба">

3. Мета-тег keywords лучше формировать из существительных

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

Пример:

<meta name="keywords" content="книга, андерсен, снежная королева, иллюстрации">

4. Мета-тег keywords не должен содержать никаких знаков пунктуации, кроме запятой

Можно ключевые слова перечислять через запятую или через пробел, но в конце нельзя ставить точек или каких-либо иных знаков препинания.

Пример:

<meta name="keywords" content="холодильник LG no frost купить минск цена недорого">
<meta name="keywords" content="холодильник, LG, no frost, купить, минск, цена, недорого">

К чему приводит неправильное формирование SEO-тегов?

Пример формирования сниппета из фрагментов текста на странице магазина

Если теги не соответствуют правилам их формирования, поисковые системы Google и Яндекс сами формируют сниппет (заголовок и описание страницы сайта) на страницах результатов поиска из содержимого других тегов, анкорных ссылок, заголовков Яндекс каталога и других участков текста, которые поисковым роботам покажутся более адекватными запросам пользователей. Это происходит в нескольких случаях:

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

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

Где брать ключевые слова для заполнения SEO-тегов?

В предыдущем разделе мы разобрали правила составления тегов и мета-тегов, которые формируются из поисковых запросов (ключевых слов). И теперь самое время задаться вопросом: а где же их взять? Может, из головы? Конечно, некоторые ключевые запросы по вашей продукции вы и так сами знаете, потому что не раз искали товары на сайтах конкурентов, у поставщиков, на площадках с отзывами. Интуитивно понятно, что наиболее частотные коммерческие запросы для интернет-магазина выглядят так:

купить + товар + в городе + недорого
заказать + товар + с доставкой + цена

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

Высокочастотные ключевики по запросу ‘купить межкомнатные двери’

Статистика поисковых систем. Статистика Google, к сожалению, дает только приблизительные значения по частотности ключевых запросов. Поэтому, если вы работаете на русскоязычную аудиторию, вам подойдет Yandex.Wordstat. Из полученного списка ключевых фраз нужно убрать слова, которые не соответствую вашему предложению. Например, вы продаете элитные двери из массива, тогда вам не стоит учитывать запросы, включающие слова: дешевые, бюджетные, недорого, бесплатно, б/у.
Семантическое ядро сайта. Если вы создавали интернет-магазин по уму, то еще при планировании структуры разделов сайта заказали сеошнику собрать семантическое ядро под сформированный перечень товаров. Это примерно тот же список ключевиков, который выдает Яндекс.Вордстат, но созданный при помощи специальных программ (например, Key Collector) и уже структурированный по темам, разделам, рубрикам и т.д.
Статистика Google Analytics. Этот способ построен на анализе ключевых запросов, по которым уже были переходы на сайт интернет-магазина. Если у вас на сайте установлен счетчик Google Analytics, то вы можете войти в свой аккаунт, пройти по вкладкам «Поведение» –> «Контент сайта» –> «Страницы входа» и выбрать любую страницу из списка. Во вкладке «Ключевое слово» отобразятся те ключевые слова, по которым пользователи переходили на ваш сайт из поисковых систем. Полученный список можно экспортировать в «CSV для Excel», отформатировать и проверить свои позиции по этим запросам. В составлении тегов руководствоваться полученным списком.

Перечень поисковых запросов по которым были переходы на страницу в отчете Google Analytics

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

Как автоматизировать заполнение тегов?

Для интернет-магазинов с небольшим количеством товаров в каталоге (100-300) лучше формировать SEO-теги вручную. Но если в каталоге интернет-магазина насчитывается 5 000 или 10 000 товаров, то приходится этот процесс автоматизировать.

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

Есть несколько подходов для автогенерации тегов.

Шаблоны для автоматизации тегов

Для автоматического заполнения тега title часто применяют неидеальные схемы:

использование тайтла главной страницы для title всех страниц сайта;
дублирование тега h1 в title.

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

Но лучше использовать следующие шаблоны автоматического заполнения тега title и description для страниц интернет-магазина:

Купить «Товар» недорого – фото, цена, характеристики.
«Товар» купить в «Городе» с бесплатной доставкой!
Купить «Товар + характеристика (цвет, артикул, размер и т.д.)» – в интернет-магазине «Название»
Заказать «Товар» с доставкой в день заказа!

Донором для поля «Товар» может служить заголовок h1, но при этом эти теги не будут дублировать друг друга.

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

Например, для карточек товаров можно подставлять в description:

первые 200 символов описания товара;
технические характеристики;
описание преимуществ магазина;
условия доставки и оплаты;
контактные данные продавца.

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

Или вы можете использовать готовые шаблоны для создания мета-тега description на основе заголовка:

Купите «Товар» по «Цена» руб. в Минске. Только лучшие предложения в интернет-магазине «Название».
«Товар» – характеристики, фото, отзывы. Лучшая цена в Беларуси – «цена» руб в интернет-магазине «Название».

Заголовки h1 можно импортировать из прайса поставщика – такую возможность предоставляю практически все системы управления сайтом интернет-магазина.

Программы для автоматизации формирования SEO-тегов

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

Функции MS Excel и Google Таблицы для автоматического формирования SEO-тегов:

Совмещение ячеек СЦЕПИТЬ (текст1;текст2;текст3…) (CONCATENATE) позволяет создавать уникальные теги title, description, keywords при помощи сцепки текста из тега h1, или названия товаров из прайс-листа поставщика, с добавлением необходимых характеристик товаров или стандартным «хвостом», к примеру, «цены, характеристики, отзывы».
Регулировка длины содержимого ячейки ДЛСТР (LEN) помогает при формировании тегов с ограничением по количеству символов. Для этого зайдите в условное форматирование и задайте правило выделения цветом строк с превышением указанного лимита символов. После этого вы легко сможете подкорректировать слишком длинные теги.
Удаление лишних пробелов СЖПРОБЕЛЫ (TRIM) помогает удалить все пробелы, кроме одинарных. Это особенно полезно при копировании массива данных и дальнейшей его обработке для автогенерации тегов.
Преобразование регистра букв ПРОПИСН (UPPER), СТРОЧН (LOWER), ПРОПНАЧ (PROPER) могут понадобиться при написании с заглавной буквы названий брендов, моделей, наименований товаров, названия городов и самого интернет-магазина. Некоторые магазины просто берут за правило каждое слово писать с большой буквы, хотя это и не является нормой.
Удаление дублей из списка ключевиков можно произвести при помощи функции Данные > Удаление дубликатов (Data > Remove Duplicates).

К тому же, практически все полезные SEO-сервисы предоставляют возможность экспортировать данные в Excel. И если ваша CMS позволяет легко и быстро заполнять теги содержимым из таблицы Excel, то заполнение тегов даже для 10 тысяч товаров не станет для вас такой уж серьезной проблемой, как это могло бы показаться на первый взгляд.

Источник

Зачем нужны заголовки H1 — H6

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

Иерархия заголовков на странице

В языке HTML, на котором создаются web-стрницы, существует 6 уровней заголовков — от тега h1 до h6. Каждый из них в иерархической цепочке подчинен предыдущему. Самый главный заголовок — тег h1, в него вложен подзаголовок h2, соответственно, h3 уже разграничивает текст внутри h2 и т. д.

Пример иерархии с правильной вложенностью тегов:

<H1>Животные<H1>
<H2>Млекопитающие<H2>
<H3>Грызуны<H3>
<H3>Хищные<H3>
<H3>Приматы<H3>
<H2>Птицы<H2>
<H3>Совы<H3>
<H3>Воробьинообразные<H3>
<H3>Куриные<H3>

Как мы видим, в такой иерархии прослеживается логическая последовательность, благодаря которой становится понятно содержание текста и тематика каждого раздела. Недопустимо нарушать иерархию, например, использовать тег Н3 перед Н2 или использовать тег Н6, если на странице нет Н4 и Н5. Как правило, для оформления текста на сайте достаточно тегов Н1 — Н3. Остальные используют в редких случаях.

Пример визуального отображения заголовков в тексте:

Как заголовки в тексте влияют на продвижение сайтов?

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

Тег h1 — самый главный заголовок на странице. Он считается названием документа и должен отображать суть размещенного контента. Это поможет пользователям и поисковым роботам точно определить назначение страницы.

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

Правила, которые нужно соблюдать при написании Н1

Правильно написанный заголовок уровня Н1:

располагается выше текста и заголовков следующих уровней и пишется шрифтом наибольшего размера;
отражает содержание текста;
присутствует на странице в единственном экземпляре, если иного не требует логическая структура текста;
не совпадает с Тitle (тайтл) или другими тегами;
уникален для каждой страницы;
длина тега имеет значение: не слишком длинный (количество 60-70 символов) — хотя при ранжировании учитывается больше слов, чем выводится на экран, надо учитывать, что чем больше слов в заголовке, тем меньше будет «вес» каждого из них по формуле БМ25;
содержит в себе ключевое слово — это значимый фактор ранжирования для поисковых систем;
не должен быть переоптимизированным;
в конце не ставится точка (при этом может стоять восклицательный или знак вопроса).

Как прописывать ключевые слова в Н1?

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

Употребление заголовков Н1 и Тitle

Н1 не должен совпадать с МЕТА-тегом Тitle — заголовком, который описывает содержимое страницы для поисковых систем, а также отображается во вкладке браузера. Тitle можно увидеть и в качестве заголовка сниппета в поисковой выдаче.

Использование одинаковые ключевых слов в МЕТА-теге Тitle и заголовке H1 создает угрозу наложения санкций со стороны поисковых систем. Поскольку Тitle и тег h1 имеют большое значение для ранжирования сайта в результатах поиска, то написание одних и тех же ключевых слов в данных элементах может быть расценено как попытка искусственного увеличения их веса. Также не рекомендуется использовать дубль тега h1 в Description.

Страницы с совпадающими тегами Title и Н1 показывает отчет «Ошибки МЕТА тегов» в разделе «SEO-аудит» сервиса «Лабрика».

Сколько раз можно прописать заголовок (тег) Н1 на странице?

Только один! Правилами языка HTML 5 допускается использование нескольких заголовков Н1.

Тег h1 для Google

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

Тег h1 для Яндекс

Важно понимать: для Яндекса присутствие нескольких тегов h1 на странице является отрицательным сигналом ранжирования в интернете.

Информацию по наличию на странице нескольких заголовков h1 можно получить с помощью отчета «Ошибки МЕТА тегов» в разделе «Технический аудит» сервиса «Лабрика».

Как составить «цепляющий» заголовок?

Создание привлекательных заголовков — сложная работа. Чтобы заголовок привлекал внимание пользователей он должен:

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

«Как писать заголовки в SMM»;
добавлять интригу — обещать какую-либо эксклюзивную, самую полную, самую актуальную информацию:

«Создаем самый надежный пароль и запоминаем его»;
быть понятным и предоставлять точные, конкретные данные в цифрах — это вызовет больше доверия:

«100+ заголовков, привлекающих внимание»;
обозначать некоторую целевую аудиторию, то есть указывать, для кого предназначен контент страницы:

«Как придумать заголовок к статье? Шпаргалка копирайтера»;
включать побудительные глаголы — они помогут создать нужное вам отношение пользователя к содержимому страницы:

«Получайте новости о конкурсах и грантах быстрее всех!»;
бросать читателю вызов, предлагать ему проверить свои знания:

«А вы знаете, как правильно читать книги?».

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

Правила оформления заголовков Н2 — Н6

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

Заголовки должны:

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

Заголовки не должны:

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

Переспам ключевыми словами и наличие тегов в заголовках Н1, Н2, Н3 можно найти с помощью отчета «Тошнота слов на страницах» в разделе «SEO-аудит» сервиса «Лабрика».

Способы: как сделать заголовок Н1 — Н6 в CMS ?

Обычно в шаблонах систем управления контентом (CMS) заголовок Н1 отображается как название страницы. В других CMS Н1, как и подзаголовки в тексте, нужно вручную добавить в содержимом страницы с помощью редактора. Для этого нужный текст выделяется, а в меню выбирается заголовок соответствующего уровня. Проверьте, как прописываются заголовки в систем управления вашего ресурса.

Пример в WordPress:

Источник

Зачем нужны заголовки
Какие бывают
Иерархия заголовков
Почему заголовки важны для SEO в 2022
SEO-Кейсы
Рекомендации Гугла
Чек-лист, как использовать заголовки
Чего не нужно делать
Вывод

Зачем нужны заголовки

Грамотно составленные заголовки полезны как посетителям, так и поисковым системам.

Для людей 🧑‍🤝‍🧑

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

Для примера рассмотрим 2 текста:

Пример №1

В примере №1 читать текст тяжело, так как он не структурирован. Посетитель, увидев такую портянку, вероятно, сразу закроет страницу и она получит отрицательную оценку в расчете формулы релевантности (т.е. rel-). Затем он вернется в выдачу, откроет другой сайт, как на примере №2, прочитает текст и получит ответ. Закроет выдачу, а страница получит rel+, так как решила задачу посетителя.

Для роботов 🤖

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

Представитель Гугла Джон Мюллер рассказывает, как поисковик обрабатывает заголовки:

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

В справке Яндекса говорится примерно тоже самое:

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

Какие бывают

Существуют 6 уровней заголовков: Н1-H6, где H1 — высший, а H6 — низший. Чем ниже уровень, тем ниже и относительная важность секции, расположенной после него.

H1 – это заголовок первого уровня, который используется для обозначения содержимого всей страницы. В HTML-коде он оформляется так: <h1>Заголовок</h1>. На странице должен быть только один тег H1.

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

H4, H5, H6 используются редко и по необходимости (так как для структурирования информации обычно хватает заголовков первых трех уровней).

Иерархия заголовков

Важно соблюдать правильную вложенность заголовков (далее в подтверждение этому будет кейс). Заголовок Н2 должен находиться после Н1, H3 после H2 и так далее.

Пример структуры в HTML:

<h1>Рептилоиды: что мы знаем о них?</h1>

<h2>Этимология</h2>

<h2>Эволюция</h2>

<h2>Распределение и разнообразие</h2>

<h3>Поздний палеозой</h3>

<h3>Юрский период</h3>

<h3>Меловойский период</h3>

<h2>Внешняя морфология</h2>

Почему заголовки важны для SEO в 2022

В первом сниппете заголовок взять из тега Title, во втором из H1

Новость от 24 августа 2021 из официального блога Гугл Поиска:

«Более 10 лет назад мы начали использовать для создания заголовков не только HTML-текст, но и другие сигналы. Новая система делает то же самое – но гораздо эффективнее. В частности, она учитывает текст, который видят посетители, открывая веб-страницу. При этом используется и основной заголовок на странице (который авторы задают с помощью разных тегов, включая <H1>) и другой текст, выделенный стилями».

Известный западный SEO-специалист Сайрус Шепард провел исследование в ходе которого выявил:

«Совпадение тегов title и заголовков H1 помогает уменьшить количество переписываний».

Из этих трех новостей следует:

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

Зоны документа, которые влияют на текстовую релевантность. Источник: seo-rocket.pro/relevance-zones/

Semrush в своем исследовании 1,2 млн статей выявил, что:

>50% документов со сложной структурой (H2+H3+H4) высокоэффективны с точки зрения посещаемости и вовлеченности (социальные расшаривания).
44% с простой структурой (H2+H3) также высокоэффективны.
39% без структуры (без H2) малоэффективны.

Графики зависимости эффективности страниц от наличия на них разных заголовков

Пример якорных ссылок

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

Блок быстрых ответов (нулевая позиция)

Кейс №1: Рост кликов на 4,5% после изменения структуры заголовков

Компания Semrush провела сплит-тест, который заключался в изменении структуры заголовков на листингах интернет-магазина.

Изначально подзаголовки H3 не были иерархически подтемами предыдущего заголовка H2. В качестве эксперимента заголовки H3 заменили на H2, чтобы поисковые системы смогли лучше понять структуру.

Наглядно, что было сделано

По результатам тестирования был замечен рост органического трафика на контрольные страницы на 4,5%. Кроме того было зафиксировано увеличение количества показов, которое позволяет предположить, что протестированные страницы стали более релевантными различным запросам.

Кейс №2: рост SEO-трафика на 62% после указания корректного Н1

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

Лого в качестве заголовка H1

В рамках оптимизации компанией Mockingbird были прописаны уникальные H1 для каждой страницы. Как результат — увеличение трафика на 62%.

Чек-лист, как использовать заголовки

Размещайте H1 на видном месте.
Заголовок первого уровня должен однозначно определять содержимое страницы.
Используйте в H1 ключевой запрос.
Структурируйте документ с помощью тегов H2-H6.
Используйте LSI-слова в H2-H6.
Убедитесь, что подзаголовки соответствуют тексту, который к ним относится.
Следите за корректной вложенностью подзаголовков.
Используйте заголовки в паре с якорными ссылками для формирования расширенных сниппетов.
Размер шрифта заголовка должен уменьшаться по мере его вложенности от H1 к H6.

Правильное использование заголовков

На примере выше:

один H1 и определяет содержание документа;
в заголовках используются ключи и LSI;
соблюдена иерархия заголовков;
заголовки в формах оформлены не через заголовки (так они не определяют структуру документа), а через <p>;
есть якорные ссылки на заголовки;
соблюдена визуальная вложенность заголовков за счет использования стилей.

Чего не нужно делать

Спамить ключами во всех заголовках.
Использовать более одного тега H1 на странице.
Использовать одинаковый Н1 на разных страницах.
Использовать заголовки в качестве скрытого текста.
Использовать в тегах заголовков стили.
Выделять тегами заголовков текст, который не помогает определить структуру (например в формах обратной связи).

Неправильное использование заголовков

На примере выше:

два H1, причем один из них в качестве лого;
нарушена иерархия заголовков: в H2 вложен H4;
ФИО специалистов выделены тегами H3, хотя они не определяют структуру.

Вывод

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

Источник

Добавлено 12 апреля 2021 в 19:00

Заголовки и их назначение

По мере того, как программы становятся больше (и используют больше файлов), становится всё более утомительным давать предварительные объявления каждой функции, которую вы хотите использовать, и которая определена в другом файле. Было бы неплохо, если бы вы могли поместить все свои предварительные объявления в одно место, а затем импортировать их, когда они вам понадобятся?

Исходные файлы кода C++ (с расширением .cpp) – это не единственные файлы, которые обычно встречаются в программах на C++. Другой тип файлов – это заголовочный файл (иногда просто заголовок). Заголовочные файлы обычно имеют расширение .h, но иногда вы можете встретить их с расширением .hpp или вообще без расширения. Основная цель заголовочного файла – распространять объявления в исходные файлы кода.

Ключевой момент

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

Использование заголовочных файлов стандартной библиотеки

Рассмотрим следующую программу:

#include <iostream>
 
int main()
{
    std::cout << "Hello, world!";
    return 0;
}

Эта программа печатает «Hello, world!» в консоль с помощью std::cout. Однако эта программа никогда не предоставляла определение или объявление для std::cout, поэтому как компилятор узнает, что такое std::cout?

Ответ заключается в том, что std::cout был предварительно объявлен в заголовочном файле «iostream». Когда мы пишем #include <iostream>, мы запрашиваем, чтобы препроцессор скопировал всё содержимое (включая предварительные объявления для std::cout) из файла с именем «iostream» в файл, выполняющий #include.

Ключевой момент

Когда вы включаете файл с помощью #include, содержимое включаемого файла вставляется в точке включения. Это удобный способ извлечения объявлений из другого файла.

Подумайте, что бы произошло, если бы заголовок iostream не существовал. Каждый раз, когда вы хотели бы использовать std::cout, вам приходилось бы вручную вводить или копировать все объявления, связанные с std::cout, в начало каждого файла, который использовал бы std::cout! Для этого потребуется много знаний о том, как реализован std::cout, и потребуется много работы. Хуже того, если бы прототип функции изменился, нам пришлось бы вручную обновлять все предварительные объявления. Намного проще просто включить iostream с помощью #include!

Когда дело доходит до функций и переменных, стоит помнить, что заголовочные файлы обычно содержат только объявления функций и переменных, а не их определения (в противном случае может произойти нарушение правила одного определения). std::cout объявлен в заголовке iostream, но определен как часть стандартной библиотеки C++, которая автоматически подключается к вашей программе на этапе линкера.

Рисунок 1 – Диаграмма процесса сборки

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

Заголовочные файлы обычно не должны содержать определений функций и переменных, чтобы не нарушать правило одного определения. Исключение сделано для символьных констант (которые мы рассмотрим в уроке «4.14 – const, constexpr и символьные константы»).

Написание собственных заголовочных файлов

А теперь вернемся к примеру, который мы обсуждали в предыдущем уроке. Когда мы закончили, у нас было два файла, add.cpp и main.cpp, которые выглядели так:

add.cpp:

int add(int x, int y)
{
    return x + y;
}

main.cpp:

#include <iostream>
 
int add(int x, int y); // предварительное объявление с использованием прототипа функции
 
int main()
{
    std::cout << "The sum of 3 and 4 is " << add(3, 4) << 'n';
    return 0;
}

(Если вы воссоздаете этот пример с нуля, не забудьте добавить add.cpp в свой проект, чтобы он компилировался).

В этом примере мы использовали предварительное объявление, чтобы при компиляции main.cpp компилятор знал, что такое идентификатор add. Как упоминалось ранее, добавление предварительных объявлений для каждой функции, которую вы хотите использовать, и которая находится в другом файле, вручную может быстро стать утомительным.

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

защита заголовка, о которой мы поговорим более подробно в следующем уроке («2.11 – Защита заголовков»);
фактическое содержимое файла заголовка, которое должно быть предварительными объявлениями для всех идентификаторов, которые мы хотим, чтобы другие файлы могли видеть.

Добавление заголовочного файла в проект работает аналогично добавлению исходного файла (рассматривается в уроке «2.7 – Программы с несколькими файлами исходного кода»). Если вы используете IDE, выполните такие же действия и при появлении запроса выберите Файл заголовка (или C/C++ header) вместо Файла С++ (или C/C++ source). Если вы используете командную строку, просто создайте новый файл в своем любимом редакторе.

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

При именовании файлов заголовков используйте расширение .h.

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

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

Если заголовочный файл идет в паре с файлом исходного кода (например, add.h с add.cpp), они оба должны иметь одинаковое базовое имя (add).

Вот наш завершенный заголовочный файл:

add.h:

// 1) У нас здесь на самом деле должна быть защита заголовка, 
// но для простоты мы опустим ее (мы рассмотрим защиту заголовков в следующем уроке)
 
// 2) Это содержимое файла .h, где идут объявления
int add(int x, int y); // прототип функции для add.h - не забудьте точку с запятой!

Чтобы использовать этот заголовочный файл в main.cpp, мы должны включить его с помощью #include (используя кавычки, а не угловые скобки).

main.cpp:

#include <iostream>

// Вставляем содержимое add.h в этот момент.
// Обратите внимание на использование здесь двойных кавычек.
#include "add.h"
 
int main()
{
    std::cout << "The sum of 3 and 4 is " << add(3, 4) << 'n';
    return 0;
}

add.cpp:

int add(int x, int y)
{
    return x + y;
}

Когда препроцессор обрабатывает строку #include "add.h", он копирует содержимое add.h в текущий файл в эту точку. Поскольку наш add.h содержит предварительное объявление для функции add, это предварительное объявление будет скопировано в main.cpp. Конечным результатом является программа, которая функционально аналогична той, в которой мы вручную добавили предварительное объявление вверху main.cpp.

Следовательно, наша программа будет правильно компилироваться и компоноваться.

Рисунок 2 – Диаграмма процесса сборки

Включение заголовочного файла в соответствующий исходный файл

Позже вы увидите, что большинство исходных файлов включают свой соответствующий заголовочный файл, даже если он им не нужен. Зачем?

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

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

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

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

При написании исходного файла включите в него соответствующий заголовочный файл (если он существует), даже если он вам пока не нужен.

Поиск и устранение проблем

Если вы получаете ошибку компилятора, указывающую, что add.h не найден, убедитесь, что файл действительно называется add.h. В зависимости от того, как вы его создали и назвали, возможно, файл может иметь имя вроде add (без расширения), add.h.txt или add.hpp. Также убедитесь, что он находится в том же каталоге, что и остальные исходные файлы.

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

Угловые скобки и двойные кавычки

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

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

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

Правило

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

Почему у `iostream` нет расширения `.h`?

Другой часто задаваемый вопрос: «Почему iostream (или любой другой заголовочный файл стандартной библиотеки) не имеет расширения .h?». Ответ заключается в том, что iostream.h – это другой заголовочный файл, отличающийся от iostream! Для объяснения требуется небольшой урок истории.

Когда C++ был только создан, все файлы в стандартной библиотеке оканчивались расширением .h. Жизнь была последовательной, и это было хорошо. Исходные версии cout и cin были объявлены в iostream.h. Когда комитет ANSI стандартизировал язык, они решили переместить все функции стандартной библиотеки в пространство имен std, чтобы избежать конфликтов имен с пользовательскими идентификаторами. Однако это представляло проблему: если бы они переместили всю функциональность в пространство имен std, ни одна из старых программ (включая iostream.h) больше не работала бы!

Чтобы обойти эту проблему, был представлен новый набор заголовочных файлов, которые используют те же имена, но не имеют расширения .h. Все функции в этих новых заголовочных файлах находятся в пространстве имен std. Таким образом, старые программы, содержащие #include <iostream.h>, не нужно переписывать, а новые программы могут использовать #include <iostream>.

Кроме того, многие библиотеки, унаследованные от C, которые всё еще используются в C++, получили префикс c (например, stdlib.h стал cstdlib). Функциональные возможности этих библиотек также были перенесены в пространство имен std, чтобы избежать конфликтов имен.

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

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

Включение заголовочных файлов из других каталогов

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

Один (плохой) способ сделать это – добавить относительный путь к заголовочному файлу, который вы хотите включить как часть строки #include. Например:

#include "headers/myHeader.h"
#include "../moreHeaders/myOtherHeader.h"

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

Лучший способ – сообщить вашему компилятору или IDE, что у вас есть куча заголовочных файлов в каком-то другом месте, чтобы он смотрел туда, когда не может найти их в текущем каталоге. Обычно это можно сделать, установив путь включения (include path) или каталог поиска (search directory) в настройках проекта в IDE.

Для пользователей Visual Studio

Кликните правой кнопкой мыши на своем проекте в обозревателе решений и выберите Свойства (Properties), затем вкладку Каталоги VC++.(VC++ Directories). Здесь вы увидите строку с названием «Включаемые каталоги» (Include Directories). Добавьте каталоги, в которых компилятор должен искать дополнительные заголовочные файлы.

Для пользователей Code::Blocks

В Code:: Blocks перейдите в меню Project (Проект) и выберите Build Options (Параметры сборки), затем вкладку Search directories (Каталоги поиска). Добавьте каталоги, в которых компилятор должен искать дополнительные заголовочные файлы.

Для пользователей GCC/G++

Используя g++, вы можете использовать параметр -I, чтобы указать альтернативный каталог для включения.

g++ -o main -I/source/includes main.cpp

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

Заголовочные файлы могут включать другие заголовочные файлы

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

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

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

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

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

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

Вопрос: Я не включил <someheader.h>, и моя программа всё равно работала! Почему?

Это один из наиболее часто задаваемых вопросов. Ответ: скорее всего, он работает, потому что вы включили какой-то другой заголовок (например, <iostream>), который сам включает <someheader.h>. Несмотря на то, что ваша программа будет компилироваться, в соответствии с приведенными выше рекомендациями вам не следует полагаться на это. То, что компилируется у вас, может не компилироваться на машине друга.

Порядок `#include` заголовочных файлов

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

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

Упорядочьте свои включения с #include следующим образом: сначала ваши собственные пользовательские заголовки, затем заголовки сторонних библиотек, затем заголовки стандартных библиотек; заголовки в каждом разделе должны быть отсортированы в алфавитном порядке.

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

Проверить h1 страницы
Разница в использовании h1, h2, h3, h4, h5, h6 в HTML5 и HTML4
Оптимизация структуры заголовков и подзаголовков веб-страницы
Можно ли внутри тега h использовать другие теги, например, img, a?
Должен ли title отличаться от h1?
Нужно ли заголовки боковых блоков брать в h?
Секреты написания привлекательного заголовка
Оптимизация заголовков блогов на Blogger

Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (подробнее про тег title). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего (см. исключения) используют в качестве заголовка сниппета.

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

Важные замечания:

заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
заголовок — это слово, фраза, предложение. Он не должен быть длинным.
заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong, mark, em и др. (посмотреть весь список).
если статья строится в формате «вопрос-ответ» и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl, dt, dd.

Проверить `h1` страницы

Сейчас фразу в любом теге можно сделать заголовком с помощью стилей CSS: увеличить шрифт и/или размер текста. Для того, чтобы проверить количество тегов h1 и их содержимое, достаточно посмотреть код страницы сайта с помощью браузера, никаких дополнительных расширений не требуется. Такой инструмент, можно вывести, если нажать клавишу <F12>:

Разница в использовании `h1`, `h2`, `h3`, `h4`, `h5`, `h6` в HTML5 и HTML4

Перед дальнейшим чтением желательно ознакомиться с примерами, описанными в стандартах [w3.org] самостоятельно.

Один `h1` на странице (версия HTML4)

Пошаговое решение судоку
- Программа решения судоку с объяснениями (онлайн)
- Правила игры
- Алгоритм заполнения ячеек кроссворда
  - Способ 1. «Скрытые одиночки»
  - Способ 2. «Одиночки»
- Методы решения судоку
  - Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
  - Стратегия 2. Группы кандидатов

Иерархия на действительно существующей странице реализуется благодаря тегам h1—h6. h1 — самый главный, имеет самый крупный размер, можно использовать только один h1. h6 — самый незначительный из заголовков, имеет самый маленький размер и самый высокий уровень вложенности. Такой вариант наиболее распространён у SEO оптимизаторов:

<!DOCTYPE html>
  <div>
    <div>Название сайта</div>
    <ul>
      <li><a href="/1">Пункт1</a>
      <li><a href="/2">Пункт2</a>
    </ul>
  </div>
  <div>
    <h1>Пошаговое решение судоку</h1>
    <h2>Программа решения судоку с объяснениями (онлайн)</h2>
    <h2>Правила игры</h2>
    <h2>Алгоритм заполнения ячеек кроссворда</h2>
    <h3>Способ 1. «Скрытые одиночки»</h3>
    <h3>Способ 2. «Одиночки»</h3>
    <h2>Методы решения судоку</h2>
    <h3>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h3>
    <h3>Стратегия 2. Группы кандидатов</h3>
    <b>Комментарии</b>
  </div>
  <div>
    <b>Последние сообщения</b>
    <ul>
      <li><a href="/1">Пункт1</a>
      <li><a href="/2">Пункт2</a>
    </ul>
  </div>
  <div>Футер</div>

Заголовки `h1`—`h6` в HTML5

Каждый пункт дерева заголовков создаёт один из вариантов:

body, когда нет h1—h6 перед первыми дочерними тегами article, aside, nav, section.
структурные теги article, aside, nav, section. Дочерние h1—h6 будут вложены в предшествующий структурному тегу заголовок.
Внимание: header, main и footer не являются структурными тегами.
h1—h6, которые не имеют родителя blockquote, details, fieldset, figure и td. Уровень вложенности пункта определяется рангом тега h.

Важные замечания:

Документ может содержать несколько заголовков верхнего уровня (в примере ниже пункты 1-3).
Документ или даже структурный тег могут содержать два и более тега h1 (в примере ниже пункты 2.1-2.3).
Последовательность h не важна, можно пропускать теги: h1 » h2 » h4. Если отсутствует h1, его место займёт h2 или даже h6.
Можно изменять порядок тегов: h3 » h4 » h1 (h1 будет иметь тот же уровень вложенности, что первый тег h, в нашем случае h3).
Так как код перестаёт быть интуитивно понятным, спецификация рекомендует (необязательно):
- каждый структурный тег начинать с h1. Но на устройствах, не поддерживающих HTML5 или в крайнем случае CSS, будет ужасная картина.
- теги h оборачивать в структурный тег. Но, объём HTML-кода влияет на скорость загрузки веб-страницы. Поэтому не особо хочется его увеличивать, если не требуется внешне (скажем, цветом фона) или семантически отделить границы разделов.

1
- 1.1
- 1.2
  - 1.2.1
- 1.3
- 1.4
- 1.5
  - 1.5.1
2
- 2.1
- 2.2
- 2.3
3


<!DOCTYPE html>
<h3>1</h3>
<section>
      <h2>1.1</h2>
      <h2>1.2</h2>
      <h3>1.2.1</h3>
      <h1>1.3</h1>
</section>
<section>
      <h4>1.4</h4>
</section>
<h4>1.5</h4>
<section>
      <h4>1.5.1</h4>
</section>
<h3>2</h3>
<section>
      <h1>2.1</h1>
      <h1>2.2</h1>
      <h1>2.3</h1>
</section>
<h1>3</h1>

Важные замечания:

Если над или в article, aside, nav, section отсутствует тег h, пункт будет иметь заголовок untitled.
Теги article, aside, nav не обязательно должны иметь вложенный тег h.

untitled page
- untitled article
  - untitled navigation
- Заголовок внутри article
Заголовок верхнего уровня


<!DOCTYPE html>
<section>
    <article>
        <nav>
            <ul>
                <li><a href="#1">Перейти к первой части статьи</a>
                <li><a href="#2">Перейти ко второй части статьи</a>
            </ul>      
        </nav>
        <h1>Заголовок внутри article</h1>
    </article>  
</section>
<h1>Заголовок верхнего уровня</h1>

Пример вёрстки HTML5

Название сайта
- Navigation
- Пошаговое решение судоку
  - Программа решения судоку с объяснениями (онлайн)
  - Правила игры
  - Алгоритм заполнения ячеек кроссворда
    - Способ 1. «Скрытые одиночки»
    - Способ 2. «Одиночки»
  - Методы решения судоку
    - Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
    - Стратегия 2. Группы кандидатов
  - Комментарии
- Последние сообщения

<!DOCTYPE html>
  <header>
    <h1>Название сайта</h1>
    <nav>
      <ul>
        <li><a href="/1">Пункт1</a>
        <li><a href="/2">Пункт2</a>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>Пошаговое решение судоку</h1>
      <section>
        <h2>Программа решения судоку с объяснениями (онлайн)</h2>
        <h2>Правила игры</h2>
        <h2>Алгоритм заполнения ячеек кроссворда</h2>
        <h3>Способ 1. «Скрытые одиночки»</h3>
        <h3>Способ 2. «Одиночки»</h3>
        <h2>Методы решения судоку</h2>
        <h3>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h3>
        <h3>Стратегия 2. Группы кандидатов</h3>
      </section>
      <section>
        <h4>Комментарии</h4>
      </section>
    </article>
    <aside>
      <h4>Последние сообщения</h4>
      <ul>
        <li><a href="/1">Пункт1</a>
        <li><a href="/2">Пункт2</a>
      </ul>
    </aside>
  </main>
<footer></footer>

Оптимизация структуры заголовков и подзаголовков веб-страницы

Что думают поисковые системы? Они, с одной стороны, не должны наказывать за то, что вебмастер следует стандартам вёрстки, а, с другой стороны, должны ориентироваться на большинство. Реальность такова: с появлением HTML-редакторов, это самое большинство не будет разбираться с тонкостями разметки. Им затруднительно переключиться на вкладку «HTML» чтобы картинке прописать атрибут alt, а секции наверно вообще за гранью понимания (см. меню сайта «грамота.ру»).

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

Официальные сообщения Google:

допускается наличие нескольких h1.
довольно старое видео (от 2009 года) о последовательности тегов h.

Официальные сообщения Яндекса:

Правильное оформление заголовков в тексте помогает … роботу Яндекса проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа. [help.yandex.ru]

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

Эксперимент 1: «Оптимальное количество `h1`»

Рассматриваются три страницы:

h1 » h1 (5 лет)
h1 » h2 (6 лет)
h1, h1 » h2 (7 лет)

Изначально в статьях учитываются последовательность (чем ближе к началу, тем слово более значимо) и плотность [wikipedia.org] ключевого слова, в частности:

ключевое слово употребляется только дважды, а именно в тегах h на одинаковом удалении от начала фразы,
почти одинаковое количество текста,
одинаковые по длине заголовки,
первый h1 — это заголовок верхнего уровня (он не имеет родителя article, aside, nav, section). Это важно (см. HTML5)!

7-6-5 лет [google.ru]. Для Google более привлекателен вариант использования двух h1, где первый — имя сайта (Гугл старательно вычленяет название веб-проекта, даже если это ссылка на внутреннюю страницу стороннего блога [google.ru]), второй — название статьи.

6-5-7 лет [yandex.ru]. В Яндексе h1 должен быть единственным. То есть на Главной h1 — это название сайта, а на внутренних страницах — название внутренних страниц.

Примечание: в Гугле индексация молниеносна, поэтому тут было проверено и отсутствие влияния алгоритма «Google Fresh». Позиции сменились после того, как страницы были добавлены в Г+. То есть да, есть разница один h1 или несколько, но этому поисковики придают очень маленькое значение.

Эксперимент 2: «Есть ли толк от `h3`»

Яндекс и Google не вносят h3 в заголовок сниппета. На экспериментальной странице не были использованы title, h1, h2.

Исключение для Яндекса: когда выделенный абзац содержит от 20 до 200 символов. Здесь не важно в каком теге он будет находиться: хоть в h3, хоть в span.

SEO советы

Утверждение 1: заголовок верхнего уровня должен содержать ключевые фразы, но при этом не быть спамным, то есть слова внутри него должны склонятся согласно правилам русского языка. Плохой пример: «Одежда оптом от производителя недорого».

Утверждение 2: чтобы не писать несколько одинаковых по смыслу статей, в заголовки меньшего уровня желательно включить похожие запросы и синонимы. В большинстве случаев для их нахождения достаточно фантазии, wordstat.yandex.ru и поисковых подсказок. То, что менее востребовано и не помещается в заголовки, можно упоминуть в тексте.
Важно: нет необходимости впихнуть весь перечень wordstat. Текст должен быть интересным, читаемым и «без воды».

В примере с судоку люди ищут одно и тоже, но называют это по разному: «методы», «алгоритм», «способы», «правила», «методика», «приёмы», «секреты», «принципы», «примеры»…

Можно ли внутри тега `h` использовать другие теги, например, `img`, `a`?

Теги h могут содержать phrasing elements! Phrasing elements — это img, a, input и др.

Заблуждение 1: внутри тегов h1—h6 нельзя использовать другие теги.

<h2>Можно ли внутри тега <code>h</code> использовать другие теги, например, <code>img</code>, <code>a</code>?</h2>

Внимание: в ряде CMS (в т.ч. Blogger) есть поле с названием страницы сайта. Его содержимым автоматически заполняется h1 и большая часть title. Остальная часть title или отсутствует, или одинакова для нескольких страниц, например, ей может быть название сайта. Но в теге title может находиться только текст [w3.org]. Поэтому нельзя в поле названия страницы вносить какие-либо теги.

Заблуждение 2: в заголовке не должно быть картинки. Две записи равнозначны для w3.org, Google, но не для Яндекса (не индексирует атрибут alt):

<h1>
     <img src="logo.gif" alt="Название сайта">
</h1>

<h1>
     Название сайта
</h1>

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

<div class="vyrovnyat">
  <h1>Заголовок</h1>
</div>

Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ссылки к определённому участку страницы, так называемые хэш-ссылки). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3):

<aside>
 <h1>Реклама</h1>
 <a href="http://ad.com/">
  <section>
   <h1>Дешёвые кредиты</h1>
   <p>Вас удивят скорость выдачи, качество обслуживания и самое главное — цена вопроса!</p>
   <p>Процентные ставки от 1% до 5%</p>
  </section>
 </a>
 <a href="http://ad1.com/">
  <section>
     ...
  </section>
 </a>
</aside>

Утверждение 2: есть небольшая разница в том как располагать ссылку: внутри тега h или тег h внутри ссылки. И она заключается в том, что в первом случае ссылкой является только текст, а во-втором — весь блок.

<h2>
    <a href="#"> только текст </a>
</h2>

<a href="#"> 
    <h2> весь блок (прямоугольная область) </h2>
</a>

Должен ли `title` отличаться от `h1`?

«Может ли title быть таким же как h1?» — да, может.

«Различный title и h1 полезны для SEO?» — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).

Примечание: для того, чтобы страница могла присутствовать в Новостях Google [support.google.com] или быстрых ссылках Яндекса [help.yandex.ru], основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.

Нужно ли заголовки боковых блоков брать в `h`?

Если заголовки индексируются (см. что сделать, чтобы поисковик не проиндексировал текст), то пусть лучше будут в теге h. Всё равно они употребляются на каждой странице сайта и вес этих слов («Реклама», «Последние сообщения», «Подписка» и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.

К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled.

Источник

Что такое метатеги?

Как посмотреть мета-теги страниц интернет-сайта в WEB-браузере?

Правила заполнения тега TITLE

Мета-тег title

Как правильно заполнить тег title для страниц товаров и разделов интернет-магазина?

1. Тег title должен быть уникальным для каждой страницы

2. Тег title должен быть отличным от тегов description и h1

3. Тег title должен быть оптимизирован под поисковые запросы, соответствующие тематике страницы

4. Тег title должен отражать реальное содержимое страницы

5. Тег title должен иметь структуру законченного предложения

6. Тег title должен быть составлен грамотно

7. Тег title должен содержать не более 70 символов

Правила заполнения мета-тега DESCRIPTION

Мета-тег description

Как правильно заполнить тег description для страниц товаров и разделов интернет-магазина?

1. Мета-тег description должен описывать содержимое страницы

2. Мета-тег description должен быть уникальным и отличным от тегов h1 и title

3. Мета-тег description может содержать все связанные с содержимым страницы ключевые запросы

4. Мета-тег description должен быть написан человеческим языком

5. Мета-тег description не должен превышать 150 символов

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

Как правильно заполнить тег H1 для страниц товаров и разделов интернет-магазина?

1. Тег h1 должен встречаться на странице только один раз

2. Тег h1 должен быть уникальным

3. Тег h1 должен содержать поисковый запрос, соответствующий названию товара или раздела каталога

4. Тег h1 должен быть информативным

5. Тег h1 не должен превышать более 7-8 слов

Правила заполнения тега KEYWORDS

Как правильно заполнить тег keywords?

1. Мета-тег keywords должен содержать ключевые запросы

2. Мета-тег keywords может содержать тематические слова и синонимы

3. Мета-тег keywords лучше формировать из существительных

4. Мета-тег keywords не должен содержать никаких знаков пунктуации, кроме запятой

К чему приводит неправильное формирование SEO-тегов?

Где брать ключевые слова для заполнения SEO-тегов?

Как автоматизировать заполнение тегов?

Шаблоны для автоматизации тегов

Программы для автоматизации формирования SEO-тегов

Зачем нужны заголовки H1 — H6

Иерархия заголовков на странице

Как заголовки в тексте влияют на продвижение сайтов?

Правила, которые нужно соблюдать при написании Н1

Как прописывать ключевые слова в Н1?

Употребление заголовков Н1 и Тitle

Сколько раз можно прописать заголовок (тег) Н1 на странице?

Как составить «цепляющий» заголовок?

Правила оформления заголовков Н2 — Н6

Способы: как сделать заголовок Н1 — Н6 в CMS ?

Зачем нужны заголовки

Для людей 🧑‍🤝‍🧑

Для роботов 🤖

Какие бывают

Иерархия заголовков

Почему заголовки важны для SEO в 2022

Кейс №1: Рост кликов на 4,5% после изменения структуры заголовков

Кейс №2: рост SEO-трафика на 62% после указания корректного Н1

Рекомендации Гугла

Чек-лист, как использовать заголовки

Чего не нужно делать

Вывод

Заголовки и их назначение

Использование заголовочных файлов стандартной библиотеки

Написание собственных заголовочных файлов

Включение заголовочного файла в соответствующий исходный файл

Поиск и устранение проблем

Угловые скобки и двойные кавычки

Почему у iostream нет расширения .h?

Включение заголовочных файлов из других каталогов

Заголовочные файлы могут включать другие заголовочные файлы

Порядок #include заголовочных файлов

Рекомендации по использованию заголовочных файлов

Теги

Проверить h1 страницы

Разница в использовании h1, h2, h3, h4, h5, h6 в HTML5 и HTML4

Один h1 на странице (версия HTML4)

Заголовки h1—h6 в HTML5

Пример вёрстки HTML5

Оптимизация структуры заголовков и подзаголовков веб-страницы

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

Эксперимент 1: «Оптимальное количество h1»

Почему у `iostream` нет расширения `.h`?

Порядок `#include` заголовочных файлов

Проверить `h1` страницы

Разница в использовании `h1`, `h2`, `h3`, `h4`, `h5`, `h6` в HTML5 и HTML4

Один `h1` на странице (версия HTML4)

Заголовки `h1`—`h6` в HTML5

Эксперимент 1: «Оптимальное количество `h1`»

Эксперимент 2: «Есть ли толк от `h3`»

Можно ли внутри тега `h` использовать другие теги, например, `img`, `a`?

Должен ли `title` отличаться от `h1`?

Нужно ли заголовки боковых блоков брать в `h`?