Какие метатеги 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 и иные поисковые системы выводят ограниченное число символов в результатах поиска. Давайте рассмотрим следующий пример:

Какие метатеги HTML необходимо добавлять на веб-сайт и что они дают?
Это моя статья, расположенная на шестой позиции в поисковой выдаче 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 .

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *