Мета-теги и атрибуты title, description, Alt и h1: что это такое и как ими пользоваться

Атрибуты Title и Description

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

Мета теги
Что такое мета теги? Мета теги — это специальные теги html, находящиеся в контейнереи предназначены для передачи информации о сайте браузерам и поисковикам.

Какие мета-теги и атрибуты бывают

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

  • title (тайтл) — заголовки страниц;
  • description (дискрипшн) — краткое описание страницы;
  • keywords (кейвордс) — ключевые слова.
Title, Description and Keywords
Важно знать, что многие вебмастера являются противниками использования мета-тега keywords, это якобы заспамливает страницу лишними повторами, при том что сами поисковики отказались от использования ключевых слов из этого тега в ранжировании

К атрибутам относятся Alt и Title картинок:

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

Что такое title? 

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

Title

Рекомендации по составлению тега Title для Яндекс и Google

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

Примеры Title
По правилам HTML – тег title должен быть уникальным для каждой страницы сайта (не должен дублироваться в разных частях кода страницы).

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

Размер title

В идеале тег должен иметь длину не более 70 и не менее 50 зн. с пробелами +/-10 зн. (лично я не рекомендую писать заголовки длиннее 90 зн.). Слишком короткие заголовки будут малоинформативными, а излишне длинные распыляют суть текста и могут быть восприняты поисковой системой как попытка манипуляции, что может повлечь за собой санкции. Также не забываем, что чем больше слов в тайтле, тем меньше “вес” каждого из слов (значимость с точки зрения поисковой системы), поэтому нет смысла писать излишне длинные тексты.

Мета теги. Title

Уникальность тайтла

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

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

Примеры тайтла

Формирование тайтла из ключевых запросов по частотности

В начале тега должны идти самые важные слова и фразы, ближе к концу должны идти наименее важные ключевые слова данной страницы (обычно важность запроса определяют по его месячной частотности в сервисе Яндекс.Вордстат, (так называемая “!истинная !частотность”).

Запросы поисковых систем
Например, для карточек товаров целесообразно начинать тайтл со слов “Купить…, Продажа…”. А для информационных статей более подойдут относительные местоимения: как, что, какой, зачем, почему и т.д

Формирование из ключевых запросов по геозависимым запросам

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

Примеры Title

Отсутствие переспама и информативность

Title не должен быть перенасыщен ключевыми словами и фразами (так называемый “переспам”). Нельзя просто взять и перечислить все ключевые фразы через запятую. В переспамленном виде текст выглядит непривлекательно как для поисковых систем, так и для обычных пользователей. Обычно бывает достаточно пары-тройки основных ключевых запросов для написания корректного и в тоже время оптимизированного под SEO title. 

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

При написании тайтлов не рекомендуется, но не запрещается использовать:

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

Тег title

Цепляющий заголовок

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

Цепляющий заголовок

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

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

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

Title

Title и h1: название страницы и заголовок статьи – в чем разница 

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

Title и H1
В чем отличия между Title и H1

 

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

Tile

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

5 основных правил составления Заголовка H1

  1. Заголовок Н1 можно использовать на странице строго один раз; 
  2. Тематика Н1 пересекается исключительно с тем, о чем идет речь в текстовой части; 
  3. Нельзя допускать переспам ключевых фраз; 
  4. Можно использовать частотный запрос, который не поместился в Title.
  5. Не рекомендуется делать одинаковыми title и h1 – в этом нет какого-то криминала, однако хоть какое-то минимальное различие между ними должно быть.

Примеры отличия title и h1: фото и пояснения

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

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

Отличия между Title и H1 очевидны. При составлении обоих заголовков ориентируйтесь на собранную семантику. Руководствуйтесь правилами:

  • Высокочастотные запросы включайте в начало заголовка Title, разбавляйте их словами и фразами из семантического ядра.
  • Title мотивирует перейти на сайт и совершить действие, Н1 описывает в 4-6 словах всю контентную часть страницы.
  • Длина Title может быть 60-70 символов и более, Н1 лучше делать коротким.
  • Не допускается переспам, перечисление ключевых запросов.
  • Заголовки Title и Н1 должны пересекаться по смыслу, но не полностью совпадать.
  • Перед публикацией страницы посмотрите, как заголовки будут отображаться в сниппете и на странице.

H1, H2 и до H6

Метатег Description: что это такое?

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

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

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

5 правил составления Description

При составлении описания должны соблюдаться следующие правила:

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

Description

Хороший эффект имеют различные цифровые значения: «100% качество, 20% скидка, 3 вещь в подарок, 20 лет гарантии и т.д.». Не менее важна экспертность: «ГОСТы, СНиПы, статистика, рейтинги, ТОП».

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

meta description

Какого размера должен быть Description

В классическом исполнении дескрипшен должен быть составлен из 150-200 символов. Однако если такой объём превышен – это не считается ошибкой. Поисковые системы всё равно индексируют весь блок, поэтому урезать его не имеет смысла.

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

Description

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

Сниппет

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

У некоторых сайтов в поисковой выдаче Google и «Яндекс» иногда появляется не только заголовок и описание, но и дополнительная информация. Выдача конкретного сайта вместе title и description называется «сниппетом».

Пример Snippet
Сниппет (англ. snippet — отрывок, фрагмент) — фрагмент исходного текста или кода программы, применяемый в поисковых системах, текстовых редакторах и средах разработки.

На что влияет сниппет

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

Snippet

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

Как повлияет на то что формируется в сниппете поисковиками

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

Сниппет

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

Отличия выдачи Яндекса и Google которые стоит учесть при написании метатегов

Сниппеты «Яндекса» и «Google» различаются. В Google система чаще всего использует метатеги заголовка и описания. Особенно если они релевантны содержимому страницы. В ином случае система формирует их сама (возьмет отрывки текста из страницы и h1). «Яндекс» же добавляет к сниппету картинку Favicon и показывает чат. 

SEO

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

Alt и Title – атрибуты для картинок: как инструмент оптимизации контента

Для большинства вебмастеров размещение изображений на веб-сайте – процесс простой и привычный, однако существуют возможности, на которые некоторые предпочитают не обращать внимания. К примеру, атрибуты Title и Alt: что это такое, знают многие, но пользуются ими далеко не все. Тем не менее, это важные параметры, которые способны повлиять и на оптимизацию сайта, и на восприятие ресурса посетителями, особенно в случаях, когда скорость интернета не позволяет им посмотреть изображение. Этими атрибутами пользуются не только люди, но и поисковые алгоритмы, и их использование позволит улучшить позиции сайта в рейтинге «поисковиков».

Alt и Title картинок

Что такое Alt и Title для картинок

Атрибут Alt – это описание изображения в теге <img> в виде текста, представляющее собой альтернативный источник информации для пользователей, у которых в браузере отключено отображение картинок на странице. Текст атрибута появляется в том месте, где должно было быть изображение, которое не удалось загрузить. Также данный атрибут считывается роботами поисковых систем в процессе индексации страницы.

Alt картинки

Атрибут title – это текст подсказки в теге <img>, предоставляющий пользователю дополнительную информацию об изображении. Текст картинки отобразится, если пользователь наведет на нее курсор мыши и задержит на несколько секунд.

Как правильно составить атрибут Alt для картинок

  • Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
  • Обязательное условие – использование ключевых запросов.
  • Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
  • Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
  • Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Title И ALT картинки

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

HTML meta tags

Как правильно составлять Title для картинок

  • Атрибут Title должен соответствовать изображению, т.е релевантным. Не следует писать в нем то, что не имеет к картинке никакого отношения. Иначе это оттолкнет пользователей.
  • Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке. Она должна состоять не более чем из 3-5 слов либо содержать до 250 символов.
  • Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое. Поисковым системам, по сути, все равно, что вы укажете в данном атрибуте ключевое слово. Но для пользователей это лишний сигнал о релевантности контента введенному запросу. Главное, чтобы ключи отвечали содержанию страницы и описывали изображение. Не допускайте переспама.
  • Желательно, чтобы title картинки не повторял title страницы, h1, h2 и прочие подзаголовки. Да, добиться полной уникальность иногда сложно, однако разбавляющие слова добавить не так и сложно.
  • Нет разницы, писать текст в теге с маленькой или с большой буквы. Со временем в поле title можно вносить изменения – когда боты переиндексируют страницу, измененные описания учтутся

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

meta tegs

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений.