BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Мета-тег (англ. 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="имя автора" />

или

<meta name="copyright" 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="http://www.адрес_сайта/">

Пример:

<html>
<head>
<meta name="Publisher-Email" Content="test-bloggood@mail.ru">
<meta name="Publisher-URL" Content="/">
<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=/">

Настройка:

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

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

Пример:

<html>
<head>
<meta http-equiv="Refresh" content="8; URL=/">
<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=http://ваш-сайт/">

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

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

Получай обновления блога!!! Подпишись:

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

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

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

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

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

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716