Главная » Все про HTML » Список МЕТА тегов и зачем они нужны. Урок № 16

Список МЕТА тегов и зачем они нужны. Урок № 16

2014-03-09 / Вр:23:37 / просмотров: 10264

Мета-тег (англ. metainformation — метаинформация) – это тег, в котором может содержаться описание веб-страницы, ключевые слова, информация об авторе, управляющие команды для поисковых машин/браузеров и т.д.
Если правильно использовать МЕТА-теги, то это может послужить хорошим способом раскрутки сайта/блога.
Размещается мета-тег в голове HTML-документа между тегами <head></head>.

Мета-тег обозначается тегом <meta> и имеет следующие атрибуты:

http-equiv – служит для преобразования мета-тега в заголовок HTTP.
Пример: <meta http-equiv=" " Content=" ">
name – имя мета-тега (применяется в паре с атрибутом content).
Пример: <meta name=" " Content=" ">
content – указывает значение атрибута, который был задан с помощью name или http-equiv.
Пример: <meta name=" " Content=" ">
charset – кодировка HTML-документа.
Пример: <meta charset=" ">

Закрывающий тег для <meta> не нужен.

Теперь примеры с описанием:

HTML-кодировка веб страницы:

Чтобы указать браузеру, в какой HTML-кодировке была сохранена веб-страница, необходимо указывать в мета-теге вот такие данные:

<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">

Обычно имя кодировки задают в Windows-1251 либо utf-8.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Кодировка</title>
</head>
<body>
содержание
</body>
</html>

Подробней о кодировке вы можете почитать тут.

Информация о документе

Если вам нужно указать информацию о владельце (авторе) сайта/блога или компании используйте следующий мета-тег:

<meta name="author" content="имя автора" />

или

Пример:

<html>
<head>
<meta name="author" content="Вини Пух" />
<title>Автор</title>
</head>
<body>
содержание
</body>
</html>

Описание страницы

Для краткого описания веб-страницы используйте следующие значения в мета-теге «description»:

<meta name="description" Content="краткое описание веб-страницы">

Пример:

<html>
<head>
<meta name="description" Content="Интересная и полезная статья о мета-тегах!">
<title>Автор</title>
</head>
<body>
содержание
</body>
</html>

Описание в description не должно превышать 200 символов.

Ключевые слова

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

Пример:

<html>
<head>
<meta name="keywords" Content ="мета-тег,описание,html">
<title>Ключевые слова</title>
</head>
<body>
содержание
</body>
</html>

Максимальное количество ключевых слов в теге keywords не более 5-6 слов.
Кстати, рекомендую вам почитать полезную статью о том, как грамотно составить мета-теги.

Адрес

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

Publisher-Email – адрес электронной почты;
Publisher-URL – адрес сайта.

<meta name="Publisher-Email" Content="адрес электронной почты">
<meta name="Publisher-URL" Content="https://www.адрес_сайта/">

Пример:

<html>
<head>
<meta name="Publisher-Email" Content="test-bloggood@mail.ru">
<meta name="Publisher-URL" Content="https://www.bloggood.ru/">
<title>Адрес</title>
</head>
<body>
содержание
</body>
</html>

Обновление страницы

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

<META NAME="Revisit-After" CONTENT="10 days">

Пример:

<html>
<head>
<META NAME="Revisit-After" CONTENT="10 days">
<title>Обновление страницы</title>
</head>
<body>
содержание
</body>
</html>

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

Время жизни документа в КЭШе

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

Чтобы заставить браузер загружать веб-страницу не с КЭШа, а напрямую с сервера, нужно для этого указать в мета-теге день недели, число, месяц, год, время (чч:мм:сс) и часовой пояс.

<meta http-equiv="expires" content="Sun, 24 May 2014 12:28:36 GMT+03:00">

Пример:

<html>
<head>
<meta http-equiv="expires" content="Sun, 24 May 2014 12:28:36 GMT+03:00">
<title>КЭШ</title>
</head>
<body>
содержание
</body>
</html>

Таблица сокращений слов на месяцы

Таблица сокращений слов на дни недели

Команды для поисковых систем

<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">

Список команд для поисковых роботов:

Index – разрешение на индексацию веб-страницы;
Noindex – не индексировать веб-страницу;
Follow – прослеживать ссылки на веб-странице;
Nofollow – не прослеживать ссылки на веб-странице;
All – индексировать страницу и прослеживать ссылки на веб-странице (по умолчанию);
None – не индексировать страницу и не прослеживать ссылки на веб-странице

Пример:

<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
<title> Команды для поисковых систем</title>
</head>
<body>
содержание
</body>
</html>

Автоматический переход на другую страницу

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

<meta http-equiv="Refresh" content="8; URL=https://bloggood.ru/">

Настройка:

content="8; - время, через которое пользователь автоматически перенаправится на другую страницу. В данном примере это будет через 8 секунд.

url=https://bloggood.ru" – замените адрес или страницу, на которую вы хотите отправить пользователя.

Пример:

<html>
<head>
<meta http-equiv="Refresh" content="8; URL=https://bloggood.ru/">
<title> Автоматический переход на другую страницу</title>
</head>
<body>
содержание
</body>
</html>

Красивые эффекты при переходе по ссылке

Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer):

<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=0)">
<meta http-equiv ="Page- Exit " Content="RevealTrans(Duration=3.0, Transition=23)">

Настройки эффектов при переходе с одной веб-страницы на другую:

• Page-Enter – эффект появления веб-страницы;

• Page- Exit – эффект исчезновения веб-страницы;

• Duration – действие эффекта (в секундах);

• Transition – номера эффектов (от 0 до 23 – см. в таблице снизу)

Таблица номеров эффектов для «Transition»:

Таблица номеров эффектов для «Transition»

Пример:

Сохраните файл как «1.html»

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=12)">
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor="#c5ffa0">
<center>
<h2> Эффекты перехода страниц – СТРАНИЦА №1 </h2>
<font size="+1"> Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer).</font><hr><br>
<a href="2.html"><font size="+2">"Далее"</font></a>
</center>
</body>
</html>

Сохраните файл как «2.html»

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=2.0, Transition=23)">
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor="#c0e4ff">
<center>
<h2> Эффекты перехода страниц – СТРАНИЦА №2 </h2>
<font size="+1"> Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer).</font><hr><br>
<a href="1.html"><font size="+2">"Далее"</font></a>
</center>
</body>
</html>

Какие мета-теги использую я

HTML-кодировка веб страницы:

<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">

Описание страницы:

<meta name="description" Content="краткое описание веб-страницы">

Ключевые слова:

<meta name="keywords" Content ="ключевые слова через запятую">

Автоматический переход на другую страницу (редко):

<meta http-equiv="Refresh" content="8; URL=https://ваш-сайт/">

Вот, пожалуй, это все, что я хотел рассказать о мета-тегах.

Список МЕТА тегов и зачем они нужны. Урок № 16

HTML-кодировка веб страницы:

Информация о документе

Описание страницы

Ключевые слова

Адрес

Обновление страницы

Время жизни документа в КЭШе

Команды для поисковых систем

Автоматический переход на другую страницу

Красивые эффекты при переходе по ссылке

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Свежие записи:

Категории

Мои услуги

Валюта сети

Страницы

Свежие комментарии

Лучшие комментаторы

Мои цели на 2018-2019:

Статистика по блогу

BloGGood.ru

Список МЕТА тегов и зачем они нужны. Урок № 16

HTML-кодировка веб страницы:

Информация о документе

Описание страницы

Ключевые слова

Адрес

Обновление страницы

Время жизни документа в КЭШе

Команды для поисковых систем

Автоматический переход на другую страницу

Красивые эффекты при переходе по ссылке

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Свежие записи:

Категории

Мои услуги

Валюта сети

Страницы

Свежие комментарии

Лучшие комментаторы

Мои цели на 2018-2019:

Облако меток

Статистика по блогу

BloGGood.ru