~~~ KOCI.INUMO.RU ~~~
Метатеги. Урок 28. Метатеги - специальные служебные теги, которые располагаются между тегами <head></head> и имеют служебное значение: дают информацию браузеру о кодировке, краткое описание страницы, ключевые слова и пр. Метатеги можно разделить на две группы. Метатеги для браузеров meta http-equiv. Метатеги для поисковых машин meta name.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
28. Метатеги.
Метатеги - специальные служебные теги, которые располагаются между тегами <head></head> и имеют служебное значение: дают информацию браузеру о кодировке, краткое описание страницы, ключевые слова и пр.
Метатеги можно разделить на две группы:
Метатеги типа <meta http-equiv= ... >
<meta http-equiv="content-type" content="text/html;charset=utf-8>
Данный тег определяет кодировку utf-8
<meta http-equiv="content-language" content="ru">
Определяет язык для данной страницы: русский.
<meta http-equiv="pragma" content="no-cache">
Запрещает кэширование (бывает нужно для динамических страниц).
<meta http-equiv="refresh" content="5">
Обновляет страницу через 5 секунд.
<meta http-equiv="refresh" content="5; url=http://kocby.ru/post/webmaster/html/">
Клон от предыдущего примера, но в данном случае происходит насильственный перевод на другую страницу. Полезно, если, например, страничка сменила адрес или устарела и есть более правильная версия.
Метатеги типа <meta name= ... >
<meta name="description" content="Краткое описание содержания страницы." />
Весьма важный тег, т.к. используется поисковиками для вывода информации о странице.
<meta name="keywords" content="ключевые слова через запятую или пробел" />
Этот тег имеет больше историческое значение, чем практическое, т.к. многими поисковиками просто игнорируется. Тем не менее, иметь его на страничке, наверное, смысл есть, т.к. все может измениться, а хуже от этого тега не будет.
<meta name="robots" content="all">
Метатег robots управляет индексированием страниц. Можно разрешить или запретить роботам не только индексацию самого документа, но и прохождение по имеющимся в нем ссылкам. Возможные значения:
<meta name="author" content="Имя автора">
<meta name="copyright" content="Кому принадлежат авторские права">
Используйте эти теги, если хотите зафиксировать авторские права на контент данной страницы.
Все рассказанное выше больше относится к старому стандарту HTML 4.1.
Что же касается нового правильного стандарта HTML 5, то тут есть тонкости, которые мы сначала отобразим в нашем окне для кода:
... а теперь отметим эти тонкости:
Наша тестовая страничка после данного урока:
article_028.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_028.zip ← скачайте пример, чтобы установить на свой сайт...
Метатеги можно разделить на две группы:
- Метатеги типа <meta http-equiv= ... > - это метатеги для браузеров.
- Метатеги типа <meta name= ... > - это метатеги для поисковых машин.
Метатеги типа <meta http-equiv= ... >
<meta http-equiv="content-type" content="text/html;charset=utf-8>
Данный тег определяет кодировку utf-8
<meta http-equiv="content-language" content="ru">
Определяет язык для данной страницы: русский.
<meta http-equiv="pragma" content="no-cache">
Запрещает кэширование (бывает нужно для динамических страниц).
<meta http-equiv="refresh" content="5">
Обновляет страницу через 5 секунд.
<meta http-equiv="refresh" content="5; url=http://kocby.ru/post/webmaster/html/">
Клон от предыдущего примера, но в данном случае происходит насильственный перевод на другую страницу. Полезно, если, например, страничка сменила адрес или устарела и есть более правильная версия.
Метатеги типа <meta name= ... >
<meta name="description" content="Краткое описание содержания страницы." />
Весьма важный тег, т.к. используется поисковиками для вывода информации о странице.
<meta name="keywords" content="ключевые слова через запятую или пробел" />
Этот тег имеет больше историческое значение, чем практическое, т.к. многими поисковиками просто игнорируется. Тем не менее, иметь его на страничке, наверное, смысл есть, т.к. все может измениться, а хуже от этого тега не будет.
<meta name="robots" content="all">
Метатег robots управляет индексированием страниц. Можно разрешить или запретить роботам не только индексацию самого документа, но и прохождение по имеющимся в нем ссылкам. Возможные значения:
- index / noindex - индексировать / не индексировать эту страницу
- follow / nofollow - идти / не идти по ссылкам с этой страницы
- all = "index, follow"
- none = "noindex, nofollow"
<meta name="author" content="Имя автора">
<meta name="copyright" content="Кому принадлежат авторские права">
Используйте эти теги, если хотите зафиксировать авторские права на контент данной страницы.
Все рассказанное выше больше относится к старому стандарту HTML 4.1.
Что же касается нового правильного стандарта HTML 5, то тут есть тонкости, которые мы сначала отобразим в нашем окне для кода:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Заголовок идет после того, как определились с кодировкой!</title> <meta name="description" content="Тут краткое описание странички." /> <meta name="keywords" content="тут ключевые слова можно через пробел или запятую" /> ... </head>
- Заголовок идет после того, как определились с кодировкой! - это идея просто гениальна. Действительно, информацию в самом <title> нам тоже надо отобразить в правильной кодировке, а, значит, вся информация по кодировке должна быть до <title>, а не после. Железная логика.
- <html dir="ltr" lang="ru-RU"> - указание браузеру, что начинается документ html, причем направление для чтения букв ltr (Left To Right, сЛева НаПраво). Буквы ru означают русский язык, буквы RU означают страну Россию.
- <meta charset="UTF-8" /> - это новая версия старого доброго тега <meta http-equiv="content-type" content="text/html;charset=utf-8>. Как видим, он стал намного короче, интуитивно понятнее и еще раз - его место ДО тега <title>
Наша тестовая страничка после данного урока:
article_028.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_028.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок 28
Следующие странички, рекомендуемые для посещения и изучения:
Урок 29
Страничка сделана на основе контента курса HTML сайта kocby.ru