Z Info

Как правильно составлять мета-теги для сайта?

Мета-теги являются частью 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. Можно поиграться не только с шириной экрана, но и высотой, и дать возможность пользователю самостоятельно увеличивать или уменьшать масштаб.

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