Как сделать метатеги

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

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

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

Значение width=device-width адаптирует ширину окна просмотра к экрану устройства. Значение initial-scale=1 позволяет обеспечить соотношение 1:1 между пикселями CSS и независимыми пикселями устройства.

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

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

Когда речь заходит о мета-тегах и мета-данных, нередко возникает путаница — начинающие специалисты оптимизируют все содержимое в рамках тега HEAD с элементом META (или вообще ничего здесь не оптимизируют). Давайте разберемся, какие мета-данные действительно важны для SEO-оптимизации, а какие можно обойти вниманием.

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

Мета-данные располагаются в разделе HEAD наряду со скриптами, стилями и линками.

Широкое применение получили три группы мета-тегов:

Для маркетологов, владельцев площадок, SEO-специалистов — тех, кто занимается поисковой оптимизацией сайтов и не имеет отношения к профессиональной разработке — важно запомнить и учитывать только атрибут NAME и теги title, description, robots, keywords, viewport. Если же вы хотите углубиться в мета-данные, начните с обзорной статьи на Википедии.

Мета-теги для SEO

Title

Title — самый важный тег для SEO. Заполняйте его для всех страниц сайта!

Информация из title учитывается поисковыми системами при определении релевантности документа. На странице она не выводится, но всегда отражается в результатах поиска, а также в качестве заголовка в браузере — в этом принципиальное отличие от description (о нем мы расскажем ниже), информация из которого выводится на усмотрение поисковика.

Синтаксис тега title:

Отображаемая длина title (символов с пробелами):

Длина заголовка title ограничений не имеет, но с точки зрения SEO важно, чтобы в первых 45-50 символах была законченная мысль. Это позволит пользователям из поиска Яндекса/Google без проблем понимать, о чем страница.

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

Description

Description — это мета-описание страницы. Для SEO этот тег один из ключевых.

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

В итоге Яндекс перестал формировать описания только на основе description — теперь учитывается весь контент страницы.

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

Но это вовсе не означает, что description утратил свою значимость для SEO. Роботы Яндекса и Google по-прежнему сканируют содержимое description и учитывают его при определении релевантности документа.

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

Какова длина мета-тега description

В руководствах для вебмастеров Яндекса и Google вы не найдете ни единого слова по поводу длины мета-описаний. Более того, отображаемая длина описаний в сниппетах постоянно меняется: например, в 2017 году Google расширил ее до целых 300 символов, а в 2018 году — укоротил до 160.

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

Состоянием на начало 2020 года отображаемая длина описания сниппета в результатах поиска (в символах с пробелами):

Google: десктопный поиск — 135-175; мобильный поиск — 100-120. Отслеживать среднюю длину title и description в Google (десктоп) можно в сервисе RankRanger — сейчас она составляет 50,88 и 169,38 символов соответственно;

Чтобы сделать сниппеты информативными, лучше самую важную информацию добавлять в первые 100-120 символах мета-тега description, а не 160-170 — как принято считать.

Фактическая длина description может превышать и 300, и 500 символов — но нет смысла тратить ресурсы на увеличение мета-описаний, поскольку пользователи все равно не увидят эту информацию (поисковики же могут воспринять ее как спам). Лучше направьте усилия на SEO-оптимизацию контента и повышение его качества.

Title и description должны выгодно выделять ваш сайт на фоне конкурентов. Узнать, какие мета-теги используют конкуренты, можно в один клик с помощью специального инструмента. Первые 500 запросов — бесплатно! Как пользоваться инструментом — с советами и примерами — мы описали в гайде.

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

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

Больше рекомендаций по заполнению dеscription и управлению сниппетом вы найдете в этом выпуске нашей рассылки.

Robots

С помощью этого мета-тега можно разрешать или запрещать поисковым роботам индексировать страницы и переходить по размещенным ссылкам.

Мета-тег robots может принимать такие значения (их понимает и Яндекс, и Google):

index (или noindex) — разрешена (запрещена) индексация страницы;
follow (или nofollow) — разрешена (запрещена) индексация ссылок (о применении noindex и nofollow читайте в нашей статье);
all — аналог одновременного использования index и follow;
none — аналог одновременного использования noindex и nofollow;
noarchive — в результатах поиска не будет выводиться ссылка на сохраненную в кэше копию.

Кроме того, есть значения (директивы), которые понимают только отдельные поисковики. Например, только Google поддерживает такие директивы:

nosnippet — запрет показа описания страницы в результатах поиска;
max-snippet:[number] — указание максимальной длины описания в сниппете;
max-image-preview:[setting] — указание максимального размера картинок, которые выводятся в результатах поиска для данной страницы;
max-video-preview:[number] — ограничение по длительности видео, которое выводится в результатах поиска (не более [number] секунд);
notranslate — запрет вывода опции, предлагающей перевести страницу в результатах поиска;
noimageindex — запрет индексации изображений на странице;
unavailable_after: [date/time] — запрет показа страницы в результатах поиска после указанной даты и времени.

Подробно о директивах Google читайте в спецификации для разработчиков.

noyaca — запрет использования автоматически сформированного описания;
index | follow | archive — отмена соответствующих запрещающих директив.

Подробно о директивах Яндекса читайте в справке.

Синтаксис мета-тега robots такой:

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

Значения мета-тега robots понимают все поисковые системы. Также можно задать правила индексирования только для:

Google — в этом случае используется мета-тег googlebot вместо robots (значения можно задавать те же);
Яндекс — вместо robots указывается yandex.

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

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

Keywords

На заре развития поисковых систем этот мета-тег играл важную роль в ранжировании. Интересно, что Яндекс до сих пор учитывает содержимое этого мета-тега при определении соответствия страницы поисковым запросам, хотя по факту влияния на позиции keywords не оказывает.

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

Если вы решили заполнять keywords, учитывайте синтаксис:

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

Viewport

Этот мета-тег стал особенно актуальным после начала учета поисковиками мобильной адаптации в качестве фактора ранжирования. В обычной практике SEO-специалисту вряд ли придется прописывать этот мета-тег — это задача разработчиков шаблона. Но знать о его существовании все же нужно.

Итак, если сайт адаптирован под просмотр на мобильных, в разделе HEAD будет прописан мета-тег viewport такого вида:

Здесь значение device-width атрибута width дает команду браузеру подогнать ширину окна под ширину экрана устройства. Значение 1 атрибута initial-scale запрещает масштабирование окна (например, при повороте экрана).

Мета-теги для разметки Open Graph

Эта разметка важна для повышения привлекательности контента при расшаривании его в соцсетях. Например, так может выглядеть ссылка в Facebook на страницу без Open Graph разметки:

А вот уже расшаренная ссылка на страницу с Open Graph:

Open Graph поддерживают все ведущие соцсети — Facebook, ВК, Twitter, Pinterest и проч.

Вот фрагмент кода с Open Graph:

Поробно о синтаксиске и правилах составления этой разметки читайте в нашем гайде.

H1-H6 — полезные для SEO теги

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

H1-H6 — это теги логической структуры документа. На каждой странице обязательно должен быть один заголовок, заключенный в тег H1. Подзаголовки заключаются в теги H2-H6 и добавляются на страницу опционально (если того требует логика построения документа и изложения).

Заголовок второго уровня

Заголовок третьего уровня

При расстановке тегов H1-H6 обязательно должна соблюдаться очередность: например, после H1 идет только H2, а после H2 — только H3.

Часто у начинающих SEO-специалистов возникает вопрос: title и H1 — это одно и то же? Нет — тег title прописывается в разделе HEAD, а не BODY, и именно его используют роботы при формировании сниппета. Вместе с тем текст, заключенный в теги title и H1, обычно частично (реже — полностью) дублируется.

Проверьте все мета-теги на сайте

Для грамотной технической оптимизации сайта не нужно лезть в дебри мета-данных. Достаточно знать базовые для SEO мета-теги — description, robots, keywords (опционально), мета-теги для разметки Open Graph, теги title, h1-h6, а также знать о теге viewport. В 99% случаев это исчерпывающий список SEO-тегов.

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

Помимо проверки корректности заполнения мета-тегов, специалист проанализирует:

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

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

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

META-теги имеют два возможных атрибута

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

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

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

Функции мета-тегов

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

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

Группы метатегов

Группа значений атрибута NAME

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

index — страница должна быть проиндексирована;
noindex — страница не индексируется;
follow — гиперссылки на странице учитываются;
nofollow — гиперссылки на странице не учитываются
all — включает значения index и follow, включен по умолчанию;
none — включает значения noindex и nofollow.

Content-Type определяет тип документа и его кодировку.

В HTML5 указание кодировки упрощено:

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

Content-Language указывает язык документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

В HTML5 указание языка упрощено:

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

Пример HTML:

Задачи

Итоговое задание 13

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Ключевые слова

С помощью одинарного тега задайте ключевые слова: "HTML,CSS,JavaScript" для текущей веб-страницы.

Индексация веб-страницы

С помощью одинарного тега разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.

Автоматическая перезагрузка страницы

С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.

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

Итак, сегодня вы узнаете о том, что такое мета-теги в SEO — оптимизации, для чего они нужны, как правильно заполнить мета теги Description и Keywords, а также — тег Title. Поехали.

Описание мета тегов

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

Мы с вами их видеть не можем, а все потому, что нам они совершенно не нужны.

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

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

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

Все это было, разумеется, нечестно, и являлось прямым обманом поисковиков. Поэтому те дикие времена давно минули, Яндекс и Гугл стали умнее, разборчивее и перестали уделять мета тегам столько внимания. Теперь за заполнение метаописания страницы ключевыми словами, на ней не содержащимися, можно попасть в бан. Более того, считается, что влияние мета тегов вообще стремится к нулю. Зачем их в таком случае вообще прописывать? Затем, что влияние это пока что нулю не равно. Давайте рассмотрим, как в наше непростое для оптимизаторов время работают мета теги.

На что влияют мета теги?

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

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

Вот здесь он пишет об этом, почитайте.

Кстати, про Description на этой же странице сказано, что и Яндекс использует его при конструировании сниппетов.

Говоря о метатегах, нельзя не коснуться тега title, который не относится к метаописанию, а является обычным HTML-тегом. Он также находится в заголовке страницы. Вот этот тег чрезвычайно важен при продвижении. Продвигать страницу с незаполненным или заполненным неправильно тайтлом — это совершенно бесполезное занятие. В индексе ее просто не будет. Именно Title берется поисковиками в качестве заголовка в выдаче.

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

Как прописать мета теги

Как же их правильно заполнять? Вот некоторые правила, которые нужно соблюдать оптимизатору.

Стоит знать о длине Description, Keywords и Title. Хотя на этот счет мнения также несколько разнятся, но стоит придерживаться следующих соотношений. В выдачу попадают примерно 50-80 знаков из тега Title. Длина Description, которая учитывается поисковыми машинами — 160-200 символов. По поводу Keywords считается, что его максимальная длина — 1000 символов.

Наполнение ключевыми словами. Главное — не переоптимизировать. По одному точному вхождению продвигаемого запроса в Description, Keywords и Title. Тот же запрос в Title — как можно ближе к началу. Название статьи, заключенное в H1 = содержимое Title. По крайней мере, я так делаю.

Хотя часто говорится, что туда стоит включить еще несколько сопутствующих НЧ-запросов по убыванию частотности.

А как вы составляете Title?

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

Тег Title и мета тег Keywords должны быть уникальными для каждой страницы. Насчет Description — точно такое же условие. Хотя за повторяющееся описание бан вы вряд ли заработаете, но в выдаче ваши страницы будут понижены.

О вреде дублирования Description

Тег Title, кроме всего прочего, должен использоваться только один раз на странице — опять-таки, надо следить за плагинами.

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

Частая ошибка — неочевидный запрет индексации Яндексом

Читайте также: