Мета-теги являются частью HTML кода – языка разметки гипертекста (HyperText Markup Language). Их можно увидеть только в коде страницы. Любой посетитель страницы может увидеть их, нажав комбинацию клавиш Ctrl+U.
Большинство мета-тегов для обычного пользователя не имеют никакого значения. Они предназначены для браузеров и поисковых машин, создавая первое общее впечатление о странице. Мета-теги располагаются внутри тега <HEAD>…</HEAD>, и являются служебными элементами страницы сайта. Как и другие теги HTML-страницы, мета-теги имеют свои атрибуты: name, content, property, http-equiv, charset. Последний показывает браузеру, в какой кодировке показывать страницу.
Наиболее важные теги
Title – Тег заголовка HTML страницы.
Тег title — это первый элемент HTML, который определяет вашу веб-страницу для поисковых систем и посетителей. Он поддерживается всеми браузерами, включая Chrome, Firefox, Safari и Explorer. Этот тег очень важен для ранжирования вашей страницы в поисковой системе. Всегда добавляйте тег title в разделе HEAD вашей страницы!
Рекомендации по использованию:
- Используйте в title ключевое слово, желательно в точном вхождении.
- Главное — ключ размещайте в начале заголовка.
- Для каждой страницы сайта делайте уникальный заголовок.
- Оптимальная длина title – 55-64 символа. Точного ограничения по количеству символов нет. Всё зависит от от ширины символов. Google отображает заголовки шириной не более 600 пикселей. Яндекс учтет большую длину, но в заголовок сниппета покажет начало.
- Оптимальный формат заголовка: Основное ключевое слово – Дополнительное ключевое слово | Имя бренда.
На самом деле title не является технически мета-тегом, но его часто считают таковым. Значение этого тега переоценить нельзя, поэтому в этом обзоре он на первом месте.
Тег описания <meta name = «description» content=»Описание страницы»>
Второй по значимости тег с точки зрения поисковой оптимизации. Как правило, поисковые машины показывают содержимое description в сниппете – результатах поиска под тегом title. Доказательств того, что поисковики используют тег description для ранжирования страницы, нет. Однако этот тег оказывает большое влияние на кликабельность в поиске. Поэтому хорошо написанное мета описание — это небольшое объявление с четким призывом к действию.
Рекомендации по использованию:
- Всегда добавляйте тег description в разделе HEAD вашей страницы!
- Пишите призыв к действию, включая основное и дополнительное ключевое слово.
- Используйте цифры и эмодзи в описании – они тоже повышают кликабельность.
- Google отображает около 160 символов. В отдельных случаях Яндекс выдает сниппет длиною до 250 символов, но обычно ограничивается теми же 160-170 символами.
Теги социальных сетей <meta property = «og:… content=»…»>
Для контроля превью, которое создается при публикации ссылки на страницу сайта в соцсетях, компаниея Facebook разрабола стандарт микроразметки Open Graph. Сначала она использовалась только в этой социальной сети. Сегодня её используют все популярные социальные сети.
У атрибута property есть обязательные свойства:
- og:title — заголовок статьи или страницы;
- og:type — тип объекта, это может быть статья, видео, музыка, изображение, книга;
- og:url — URL, по которому доступна указанная каноническая страница;
- og:image — картинка, которая показывается в публикации при репосте.
Кто бы что не говорил, но связь между социальными сетями и поисковой оптимизацией существует. Тот же Google утверждает, что социальные сети не являются фактором ранжирования SEO. Но есть много доказательств того, что социальные сигналы, такие как лайки и репосты, связаны с вашим рейтингом. Все эти совместные действия делают ваш контент более заметным.
Тег Meta Name Robots
Чтобы объяснить пауку поисковой системы, какие страницы вашего сайта надо индексировать, используйте мета-тег для роботов. При этом не стоит забывать, что роботы могут игнорировать этот мета-тег.
Основные значения для поисковых роботов:
— follow — сканер поисковой системы будет следовать по всем ссылкам на этой веб-странице.
— index — сканер поисковой системы проиндексирует всю веб-страницу.
— nofollow — сканер поисковой системы НЕ будет следовать за страницей и любыми ссылками на этой веб-странице.
— noindex — сканер поисковой системы НЕ будет индексировать эту веб-страницу.
Канонический тег <link rel = «canonical» href = «…»>
Канонический мета-тег на самом деле является элементом ссылки. Добавляя его, вы определяете, какой URL является исходным адресом страницы. Если у вас есть страница и с мобильной, и с десктопной версией, поисковики рассматривают их как дублированные версии одной и той же страницы. Ещё один пример – страницы пагинации интернет-магазина. Часто такие страницы идут с одинаковым заголовком и описанием. В этом случае канонический тег — лучший способ устранить дублирующийся контент.
Мета-тег адаптивного дизайна viewport
На разных устройствах размеры области просмотра страницы отличаются. Экран ноутбука много больше, чем экран смартфона. Страница, не адаптированная к маленьким размерам, смотрится невыгодно, а часто просто ломается. Впервые адаптацию к меньшим размерам окна просмотра решила компания Apple, представив для своей Safari iOS тег адаптивного дизайна viewport:
<meta name=»viewport» content= «width=device-width, initial-scale=1.0»>
Значение атрибута content указывает на то, что ширина области просмотра страницы должна быть равна ширине девайса, а уровень масштабирования при первой загрузке страницы равен 1. Можно поиграться не только с шириной экрана, но и высотой, и дать возможность пользователю самостоятельно увеличивать или уменьшать масштаб.
Не стоит применять этот тег в случае, когда ваш сайт не предназначен для просмотра на мобильных устройствах.