Мета-теги – это кусочки кода, которые рассказывают что-то важное о вашей странице. Поисковики, например, из них узнают, как показывать ваш сайт в выдаче. А браузеры – как вообще отображать страницу. Метатеги есть у каждой страницы, но увидеть их можно только в HTML-коде. Давайте разберёмся, какие теги важны для вашего SEO.
Мета-тег title
Это заголовок вашего блока, который поисковики покажут в выдаче.
Правда, Google иногда может взять не title, а что-то другое. Почему это происходит, не всегда понятно.
Важность для SEO-продвижения
От них зависит, кликнет ли пользователь на ссылку или нет. За долю секунды он решает, решит ли этот сайт его проблему. Качественный, внятный заголовок привлечёт больше кликов, чем набор слов.
Советы по заполнению мета-тега title
- для каждой страницы прописывайте отдельный title;
- используйте короткую, но ёмкую фразу;
- избегайте размытых и общих понятий;
- начинайте предложение с большой буквы;
- продумайте не кликбейтный, но достойный клика заголовок;
- учитывайте, что пользователь хочет получить по конкретному запросу;
- добавляйте ключевики только там, где это уместно;
- не расписывайте больше 60 символов.
Как добавить мета-тег
Просто вставьте код <title>Ваше название страницы.</title> в секцию <head>. Если ваш сайт построен на WordPress, воспользуйтесь плагином для SEO. Там обычно есть отдельное поле для title.
Основные ошибки title
- слишком длинный или короткий;
- мета-тег не заполнен;
- их сразу несколько;
- один title на несколько страниц.
Проверить мета-тег можно через множество сервисов. Если у вас нет ни одного на примете, просто погуглите. Функционал у них примерно одинаковый. И решите проблемы, если они найдутся. Короткие title – расширить, длинные – сократить, из многих выбрать один, из общего сделать индивидуальные.
Мета-тег description
Это краткое описание содержания страницы. Поисковики часто берут его для сниппета и ставят под заголовком.
Но не всегда. Как и с title, у Google и Яндекс может быть своё мнение на то, что будет полезным для пользователя. В этом случае, в description прописано только «На данной странице представлены услуги компании Олпрайм». Яндекс взял описание и добавил релевантные фразы из текста. А Google решил не показывать description.
Важность для SEO
Description не влияет на ранжирование прямо. Но на описание пользователь смотрит, если ему понравился заголовок. Сможете заинтересовать его и убедить, что у вас есть то, что он ищет – получите посетителя. Рекомендации здесь такие же, как и для title – краткость, информативность, без кликбейта, уместные ключевики. Но рекомендуемая длина – до 160 символов.
Как добавить мета-тег description?
Вставьте этот код в раздел <head>: <meta name="description"content="Интересное и занимательное описание будет тут."> Любители WordPress найдут специальное окошко под описание в расширениях.
Ошибки
Они совпадают с ошибками title, найти и решить их можно так же. Те же сервисы, те же решения. Вам даже не придётся два раза нажимать на кнопку проанализировать, отчёт выйдет сразу и с description, и с title.
Мета-тег robots
Это свод правил для поисковых роботов, что они могут и не могут делать на сайте. Прописывается он также в разделе <head>: <meta name=”robots” content="index, follow">
Вы можете использовать четыре значения:
- index – проиндексировать страницу;
- noindex – не индексировать;
- follow – просматривать ссылки на странице и оценивать их качество;
- nofollow – не обращать внимание на ссылки.
Можно совмещать эти пары или использовать код <meta name=”robots”content="none"> - он покажет роботам, что они могут всё пропарсить. А ещё учтите, что Google считает атрибут nofollow не правилом, а рекомендацией.
Важность для SEO
Если вы неправильно выберете атрибуты, роботы могут показать то, что вы хотели скрыть, и занизить ваш рейтинг из-за некачественных ссылок. И вместо триумфальной первой строчки выдачи вы получите третью-четвёртую страницу. Или бан.
Советы
- используйте мета-тег robots только если хотите выставить какие-то ограничения;
- не добавляйте мета-тег в файл robots.txt.
Что это за файл и как с ним работать, читайте в нашем другом разборе. Почитайте и возвращайтесь обратно, мы ещё не закончили.
Частые ошибки
- Страницы с атрибутом noindex заблокированы от просмотра через robots.txt. Google не может следовать запрету, который не видит. Так что в поиск проходят неожиданные страницы.
- Злоупотребление noindex. Google не увидит – Google никому не покажет. А вы не получите никакой трафик.
- Неуместное добавление nofollow. Вы ссылаетесь на нормальные ресурсы? Так не лишайте себя дополнительных плюсиков в рейтинге поисковиков. И не забирайте полезные плюсики у этих ресурсов.
Здесь для проверки, всё ли нормально, можно пойти в Google Search Console. Зайдите в Отчёт об индексировании (в английской версии Coverage). И пройдитесь по ошибкам и предупреждениям.
Мета-тег viewport
Он устанавливает видимую часть страницы. То есть объясняет браузеру, как показывать сайт на экранах с разной диагональю – десктопах, планшетах, смартфонах.
Как это связано с SEO?
Поисковики видят мета-тег viewport и понимают, что сайт ваш будет хорошо выглядеть на мобилках. Это преимущество, знак качества, поэтому вас нужно продвинуть поближе к пользователю. А если тега нет, и со смартфона вдруг открывается десктопная версия, пользователям это не понравится. Вы привлечёте их крутыми title и description, они зайдут на сайт. И сразу уйдут из-за плохой вёрстки. Поисковики считают их поведение, решат, что сайт у вас так себе. И что он точно недостоин показов в топе. Не самый приятный сценарий. Лучше всё-таки потратить время на прописывание мета-тега. Но если что, одного viewport недостаточно. Нужно ещё проработать полноценный адаптивный дизайн, чтобы всё выглядело идеально.
Как добавить тег?
Идёте в знакомый раздел <head> и добавляете туда строчку: <metaname="viewport" content="width=device-width, initial-scale=1.0">
Атрибут может быть и другим, но это самый распространённый вариант.
Советы
- ставьте этот мета-тег на все страницы;
- если не разбираетесь, оставьте тег в стандартном виде.
Как проверить сайт?
Через ту же Google Search Console. Теперь идите в Отчёт «Удобство просмотра на мобильных устройствах» (или Mobile Usability report) или на отдельную страницу для проверки мобильной версии. Ищите строчки с предупреждением «Viewport не установлен» и исправляйте эту ошибку. Правда, тег не решит проблемы с CSS-стилями, которые были написаны для другой ширины.
Мета-тег charset
Он относится к кодировке страницы, то есть говорит браузеру, как показывать текст. Есть сотни наборов символов, но вам, скорее всего, понадобятся две:
- UTF-8 – Юникод, универсальная кодировка.
- ISO-8859–1 – латинский алфавит.
При чём тут SEO?
Заходит к вам пользователь на сайт. А там вместо нормального текста – какой-то забор из непонятных символов:
Что сделает даже умный и неленивый пользователь? Закроет вкладку. UX-негативный, сайт бесполезный, поисковики вас задвигают куда подальше. Ну, или проблема не настолько масштабна. Просто некоторые знаки вдруг отображаются не так. Например, на месте двоеточия – буква Ё. Не самый популярный знак, текст прочитать легко. Но всё равно как-то смазывает впечатление. Конечно, чтобы сильно подкосить трафик на ваш сайт, нужно, чтобы ущерб тексту был посерьёзнее. Но лучше не допускать даже небольших помарок, потому что пользователи не прощают даже их.
Как добавить мета-тег charset
Да, мы всё ещё в разделе <head>. Здесь код зависит от того, какую версию HTML вы используете. Для HTML5 используйте этот: <meta charset=UTF-8">
А для 4-го и меньше этот: <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
Если вы не знаете версию, посмотрите, есть ли в исходном коде <!doctype html>.
Есть – берите первый код. Нет – второй.
Советы:
- добавляйте на все страницы и этот тег, чтобы браузерам не пришлось угадывать кодировку (спойлер: угадайка часто заканчивается кракозябрами);
- используйте Юникод везде, где можно, его поддерживают все системы;
- не перепутайте код из предыдущего пункта.
Мета-тег refresh
Он говорит браузеру, что пользователя нужно перенаправить на другой сайт через определённый временной промежуток.
Важно для SEO?
Конечно. Только не в том смысле, как другие. Этот тег лучше НЕ использовать. Хотя поисковики его понимают и не наказывают вас за добавление. Но refresh поддерживают не все браузеры. Он запутывает пользователя и напрягает системы безопасности. Да и загрузка нужной страницы занимает слишком много времени (почему скорость важна, мы объясняли здесь). А ещё они ненадёжны.
Советы
- используйте мета-тег refresh только в самых крайних случаях;
- в остальных делайте 301 редирект
Как добавлять этот тег (если уж пришлось)
В раздел <head> добавьте ещё одну строчку: <meta http-equiv="refresh"content="5;url="https://example.com/">
Цифра – количество секунд, задержка перед переходом на нужный сайт. Адрес – собственно этот сайт.
Что здесь может пойти не так
Сама установка мета-тега – это плохая идея. Уберите его с сайта как можно скорее и замените на нормальный редирект. Refresh – это даже не костыль, а грабли с привязанным к ним топором. Найдите и выбросьте этот мета-тег со всех страниц.
Мета-тег keywords
Наверное, это классический тег для SEO-продвижения. Но у него есть одна проблема. Он уже лет 10 как не нужен. Google перестал использовать ключевые слова из тега в 2009 году. Яндекс как бы ещё поддерживает, но учитывает редко. Только когда запрос полностью совпадает с ними. Так что не заморачивайтесь с проставлением ключевых слов. Потратьте лучше это время на один из полезных метатегов.
Подытожим
Разобраться с мета-тегами не так уж и сложно. Проставьте первые шесть из нашего списка – и защитите ваш сайт от крупных SEO-катастроф. Ну или закажите оптимизацию в Olprime. Мы знаем, как правильно заполнять мета-теги. И не только. Так что и продвинем ваш сайт, и убедимся, что он будет стабильно работать, радовать поисковики своим качеством. Без костылей и устаревших решений.
