Как составить мета теги и для чего они нужны?

Как составить метатеги и заголовки HTML

Содержание

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

Сниппет поисковой выдачи
Рис. 1. Сниппет поисковой выдачи.

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

Заполнение мета тегов title и description является обязательным и составляет основу продвижения сайта по позициям и трафику.

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

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

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

Пример составления метатегов
Рис. 2. Ключевые фразы для составления метатегов.

Учтём, что при составлении метатегов из всех видов частотностей* – общей, точной, и с фиксированной словоформой (столбцы 3, 4 и 5  соответственно на рис. 2) – для составления метатегов нас интересует именно точная частотность.

*Примечание: частотность поисковых фраз определена с помощью сервиса Be1.ru.

Мета тег title

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

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

Оценка длины title в плагине Yoast
Рис. 3. Плагин Yoast в CMS WordPress подсвечивает зеленым цветом тег title в диапазоне длин от 44 до 64 символов с пробелами.

В нашем случае самыми частотными фразами являются:

  • «купить металл»;
  • «металлобаза в Москве»;
  • «купить металл в Москве».

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

Для этих целей используются вхождения ключевых слов. Вхождения делятся на:

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

Прямое вхождение ключевой фразы
Рис. 4. Пример прямого вхождения ключевой фразы в title.

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

Разбавленное вхождение ключевой фразы
Рис. 5. Пример разбавленного вхождения ключевой фразы в title.

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

Неточное вхождение ключевой фразы
Рис. 6. Пример неточного вхождения ключевой фразы в title.

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

Обратное вхождение ключевой фразы
Рис. 7. Пример обратного вхождения ключевой фразы в title.

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

Купить металл в Москве — металлобаза «Профи-Сталь»

Отметим, что точки в конце заголовка title не ставятся. А длинное тире делает из обратного вхождения «в Москве металлобаза» одновременно и разбавленное вхождение.

В итоге при составлении title у нас получилось:

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

*Примечание: длина текста определена с помощью сервиса Istio.com.

Мета тег description

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

  • «металлопрокат в Москве»;
  • «металлопрокат в Москве цены»;
  • «металлопрокат по низким ценам».
Ключевые фразы для мета тега description
Рис. 8. Ключевые фразы для составления description выделены красной рамкой.

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

Отображение мета тега description в выдаче
Рис. 9. Отображение описания страницы сайта в сниппете поисковой выдачи Яндекс.

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

Описание страницы в HTML-коде
Рис. 10. Описание страницы description в HTML-коде, заданное разработчиком.

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

Сниппет выдачи в Google
Рис. 11. Отображение описания страницы сайта в сниппете поисковой выдачи Google.

В приведенном примере на рис. 9 суммарное описание страницы, отображаемое в сниппете, составляет 298 символов. Причем все эти символы разбиты на три предложения, и подтянуты из текста страницы абсолютно случайно. Нечто подобное можно заметить и на рис. 11 – в описание поместилось всего 133 символа.

При этом содержание сниппетов и в Яндексе, и в Google достаточно сильно отличается от того, что указано в мета теге description на рис. 10.

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

  • Специалист по разработке сайтов Джон Дакетт и по совместительству автор мирового компьютерного бестселлера «HTML and CSS: Design and Build Websites», рекомендует составлять мета тег description длиной не более 155 символов.
  • Известный SEO-специалист Йост де Валк считает длину описания оптимальной в пределах от 106 до 142 символов.
Мета теги title и description
Рис. 12. Плагин Yoast в CMS WordPress подсвечивает зеленым цветом тег description в диапазоне длин от 106 до 142 символов с пробелами.

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

А теперь, резюмируя всё вышесказанное, составим наш мета тег description:

Металлопрокат в Москве по низким ценам. Арматура, швеллера и трубы оптом и в розницу. Доставка по РФ. Звоните по телефону +7 495 000 00 00.

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

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

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

Заголовок h1

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

Правила составления h1

При проведении SEO-оптимизации страниц необходимо придерживаться следующих правил по составлению заголовка h1:

  • h1 не должен дублировать title;
  • Только один заголовок h1 должен быть на странице;
  • h1 не должен превышать 60 символов;
  • Фраза, входящая в заголовок h1 должна быть самой частотной после фраз, использованных в title и description.
  • Заголовки h1, расположенные на разных страницах, не должны повторяться в пределах одного сайта.

Заголовки h2 — h6

Применяются для разделения текста по смыслу. Заголовок h2 является вложенным для h3, а h3, в свою очередь, для h4, и так далее. На практике, в текстах, разрабатываемых для сайтов, заголовки h4 — h6 применяются крайне редко.

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

Заголовки h2 - h6
Рис. 13. Заголовки h2 — h6.

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

Copyrighted Image

Кнопка скроллинга