Какие метатеги HTML нужно добавлять на сайт и что они дают?
Мета теги для сайта помогают роботам Google понимать контент ресурса. Наверное, вы уже слышали, что метатеги используются в SEO. Это определение дает хорошее представление о том, что такое современные метатеги.
Они дополняют читаемую человеком информацию на веб-страницах понятной компьютеру метаинформацией. Таким образом, контент сайта может быть включен во взаимодействие между людьми, веб-приложениями и компьютерами в целом.
Да, это выходит за рамки SEO.
Поисковые системы массово используют метатеги. Но на сегодняшний день существуют специализированные метатеги и для социальных сетей, таких как Facebook, Twitter и LinkedIn.
Также есть метатеги, которые используются для более подробного описания контента. Широко распространенная система описания контента предоставляется schema.org.
Ниже приводится список метатегов, которые нужно добавить на сайт, чтобы успешно работать в Сети:
- Title и description;
- Мета теги для html сайта, связанные с Google;
- Теги верификации;
- Социальные метатеги;
- Schema.org для описания контента.
Title и description
Каждая страница сайта должна содержать метатеги title и description. Поместите их в раздел <head> HTML-страницы.
Например:
<!DOCTYPE html>
<html>
<head>
<!—- Тайтл страницы заключается в тег <title> -->
<title>Это тайтл вашей страницы</title>
<!—Описание страницы определяется в мета формате -->
<meta name="description" content="Это описание вашей страницы">
</head>
<body>
<!—Содержимое страницы... -->
</body>
</html><title> не отображается в формате <meta> тегов, но о нем практически всегда говорят, как о метатеге.
Что делает title?
Он задает читаемый человеком заголовок - страницы. title отображается в верхней части окна браузера на открытой вкладке.
Кроме этого title играет важную роль в SEO. Он определяет, о чем ваша страница, поэтому поисковые системы в значительной степени полагаются на эту информацию, и данный метатег является ключевой составляющей ранжирования страницы.
title отображается в качестве заголовка страницы в результатах поиска. Важно подбирать заголовки продумано, так как они несут важную информацию о содержании страницы для людей и поисковых систем.
Тег также используется в качестве «резервного» механизма для социальных сетей, когда соответствующий социальный метатег недоступен.
Для чего используется description?
Мета тег description для сайта не влияет на ранжирование страниц поисковыми системами. Его главное предназначение заключается в отображении описания страниц в поисковой выдаче. Description помогает привлечь внимание пользователей к контенту.
Оно также может использоваться в качестве описания на страницах социальных сетей.
Составляйте title и описания так, чтобы подчеркнуть, какую ценную информацию вы предоставляете своим посетителям. Делайте их простыми, понятными и информативными.
Длина заголовка и описания
Google и другие поисковые системы отображают ограниченное количество символов в результатах поиска. Давайте рассмотрим следующий пример:
Это моя статья, расположенная на шестой позиции в поисковой выдаче Google.
Как посмотреть мета теги сайта? На рисунке показано, как заголовок и описание будут отображаться в поисковой выдаче. Если вы зададите эти теги правильно, то получите больше переходов из поисковых систем.
Не существует какого-то одного магического числа, которое следует использовать для длины заголовков или описаний, так как их размер зависит от формы букв. Вы можете, например, использовать такие тонкие символы, “i” и “o”.
Google обычно отображает 50-60 символов из заголовка и около 150-160 из описания. Остальная часть информации, содержащейся в этих тегах, не будет отображаться на странице результатов поиска.
Если вы хотите быть уверенным в том, что правильно подобрали длину, можете использовать онлайн инструмент оптимизации сниппетов от Google.
Другие метатеги
Есть еще несколько метатегов, которые нужно добавлять на все веб-страницы в разделе <head>:
charset определяет кодировку символов HTML-документа. Браузер использует эту информацию, чтобы правильно отобразить страницу.
http-viewport задает видимую пользователю область веб-страницы. Этот метатег был введен в адаптивном веб-дизайне. Он позволяет контролировать начальные размеры окна просмотра и их изменение при загрузке страницы.
Давайте расширим наш предыдущий пример:
<!DOCTYPE html>
<html>
<head>
<!—Кодировка символов UTF8 -->
<meta charset="utf-8">
<!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!—Тайтл страницы заключается в тег <title> -->
<title>Это тайтл вашей страницы</title>
<!—Описание страницы определяется в мета-формате -->
<meta name="description" content="Это описание вашей страницы">
</head>
<body>
<!—Содержимое страницы... -->
</body>
</html>Существуют и другие менее используемые мета теги для сайта интернет магазина. Наиболее важные из них: robots, google и http-equiv. Мы должны упомянуть еще одну важную часть метаинформации, хотя она не задается в виде тега. Атрибут изображений alt описывает содержимое картинок на сайте.
alt - это единственный способ продвинуть изображения в поиске. Компьютеры еще не распознают графического содержимого, поэтому мы должны сообщить им, что изображено на картинке. Именно по этой причине атрибут alt является обязательным для всех изображений.
Теги верификации
Блогеры, веб-мастера должны подтвердить право собственности на сайт при использовании онлайн-сервисов. Вы обязаны делать это, когда:
- данные вашего сайта используются сервисом;
- идентификация вашего сайта является частью идентификации сервиса.
Позвольте мне объяснить.
Google Search Console (известный как «инструменты для веб-мастеров») предоставляет информацию о статистике вашего сайта. Также с его помощью можно повлиять на то, как Google видит ваш сайт. Но для этого вы должны подтвердить, что сайт является вашим.
Примером второго сценария является Pinterest. Вы можете отслеживать взаимодействия с вашим сайтом на Pinterest, а также встроить на сайт свою ленту записей Pinterest. Чтобы сделать это, нужно подтвердить, что вы представляете конкретный сайт.
Самый простой вариант доказать право собственности на сайт - это метатег. Коды верификации предоставляются Google Search Console, Pinterest и т.д.
Добавим в наш пример использования мета-теги для сайта, код в котором значение поля Content является кодом верификации, предоставляемым Google Search Console:
<!DOCTYPE html>
<html>
<head>
<!—Кодировка символов UTF8 -->
<meta charset="utf-8">
<!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!—Тайтл страницы заключается в тег <title> -->
<title>Это тайтл вашей страницы</title>
<!—Описание страницы определяется в мета-формате -->
<meta name="description" content="Это описание вашей страницы">
<!—Верификация сайта в Google -->
<meta name="google-site-verification" content="59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" />
</head>
<body>
<!—Содержимое страницы... -->
</body>
</html>Социальные метатеги
Эти элементы содержат информацию, которая подхватывается социальными сетями, когда вы копируете ссылку на страницу или нажимаете кнопку «Поделиться» в панели социальных кнопок вашего сайта. Минимальная информация, которую нужно предоставить - это заголовок, мета тег description для сайта и изображение.
Большинство социальных ресурсов поддерживают протокол Open Graph для считывания полезной информации о веб-странице.
Twitter использует свои собственные обозначения, но если они отсутствуют на странице, сервис микроблогов будет использовать данные Open Graph.
Зададим набор тегов Open Graph для Facebook, Google + и LinkedIn. Я также добавил заголовок для Twitter:
<!DOCTYPE html>
<html>
<head>
<!—Кодировка символов UTF8 -->
<meta charset="utf-8">
<!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!—Тайтл страницы заключается в тег <title> -->
<title>Это тайтл вашей страницы</title>
<!—Описание страницы определяется в мета-формате -->
<meta name="description" content="Это описание вашей страницы">
<!—Верификация сайта в Google -->
<meta name="google-site-verification" content="59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" />
<!—Данные Open Graph -->
<meta property="og:title" content="Это тайтл вашей страницы<" />
<meta property="twitter:title" content="Это тайтл вашей страницы<" />
<meta property="og:description" content="Это описание вашей страницы ">
<meta property="og:image" content="http://yourtsite.com/yourimagedir/yourthumbnail.jpg" />
</head>
<body>
<!—Содержимое страницы... -->
</body>
</html>Если у вас возникнут проблемы с метатегами Open Graph, произведите отладку с помощью Open Graph отладчика Facebook.
Schema.org для описания контента
Schema.org предоставляет схемы для структурированных данных в Интернете.
Используйте их для описания статей, записей в блогах, списков товаров, событий, людей и так далее. Таким образом, вы поможете поисковым системам распознать содержимое вашей страницы.
Рассмотрим пример статьи в блоге:
<article itemscope itemtype="http://schema.org/BlogPosting">
<meta itemprop="image" content="http://yoursite.com/image.jpg">
<img src="http://yoursite.com/image.jpg">
<h1 itemprop="name headline">Тайтл статьи</h1>
<p>
<time datetime="date_to_xmlschema" itemprop="datePublished">Apr 4, 2016</time>
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Имя автора статьи</span>
</span>
</p>
<div itemprop="articleBody">
<!—Тело статьи -->
</div>
</article>Используйте атрибут itemscope, чтобы обозначить начало нового объекта schema.org. itemtype определяет тип элемента, начинающегося с itemscope. Используйте атрибут itemprop в пределах открывающегося и закрывающегося тегов элемента с атрибутом itemscope.
Разметка itemprop, которую вы поместите в пределах itemscope, будет определять различные свойства объекта. В нашем примере статьи мы определили свойства мета тега для сайта title, изображения, дату публикации, автора и тело статьи.
Используйте schema.org, и тогда поисковые системы будут лучше понимать, что содержится на страницах вашего сайта. Например, обозначить свои товары, чтобы они были доступны для поиска в Google.
Заключение
Вы получите огромные преимущества, если будете использовать метатеги. Это улучшит ранжирование страниц в поиске и увеличит количество переходов на них из поисковых систем. Улучшит опыт взаимодействия пользователя на различных устройствах. И позволит достичь лучшей интеграции с контент-инструментами.