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

Основные функции:

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

Метатеги бывают универсальными и поддерживаемыми только какими-то конкретными системами.

Метатеги для поисковых систем

Robots

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

Для конкретного бота можно задать свою инструкцию. Например, заменить robots на Googlebot для Гугла или на YandexBot для Яндекса.

Возможные указания:

• all – означает, что разрешена индексация и переход по ссылкам, аналогично index, follow;
• noindex – запрет индексации;
• index – разрешена индексация;
• nofollow – нельзя переходить по ссылкам;
• follow – можно переходить по ссылкам;
• noarchive – запрещено показывать ссылку на сохраненную копию в выдаче;
• noyaca – (для Яндекса) не использовать для сниппета описание из Яндекс.Каталога;
• nosnippet – (в Google) нельзя использовать для сниппета фрагмент текста и показывать видео;
• noimageindex – (в Google) запрет указания страницы как источника изображения;
• unavailable_after:[date] – (в Google) после указанной даты будет прекращено сканирование и индексирование страницы;
• none – запрет индексации и перехода по ссылкам, аналогичен noindex, nofollow.

Description

Метатег name=«description» может использоваться поисковыми системами при формировании сниппета, поэтому он должен:

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

В разных поисковых системах выводятся 160–240 символов.

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

Keywords

Метатег name=«keywords» раньше использовался поисковыми системами при ранжировании, но из-за многочисленных манипуляций его значимость постоянно уменьшалась. Теперь большинство поисковиков его игнорируют. Google не поддерживает вообще, а Яндекс пишет, что может учитывать. Но на практике keywords давно не оказывает влияния, а его некорректное заполнение может привести к переспаму.

Существуют три подхода:

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

Если принято решение прописать ключевые слова, важно не допускать спама.

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

Title

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

Данный HTML-тег важен для SEO: влияет на ранжирование и кликабельность по сниппету.

Классические рекомендации по заполнению метатега:

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

Рекомендуема длина – 70–80 символов.

Другие метатеги

Верификация

Для подтверждения права собственности на сайт и возможности управлять им в Вебмастере Яндекса или Search Console в Google можно использовать особые метатеги верификации google-site-verification и yandex-verification (или иной способ).

Viewport

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

Http-equiv

Принимаемые значения:

• Content-Type – помогает определить кодировку и тип документа;
• Refresh – перенаправление на другую страницу после заданного в секундах времени нахождения;
• Content-Language – указание основного языка документа.

Тег указывает браузеру, на основании каких данных нужно обработать содержание документа.

Author и Copyright

Функция – идентификация автора. Если сайт принадлежит компании, используется Copyright, если конкретному лицу – Author.

В основе языка HTML лежит понятие «тэг» (англ.: tag-ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов <html> и </html>. В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.

Итак HTML документ заключается в контейнер <html></html>, заголовок в контейнер <head></head>, а содержание документа в контейнере <body></body>. Контейнер <title></title>, расположенный в заголовке (контейнере <head></head>) содержит текст, отображающийся в верхней строке окна браузера.

Мета-теги. Виды, задачи и шаблоны для оптимизаторов

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

Пример простейшей HTML странички, содержащей только основные тэги:

Результат работы указанного кода изображен на рисунке.

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

Для изменения шрифта, его цвета и размера используется тэг <font> с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:

Для выделения абзаца в тексте используется тэг <p>, в контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Для формирования списков в теле документа используются контейнеры <ol></ol>, <ul></ul> и <li></li>. Причем тэг <ol> формирует нурмерованный список, тэг <ul> — маркированный список, а в тэгах <li> помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.

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

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

При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.

Для вставки изображения на web-страницу используется тэг <img> с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:

Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга <body> «bgcolor» или «background-image». Пример вставки фонового цвета:

Пример вставки фонового изображения:

Указанные атрибуты могут быть использованы не только для тэга <body>, но и для тэгов таблицы, области и других, которые будут рассмотрены в следующих темах.

 

Примеры употребления слова мета в литературе.

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

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

Бор кричит, что Мета больше в драйв не идет, а Мета заявляет, что идет, причем вместе с ним.

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

Народ мет никогда не забудет Марику Рейггскую, дикую силту из стойбища Дегнанов, что в Верхнем Понате.

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

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

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

В дверях монастыря ее поджидала одна из этих мет — силта по имени Дженкатч.

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

Думаю, теперь ты можешь сделать для всех мет то же, что сделала для Рейгг.

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

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

Но и после обработки пленники продолжали утверждать, что никто из мет никогда не видел живого пришельца.

Где-то в этом холодном мире скрывается сейчас тот, кого она любила больше всех мет на свете.

Источник: библиотека Максима Мошкова

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

Часто используются meta-теги: author, description, keywords, viewport, charset.

Мета теги находятся в области <head> HTML документа (подробнее про <head>). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.

Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description, viewport, charset.

Что такое мета теги, как правильно заполнить и проверить

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

Синтаксис

Примеры использования <meta> в HTML коде

Основные мета теги

Ниже приведены несколько основных тегов <meta> с комментариями по применению и примерами использования.

Meta-тег description

Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.

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

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords.

Пример заполнения мета тега keywords

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale — коэффициент масштабирования при первом открытии страницы.

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

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

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: «UTF-8».

Пример использования мета тега кодировки charset

Meta тег refresh

Мета тег с атрибутом http-equiv=»refresh» указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

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

Поддержка браузерами

Атрибуты

Атрибут	Значения	Описание
charset	character_set	Указывает кодировку HTML документа.
content	тестовое значение	Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name.
http-equiv	content-type default-style refresh	Устанавливает HTTP заголовок для атрибута content. Сontent-type — Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше). Default-style — Предпочтительная таблица стилей. Refresh — Интервал автообновления страницы.
name	application-name author description generator keywords viewport	Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name — имя веб приложения, которое представляет страница. Author — имя автора веб страницы. Description — краткое описание страницы. Generator — Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц). Keywords — ключевые слова страницы. Viewport — некоторые параметры области просмотра страницы.

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

Пример:

<meta name =«title» content=«ЧП Матвиенко. Шины и диски»>

<title>ЧП Матвиенко. Диски и шины</title>

Составление title

Существует ряд приемов, как прописать title привлекательно и для поисковых пауков, и для посетителей.

Для роботов:

• title должен быть заполнен в обязательном порядке, иначе страница не будет ранжироваться; 
• ограничение по длине тайтла составляет 60-120 символов. Так как на странице выдачи выводится максимум 70 знаков, лучше прописывать title в рамках этого объема;
• тайтл должен коротко и ясно отражать суть данной страницы, т.е. должен быть максимально релевантным тексту. В обратном случае поисковые системы могут выбрать его самостоятельно;
• в тайтл лучше помещать прямое вхождение самого частотного ключа из тех, по которым продвигается данная страница;
• тег title должен использоваться на странице только один раз и находиться в блоке кода Head, а не Body;
• для каждой страницы, если это возможно, title должен быть уникальным;
• в тегах title и h1 рекомендуется использовать одинаковые ключевые слова или фразы.

Для посетителей:

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