Meta name что это: Мета-теги для сайта — что такое мета теги, какие бывают, для чего прописывать ключевые слова в мета-теги

Содержание

Какие метатеги использовать в вебе в 2017 году

Метатеги в контексте веб-страниц — HTML-теги, которые размещаются в разделе <head> веб-страницы. Браузеры интерпретируют их, чтобы правильно отобразить сайт, а поисковые системы используют при выборке информации о странице. Некоторые теги могут влиять на позиции сайта в результатах поиска.

Рассмотрим метатеги, которые стоит использовать в 2017 году. Стандарты взаимодействия развиваются, и теги — вместе с ними. Поэтому те теги, которые здесь не описаны, с большой вероятностью уже бесполезны.

Основные

Определяет кодировку веб-страницы:

<meta charset="utf-8">

Определяет заголовок веб-страницы, который также отображается в результатах поиска Google, Яндекс, Bing и др. Длину заголовка стоит уместить в 70 символов, так как остальное будет отсечено при отображении:

<title>Заголовок страницы</title>

Определяет краткое описание содержания веб-страницы, которое также может быть использовано в выдаче поисковых систем. Длину описания стоит уместить в 150 символов, так как остальное будет отсечено при отображении:

<meta name="description" content="[описание страницы]">

Известен как метатег адаптивного дизайна, потому что описывает, как разметка и контент изменяются в зависимости от размера области просмотра устройства. Атрибут content принимает различные значения, однако указанный выше вариант можно назвать стандартным:

<meta name="viewport" content="width=device-width, initial-scale=1">

Определяет базовый URL-адрес для ссылок на внешние файлы, такие, как CSS, Javascript и изображения. В результате браузер найдёт файл независимо от размещения текущей веб-страницы. Это не самый полезный тег, но если его указать, то объём исходного кода страницы уменьшится, а перенос сайта на другой домен принесёт меньше головной боли разработчику:

<base href="//cdn.example.com/">

Определяет «Имя приложения», которое появляется под иконкой страницы на мобильных устройствах, когда пользователь использует функцию «Добавить на главный экран» в веб-браузере:

<meta name="application-name" content="[имя приложения]">

Взаимодействие с поисковыми системами

Иногда требуется запретить или разрешить роботам поисковых систем обрабатывать ту или иную страницу. Метатег robots определяет политику обработки страницы поисковыми роботами. Вот несколько примеров:

  • <meta name="robots" content="all"/> — разрешено индексировать текст и ссылки на странице, аналогично <meta name="robots" content="index, follow"/>;
  • <meta name="robots" content="noindex"/> — не индексировать текст страницы;
  • <meta name="robots" content="nofollow"/> — не переходить по ссылкам на странице;
  • <meta name="robots" content="none"/> — запрещено индексировать текст и переходить по ссылкам на странице, аналогично <meta name="robots" content="noindex, nofollow"/>
    ;
  • <meta name="robots" content="noarchive"/> — не показывать ссылку на сохраненную копию на странице результатов поиска.

Google

Как и предыдущий тег, определяет политику обработки страницы поисковым роботом, но только для Google:

<meta name="googlebot" content="index,follow">

Проверяет веб-сайт на наличие доступа к панели веб-мастера Google (Google Webmaster Tools):

<meta name="google-site-verification" content="[код верификации]">

Отключает панель поиска ссылок Google:

<meta name="google" content="nositelinkssearchbox">

Запрещает браузеру Google Chrome переводить веб-страницу:

<meta name="google" content="notranslate">

Подробности работы с Google описаны в Справочном центре.

Яндекс

Определяет политику обработки страницы роботом Яндекс:

<meta name="yandex" content="index,follow">

Проверяет веб-сайт на наличие доступа к сервису Яндекс.Вебмастер:

<meta name="yandex-verification" content="[код верификации]">

Подробности работы с Яндекс описаны на странице помощи для веб-мастеров.

Взаимодействие с социальными сетями

Метатеги социальных медиа необязательны, но помогают поделиться ссылкой на веб-страницу в таком виде, чтобы привлечь внимание читателей, увеличить количество лайков и репостов.

Текст адаптируется для поста, картинка создаётся специально под площадку. Причём они могут даже не отображаться в веб-версии сайта.

Open Graph (Facebook, Pinterest, Вконтакте, Одноклассники)

Open Graph — разработанная Facebook разметка, позволяющая настраивать превью страницы, ссылка на которую размещена в социальной сети. Open Graph поддерживают социальные сети вроде Вконтакте, Одноклассники, Google+, Twitter и LinkedIn. Как основную используют Facebook и Pinterest.

Стандартный сниппет выглядит так:

<meta property="og:url" content="[ссылка]">

<meta property="og:type" content="article">

<meta property="og:title" content="[заголовок]">

<meta property="og:description" content="[описание]">

<meta property="og:image" content="[ссылка на изображение]">

<meta property="article:author" content="[ссылка на аккаунт Facebook">

<meta property="og:site_name" content="[название сайта]">

<meta property="article:published_time" content="2014-08-12T00:01:56+00:00">

Facebook поддерживает дополнительные метатеги для изображений и видео.

Для Pinterest в article:author указывается имя автора или название сайта, но это противоречит требованиям Open Graph на Facebook. Для программистов создано интересное решение. В противном случае используйте более выгодный вариант или разметку Schema вместе с Open Graph.

Чтобы запретить пользователям пинить свой контент, используйте следующий код:

<meta name="pinterest" content="nopin" description="[нет!]">

Стандартные метатеги (Twitter)

Twitter поддерживает некоторые элементы Open Graph, но в основном использует стандартные метатеги для определения расшаренного контента. Проверить описание, или карту, как называет его Twitter, можно с помощью валидатора карт.

Вот пример описания:

<meta name="twitter:card" content="описание">

<meta name="twitter:site" content="[@websitetwitter]">

<meta name="twitter:creator" content="[@yourtwitter]">

<meta property="og:url" content="[ссылка]">

<meta property="og:title" content="[заголовок]">

<meta property="og:description" content="[описание]">

<meta property="og:image" content="[ссылка на изображение]">

Примечание twitter:site — ссылка на аккаунт сайта в Twitter, twitter:creator — ссылка на аккаунт автора.

Schema (Google+ и Pinterest)

Разметка Schema — продукт совместной работы крупнейших поисковых систем, преимущественно используемый в Google+. В Pinterest Schema поддерживается как альтернатива Open Graph, но не в полной мере: рекомендуется использовать обе. Разметка Schema громоздкая и менее привлекательная, чем Open Graph, но её словарь описания связанного контента богаче.

Вот сниппет для Google+:

<meta itemscope itemtype="http://schema.org/Article">

<meta itemprop="headline" content="[заголовок]">

<meta itemprop="description" content="[описание]">

<meta itemprop="image" content="[ссылка на изображение]">

Google+ использует Open Graph как резервную разметку, у Pinterest используются дополнительные метатеги Schema, поэтому разумно использовать все три описанные разметки.

Разные полезности

Передача реферальных данных

<meta name="referrer" content="unsafe-url">

При использовании HTTPS реферальные данные по умолчанию не передаются. Это улучшает защиту сайта, но мешает собирать веб-аналитику. С помощью метатега referrer определяется политика передачи реферальных данных. Атрибут content принимает различные значения. unsafe-url, например, указывает, что передаётся полная ссылка на страницу.

Исключение дублированного контента

<link rel="canonical" href="https://example.com/2010/06/9-things-to-do.html">

Если при анализе сайта Google находит две версии одной страницы, каждая из которых имеет свой URL-адрес, будет применён штраф за дублирование контента (duplicate content). Используя canonical, вы говорите поисковикам: «Эй, это наше художественное видение!». Таким образом, штрафных мер не будет.

<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

Ссылка на AMP-версию страницы.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

Ссылка на версию веб-страницы, которая переведена на другой язык. Язык текущей страницы указывается следующим образом:

<html lang="es">

RSS

<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">

С помощью alternate также указывается RSS-версия страницы.

<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

Аналогично на примере канала Atom.

Favicon

<link rel="icon" href="favicon-16.png" type="image/png">

<link rel="icon" href="favicon-32.png" type="image/png">

<link rel="icon" href="favicon-48.png" type="image/png">

<link rel="icon" href="favicon-62.png" type="image/png">

<link rel="icon" href="favicon-192.png" type="image/png">

Ссылки на иконки веб-страницы в нескольких размерах. Проверить правильность описания иконок сайта или сгенерировать новое на основе готового изображения можно на специальных сайтах, таких как realfavicongenerator. net. Обратите внимание, что некоторые новые браузеры требуют иной способ указания этой опции. Например:

Apple Touch
<link rel="apple-touch-icon" href="older-iPhone.png"> // 120px

<link rel="apple-touch-icon" href="iPhone-6-Plus.png">

<link rel="apple-touch-icon" href="iPad-Retina.png">

<link rel="apple-touch-icon" href="iPad-Pro.png">
Windows Metro
<?xml version="1.0" encoding="utf-8"?> 

<browserconfig> 

 <msapplication>

   <tile>

     <square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>

     <square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>

     <square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>

     <wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>

     <TileColor>#2b5797</TileColor>

   </tile>

 </msapplication>

</browserconfig>

Код для Metro, в отличие от предыдущих случаев, требуется сохранить в файл browserconfig. xml в корне сайта.

Предварительная загрузка

Применение метатега link с опцией предварительной загрузки (dns-prefetch, prefetch, preconnect, subresource, prerender и preload) поможет увеличить скорость работы веб-сайта. Они дают знать браузеру, какие ресурсы понадобятся пользователю в будущем, чтобы подготовиться к загрузке в фоновом режиме.

<link rel="dns-prefetch" href="//example.com">

Браузер определяет в фоновом режиме IP-адрес указанного домена и, когда потребуется запросить что-либо с ресурса на этом домене, сэкономит время на выполнении DNS lookup.

<link rel="preconnect" href="https://www.example.com/">

Похож на dns-prefetch, но, кроме запроса DNS, браузер предварительно устанавливает TCP и TLS соединение.

<link rel="prefetch" href="https://www.example.com/image.png">

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

<link rel="subresource" href="styles.css">

Делает то же, что и prefetch, но приоритет у операции высокий. Если ресурс понадобится на текущей странице или в ближайшее время, то разумно использовать subresource. В остальных случаях лучше, конечно, применить prefetch.

<link rel="prerender" href="https://example.com/">

Браузер загружает указанную страницу, строит DOM, применяет CSS и выполняет JavaScript. Как если бы мы открыли её в скрытой вкладке. Но при использовании требуется уверенность, что указанная страница будет загружена, иначе перечисленные операции будут выполнены зря.

<link rel="preload" href="image.png">

По сути, это аналог prefetch, но с гарантированной загрузкой. Уже описан в спецификации, но поддерживается пока не всеми браузерами. На момент публикации этой статьи есть поддержка в Firefox, Chrome, Safari, Opera и Android Browser. Проверить актуальность информации можно на сайте caniuse.com.

Разные бесполезности

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

!

Примеры таких метатегов:

  • Author/web author — определяет имя автора страницы. Указывать бессмысленно, так как не используется.
  • Revisit after — указывает поисковым роботам время, через которое требуется зайти на страницу снова. Поисковые системы вроде «Яндекс» и Google не учитывают этот параметр.
  • Rating — обозначает возрастную категорию контента. Чтобы пометить страницу, на которой размещены изображения для взрослых, требуется пройти запутанную процедуру. Проще отметить «плохие» изображения, разместить в отдельной директории на сайте и сообщить об этом поисковым системам.
  • Expiration/date — указывает дату создания и срок актуальности страницы. Если страницы уже не нужны, просто удалите. Дату создания же лучше указать в XML sitemap.
  • Copyright
    — описывает авторские права. Посмотрите на нижний колонтитул сайта. Наверняка там размещена фраза вроде Copyright 20xx. Не стоит дублировать описание ещё в теги.
  • Abstract — содержит аннотацию к содержанию страницы и чаще используется на образовательных ресурсах.
  • Distribution — описывает права доступа к странице. Как правило, содержит значение global. Изначально задумывалось, что если страница открыта (не защищена паролем), то предназначена для всего мира. Смиритесь и уберите со страницы.
  • Generator — указывает, с помощью какой программы создана страница. Как и author, это бесполезно.
  • Cache control — указывает, когда и как часто страница кэшируется в браузере. Лучше это определить в заголовке HTTP.
  • Resource type — указывает тип ресурса страницы, например, document. Не тратьте на это время, так как это работа DTD.

Эта шпаргалка поможет понять, что происходит в мире метатегов. Если считаете, что нужно что-то добавить или удалить — пишите в комментарии.

При подготовке использовались материалы: «Which Meta Tags Should You Be Using in 2017?», «The Wonderful World of SEO Meta Tags», «How to Boost Social Media Engagement with Meta Tags».
Автор иллюстрации с буханкой — Boryaspec.

Уроки по верстке сайтов: мета-теги, метаданные — Tokar.ua

Любой фронтенд-разработчик работает с мета-тегами каждый день, но при попытке объяснить их простыми словами начинаются сложности. Во всяком случае, у меня. Попробую объяснить как можно понятнее и проще.

Из предыдущих уроков вы можете помнить, что любая информация на html-странице находится внутри тегов. Часть информации мы хотим видеть в браузере, но кроме них есть и те данные, которые в браузере никогда не отображаются, тем не менее, непосредственно влияют на то, что мы увидим.

Эту часть страницы называют “метаданными”.

Метаданные (мета-данные, meta-data) — это информация об информации, описание контента страницы. Эти данные описывают, как должен выглядеть видимый контент, какой набор символов используется на странице и т.д.

Три главных отличия метаданных:

  1. указываются внутри тега <head>
  2. непосредственно невидимы для пользователя (кроме тега <title>)
  3. это информация о контенте

Метаданные принято указывать внутри тега <head>, хотя это не обязательно. Они используются для хранения данных о странице: адресов файлов со стилями, ключевых слов, заголовка страницы.

В большинстве случаев в метаданных нужно указать: заголовок, кодировку (набор символов), подключить js и стили, подключить иконку сайта.

Почти всё остальное — опциональные параметры, которые используются значительно реже.

Метаданных может быть любое количество, вот основные из них:

  • title — заголовок страницы, тег <title>;
  • style — стили CSS, хранящиеся в коде документа;
  • link — внешние файлы стилей, иконка и так далее;
  • meta — всё остальное: кодировка или любая информация о странице.

Мета-теги — это хранилище для метаданных на странице, для каждого нужно указать имя и значение. Структура мета-тега <meta> такова:

<meta name="keywords" content="уроки, вёрстка">

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

  • указание авторства сайта, адрес страницы, периодичность её обновления;
  • индексация заголовков и ключевых слов для поисковых систем;
  • влияние на отображение страницы.

Примеры мета-тегов

<meta name="description" content="Описание страницы">

В description можно хранить краткое описание страницы.

На заре развития HTML метаданные использовались поисковиками для описания страницы в результатах поиска или определения, по каким ключевым словам следует её находить.

Со временем множество вебмастеров начали злоупотреблять этой функцией, включая в неё заведомо неправильное описание или ключевые слова, которых даже нет на странице.

Борясь со спамом в поисковой выдаче, поисковики постепенно утратили интерес к текстовому содержимому метаданных, и обычно формируют описание автоматически, а такие метаданные просто игнорируют.

Алгоритм скрыт от желающих, а сам Google так отзывается о ключевых словах и описании, указанных вручную:

В некоторых случаях описание отображается вместе с фрагментом текста в результатах поиска.

А в некоторых — нет.

<title>Название страницы</title>

Технически это не метатег, но <title> принято считать таковым. Его содержание отображается в заголовке вкладки в браузере и в большинстве случаев — в качестве названия страницы в результатах поиска.

<meta name="robots" content="...">
<meta name="googlebot" content="...">

Метатег robots знаком всем поисковым системам, он позволяет контролировать сканирование документа поисковым роботом.

В значении name вы указываете имя поисковика (или robots, если директива должна касаться их всех), а в content — что вы хотите “сказать” роботу.

Вот несколько основных примеров метатегов robots, с которыми умеет работать Google:

  • noindex или none: запрет индексирование страницы;
  • nofollow: запрет роботу переходить по ссылкам с этой страницы;
  • nosnippet: запрет показа любых частей контента страницы в результатах поиска;
  • noarchive: запрет показа ссылки на кэш, сохранённый в поисковике;
  • unavailable_after:[date]: дата и время, когда нужно прекратить индексирование страницы;
  • noimageindex: запрет указывания страницы как источника изображения в результатах поиска.
<meta name="google" content="nositelinkssearchbox">

Google может отображать “поиск по сайту” рядом со ссылкой на вашу страницу в результатах поиска. Этот метатег может отключить такую возможность.

<meta name="google" content="notranslate">

Если язык страницы отличается от страницы браузера и настроек поиска, Google предложит перевести документ. Этот метатег может указать, что перевод не нужен.

<meta name="viewport" content="width=device-width, initial-scale=1">

Что чаще используют

Google собрал статистику использования значений атрибутов http-equiv и name для мета-тегов:

Кодировка

<meta charset="utf-8">

или

<meta http-equiv="Content-Type" content"=text/html; charset=utf-8">

Кодировка страницы, набор символов, который на ней используется. Чаще всего для кириллической страницы здесь будет utf-8, значительно реже — windows-1251.

Файлы стилей

<link rel="stylesheet" href="style.css" type="text/css">

или

<link rel="stylesheet" href="style.css">

Так мы можем подключить файл стилей к странице. Пока вы можете ничего не знать о стилях, речь о них пойдёт в следующих уроках. В переменной href мы указываем адрес файла со стилями.

Скрипты

<script src="script.js"></script>

или

<script type="text/javascript" src="script.js"></script>

Так мы подключаем JavaScript-скрипты.

Обратите внимание: <link> не требует закрытия, а <script> — требует.

Viewport

<meta name="viewport" content="width=device-width">
Подробно о viewport читайте в следующем уроке.

В итоге

Почти всегда указание мета-тегов — рутинная работа. Но есть хорошие новости: чаще всего мета-теги будут одними и теми же для разных проектов, а “каркас” html-кода страницы вообще стандартен.

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

Вот пример такого шаблона:

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Шаблон страницы</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
 <script src="js/scripts.js"></script>
</body>
</html>

Попробуйте создать свою первую страницу по этому шаблону, в теге body напишите какой-нибудь текст и откройте файл в браузере, чтобы убедиться, что он появился на странице.

Успехов!

Мета-тег / wiki ТопЭксперт

Метатеги (англ. meta tags) — (X)HTML-теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке (теге

) (X)

HTML-документа

. Элемент meta принимает как минимум четыре атрибута: content,

http-equiv

, name и scheme. Из них обязателен только атрибут content и исключение тег revisit.

Пример использования элемента meta

Один из вариантов применения тега meta — указание HTTP-заголовков, которые должны быть отправлены клиенту до отправки самой веб-страницы. Например:

<meta http-equiv="Content-Type" content="text/html" />
  • Метатеги способны идентифицировать авторство Интернет-страницы, её адрес, частоту её обновлений;
  • Метатеги используются поисковыми системами для индексации и создания заголовков гипертекстовых документов;
  • Не выводясь на экран, метатеги влияют на режим отображения Интернет-страниц.

Метатег Description

Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике.

<meta name="description" content="Метатеги на сайте" />

Тег Title

Хотя это не метатег, с технической точки зрения, он часто используется вместе с «описанием». Содержание этого тега обычно показывается в качестве названия страницы в результатах поиска и, конечно, в браузере пользователя.

<title>ПБОЮЛ Юрия Юрьевича</title>

Метатег Сharset

Он определяет тип содержания и набор символов страницы, т. е. Кодировку. Важно: значение атрибута содержания должно быть заключено в кавычки, иначе атрибут набора символов может быть интерпретирован неправильно. Где возможно, рекомендуется использовать Unicode/UTF-8.

<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<meta charset="utf-8" />

Метатег Robots

Этот метатег позволяет контролировать сканирование и индексирование поисковыми системами. Метатег robots понятен всем поисковым системам, а метатег googlebot следует использовать только для Google. По умолчанию задаются значения «index, follow» (то же самое, что «all»), и их не надо определять.

<meta name="robots" content="index, follow" />

Google распознает следующие такие значения, как (указывая несколько значений, разделяйте их запятыми):

  • noindex: запрещает индексирование страницы.
  • nofollow: запрещает роботу Googlebot переходить по ссылкам с этой страницы.
  • nosnippet: запрещает показывать фрагмент содержания в результатах поиска.
  • noodp: запрещает использование альтернативного описания из ODP/DMOZ.
  • noarchive: запрещает Google показывать ссылку Сохранено в кэше для страницы.
  • unavailable_after:[date]: указывает точную дату и время, когда нужно прекратить сканирование и индексирование этой страницы.
  • noimageindex: позволяет отметить, что вы не хотите указывать свою страницу в качестве источника ссылки для картинки, отображаемой в результатах поиска Google.

Эту информацию можно указывать и в robots.txt. Ее рекомендуется использовать, чтобы исключить из индекса файлы, формат которых отличается от HTML (например, изображения или системные файлы).

Метатеги Author и Copyright

Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. Выглядит данный тег следующим образом:

<meta name="author" content="Юрия Юрьевича" />

Они могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства

<meta name="copyright" lang="ru" content="ПБОЮЛ Юрия Юрьевича" />

Метатеги Google

Это метатеги используются для специальный функций Google.

  • nositelinkssearchbox
    Иногда в результатах поиска Google рядом с ссылками на сайт отображается поле для поиска по сайту. С помощью данного метатега можно отключить показ этого поля в Google.
  • notranslate
    Данный метатег сообщает Google, что вы просите не переводить эту страницу на другие языки.
<meta name="google" content="nositelinkssearchbox" />
<meta name="google" content="notranslate" />

Метатеги verification

Эти метатеги используются для подтверждения прав владения сайтом в Яндекс. Вебмастер и Google Search Console

<meta name="yandex-verification" content="0123456789abcdef" />
<meta name="google-site-verification" content="0123456789abcdef" />

Краткое и простое руководство по метатегам в SEO

Мета-теги являются невидимыми на сайте тегами, которые предоставляют данные о вашей странице поисковым системам. Проще говоря, они помогают для поисковых систем определить, о чем ваш контент, следовательно, имеют жизненно важное значение для SEO.

Содержание статьи:

1. Почему метатеги важны?
2. Шесть тегов для улучшения оптимизации вашего сайта

2.1 Тег title
2.2 Мета-описание (meta description)
2.3 Метатег robots. Зачем же нужно использовать этот метатег?
2.4 Атрибут Alt для картинок и фотографий
2.5 Тег Canonical
2.6 Теги заголовков (Н1, Н2, Н3 и т. д.)

3. Как оптимизировать важные теги: контрольный чек-лист

Метатеги размещаются в разделе документа HTML, и поэтому их необходимо использовать в коде в вашей CMS. Это может быть проще или сложнее в зависимости от движка сайта: есть варианты “из коробки”, такой движок, как например WordPress, будет иметь специальный раздел для мета-тегов, таких как канонические ссылки или мета-описания. Однако, прежде чем мы перейдем к тому, какие мета-теги добавить на ваш сайт, давайте поговорим о том, почему они так важны.

1. Почему метатеги важны?

Как уже упоминалось ранее, метатеги предлагают более подробную информацию о вашем сайте для поисковых систем и посетителей сайта, которые сталкиваются с вашим сайтом в выдаче поисковой системы (SERP). Они могут быть оптимизированы, чтобы выделить наиболее важные элементы вашего контента и ваш сайт будет выгодно выделяться в результатах поиска.
Поисковые системы все больше ценят хорошие поведенческие факторы, и это включает в себя обеспечение того, чтобы ваш сайт соответствовал запросам пользователя, насколько это возможно. Мета-теги помогают в этом, путем обеспечения того, что информация, которую должны знать о вашем сайте, отображается заранее в сжатом и полезном виде. Некоторые типы метатегов относятся к структуре страницы и гарантируют, что на вашем сайте легко ориентироваться, в то время как другие сообщают поисковым системам, какие части вашей страницы важны, а которые игнорировать.
Существует множество различных типов метатегов, которые выполняют разные роли, и не все они относятся к SEO.
Однако в целях этого краткого руководства мы выбрали шесть наиболее важных метатегов, которые вам нужно знать для оптимизации сайта в поиске.

2. Шесть мета-тегов для улучшения оптимизации вашего сайта

2.

1 Тег title

Тег title является одной из первых вещей, которые пользователи замечают в результатах поиска. Это название вашей страницы, которое предлагает предварительный просмотр того, о чем идет речь.Это важно, поскольку он появляется в результатах поиска, а также он используется, как якорный текст и заголовок в социальных сетях.
Скриншот как выглядит title в выдаче ниже:

Тег заголовка предназначен не только для ваших пользователей, но и для поисковых систем, которые обнаруживают ваш контент. Таким образом, вам нужно совместить SEO и пользу для посетителей, чтобы ваш заголовок имел смысл для всех.
В заголовке title можно и нужно прописать ключевые слова для лучшего ранжирования.
Он должен быть точным, наглядным по рекомендации поисковиков не более 65 символов, но обычно оптимизаторы делают его большим, чтобы использовать больше ключевых слов в заголовках.
Чтобы упростить добавления тега заголовок в раздел SEO для предварительного просмотра Вашей страницы и того как она может выглядеть в результатах поиска можно использовать плагин, такой как Yoast SEO в WordPress или воспользоваться онлайн-генератором сниппетов https://saney. ru/tools/google-snippets-generator.html
На сайте структура HTML- кода, будет выглядеть примерно так:

<head>
<title>Пример заголовка</title>
</head>

Вывод: обратите внимание на теги заголовка, делайте их понятными и описательными и с включением самых важных или высокочастотных запросов.
Также очень важно делать такую структуру заголовков, например, для коммерческих сайтов:
title:»Ключевое слово»+ (транзакционные запросы или гео или другие важные дополнительные ключи по свойствам ) + «Название бренда или сайта».
Используя ключевой запрос, вы отвечаете на запрос пользователя и повышаете релевантность для поисковика, используя дополнительные ключевые слова такие как: купить, Киев, Украина, цены, отзывы и т д.. Если ещё добавить название бренда, то вы сделаете его уникальным и исключите возможность создания дубля кем-то, а при репосте в соцсети увеличится уровень цитирования бренда.

2.2 Мета-описание (meta description)

Мета-описание имеет такое же значение как тег title. Если тег заголовок (title) — это заголовок, который отображается в верхней части результата поиска, мета-описание (meta description) — это фрагмент, который отображается под ним.
Мета-описание должно содержать точное описание содержимого вашей страницы. Обычно элемент определяет будут ли пользователи нажимать на вашу страницу, поэтому важно потратить время на его оптимизацию.
Раньше оптимальная длина мета-описаний составляла 150-165 символов, но недавнее обновление способа отображения результатов поиска Google привело к появлению более длинных фрагментов до 300 знаков.
Как и в тегах заголовков, вы можете добавить мета-описание через плагин, такой как Yoast SEO, или закодировать его вручную на HTML-сайте своего веб-сайта, как в этом примере:

<head>
<meta name="description" content="Пример описания для сайта">
</head>

Вывод: используйте свое мета-описание с умом и воспользуйтесь возможностью предоставить более подробную информацию о вашем контенте. Сделайте его привлекательным, кратким и актуальным. Обязательно используйте преимущества, иконки и разделители. Также можно использовать призыв к действию. Примеры описаний из выдачи

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

2.3 Метатег robots. Зачем же нужно использовать этот метатег?

Метатег robots информирует поисковые системы о том, какие страницы на вашем сайте должны быть проиндексированы, а какие нет. Этот метатег аналогичный инструкциям для роботов в файле robots.txt, он обычно используется для предотвращения индексации отдельных страниц поисковой системы, в то время как robots.txt может предотвратить индексирование всего сайта или отдельного раздела сайта.
Метатег robots, который рекомендует поисковому роботу не индексировать страницу и не переходить по ссылкам на ней, записывается следующим образом:

<meta name="robots" content="noindex, nofollow" />

— эта инструкция значит не индексировать и не переходить по другим ссылкам на странице.
Однако, если вам не нужно индексировать страницу, но нужно чтобы робот шел дальше по ссылкам и индексировал другие страницы, то инструкция будет выглядеть следующим образом:

<meta name=" robots "content=" index, follow" / >

Метатег robots размещается в разделе

<head>

вашей страницы, и результат может выглядеть следующим образом:

<!DOCTYPE html>
<html><head>
<meta name="robots" content="noindex" />
(…)
</head>
<body>(…)</body>
</html>

Если вы не добавляете метатег robots, поисковики индексируют и следуют по страницам сами.

Зачем же нужно использовать этот метатег?

Возможно, у вас есть некоторые страницы на вашем сайте, которые необходимы, но малозначимые по содержанию. Или если, например, нужно закрыть страницы пагинации, сортировок и т. д. То есть страницы, которые нужно закрыть от индексации так как они являются дублями основной страницы, но нужно, чтобы робот проходил по ссылкам на товары и индексировал их.
Google также позволяет указывать nofollow, для отдельных ссылок, такие ссылки не передают вес страницы на сайт акцептора (сайт на который ссылаются). Если вы хотите, чтобы внешние ссылки с вашего сайта не передавали вес, вы можете достичь это, добавив

rel = "nofollow"

в HTML-ссылку.
Однако, если вы хотите добавить nofollow для всех ссылок на определенной странице, вы можете достичь это с помощью метатега robots.
Вывод: используйте метатег robots, чтобы быть уверенными, что поисковые роботы обработали каждую страницу так, как вы хотите.

2.4 Атрибут Alt для картинок и фотографий

Оптимизация изображения стала очень важным элементом современного SEO, поскольку она предлагает дополнительную возможность — ранжировать результаты поиска, на этот раз, визуального контента.
Ваши изображения должны быть доступны как для поисковых систем, так и для людей. Alt-текст может обеспечить обе эти вещи: он предоставляет текстовую альтернативу изображениям, которые будут отображаться, если изображение не загружается или когда считывается роботом. Он также сообщает поисковым системам, что означает это изображение.
Вы можете включить ключевые слова в свой альтернативный текст изображения, но только если это имеет смысл — не используйте этот тег для спама ключевыми, так как это только повредит исказив релевантность страницы.
Вывод: используйте Alt text в ваших изображениях, чтобы описать ваш визуальный контент. Это отличная возможность улучшить SEO, помогая как поисковым системам, так и людям больше узнать о ваших изображениях и получить дополнительный трафик. Особенно это актуально в сферах где фото является основой принятия решения о покупке, например, номер в отеле или свадебное платье и т. д.

2.5 Тег Canonical

Если у вас есть страницы на вашем сайте, которые почти идентичны, может возникнуть необходимость сообщить поисковым системам, которые из них в приоритете. Или у вас, может быть, контент на вашем сайте, который был скопирован в другом месте. Вы можете делать обе эти вещи без ущерба для дублирования контента — пока вы используете канонический тег.
Вместо того чтобы вводить Google в заблуждение и понижать свой рейтинг в результатах поиска, вы направляете пользователей на «основной» URL-адрес.
Канонический тег может выглядеть так в HTML:

 <link rel="canonical" href="http://example.com/" /> 

Вывод: используйте канонические теги, чтобы избежать проблем с дублирующим контентом, который может повлиять на ваш рейтинг.

2.6 Теги заголовков (Н1, Н2, Н3 и т. д.)

Теги заголовков являются частью вашего контента; это заголовки, которые вы используете для структурирования текста на страницах.
Помимо улучшения удобства чтения для пользователей, теги заголовков также могут помочь поисковым системам понять, что представляет собой ваш контент.
Порядок ваших тегов заголовков (от h2 до h6) подчеркивает важность каждого раздела. Тег h2 обычно обозначает заголовок страницы или заголовок статьи, а h3 и ниже служат в качестве подзаголовков для разбивки вашего контента.
Также важно, то что вы не должны злоупотреблять ими — важно качество, а не количество. Наличие пяти разных типов заголовков на вашей странице не поможет вашему сайту лучше ранжироваться. Вместо этого, используйте их тактически, чтобы разбить ваш контент и описать самое важное в каждом разделе.
Вот пример того, как можно упорядочить теги заголовков, взятые из этой статьи:



<h2> Краткое и простое руководство по метатегам SEO </ h2>


<h3>1. Почему метатеги важны?< / h3>


<h3>2. Шесть мета-тегов для улучшения оптимизации вашего сайта< / h3>


<h4>2.1 Тег title

<h4>


<h4>2.2 Мета-описание (meta description)</ h4>


<h4>2.3 Метатег robots</ h4>


<h5>Зачем же нужно использовать этот метатег?</ h5> 


<h4>2.4 Атрибут Alt для картинок и фотографий</ h4>


<h4>2. 5 Тег Canonical</ h4>


<h4>2.6 Теги заголовков (Н1, Н2, Н3 и т. д.)</ h4>


<h3>3. Как оптимизировать важные теги: контрольный чек-лист< / h3>

Обычно предлагается использовать только один h2, в то время как h3 или h4 и т д, вы можете использовать более одного раза.
Вывод: используйте теги заголовков, чтобы помочь поисковым системам понять каждую страницу. Используйте их с умом и находите баланс между пользой для пользователя и значением для SEO.

3 Как оптимизировать важные теги: контрольный чек-лист

Мета-теги могут помочь как пользователям, так и поисковикам. Они могут помочь вам улучшить пользовательский интерфейс и отображение бизнес-информации, способствовать повышению авторитета, расширению поиска и, следовательно, повышению рейтинга.
Если вы готовы проверить на сколько правильно вы используете метатеги, вот краткий контрольный чек-лист:

  • Проверьте, имеют ли все ваши страницы и теги заголовков мета-описания (программа ScreamingFrog)
  • Начните уделять больше внимания заголовкам и структуре контента.
  • Не забудьте пометить изображения с помощью alt-текста.
  • Используйте мета-теги robots, чтобы направлять поисковые системы так, как нужно вам.
  • Проведите поиск дубликатов страниц и использование сanonical тегов, чтобы избежать каннибализации собственного контента с дубликатами или аналогичным контентом.
  • Создайте контрольный чек-лист (список шагов), которые необходимо повторить при создании нового контента или правильную автогенерацию, чтобы предупреждать появление дублей.

Мета-теги для внутренней оптимизации и продвижения сайта

Несмотря на то, что многое, описанное в этой статье, скрыто от глаз пользователей, внутренняя оптимизация является важной частью seo-продвижения сайта. Здесь рассмотрены самые важные мета-теги, о существовании которых нужно не только знать, но и уметь правильно их использовать.

Что такое мета-теги?

Мета-теги — это специальная информация, содержащаяся в html-документе каждой страницы сайта. Часть этой информации не видна посетителям, но влияет на структуру и восприятие вашего сайта поисковыми роботами. Большая часть описанных здесь тегов, располагается в содержании тега head. Исключением будут только теги заголовков, которые должны находиться в body документа.

Если вы используете какую-либо популярную CMS — многое из перечисленного здесь, скорее всего, находится в разделе SEO настроек каждой страницы.

Заголовок документа — тег Title

Тег title — первое, что видит пользователь в поисковой выдаче. Его содержимое отображается там в качестве ссылки для перехода на найденный сайт. Для поисковых алгоритмов он имеет важную роль в определении темы контента страницы. Title должен быть заполнен фразой с релевантным контенту ключевым словом или словосочетанием.

Максимальное число символов, отображаемых в поиске ограничено, хотя неотображаемая часть всё равно учитывается роботами. Точное значение ограничения периодически меняется и, кроме того, зависит от поисковой системы, но оптимальным можно считать около 50 символов.

В связи с этим, в начале текста этого тега следует указать самую значимую часть информации о странице, которая должна заинтересовать пользователя. Так как информации сюда можно уместить мало — тщательно проверяйте ключевики на отсутствие ошибок.

Каждый тег title нужно прописывать с уникальным для сайта текстом, он не должен повторяться между страницами.

Описание страницы — мета-тег Description

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

Хотя никто не запрещает вам написать сюда много информации, поисковики ограничивают и его максимальную отображаемую длину. Приблизительное рекомендуемое количество символов здесь — 100-200.

Нужно помнить, что информация в этом теге не только для поисковика, но и для людей. В description также стоит употреблять ключевые слова, но без спама.

Мета-тег индексации — Robots

Содержание этого мета-тега может иметь несколько заранее определённых значений. По умолчанию, для нормальной индексации вашей страницы, в нём должно быть прописано: «index, follow». Если по какой-то причине вы хотите указать поисковому боту, что данную страницу не стоит индексировать, пропишите в нём: «noindex, nofollow».

  • index разрешает индексацию самого текста
  • follow позволяет поисковику производить индексацию ссылок в нём

Пример для обычной индексации:

<meta name=»robots» content=»index, follow»>

Адаптивное отображение — мета-тег Viewport

Данный мета-тег стал важен в последние годы, так как определяет отображение содержимого страницы на дисплеях небольших размеров, например телефонов или планшетов. Поисковые алгоритмы учитывают наличие или отсутствие этого тега. Если он отсутствует, то браузер пытается подобрать размеры элементов вашей страницы на своё усмотрение.

Сам факт использования этого тега не сделает сайт адаптивным, поэтому следует позаботиться об этом отдельно.

Универсальная запись, которая подойдёт в большинстве случаев:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

Теги заголовков

Заголовки — это целая группа, которая помогает поисковику понять структуру документа и включает в себя 6 тегов: h2, h3, h4, h5, h5 и h6. В отличие от предыдущих мета-тегов, заголовки располагаются в «теле» документа — внутри тега body, а не head и их содержимое видно посетителю в самом тексте страницы.

По значимости для поисковика, наиболее важный — h2. Это основной заголовок документа и он должен быть использован только 1 раз для каждой страницы. Его содержание, как и в случае с title, должно быть уникальным для каждой страницы и включать ключевые слова.

Теги с h3 по h6 можно использовать в качестве подзаголовков статьи, имеющих меньшую важность. Их использование будет указывать на структурированность документа, что является плюсом для продвижения.

Теги заголовков не стоит использовать в сквозных элементах сайта, т.е. блоках, повторяющихся на нескольких страницах. Они обычно заполняются 1 раз и, средствами CMS, автоматически встраиваются на нужные страницы. Например, нельзя использовать заголовки в формах заказа звонка или «подвале» (футере) сайта.

Заключение

Правильное использование мета-тегов может заметно повлиять на поисковую выдачу в положительную сторону. Это очень важная часть seo-продвижения сайта.

Придерживайтесь общих рекомендаций, в первую очередь уделив внимание тегам h2, title, description, и не забывайте анализировать результаты внесённых изменений.

Проверка оптимизации мета-тегов сайта онлайн

Мета-теги — это специальные html-теги, которые предназначены для предоставления дополнительных сведений (мета-данных) о содержании веб-страницы.

МЕТА-теги используются поисковыми системами для формирования сниппетов (описания страницы сайта в результатах поиска). Тегов существует много, но основными для продвижения являются Title, Description, Keywords.

1. Title — мета-заголовок страницы, именно его мы можем увидеть в качестве заголовка сниппета (карточки сайта в поисковой выдаче). Также он отображается во вкладке браузера, чтобы пользователю было удобнее понять, на какой странице он находится, и переключаться между вкладками.

2. Description – мета-описание страницы, в котором представлена более подробная информация о ее содержимом. Тоже часто выводится в сниппетах.

3. KEYWORDS — это список ключевых слов, соответствующих содержанию страницы.

Перечисленные выше МЕТА-теги располагаются между тегами <head> и </head> и должны быть на каждой странице сайта:

Вовсех современных панелях администратора (CMS), как правило, имеется возможность прописывать и редактировать данные элементы.

Зачем нужны мета-теги

Поисковые системы используют Title и Description для определения релевантности и ранжирования веб-ресурсов. Это значит, что вы должны указывать в них точную и актуальную информацию о содержимом страницы, чтобы поисковая система понимала, какой контент на ней размещен. Также следует употреблять такое количество символов и ключевых слов, которое обеспечит релевантность страницы (то есть соответствие поисковому запросу). Без грамотно прописанных мета-тегов занять позиции в ТОП-10 поисковой выдачи не получится.

Поскольку Title и Description используются для формирования сниппетов в результатах поиска, то нужно прописывать в них интересную для пользователя информацию. Так вы сможете существенно увеличить CTR (показатель кликабельности) сниппетов, а значит — улучшить поведенческие факторы, влияющие на продвижение сайта.

Правила употребления Title и Description

Оптимальное количество символов в мета-тегах

Важно соблюдать баланс между размером мета-тегов Title и Description и числом ключевых слов в них, поскольку содержимое данных элементов является более значимым сигналом ранжирования, чем какой-либо другой текст на странице.

Хотя поисковые системы точно не указывают рекомендуемую длину Title, большинство настольных и мобильных браузеров могут отображать первые 50–60 символов мета-тега заголовка.

Согласно последним данным, при ранжировании учитывается больше слов, чем выводится на экран. Например, Google будет учитывать весь тег заголовка при сканировании страницы, даже если он не отображается полностью в поисковой выдаче. Однако надо иметь в виду, что чем больше слов в заголовке, тем меньше будет «вес» каждого из них по формуле ВМ25.

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

Размер Description для разных поисковых систем будет отличаться в зависимости от размера описания в сниппете. Стандартная длина Description для Google составляет 120–160 символов. В Яндексе длина описания в сниппете может доходить до 300 знаков, а если описание развернуть, кликнув по стрелке «Читать ещё», оно может превышать 600 символов (включая пробелы).

При выборе размера Description также важно помнить о сохранении в нем веса ключевых слов и о том, что слишком короткий Description не будет использоваться для формирования сниппета.

Уникальность мета-тегов

Мета-теги обязательно должны быть уникальными.

Недопустимо, чтобы информация на нескольких страницах сайта дублировалась — это достаточно грубая ошибка, которая негативно влияет на ранжирование. Кроме того, не должно быть совпадения информации в мета-тегах на одной странице, например, одинаковых Title, Description и заголовка Н1 – это затруднит формирование привлекательного сниппета, а также может привести к переоптимизации страницы и наложению санкций со стороны поисковых систем.

Как найти ошибки мета-тегов?

Очень сложно обнаружить ошибки в мета-тегах, когда на сайте сотни, а то и тысячи страниц. Максимально быстро и эффективно найти и исправить такие ошибки поможет сервис Labrika.

Посмотреть данные об ошибках мета-тегов можно в разделах «Технический аудит» и «SEO-аудит».

Какие виды ошибок мета-тегов определяет Labrika?

Несколько Title или Description на одной странице

Наличие на странице нескольких мета-тегов Title или Description относится к грубым техническим ошибкам. По существующим стандартам разметки веб-страницы HTML5 Title и Description должны присутствовать на каждой странице только 1 раз.

Кроме того, специалист Google Джон Мюллер сообщает, что, хотя поисковая система может обрабатывать два мета-описания и два тега заголовка, он рекомендует придерживаться стандартной практики использования одного элемента заголовка и одного мета-описания на странице. Это поможет обеспечить лучший опыт взаимодействия пользователей с сайтом и гарантировать, что поисковые системы не будут допускать ошибок при сканировании веб-страницы (например, выбрать не те мета-теги или некорректно их объединить).

Наличие на странице нескольких мета-заголовков или мета-описаний Labrika покажет в отчете «Несколько title/description», который расположен в разделе «Технический аудит».

В отчете указывается URL-адрес страницы с ошибкой и тип ошибки на данной странице.

Title совпадает с Н1

Если вы используете одни и те же ключевые слова и в Тitle и в заголовке h2, то на странице может возникнуть переоптимизация по данным словам. Это создает угрозу наложения санкций, поскольку Тitle и h2 имеют большое значение при ранжировании и употребление в них одинаковых ключевых слов может быть расценено как попытка искусственно увеличить их вес.

Title совпадает с Description

Мета-теги Тitle и Description участвуют в формировании сниппета. Если их сделать одинаковыми, то поисковым системам придется создавать сниппет по альтернативному алгоритму. Он, как правило, подразумевает использование для описания вместо Description наиболее подходящего фрагмента текста, который содержит ключевые слова и скрытую семантику. Это затрудняет редактирование сниппетов – вместо того, чтобы исправить Description, придётся искать на странице фрагменты, взятые для сниппета. А после их изменения поисковая система может посчитать более подходящим уже другой фрагмент.

Description совпадает с Н1

Description не должен совпадать с заголовком h2 – у этих тегов совершенно разное назначение и рекомендуемые размеры. h2 – это заголовок страницы, а Description — краткое описание её содержания, которое может включать дополнительную полезную информацию для привлечения пользователей. Кроме того, при употреблении в Description и заголовке h2 одних и тех же ключевых слов на странице может возникнуть переспам (чрезмерное использование какого-либо слова), что приведет к наложению санкций со стороны поисковых систем.

Слишком короткие Тitle (меньше 2 слов)

Короткие Тitle неинформативны и могут совпадать с заголовками других сайтов, продвигающихся по тем же ключевым фразам. Такие мета-заголовки не дают поисковым системам возможности создать адекватные кликабельные сниппеты. Соответственно высока вероятность того, что страницы с короткими Тitle не попадут в ТОП-10.

Слишком короткие Description (меньше 5 слов)

В коротком Description слишком мало информации для создания качественного сниппета, поэтому поисковые системы будут формировать описание сайта на странице выдачи из другого контента страницы. В результате, чтобы изменить сниппет, придется искать использованные для его создания фрагменты. В свою очередь после изменения фрагмент текста может перестать быть релевантным, и поисковая система выберет другой текст для сниппета или даже поменяет посадочную страницу.

Слишком длинный Description (больше 320 знаков)

Если в Description будет слишком много символов, он не будет полностью отображаться в поисковой выдаче, и описание в сниппете получится неудобочитаемым. Кроме того, в длинном Description плотность ключевых слов может оказаться недостаточной, чтобы поисковые системы сочли его релевантным для использования в сниппете по данному запросу.

Отсутствие на странице Title, Description или Н1

Поисковые системы придают этим элементам большой вес при оценке релевантности страницы, используют их для формирования сниппетов, поэтому отсутствие Title, Description или Н1 является грубой ошибкой, которая может негативно сказаться на ранжировании. Если на странице не прописаны Title и Description, поисковая система выберет для создания описания в выдаче фрагменты текста по своему усмотрению. Это может привести к формированию сниппета с низкой кликабельностью.

Данные виды ошибок отображаются в отчете Labrika «SEO-ошибки мета-тегов».

Выделив галочками нужные пункты в верхней части отчета, вы можете отфильтровать те виды ошибок, по которым хотите посмотреть информацию. Например, на скриншоте ниже отмечен галочкой пункт «Страницы без Title», поэтому в отчете будут показаны данные только по тем страницам, на которых отсутствует мета-заголовок.

Дубли Title и Description

Мета-теги Title и Description должны быть уникальными, оптимизированными под конкретную страницу. Находя одинаковые мета-заголовки или мета-описания на нескольких страницах, поисковая система может посчитать, что информация на них дублируется. Результатом этого могут быть следующие негативные последствия:

  • либо понижаются позиции сайта за наличие малополезного дублированного контента,
  • либо для показа в результатах поиска выбирается не та страница, которая была специально оптимизирована под запрос и могла бы принести высокие продажи.

В любом случае одинаковые Title и Description являются отрицательным фактором для ранжирования страниц.

Labrika показывает дубли Title и Description в отдельных отчетах раздела «SEO аудит».

В данных отчетах отображаются дублированные мета-заголовки или мета-описания, которые встречаются более чем на одной странице сайта, количество этих дублей, а также страницы с одинаковыми Title или Description. Список страниц вы можете увидеть, кликнув по кнопке «Показать» в колонке «Действие».

Как исправить ошибки мета-тегов?

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

Ошибки в отчетах раздела «SEO-аудит» исправляет специалист, который занимается поисковой оптимизацией сайта.

  • Пропишите уникальные мета-теги Title и Description, соблюдая оптимальное количество символов и вхождений ключевых слов. Подробные рекомендации по оптимизации мета-тегов на каждой странице можно получить на сервисе Labrika в разделе «Оптимизация и кластеризация».
  • Используйте интерактивный визуальный редактор Labrika, чтобы оптимизировать мета-теги и заголовки посадочных страниц прямо на сервисе. При этом будет показана оценка вашего уровня оптимизации по сравнению с сайтами в ТОП-10.
  • Поскольку мета-заголовок Title обычно используется поисковыми системами для формирования сниппета, он должен повышать кликабельность сайта в результатах поиска. Для этого рекомендуется включать в Title слова, побуждающие к целевому действию, а также подчеркивающие коммерческую направленность страницы (купить, заказать, цена, название города, где вы продаете товар и т. п.). Чтобы ваш Title отличался от заголовков конкурентов, можно добавить в него название бренда.
  • Description также может быть использован в тексте сниппета, поэтому необходимо сделать его информативным и привлекательным. Включите в описание полезную для покупателей информацию, например, укажите цену товара, его цвет, размер и т. д. Обозначьте ваши преимущества, дайте информацию о скидках и гарантиях, добавьте призыв к действию.
  • Если количество страниц на сайте велико (например, карточек товаров в интернет-магазине), можно настроить автоматическую генерацию Title и Description с помощью специальных плагинов для CMS. Это позволит быстро создать мета-заголовки и мета-описания для всех страниц, однако не гарантирует их уникальности и возможности при необходимости вносить изменения в отдельные мета-теги (например, в случае добавления других ключевых слов на страницу). Поэтому для автогенерации следует выбирать плагин, в котором допускается ручная корректировка Title и Description.

Больше узнать о создании и оптимизации Title и Description для продвижения в поисковых системах вы можете в руководствах Google:

  • Лучшие практики написания описательных <title> элементов
  • Лучшие практики для создания качественных метаописаний

и Яндекса:

  • Как правильно написать title
  • Как правильно составить description
Описание мета-имени

объясняется | Как использовать мета-имя=описание

Тег описания

Мета-имя Описание — это HTML-элемент, который резюмирует вашу веб-страницу. Поисковые системы обычно показывают метаописание в результатах поиска под тегом Title.

Google не использует метаописание в качестве сигнала ранжирования; тем не менее, это оказывает огромное влияние на CTR вашей страницы, потому что отображается в результатах поиска. Хорошо написанное мета-описание — это небольшое объявление с четким призывом к действию.

Key Takeaway
  1. Всегда добавляйте мета-тег Description в раздел HEAD вашего сайта.
  2. Оптимальная длина тега Description.
    Google обычно показывает макс. 165 символов (не превышайте 160).
  3. Теги описания важны для поисковой оптимизации и посетителей.
    Отображается на страницах результатов поисковой системы (SERP) и во вкладках браузера.

Измеритель влияния SEO

Тег Description имеет
большое влияние на SEO!

Общее влияние

Рейтинг SEO веб-сайта

Тег Description составляет
10% от общего рейтинга вашей страницы.

Ключевые моменты для написания хорошего тега описания

Оптимальный формат описания:

 Призыв к действию, включая первичное ключевое слово и вторичное ключевое слово 

Google обычно отображает около 160 символов тега описания. В то время как мобильные символы для фрагментов результатов поиска составляют в среднем около 130 символов. Длина варьируется в зависимости от того, что системы поисковых систем считают наиболее полезным.

  • Добавьте «призыв к действию» в тег описания (Получить | Заказать | Получить | Читать как | Как сделать | Проверить | Сейчас | Легко)
  • Стратегически предлагать решения проблемы
  • Использовать цифры в описании теги (5 важных тегов HTML для вашего веб-сайта для улучшения SEO)
  • Начните тег описания с основного целевого ключевого слова
  • Не заполняйте тег описания ключевыми словами
  • Каждая страница должна иметь уникальный тег описания с акцентом на одно конкретное ключевое слово
Хорошо составленное описание поможет вам оптимизировать конверсию вашего веб-сайта

Это как азбука!
Большинство людей ищут с помощью:

  • Ключевое слово (или ключевые слова), в результате вы получаете
  • Заголовок . Это синяя интерактивная строка, за которой следует метатег
  • Description .
    Небольшой коммерческий текст, который должен убедить посетителя перейти на ваш сайт.

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

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

В декабре 2017 года Google увеличил длину сниппетов в результатах поиска. Теперь Google подтверждает, что сократил фрагменты результатов поиска после их расширения в декабре прошлого года.

«Фиксированной длины фрагментов нет. Длина варьируется в зависимости от того, что наши системы считают наиболее полезным». Он добавил: «Google не будет указывать новую максимальную длину фрагментов, поскольку фрагменты генерируются динамически».

Источник, Дэнни Салливан

Новая средняя длина поля фрагмента описания на рабочем столе составляет около 160 символов по сравнению с примерно 300 символами.

Мобильные символы для фрагментов результатов поиска теперь составляют в среднем 130 символов.

Пример тега описания HTML-кода

Впечатление – SEO Ваше описание Теги и оптимизация описания

Добавив соответствующий тег описания, вы можете сообщить посетителю, что он может ожидать найти на вашей веб-странице, если он нажмет на ссылку.

Не забудьте добавить уникальный и релевантный тег описания на каждую страницу вашего веб-сайта. Если все ваши теги описания одинаковы, поисковые системы не будут перечислять ваши страницы отдельно, и это повлияет на ваш рейтинг. Хороший тег описания должен содержать ключевое слово фокуса, которое помещается в начале первого предложения. Убедитесь, что ключевое слово focus также добавлено в содержимое конкретной веб-страницы.

Посмотрите следующий пример. Ключевое слово на конкретной веб-странице — кабели.

  Все кабели для радио и телевидения. Закажите их онлайн = доставка на следующий день. Интернет-магазин Jackson Inc. специализируется на высококачественных кабелях и аксессуарах.  
  •  Предложение начинается с ключевого слова focus
  •  Включен призыв к действию
  •  Вопрос: почему я должен заказывать здесь? отвечает, потому что они специализированы

В некоторых случаях Google не будет показывать ваш тег описания. Возможно, Google считает, что ваш тег описания недостаточно информативен, поэтому они предоставят фрагмент некоторого контента на странице.

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

  1. не используйте более одного ключевого слова focus в теге описания
  2. убедитесь, что вы используете мин. 120 и макс. 160 символов
  3. поместите ключевое слово focus в начало первого предложения тега описания
СОВЕТ: Работаете с WordPress?

Ознакомьтесь с нашим руководством по метатегам WordPress

Средство проверки мета-описания

Тестируйте мета-описание — Хотите проверить и проанализировать мета-теги в исходном коде вашего веб-сайта? Чтобы упростить вам задачу, мы создали бесплатный онлайн-анализатор веб-сайтов с метатегами . Наш робот просканирует ваш сайт, и вы сразу же получите комментарии о том, что не так и как вы можете это исправить.

Мы предлагаем доступные SEO-услуги, быстрые и эффективные.

Метатеги DIY

$0

Создать метатеги не так сложно. Мы упростили вам задачу, предложив вам этот бесплатный мастер метатегов.

Генератор метатегов

Boost My Metatags

$299один раз

Вы создали идеальные метатеги.
Пришло время сообщить всему миру, что ваш веб-сайт открыт для бизнеса.

Заказать SEO Boost

Создать мои метатеги

$99 за страницу

Доверьтесь экспертам. Мы создаем идеальные мета-теги для вас. Создавайте идеальные ключевые слова, привлекающие нужных клиентов.

Запросить поддержку

Нужна профессиональная


SEO-помощь?

Свяжитесь с нашим представителем по работе с клиентами, чтобы назначить встречу и ответить на все ваши вопросы!

Блог SEO и интернет-маркетинга

Как раскрутить свою бизнес-страницу в Instagram в 2022 году?

Опубликовано MetaTags

Сейчас об Instagram слышали абсолютно все. И это неудивительно: этим активно пользуются около полумиллиона человек…

Подробнее

Спортивный маркетинг: эффективное руководство для маркетинговых команд вы готовитесь к утренней зарядке.
Вы надеваете кроссовки Nike и футболку Adidas…

Подробнее

Как выделить свой бренд в социальных сетях

Опубликовано MetaTags

Источник: https://unsplash.com/ photos/EQSPI11rf68 С годами социальные сети приобрели непредвиденную популярность. В 2021 году 4,26 миллиарда человек использовали ту или иную форму…

Подробнее

Что такое метатег?

Обновлено: 13.05.2019, автор: Computer Hope

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

Примечание

Сегодня наиболее важными метатегами для веб-разработчиков являются Content-Type и Description .

  • Метатег Content-Type.
  • Метатег без кэширования.
  • Метатег аудитории.
  • Метатег автора.
  • Метатег Content-Language.
  • Метатег описания.
  • Метатег генератора.
  • Метатег
  • ключевых слов.
  • Метатег темы страницы.
  • Метатег типа страницы.
  • Метатег ProgID.
  • Метатег издателя.
  • Метатег Revisit-after.
  • Метатег роботов.
  • Должен ли я использовать «метатег» или «метатег» в своем письме?
  • Связанные страницы метатегов.

Метатег Content-Type

  

Идентифицирует тип содержимого и кодировку веб-страницы, а также определяет способ отображения страницы.

Кончик

Хотя кодировку можно указать в метатеге, если у вас есть доступ к файлу . htaccess, вместо этого определите ее там. Таким образом, его не нужно указывать на каждой веб-странице.

Метатег без кэша

 <мета http-equiv="cache-control" content="no-cache"> 

Сообщает интернет-браузеру, что он не должен кэшировать страницу. Использование этого тега гарантирует, что посетителю будет отображаться последняя информация. Этот тег рекомендуется использовать только на часто обновляемой странице, поскольку он увеличивает время загрузки.

Метатег аудитории

  

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

Метатег автора

  

Описание автора страницы.

Метатег Content-Language

  

Язык, на котором написана страница. В приведенном выше примере указан английский язык. Сегодня этот тег можно пропустить, если вы классифицируете язык в теге HTML. Например, в начале вашей страницы.

Описание метатега

  

Метатег description указывает, какой тип информации содержит веб-страница. Метатег описания — это самый важный тег, используемый поисковой системой для ранжирования вашей страницы в результатах поиска. Длина описания должна быть от 150 до 160 символов.

Метатег генератора

  

Программное обеспечение, используемое для создания веб-страницы.

Ключевые слова метатег

  

Ключевые слова, разделенные запятыми, которые помогают описать содержание страницы. Из-за злоупотреблений многие поисковые системы, в том числе Google, больше не смотрят на ключевые слова. Многие сайты, в том числе Computer Hope, больше не включают метатег ключевых слов ни на одной из своих страниц.

Метатег темы страницы

  

Тема страницы, используемая некоторыми поисковыми системами. Не всем страницам это нужно.

Метатег типа страницы

  

Тип страницы, используемый некоторыми поисковыми системами. Не всем страницам это нужно.

Метатег ProgID

  

Программа, используемая для редактирования файла. Аналог генератора.

Метатег издателя

  

Издатель веб-страницы.

Метатег Revisit-after

  

Сообщает веб-роботам, как часто индексировать страницу. Рекомендуется использовать файл robots. txt вместо метатегов для управления веб-роботами.

Метатег роботов

  

Эта строка позволяет любым веб-роботам знать, какие страницы индексировать. Рекомендуется использовать файл robots.txt вместо метатегов для управления веб-роботами.

  

Эта строка является предупреждением для веб-роботов переходить по всем ссылкам на странице.

Должен ли я использовать «метатег» или «метатег» в своем письме?

Слово «метатег» должно состоять из двух слов, разделенных пробелом, и не должно быть записано как одно слово или через дефис.

  • Помощь и поддержка HTML и веб-дизайна.
  • Секреты и советы по продвижению вашего сайта и блога.

Браузер, HTML, термины HTML, термины Интернета, Open Graph, термины программирования, Robots.txt, тег

Метатеги — Предварительный просмотр, редактирование и создание

Метатеги — Предварительный просмотр, редактирование и создание

Метаданные

Рекомендуемое изображение 1200×628

Перетащите или нажмите

Название 38
Метатеги — предварительный просмотр, редактирование и создание
Описание 139
С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах!
Гугл

Метатеги — предварительный просмотр, редактирование и создание

https://metatags. io/

С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах!

Facebook

метатеги.io

Метатеги — предварительный просмотр, редактирование и создание

С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах!

Твиттер Метатеги

 — предварительный просмотр, редактирование и создание С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах! метатеги. io

Pinterest

Метатеги — предварительный просмотр, редактирование и создание

Slack

Метатеги

Метатеги — предварительный просмотр, редактирование и создание

С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах!

Meta Tags — это инструмент для отладки и генерации кода метатегов для любого веб-сайта. С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах!

Что такое метатеги

Метатеги — это определенные фрагменты текста и изображений, которые предоставляют сводку для веб-страницы. Часто данные метатегов появляются всякий раз, когда кто-то делится ссылкой в ​​социальных сетях, в сообщениях или в вашем программном обеспечении для бизнес-чата 🙌.

Кроме того, метатеги могут содержать информацию, помогающую поисковым системам и другим техническим службам сканировать ваш сайт, чтобы выяснить, что он собой представляет и является ли он законным!

Подождите, а почему я не вижу метаданные? Поскольку протокол изначально был создан для проверки машинами, он скрыт в коде в верхней части веб-сайта, и именно поэтому был создан этот инструмент! Введите любой URL-адрес в поле поиска, и наш сайт поможет вам визуализировать и отредактировать код метатега, чтобы вы могли его обновить.

 Метатеги — предварительный просмотр, редактирование и создание

 

Метатеги — предварительный просмотр, редактирование и создание

https://metatags. io/

С помощью метатегов вы можете редактировать и экспериментировать со своим контентом, а затем просматривать, как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и других сервисах!

Почему важны метатеги

То, насколько важны для вашего сайта публикации в социальных сетях и ранжирование в Google, определяет, насколько сильно вы должны сосредоточиться на своих метатегах.

Представьте, что вы заходите в заброшенный магазин с запыленными полками и затхлым запахом в воздухе 😕. Ссылка на ваш сайт в Facebook или LinkedIn часто является самым первым взаимодействием с посетителем, и если он выглядит пустым и необслуживаемым, как заброшенный магазин, они даже не подумают нажать на ссылку.

В рамках большинства кампаний цифрового маркетинга команды часто создают убедительные копии и яркие изображения, которые идеально подходят для того, чтобы стать частью метаданных вашей веб-страницы. Двойная стоимость, половина работы!

Это изображение также является изображением метаданных!

Более того, генерация метаданных может стать важным упражнением в разработке вашего краткого коммерческого предложения. Google дает вам только 60 символов для вашего заголовка и около 105 символов для вашего описания — прекрасная возможность тщательно уточнить ваше ценностное предложение.

Помощь метатегов в SEO

Сообщество SEO окончательно определилось в этом вопросе, наиболее важным метатегом для ранжирования является тег title. Никакие другие метатеги не влияют на рейтинг SEO, но это не значит, что они не важны!

  • Название — Очень важно.
  • Описание — Менее важное.
  • Изображение — Умеренно важно.
  • Ключевое слово — Минус-важность.

Исторически сложилось так, что метатег «ключевое слово» был важной частью ранжирования, поскольку ранние роботы поисковых систем использовали это значение для категоризации веб-сайтов. Но в 2009 году Google официально объявил, что метатег ключевого слова больше не является частью рейтинга и потенциально может повредить вашему рейтингу, если им будут злоупотреблять 😱.

Вместо этого современные стратегии SEO сосредоточены на высоком рейтинге в Google с высококачественным контентом и дополняются настройками метатегов.

После того, как вы начнете ранжироваться, важно, чтобы люди действительно нажимали на ваш сайт, где другие части данных метатегов играют важную роль, особенно метаизображение и метаописание (подробнее читайте ниже).

Тег заголовка

Тег заголовка является вторым по значимости фактором для SEO на странице, уступая только высококачественному контенту.

С технической точки зрения это очень простой тег HTML-кода Title , который вы размещаете в самом верху вашей веб-страницы. Но его простота лишь скрывает тот факт, что 50-60 символов, которые дает вам Google, повлияют на посещаемость вашего сайта несколькими способами.

  • Поиск Google — основная ссылка, по которой переходят пользователи.
  • Социальные сайты — Заголовок, который люди видят на FB, Linkedin и т. д.
  • Вкладка браузера — Подсознательный маркетинг, сохраняющийся на вкладке.
  • Внешние ссылки — обычно текст, который другие сайты используют для ссылки на ваш сайт.
Советы по эффективному заголовку

Рассмотрите тройное сочетание: бренд, маркетинг и SEO. Старайтесь, чтобы заголовок не превышал 60 символов, и в первую очередь ставьте ключевые слова, на которые вы обращаете внимание. Не переусердствуйте с ключевыми словами, максимум используйте два. Backlinko проделал фантастическую работу, описав, как разрабатывать кликабельные заголовки в этом чудовищном руководстве по поисковой оптимизации страницы.

Места, где отображается ваш тег title

Мета-описание

Мета-описания, хотя и бесполезные с точки зрения SEO, невероятно ценны для привлечения пользователей, которые перейдут на ваш сайт.

Мета-описание часто служит рекламой для людей, которые находят ваш сайт в Google или социальных сетях. Хотя это и не требуется, и Google может использовать текст с вашего веб-сайта вместо того, что вы указываете в метаданных, лучше контролировать текст описания там, где это возможно.

Хотите узнать больше? Moz — авторитет в мире SEO, и у него есть практическое руководство по написанию убедительных описаний.

Метаизображение или OG:Image

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

Большинство веб-сайтов цифрового маркетинга и SEO игнорируют ценность графического контента, поскольку он требует дизайнерских навыков. Но с бесплатными инструментами, такими как Figma и Canva, любой может создавать привлекательные изображения и добавлять их в свои метатеги.

На таких сайтах, как Facebook, Twitter и Linkedin, ваше метаизображение в 3 раза больше, чем текстовое содержимое!

Создание метатегов для SEO и цифрового маркетинга

Поскольку данных метатегов может быть слишком много, а ваше время ограничено, вам следует сосредоточиться на двух вещах: теге заголовка и метаизображении.

Основная причина создания этого инструмента заключается в том, что невероятно сложно сосредоточиться на основных факторах, имеющих значение для метатегов. Итерация по заголовкам и изображениям (и описаниям) болезненна!

MetaTags.io был создан, чтобы сделать этот процесс приятным! Быстрое тестирование различных заголовков и изображений — плавный и плавный рабочий процесс.

Что такое метатеги и почему они важны для SEO?

Метатеги важны для обеспечения SEO-оптимизации вашего контента. Вот полное изложение всего, что вам нужно знать для оптимизации ваших метатегов, включая примеры и лучшие практики.

Что такое метатеги?

Думайте о метатеге как о кратком описании вашей страницы. Его можно использовать как для поисковых систем, так и для пользователей для предварительного просмотра содержимого страницы. По сути, о чем ваша страница? (В этом случае вы может судить о книге по ее обложке.)

Мета — это сокращение от метаданных, которые представляют собой тип информации, которую предоставляют эти теги — данные о данных на вашей странице.

Мета-теги не отображаются на вашей реальной веб-странице, но существуют в HTML-коде страницы. Это текст предварительного просмотра, который пользователь видит на странице результатов поисковой системы (SERP).

Почему метатеги так важны для SEO?

Метатеги — это первое впечатление о вашей странице в поисковой выдаче. Хорошее мета-описание привлечет пользователей, которые перейдут по ссылке и посетят ваш сайт. Они гарантируют, что поисковые системы знают, о чем ваш контент, поэтому они смогут показать веб-сайт в соответствующих результатах.

Подумайте об этом так: вы просматриваете полку магазина и видите один продукт с устаревшей и в целом непривлекательной этикеткой. Он упускает важную информацию, например, из чего сделан продукт? Затем вы видите этикетку на другом продукте, свежем и привлекательном, со списком видимых ингредиентов. Вы купите товар с лучшей этикеткой. То же самое и с мета-тегами: если ваше мета-описание плохое, никто не будет нажимать на ваш контент.

Мета-описания часто являются основной частью информации, которая определяет, на какой результат нажимают пользователи, поэтому крайне важно использовать высококачественные метатеги на своих веб-страницах.

Если вы нашли эту статью через поисковую систему, велика вероятность, что вы нажали на нее из-за эффективных метатегов.

Позже мы углубимся в метатеги. Но сначала давайте рассмотрим основы.

Два наиболее важных метатега: 
  • Теги заголовков : определяют заголовок веб-страницы. Это заголовок страницы, который Google показывает в результатах поиска.
  • Метаописания : которые просто описывают содержание вашей страницы. Поисковые системы часто используют его для сниппета в результатах поиска.

Оба они просты в реализации и не требуют знаний в области программирования.

Где появляются теги заголовков?

Теперь, когда мы рассмотрели, что это такое, давайте перейдем к рекомендациям. Ваш тег title появится в трех основных местах: 

  1. Вкладка «Браузер». Напоминайте посетителям о содержании вашей страницы, отображая описательный заголовок во вкладке браузера.
  2. Страницы результатов поисковой системы (SERP). Привлеките пользователей, которые нажимают на ваш результат, с помощью тега заголовка длиной не более 60 символов, чтобы поисковые системы не обрезали его.
  3. Внешние сайты, такие как Facebook или Twitter. Четко опишите содержание страницы кратким заголовком, привлекающим внимание пользователей.

Как выглядит тег заголовка?

Хороший заголовок привлекает внимание пользователей и побуждает их щелкнуть или просмотреть вашу статью.

В HTML теги заголовков кодируются следующим образом:

Здесь ваш заголовок

СОВЕТ : Если вы используете браузер Chrome, вы можете найти исходный код этой страницы, нажав «Ctrl + U».

Как оптимизировать теги заголовков для улучшения SEO:
  • Длина заголовков не должна превышать 55-60 символов.
  • Используйте целевые ключевые слова в заголовках. (Подробнее об этом ниже).
  • Используйте слова действия, которые отвечают на вопросы как, почему, что и где.
  • Создавайте уникальные заголовки, чтобы выделяться среди похожих статей.
  • Попробуйте разделить тег заголовка двоеточием, вопросом или квадратной скобкой и названием вашей компании, чтобы улучшить читаемость и узнаваемость бренда.

Рекомендации по использованию тегов заголовков

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

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

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

Используйте только 1 на странице. </strong> Чтобы ваш код оставался действительным и приносил пользу этому HTML-элементу, используйте только один тег<title> на странице. Убедитесь, что он находится в разделе<head> кода.</p><p> <strong> Брендирование сайта идет последним. </strong> Если брендинг вашей компании не является более популярным поисковым запросом, чем отдельные продукты или услуги, которые вы предлагаете, всегда ставьте брендинг последним в тексте тега заголовка после вертикальной черты ( | ).<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/orbitingweb.com/wp-content/uploads/identify-nofollow-meta-tag-1.png' /><noscript><img loading='lazy' src='/800/600/http/orbitingweb.com/wp-content/uploads/identify-nofollow-meta-tag-1.png' /></noscript></p><p> <strong> Избегайте стоп-слов. </strong> Стоп-слова — это слова, которые практически не имеют значения ключевого слова, например: of, a, and, the и т. д. Вместо этого попробуйте включить ключевое слово как можно ближе к началу URL-адреса, чтобы помочь Google распознать значение ваш контент для этой фразы.</p><h3></h3><strong> Почему так важны теги заголовков? </strong></h3><ul><li> <strong> Учитываются первые впечатления. </strong> Ваш тег заголовка может быть первым, что увидит потенциальный посетитель при выполнении поиска.</li><li> <strong> Использование бренда </strong> . Соблазняйте клики и приведите к большему трафику.</li></ul><h4></h4><strong> Знаете ли вы? </strong></h4><p> Google может изменить ваши теги заголовков. Почему? Может быть более подходящий тег заголовка для того, что ищут пользователи. Чтобы бороться с переписыванием тегов заголовков, попробуйте следующие три стратегии:</p><ol><li> Точно опишите содержание вашей страницы.</li><li> Продемонстрируйте качества, которые хотят видеть люди.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wiki.merionet.ru/images/kak-rabotaet-web-http-i-rest/3.png' /><noscript><img loading='lazy' src='/800/600/http/wiki.merionet.ru/images/kak-rabotaet-web-http-i-rest/3.png' /></noscript> Помните: вы эксперт!</li><li> Сфокусируйте заголовок на привлечении кликов, чтобы увеличить CTR (коэффициент кликабельности).</li></ol><p> Следующим шагом является создание эффективного <strong> мета-описание </strong> .</p><h3></h3><strong> Рекомендации по метаописаниям </strong></h3><p> Длина вашего метаописания зависит от поисковой системы:</p><ul><li> Google: 150-158</li><li> Bing & Yahoo!: до 168  720<h5><span class="ez-toc-section" id="5_00_120">5 На мобильных устройствах: 00 120 </span></h5><p> <em> * </em> <strong> СОВЕТ </strong> : идеальная длина 120-158 символов.</p><p> Поисковые системы, такие как Google, используют CTR в качестве фактора ранжирования. Таким образом, чем больше у вас посещений страниц, тем выше ваша страница будет отображаться в поисковой выдаче, что делает метаописания важной частью ваших потребностей SEO на странице.</p><h3></h3><strong> Из чего состоит хорошее метаописание? </strong></h3><p> Помните, что иногда меньше значит больше. Хорошие метатеги будут иметь выдержку, которая попадает прямо в суть, с наиболее целевой и важной информацией в пределах первых 120 символов.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/igorchernomoretz.com/wp-content/uploads/2015/03/page0.jpg' /><noscript><img loading='lazy' src='/800/600/http/igorchernomoretz.com/wp-content/uploads/2015/03/page0.jpg' /></noscript> Это приведет к максимальному CTR. Думайте о метатегах как о расширении текста вашего объявления, поэтому убедитесь, что он броский, привлекательный и продуманный, но при этом лаконичный.</p><h3></h3><strong> Как выглядит метаописание? </strong></h3><p> Метаописания появляются непосредственно под заголовком вашей страницы в поисковой выдаче.</p><ul><li></li></ul><p> В HTML метаописания кодируются следующим образом: </p><p><head></p><p><meta name="description" content="Это ваше метаописание"></p><p></head></p><p> <strong> СОВЕТ </strong> <em> : </em> Вы можете найти метаописание для этой страницы, нажав Ctrl + U, чтобы открыть исходный код HTML.</p><h3></h3><strong> Еще несколько рекомендаций по использованию метаописаний  </strong></h3><ul><li> Будьте краткими, но описательными.</li><li> Избегайте общих заголовков, которые могут снизить рейтинг кликов.</li><li> Включите целевое ключевое слово там, где оно имеет смысл.<ul><li> <strong> СОВЕТ: </strong> Лучшее ключевое слово — это слово или фраза, которые часто используются вашей целевой аудиторией, имеют отношение к теме вашего контента и уже входят в ранжирование вашего сайта.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/discourse-user-assets.s3.amazonaws.com/original/3X/6/2/623c5725f8deec17577d4581390acb071435ca49.png' /><noscript><img loading='lazy' src='/800/600/http/discourse-user-assets.s3.amazonaws.com/original/3X/6/2/623c5725f8deec17577d4581390acb071435ca49.png' /></noscript></li></ul></li><li> Вы можете выделить основные ключевые слова, выделив их жирным шрифтом, чтобы они <strong> выделялись </strong> и привлекали внимание зрителей, что также может помочь Google определить фразы, на которые вы ориентируетесь.</li><li> Имейте уникальные метаописания для каждой страницы вашего сайта. Наличие уникального текста на каждой странице — это больше, чем просто наличие оригинального контента и идей, это также инструмент SEO. Наличие уникальных описаний позволяет вашей странице создавать более широкую сеть и включать различные целевые ключевые слова для привлечения кликов.</li><li> Призыв к действию в вашем мета-описании очень важен. Вы хотите, чтобы действие, которое вы хотите, чтобы пользователь совершил — щелчок по вашей странице — было ясным, указав, что они получат, сделав это. Избегайте звука, похожего на рекламный спам. Это не только вызовет недоверие к вашему присутствию в Интернете и увеличит показатель отказов, но и может привести к наказанию со стороны самой поисковой системы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images_en/thumb/2/22/Use-Meta-Tags-Step-1.jpg/670px-Use-Meta-Tags-Step-1.jpg' /><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images_en/thumb/2/22/Use-Meta-Tags-Step-1.jpg/670px-Use-Meta-Tags-Step-1.jpg' /></noscript></li></ul><p> Теперь, когда мы рассмотрели теги заголовков и метаописания, давайте вспомним лучшие практики метатегов.</p><h3></h3><strong> Как написать метатег </strong></h3><p> Добавляя метатеги в свой HTML-код, убедитесь, что вы включаете эти 3 элемента:</p><ol><li> <em> <strong> Целевые ключевые слова с большей вероятностью повысит как вашу видимость, так и ваш органический трафик. Google даже выделяет совпадающие ключевые слова в результатах поиска, чтобы показать их релевантность, повышая доверие к вашей странице.</li><li> <em> <strong> Сильный CTA </strong> </em> : Поскольку конечной целью является получение кликов по странице, создайте ощущение срочности при предоставлении CTA. Убедитесь, что это относится к вашей странице и не выглядит ложной рекламой.</li><li> <em> <strong> Уникальный голос </strong> </em> : Наличие уникальных описаний на каждой странице позволяет вам охватить больше людей, используя целевые ключевые слова. Не дублируйте метаописание. Вместо этого наличие уникальных описаний на каждой странице позволяет охватить больше людей и применять различные ключевые слова.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i1.wp.com/stokrat.org/upload/blog/i236/image13.png' /><noscript><img loading='lazy' src='/800/600/http/i1.wp.com/stokrat.org/upload/blog/i236/image13.png' /></noscript></li></ol><p> Метатеги и метаописания играют ключевую роль в привлечении внимания и привлечении пользователей на ваш сайт. Отсутствующие метатеги, теги заголовков или метаописания могут быть единственным, что стоит между результатом поиска и новым посетителем сайта!</p><h3></h3><strong> Реализуйте эти знания с помощью корпоративной платформы SEO </strong></h3><p> Платформа для корпоративного контент-маркетинга Conductor предоставляет полезную информацию обо всем, что связано с SEO. Посмотрите 3-минутный обзор продукта сегодня, чтобы узнать, как Conductor может легко определить области возможностей в метатегах на вашем сайте и помочь вам внести эти изменения на страницу.</p><h2><span class="ez-toc-section" id="_HTML-2"> Что такое метатег (и как они работают в HTML)? </span></h2><p> <em> Понять, как мета-теги влияют на поисковых роботов </em></p><p> Мы все говорим о внутренней и внешней поисковой оптимизации и о том, насколько она полезна для повышения рейтинга вашего сайта. Но сегодня мы собираемся копнуть еще глубже — в мельчайшие технические аспекты метатегов и их влияние на ваш рейтинг в поисковой выдаче.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cssfixer.com/wp-content/uploads/2019/02/responsive-meta-tag-by-css-fixer.jpg' /><noscript><img loading='lazy' src='/800/600/http/cssfixer.com/wp-content/uploads/2019/02/responsive-meta-tag-by-css-fixer.jpg' /></noscript></p><p> Существует множество различных метатегов, и каждый из них имеет определенную цель, часто связанную с тем, чтобы сообщать поисковым роботам и браузерам, как интерпретировать ваш сайт. Но не все метатеги одинаковы — одни влияют на то, как ваш контент отображается в поисковой выдаче, а другие сообщают поисковым роботам и браузерам, как интерпретировать вашу страницу.</p><p> Независимо от того, создаете ли вы новую страницу или оптимизируете существующую, понимание того, как использовать метатеги и на каких из них следует сосредоточиться, может оказать существенное влияние на то, как поисковые системы и посетители веб-сайта взаимодействуют с вашим контентом.</p><h3><span class="ez-toc-section" id="i-61"> Что такое метатеги? </span></h3><p> Метатеги — это HTML-элементы в разделе заголовка вашего веб-сайта. Поисковые системы используют их для получения конкретной информации о вашей странице, такой как заголовок и описание контента. Хотя эти метатеги не будут отображаться для читателей напрямую на вашем веб-сайте, они являются жизненно важной частью любого технического SEO-аудита.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/9U6dh.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/9U6dh.png' /></noscript></p> <i> Пример раздела<head> из раздела Что такое цель поиска и почему это важно. </i><p> Каждый из этих тегов предоставляет важную информацию о том, как поисковые роботы должны анализировать метаданные на вашем веб-сайте. По сути, это способ сообщить поисковым системам, а иногда и браузерам, как интерпретировать созданный вами контент.</p><p> Давайте разберем некоторые важные метатеги в примере на скриншоте:</p><p><meta charset="utf-8" /></p><p> Это определяет кодировку символов для вашего веб-сайта. Он сообщает браузерам и поисковым системам, как интерпретировать код/контент вашего сайта на базовом уровне. По сути, это определение языка, который использует ваш сайт. UTF-8, также известная как Unicode, представляет собой кодировку символов, которая охватывает почти все символы и символы в мире.</p><p><title>Что такое поисковое намерение и почему оно имеет значение?

Название страницы будет отображаться как заголовок в поисковой выдаче.

Узнайте, как это работает» />

Этот тег суммирует содержание вашей страницы и будет отображаться под заголовком в поисковой выдаче и сообщит искателям, поможет ли страница ответить на их запрос. Просто имейте в виду, что Google также может напрямую извлекать контент с вашей страницы для различных функций поиска.

Заголовок и метаописание, вероятно, являются наиболее важными тегами, которые вы определяете для каждой страницы, поскольку они будут уникальными для отображаемого контента. На скриншоте мы также видим следующие метатеги:

Все три из них влияют на то, как вся ваша страница будет отображаться в разных браузерах или на мобильных устройствах.

  • X-UA-Compatible указывает Microsoft Edge отображать страницу в максимально возможном режиме.
  • HandheldFriendly сообщает браузерам и поисковым роботам, что на вашем сайте используется разметка для мобильных устройств, т. е. страница оптимизирована для мобильных браузеров.
  • Viewport сообщает браузерам, как управлять размерами и масштабированием страницы, когда ваш сайт просматривается на разных устройствах (настольный компьютер, телефон, планшет и т. д.).

И этот список можно продолжить. Существует гораздо больше метатегов, которые сообщают браузерам и поисковым роботам, как интерпретировать ваш веб-сайт, которые мы рассмотрим в следующем разделе.

Разница между метатегами SEO и метатегами Open Graph

На нашем скриншоте есть теги, которые включают OG в обозначение свойства:

Важно включить эти теги в контент вашего блога, чтобы читатели могли легко им поделиться. Если вы этого не сделаете, когда читатель поделится вашим контентом, его сообщение будет содержать только URL-адрес самой статьи, без заголовка, изображения или описания.

Использование этих тегов может привлечь трафик на ваш сайт и способствовать продвижению вашего бренда.

Как сканеры поисковых систем используют метатеги

Думайте о метатегах как о своего рода дорожной карте для сканеров поисковых систем. Всякий раз, когда бот попадает на ваш веб-сайт, его цель — узнать как можно больше и вернуть эти данные в соответствующую поисковую систему для индексации. Правильное использование метатегов гарантирует, что вы сообщаете этим ботам правильную информацию таким образом, чтобы им было легко ее анализировать.

Мы можем разделить различные метатеги на основе того, что они сообщают поисковым роботам о вашем веб-сайте. Существуют метатеги, которые:

  • сообщают сканерам, как взаимодействовать с вашим веб-сайтом
  • сообщают поисковым системам, как отображать информацию в поисковой выдаче
  • сообщают браузерам и устройствам, как отображать ваш сайт при доступе к нему

метатеги, которые влияют Как поисковые роботы взаимодействуют с вашим веб-сайтом

Как только поисковый робот попадает на ваш сайт, бот должен понять, как с ним взаимодействовать. Если вы не определяете определенные метатеги в разделе вашего веб-сайта, поисковые роботы не смогут понять информацию, которую они должны прочитать. Некоторые из этих элементов будут определены на уровне сайта, например 9.0581 charset и hreflang , но другие определяют, как следует сканировать определенные страницы.

Метатег Charset

Мы упоминали об этом ранее, но этот метатег — это одна из первых вещей, которые поисковый робот должен знать при доступе к вашему веб-сайту. Вот почему это первый метатег, который вы увидите в разделе вашего сайта. Без него ни поисковые роботы, ни браузеры не смогут отобразить ваш сайт.

Метатег Hreflang

Существует два основных способа определить язык, который используется на вашем веб-сайте. Первый — это универсальный HTML-тег, который появляется в верхней части исходного кода вашего веб-сайта:

Пример языкового HTML-тега на Что такое цель поиска и почему это важно .

Это простой способ определить содержимое веб-сайта, статичное для всего создаваемого вами содержимого. Другой способ — использование hreflang метатег, который чаще используется для индексации многоязычного веб-сайта.

Этот пример включает веб-сайт, имеющий английскую и французскую версии. Определяя, какой язык используется для каждого сайта, вы указываете Google индексировать каждый сайт отдельно. Это гарантирует, что вариант на английском языке будет отображаться в результатах поиска на английском языке, а вариант на французском языке — во французских результатах.

Хотя это может быть актуально не для каждого веб-сайта, важно понимать, как язык и страна происхождения влияют на индексацию (и, следовательно, ранжирование) данного веб-сайта. Если вы используете тег hreflang , просто убедитесь, что вы следуете всем рекомендациям Google по указанию правильной страны. Чем для большего количества стран вы переводите контент, тем сложнее это будет.

Теперь давайте перейдем к тегам, которые определяют, как должен сканироваться ваш сайт.

Метатег Robots

Иногда вам может понадобиться сообщить поисковым роботам обходить определенные страницы вашего сайта для индексации. Независимо от того, содержат ли эти страницы конфиденциальные данные или просто не созданы для отображения в поисковой выдаче, применение метатега robots с обозначением noindex заставит любые поисковые роботы игнорировать эту страницу.

Просто убедитесь, что вы не используете это на странице, которую вы хотите, чтобы люди могли найти через поиск. Этот метатег полностью удалит страницу из индекса поисковой системы.

Метатег ключевых слов

Метатег keywords изначально был создан для определения набора релевантных ключевых слов для конкретных страниц вашего веб-сайта. Мы говорим «был», потому что это устаревший метод SEO-оптимизации, который восходит к 1995 году, когда поисковые системы не были такими мощными, как сегодня.

Мы не рекомендуем вам использовать этот метатег на вашем веб-сайте, потому что в конечном счете он бесполезен. Гугл и др. будет напрямую сканировать содержимое вашего сайта и принимать решение о том, какие ключевые слова релевантны самой странице. Но это все еще то, что вы можете увидеть на старых веб-сайтах, которые существуют с начала 2000-х годов. Полезно знать, что вам нужно, а также то, что вы не нужен .

Метатег Canonical

Этот метатег сообщает поисковым системам какая страница является главной копией любой данной страницы. Он используется для сокращения возможности дублирования контента и сообщает поисковой системе, какая версия вашей страницы должна отображаться в поисковой выдаче. Вы должны определить это на каждой странице своего блога, даже при синдикации контента в другие публикации, такие как LinkedIn или Medium, чтобы в конечном итоге вы не каннибализировали свой рейтинг несколькими версиями одной и той же страницы.

Использование этого тега также помогает сократить время, затрачиваемое поисковыми роботами на чтение всего сайта, что снижает негативное влияние на скорость сайта при перемещении по каждой странице.

Метатег подтверждения сайта

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

Мета-теги, влияющие на то, как ваш веб-сайт отображается в поисковой выдаче

Всякий раз, когда кто-то ищет определенный вопрос или ключевое слово, поисковые системы должны решить, какие результаты лучше всего подходят для ответа на этот вопрос. После того, как они оценили результаты, им нужно отобразить их в поисковой выдаче. Вот где в игру вступают метатеги title, description и URL. Определяя эти элементы в разделе вашего веб-сайта, вы сообщаете поисковой системе, какую именно информацию вы хотите отобразить.

Результаты поисковой выдачи для Что такое цель поиска и почему она важна .

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

Метатеги, которые определяют, как отображается ваш веб-сайт

Эти метатеги помогут вам управлять тем, как ваш веб-сайт отображается в различных браузерах и на устройствах, которые используют поисковики. Многие из них будут установлены непосредственно на уровне веб-сайта, но вам все равно нужно понимать, как они работают, чтобы обеспечить максимально эффективное техническое SEO.

Метатег области просмотра

Тег области просмотра является одним из основных компонентов мобильной адаптации. Этот метатег предоставляет браузерам информацию, необходимую им для правильного отображения вашего сайта на разных устройствах.

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

Метатег Refresh

Этот метатег представляет собой метод, сообщающий данной странице об обновлении каждые X секунд. Спам-сайты часто используют эту тактику, чтобы увеличить размер дохода от рекламы, который они могут получить от данной страницы, обновляя рекламу, которая отображается несколько раз за каждое посещение сайта.

Единственным практическим примером использования такого обновления могут быть промежуточные страницы, такие как те, которые говорят «Эта страница будет автоматически перенаправлена ​​через 15 секунд», которые обычно используются после покупки.

Мы не рекомендуем использовать этот метод перенаправления для вашего веб-сайта, поскольку это может негативно повлиять на ваш рейтинг, если поисковые роботы увидят, что несколько страниц обновляются таким образом. Есть также много других методов обновления, которые намного лучше для SEO.

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

Рекомендации по определению метатегов SEO на вашем веб-сайте

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

Хотя большинство платформ CMS будут иметь встроенные функции, которые помогут вам определить эти метатеги, по крайней мере, на уровне веб-сайта, важно проверять каждую страницу вашего веб-сайта до ее публикации или после ее обновления. Это гарантирует, что даже при внимательном рассмотрении этих метатегов у вас не возникнет никаких проблем.

Существуют также плагины, такие как Yoast для WordPress, которые упрощают процесс обновления метатегов. Такие сторонние плагины — отличный выбор, если вам неудобно взаимодействовать с кодом непосредственно на вашем веб-сайте. В некоторых случаях они направляют вас к лучшим практикам SEO.

Как и в случае с любым HTML, установлен используемый вами синтаксис. Используйте такие ресурсы, как W3, чтобы перепроверить, как писать эти метатеги, прежде чем запускать какие-либо обновления.

Ограничения на количество символов также важны, особенно для вашего мета-заголовка и описания. Если вы не будете осторожны, вы в конечном итоге урежете важную информацию, и поисковики не смогут ее найти. Принято считать, что мета-заголовок должен быть не более 60 символов, а мета-описание — не более 158 символов. Возьмем этот пример, где второе предложение мета-описания резко обрывается без предоставления какой-либо информации.

Пример усеченного метаописания в Google.

Тем не менее, на мобильных устройствах поисковые системы будут сокращать ваши метаописания, поэтому вам нужно стремиться к менее чем 120 символам. Если вы следуете этим рекомендациям, у вас не должно возникнуть проблем с предоставлением информации поисковым роботам они должны правильно проиндексировать ваш сайт. Это, в свою очередь, улучшит взаимодействие пользователей с вашим сайтом в поисковой выдаче.

Когда вы правильно используете правильные метатеги на своем веб-сайте, они сообщают поисковым системам все, что им нужно знать о вашем веб-сайте. Доступность этих данных позволяет поисковым роботам легко анализировать данные и возвращать их для индексации.

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

HTML: тег


В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML содержит информацию или метаданные, которые не отображаются непосредственно на веб-странице, но используются браузерами и поисковыми системами. Этот тег также часто называют элементом.

Синтаксис

Наиболее распространенный синтаксис для тега HTML : ( пример для окна просмотра, описания, ключевых слов и автора )

 
 0">



 

или в XHTML синтаксис для тега : ( пример для области просмотра, описания, ключевых слов и автора )

 




 

Атрибуты

Помимо глобальных атрибутов, ниже приведен список атрибутов, специфичных для тега:

Атрибут Описание HTML-совместимость
кодировка Кодировка символов для страницы HTML5
содержание Значение для метаданных. Он обеспечивает значение, связанное с атрибут http-equiv или атрибут имени . HTML 4.01, HTML5
http-эквивалент

Определяет прагму. Значение прагмы, найденной в содержимом , может быть:

  • язык содержимого (устарело)
  • тип содержимого (устарело)
  • стиль по умолчанию
  • обновить
  • set-cookie (устарело)
HTML 4.01
имя Имя метаданных. Это может быть одно из следующих значений:
  • имя-приложения
  • автор
  • описание
  • генератор
  • ключевых слов
  • создатель
  • гуглбот
  • издатель
  • robots (для name=»robots», content может быть одним из следующих: index, noindex, follow, nofollow, noodp, noarchive, nosnippet, noimageindex, noydir, nocache)
  • чавкать
  • область просмотра (для name=»viewport», содержимое может быть одним из следующих: ширина, высота, начальный масштаб, максимальный масштаб, минимальный масштаб, масштабируемый пользователем)
HTML 4. 01, HTML5
схема Схема, в которой описываются метаданные Устаревший

Примечание

  • HTML-элемент находится внутри тега.

Совместимость с браузерами

Тег имеет базовую поддержку со следующими браузерами:

  • Chrome
  • Андроид
  • Firefox (Геккон)
  • Firefox Mobile (Геккон)
  • Internet Explorer (IE)
  • Пограничный мобильный
  • Опера
  • Опера Мобайл
  • Сафари (веб-кит)
  • Сафари Мобильный

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваши теги могут выглядеть следующим образом:

 

<голова>
<мета-кодировка="UTF-8">
 0">



Пример HTML5 от www.techonthenet.com

<тело>

 

В этом примере документа HTML5 мы создали 5 метатегов. Первый метатег ( charset ) определяет кодировку символов для документа HTML. Второй метатег ( viewport ) используется при разработке адаптивного веб-сайта. Третий метатег ( описание ) предоставляет описание веб-страницы для поисковых систем. Четвертый метатег ( ключевых слов ) предоставляет ключевые слова для поисковых систем. Последний метатег ( author ) определяет автора веб-страницы.

HTML 4.01 Transitional Document

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом:

  01 Transitional// RU" "http://www.w3.org/TR/html4/loose.dtd">

<голова>





Переходный пример HTML 4.01 от www.techonthenet.com

<тело>

 

В этом примере переходного документа HTML 4.01 мы создали 5 метатегов. Первый метатег ( charset ) определяет кодировку символов для документа HTML. Второй метатег ( viewport ) используется при разработке адаптивного веб-сайта. Третий метатег ( описание ) предоставляет описание веб-страницы для поисковых систем. Четвертый метатег ( ключевых слов ) предоставляет ключевые слова для поисковых систем. Окончательный метатег ( автор ) определяет автора веб-страницы.

XHTML 1.0 Transitional Document

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>





Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>

 

В этом примере переходного документа XHTML 1.0 мы создали 5 метатегов. Первый метатег ( charset ) определяет кодировку символов для документа HTML. Второй метатег ( viewport ) используется при разработке адаптивного веб-сайта. Третий метатег ( описание ) предоставляет описание веб-страницы для поисковых систем. Четвертый метатег ( ключевых слов ) предоставляет ключевые слова для поисковых систем. Окончательный метатег ( автор ) определяет автора веб-страницы.

XHTML 1.0 Strict Document

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть следующим образом:

 

<голова>




 techonthenet.com" />
Строгий пример XHTML 1.0 от www.techonthenet.com

<тело>

 

В этом примере XHTML 1.0 Strict Document мы создали 5 метатегов. Первый метатег ( charset ) определяет кодировку символов для документа HTML. Второй метатег ( viewport ) используется при разработке адаптивного веб-сайта. Третий метатег ( описание ) предоставляет описание веб-страницы для поисковых систем. Четвертый метатег ( ключевых слов ) предоставляет ключевые слова для поисковых систем. Окончательный метатег ( автор ) определяет автора веб-страницы.

Документ XHTML 1.1

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть следующим образом:

  <голова>

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

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