Html мета теги: описание(description), ключевые слова(keywords), заголовок(title) и другие мета-теги

Содержание

Тег meta

❮Назад Полный HTML Ссылки Дальше ❯

Пример

Опишите метаданные в документе HTML:

Определение и использование

Метаданные — это данные (информация) о данных.

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

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

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

HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра (видимой областью пользователя веб-страницы), через — <meta> тег (уидеть «Setting The Viewport» Пример ниже).

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

Элемент
<meta>	Да	Да	Да	Да	Да

Советы и примечания

Примечание: <meta> Теги всегда заходят внутрь элемента <head>.

Примечание: Метаданные всегда передаются в виде пар «имя-значение».

Примечание: Атрибут content должен быть определен, если определено имя или атрибут HTTP-EQUIV. Если ни один из них не определен, атрибут Content не может быть определен.

Настройка видового экрана

В HTML5 появился метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.

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

На всех веб-страницах необходимо включить следующий элемент <meta> видового экрана:

Элемент <meta> видовой экран предоставляет браузеру инструкции по управлению размерами страницы и масштабированию.

Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).

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

Вот пример веб-страницы Без мета-тег видового экрана и та же веб-страница С мета-тег видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Без мета-тега видового экрана

С помощью мета-тега видового экрана

Вы можете прочитать больше о видовом экране в нашем Адаптивный веб-дизайн — учебник по видовому экрану.

Различия между HTML 4,01 и HTML5

Атрибут scheme-навестить поддерживается в HTML5.

HTML5 имеет новый атрибут, кодировку, что облегчает определение кодировки:

HTML 4.01: <meta http-equiv=»content-type» content=»text/html; charset=UTF-8″>
HTML5: <meta charset=»UTF-8″>

Различия между HTML и XHTML

В HTML тег <meta> не имеет конечного тега.

В XHTML тег <meta> должен быть правильно закрыт.

Примеры

Пример 1 — определение ключевых слов для поисковых систем:

Пример 2 — Определите описание веб-страницы:

Пример 3 — Определите автора страницы:

Пример 4 — обновление документа каждые 30 секунд:

Пример 5 — Настройка видового экрана, чтобы сделать ваш сайт хорошо выглядел на всех устройствах:

Атрибуты

= Новиный в HTML5.

Атрибут	Значение	Описание
charset	character_set	Задает кодировку символов для HTML-документа
content	text	Дает значение, связанное с атрибутом http-equiv или Name
http-equiv	content-type default-style refresh	Предоставляет заголовок HTTP для информации/значения атрибута Content
name	application-name author description generator keywords viewport	Задает имя для метаданных
scheme	format/URI	Не поддерживается в HTML5. Задает схему, используемую для интерпретации значения атрибута Content

Глобальные атрибуты

Тег <meta> также поддерживает Глобальные атрибуты в HTML.

Параметры CSS по умолчанию

Нет.

❮Назад Полный HTML Ссылки Дальше ❯

Какие бывают META теги и зачем они нужны / Хабр

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

META-теги имеют два возможных атрибута

— <META HTTP-EQUIV=»имя» CONTENT=»содержимое»>
— <META NAME=»имя» CONTENT=»содержимое»>
META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.

Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)

Атрибут HTTP-EQUIV

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

Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.

Значения поля content для Аттрибута HTTP-EQUIV

Значение	Описание	Пример использования	Эффект
Expires	Дата устаревания. Управление кэшированием в HTTP/1.0. Если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением «0» интерпретируется как «сейчас». Такое значение заставляет броузер каждый раз при запросе проверять — изменялся ли этот документ. Это, кстати относится и к прокси-агентам.	Дата должна быть задана в формате, описываемом в RFC850, <META HTTP-EQUIV=»expires» CONTENT=»Wed, 26 Feb 2008 08:21:57 GMT»> что эквивалентно HTTP-заголовку Expires: Wed, 26 Feb 2008 08:21:57 GMT	Поисковые роботы могут либо совсем не индексировать такой документ, либо постоянно «обнюхивать» его.
Pragma	Эта директива показывает, что кешированная информация не должна использоваться и вместо этого запросы должны посылаться на сервер. Это директива имеет тоже самое значение что и CACHE-CONTROL:NO-CACHE и представлена для обратной совместимости с HTTP/1.0. Клиенты должны использовать оба значения PRAGMA:NO-CACHE и CACHE-CONTROL:NO-CACHE когда нужно послать некешируемый запрос к серверу, про который неизвестно – совместим ли он с HTTP/1.1. Если известно, что сервер совместим с HTTP/1.1 клиент НЕ должен посылать PRAGMA заголовок. HTTP/1.1 кэш должен понимать «PRAGMA:NO-CACHE» точно также, как будто клиент послал «CACHE-CONTROL:NO-CACHE».	<META HTTP-EQUIV=»PRAGMA» CONTENT=»NO-CACHE»>
Content-Type	Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тега, то некоторые браузеры выводят такую страницу уже в заданном charset.	<META HTTP-EQUIV=»Content-type» CONTENT=»text/html; charset=ISO-2022-JP»>	Используют браузеры и поисковые системы
Content-language	Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.	<META HTTP-EQUIV=»Content-language» CONTENT=»en-GB»> что эквивалентно HTTP-заголовку Язык описывается парой значений (язык-диалект). В примере: Английский-Великобритания Для русского языка – ru-RU	Используется некоторыми поисковиками
Refresh	Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа.	<META HTTP-EQUIV=»Refresh» Content=»3, URL=http://www. name.com/page.html»> что эквивалентно HTTP-заголовку Refresh: 3; URL=http://www.name.com/page.html	W3C не рекомендует использовать этот тег. Google страницы с таким тегом игнорирует. Другие поисковые системы, возможно, тоже.
Cache-Control	Определяет действия кэша по отношению к данному документу. Возможные значения: Public — документ кэшируется в доступных для всех кэшах Private — только в частном кэше no-cache — не может быть кэширован no-store — может быть кэширован, но не сохраняется	<META http-equiv=»Cache-Control» content=»public»>	Используется некоторыми браузерами

Атрибут NAME

Robots	Тег <meta name=»Robots» content=»…»> управляет индексацией конкретной web-страницы. При этом роботам можно запретить не только индексацию самого документа, но и проход по имеющимся в нем ссылкам. Инструкции по индексации записываются в поле content. Возможны следующие инструкции: NOINDEX — запрещает индексирование документа; NOFOLLOW — запрещает проход по ссылкам, имеющимся в документе; INDEX — разрешает индексирование документа; FOLLOW — разрешает проход по ссылкам. ALL — равносильно INDEX, FOLLOW NONE — равносильно NOINDEX, NOFOLLOW Значение по умолчанию: <meta name=»Robots» content=»INDEX, FOLLOW»>. В следующем примере робот может индексировать документ, но не должен выделять из него ссылки для поиска дальнейших документов: <META name=»ROBOTS» content=»index, nofollow»> Имя тега, названия и значения полей нечувствительны к регистру. В поле content дублирование инструкций, наличие противоречивых инструкций и т.п. не допускается; в частности, значение поле content не может иметь вид «none, nofollow». Google поддерживает дополнительное значение NOARCHIVE, которое запрещает помещать страницу в архив google	<META NAME=»Robots» CONTENT=»NOINDEX,FOLLOW»>	Используется большинством поисковиков
Description	Значение атрибута CONTENT — строка, которая определяет текстовое описание (краткую аннотацию) конкретной страницы Вашего сайта. Не стоит создавать слишком длинное и подробное описание Вашего сайта в данном теге, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов. Этот тег может сильно помочь в случаях, когда в документе мало текста, когда это управляющий фреймами файл (frameset) или в начале документа используются скрипты.	<META NAME=»description» CONTENT=»Данный сайт содержит информацию для любителей старинных автомобилей, на нем Вы можете найти описание с фотографиями редких и эксклюзивных автомобилей»>	Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации. Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот тег, а некоторые выводят содержимое этого тега в результатах поиска (Google), поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.
Keywords	Значение атрибута CONTENT — список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, в запрос на которые, Вы хотели бы, появления Вашего сайиа в списке результатов поиска. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также Вы можете здесь записать и английские слова, соответствующие содержимому Вашего сайта. Ну, а какие конкретно нужно писать слова — это уже тема отдельной статьи. Некоторые поисковые системы не индексируют сайты, в которых в данном теге повторяется одно и то же слово для увеличения позиции в списке результатов.	<META NAME=»keywords» CONTENT=»реклама, дизайн, полиграфия»>	Учитывается большинством поисковых систем. Точно известно, что НЕ учитывает Google и Rambler
document-state	Управление индексацией страницы для поисковых роботов. Определяет частоту индексации — или один раз индексировать (значение Static), или реиндексировать документ регулярно (значение Dynamic).	<META NAME=»Document-state» CONTENT=»Static»>	Используется редко
GOOGLEBOT	Google поддерживает специальный тег Googlebot с помощью которого вы можете указать Google что он не должен индексировать и архивировать вашу страницу, другие поисковые системы этот тег проигнорируют.	<META NAME=»GOOGLEBOT» CONTENT=»NOARCHIVE»>
Author	Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой.	<META NAME=»AUTHOR» CONTENT=»www.neo-systems.ru»>
Revisit	Значение этого тега указывает — как часто обновляется информация на вашем сайте, и как часто поисковая система должна на него заходить чтобы увидеть обновления. В силу сложившихся условий — поисковые системы сейчас самостоятельно определяют частоту сканирования сайта, поэтому, возможно, наличие этого тега ничего вам не даст.	<meta name=»revisit-after» content=»15 days»>

Источники информации:

http://www.citforum.ru/internet/search/metatags.shtml
http://web-support.ru/adv/ps_meta_2.shtml
http://www.shtogrin.com/library/web/meta/
http://vancouver-webpages.com/META/metatags.detail.html
http://www.mattcutts.com/blog/keywords-meta-tag-in-web-search/
http://www.webotdel.ru/notes/metatags/
Очень хорошо и понятно написано http://www.w3schools.com/tags/tag_meta.asp
Какие мета-теги понимает Google http://www.google.com/support/webmasters/bin/answer.py?answer=79812
Какие мета-теги понимает Bing
http://www.bing.com/community/blogs/webmaster/archive/2009/07/18/head-s-up-on-lt-head-gt-tag-optimization-sem-101.aspx
Google не использует мета-тег keywords
http://googlewebmastercentral.blogspot. com/2009/09/google-does-not-use-keywords-meta-tag.html

Тег счетчика HTML

❮ Предыдущий Полный справочник HTML Далее ❯

Пример

Используйте элемент измерителя для отображения скалярного значения в заданном диапазоне (датчик):

Использование диска C:
2 из 10

Диск использование D:
60%

Попробуйте сами »

Определение и использование

Тег определяет скалярное измерение в пределах известного диапазона или дробное значение. Это также известно как калибр.

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

Совет: Всегда добавляйте тег для лучших практик доступности!

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<метр>	8,0	13,0	16,0	6,0	11,5

Атрибуты

Атрибут	Значение	Описание
форма	form_id	Указывает, к какой форме принадлежит элемент
высокий	номер	Задает диапазон, который считается высоким значением
низкий	номер	Указывает диапазон, который считается нижним значением
макс.	номер	Задает максимальное значение диапазона
мин	номер	Задает минимальное значение диапазона. Значение по умолчанию: 0
оптимальный	номер	Указывает, какое значение является оптимальным для датчика
значение	номер	Требуется. Указывает текущее значение датчика

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Ссылка HTML DOM: Объект счетчика

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Как использовать метатеги HTML

Примечание. Чтобы получить более актуальную информацию по этой теме, см. наше Полное руководство по метатегам в SEO. Просто добавьте метатеги, и ваш сайт волшебным образом поднимется на вершину, верно? Неправильный. Метатеги — это часть большой алгоритмической головоломки, на которую обращают внимание основные поисковые системы, решая, какие результаты релевантны для показа пользователям, которые ввели поисковый запрос.
Хотя до сих пор ведутся споры о том, какие метатеги остаются полезными и важными для поисковых систем, метатеги определенно не являются волшебным решением для получения рейтинга в Google, Bing, Yahoo или где-либо еще — так что давайте разрушим этот миф прямо сейчас. начало. Однако метатеги помогают сообщить поисковым системам и пользователям, о чем ваш сайт, и когда метатеги реализованы неправильно, негативное влияние может быть существенным и душераздирающим.
Давайте посмотрим, что такое метатеги, какое значение имеют метатеги и как избежать ошибок при использовании метатегов на вашем веб-сайте.
Что такое метатеги?
Метатеги HTML официально являются тегами данных страницы, которые находятся между открывающим и закрывающим тегами заголовка в HTML-коде документа.
Текст в этих тегах не отображается, но доступен для анализа и сообщает браузерам (или другим веб-службам) конкретную информацию о странице. Просто он «объясняет» страницу, чтобы браузер мог ее понять.
Вот пример кода метатегов:
<голова> Не метатег, но в любом случае обязателен
Подробнее об истории метатегов читайте в нашей статье «Смерть метатега».
Тег заголовка
Хотя тег заголовка появляется в блоке заголовка страницы, на самом деле он не является метатегом. Какая разница? Тег title является обязательным «элементом» страницы в соответствии с W3C. Метатеги — это необязательные дескрипторы страниц.
Чтобы узнать больше о лучших практиках для элемента тега заголовка, наша статья «Как написать теги заголовка для поисковой оптимизации» расскажет вам все, что вам нужно знать.
Метатег Description
Вот как выглядит тег description:

В идеале ваше описание должно быть не длиннее 155 символов (включая пробелы). Тем не менее, проверьте выбранную страницу результатов поисковой системы (SERP), чтобы подтвердить это. Некоторые длиннее, а некоторые короче. Это всего лишь эмпирическое правило, а не определенная «лучшая практика».
Ресурсы
Метатег «description» помогает веб-сайтам тремя важными способами:
«Описание» сообщает поисковой системе, о чем ваша страница или сайт: Чтобы поисковая система могла понять, о чем ваша страница, вам нужно написать хорошее описание. Когда алгоритм Google решает, что описание написано плохо или неточно, он заменяет это описание собственной версией того, что находится на странице. Разве вы не предпочли бы описать свой сайт потенциальным клиентам или посетителям, используя свои собственные слова, вместо того, чтобы оставлять его в искусственных руках Google? Посмотрите на этот пример и оцените сами:
«Описание» помогает повысить рейтинг кликов на ваш сайт: Хорошее описание не только помогает Google не переписать его, но и помогает привлечь больше людей, переходящих на ваш сайт. Хорошо написанное описание не только 90 240 сообщает 90 243 пользователям, что находится на вашей странице, но и 90 240 соблазняет 90 243 их посетить ваш сайт. Описание — это то, что отображается здесь в результатах поиска. Это похоже на хорошую витрину. Сайты с плохим описанием получат меньше кликов, и поисковые системы понизят ваш сайт в пользу других сайтов.
«Описание» помогает ранжированию сайта: Распространено мнение (основываясь на заявлении Google в 2009 г.), что ничто в описании не поможет вам ранжироваться. Однако я видел доказательства обратного. Он сильно утяжелен? Нет, но если вам нужно какое-то значение для вторичного ключевого слова (скажем, -ing -ed или -s), используйте его здесь.
Еще две краткие заметки о тегах мета-описаний:
Пустые описания: Может ли описание быть пустым? Да. Когда он пуст, Google и Bing заполнят его за вас. Фактически, иногда (например, для блогов) вы можете предпочесть версию Google или Bing. (Хотя лично я всегда заполняю его по возможности, предпочитая свою версию их, но если у вас небольшой штат, это не всегда практично.)
Цитаты: Не используйте полные кавычки («») в описании. Это, вероятно, обрежет ваше описание. Используйте одинарные кавычки, чтобы избежать этой проблемы.
Мета-тег Keywords
Давным-давно в далекой-далекой галактике метатег «keywords» был важнейшим элементом для первых поисковых систем. Подобно динозаврам, этот тег является ископаемым со времен древних поисковых систем.
Единственная поисковая система, которая больше просматривает ключевые слова, — это Microsoft Bing, и они используют ее для обнаружения спама. Чтобы не навредить вашему сайту, лучше никогда не добавлять этот тег.
Или, если это слишком радикально для вас, по крайней мере, убедитесь, что вы не набили 300 ключевых слов в надежде на более высокий поисковый рейтинг. Это не сработает. Извини.
Если у вас уже есть метатеги ключевых слов на вашем сайте, но они не являются спамом, нет причин тратить следующую неделю на их спешное удаление. На данный момент можно оставить их — просто уберите их по мере возможности, чтобы уменьшить вес страницы и время загрузки.
Другие метатеги
Существует много других метатегов, но ни один из них не считается полезным в настоящее время. Многие теги, которые мы использовали, делали что-то вроде:
Сказал пауку, когда вернуться

Сообщил браузеру дистрибутив
< метаимя="распространение" контент="веб">
Приказано обновить страницу
<мета http-equiv="обновить" контент="30">
Сообщил странице перенаправить/обновить
yourhost.com/pagetosendto.html">
Мы их больше не используем либо потому, что есть лучшие способы (такие как теги схемы или методы на стороне сервера), либо потому, что механизмы, с которыми они работали, больше не существуют, или Google прямо сказал нам, что они не очень хороши. идеи (например, перенаправления на уровне страницы).
ПРИМЕЧАНИЕ. Теги схемы и расширенные фрагменты данных — это само по себе наиболее важное (и несколько незаметно объявленное) изменение в том, как ваш сайт взаимодействует с поисковыми системами и поисковыми роботами. Узнать его. Знай это. Реализуйте это.
Метатег Robots
Тег robots по-прежнему является одним из самых важных тегов. Не столько за правильную реализацию, сколько за неправильную.
Метатег robots позволяет вам указать, что конкретная страница должна не индексироваться поисковой системой, или хотите ли вы, чтобы ссылки на этой странице переходили или нет.
Хотите верьте, хотите нет, но по-прежнему часто сайт деиндексируется из-за того, что кто-то случайно добавил тег noindex ко всему сайту. Понимание этого тега жизненно важно.
Вот четыре реализации метатега Robots и их значение.

Это означает: «Не индексировать эту страницу. Не переходите по ссылкам на странице». Ваша страница выпадет из поискового индекса, и ваши ссылки на другие страницы не будут переходить. Это нарушит путь ссылки на вашем сайте с этой страницы на другие страницы.
Этот тег чаще всего используется, когда сайт находится в разработке. Разработчик не будет индексировать/nofollow страницы сайта, чтобы они не попадались поисковым системам, а затем забудет удалить тег. Запуская новый веб-сайт, не верьте, что он был удален. ДВОЙНАЯ ПРОВЕРКА!

Это означает: «Проиндексировать эту страницу. Не переходите по ссылкам на странице». Ваша страница БУДЕТ в индексе, И ваши ссылки на другие страницы не будут переходить. Это нарушит путь ссылки на вашем сайте с этой страницы на другие страницы.
No related posts.