Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Как прописать мета теги. Основы HTML для начинающих. Урок №21

16.03.2016


00:37


5709


2


Как прописать мета теги. Основы HTML для начинающих. Урок №21

Как прописать мета теги. Основы HTML для начинающих. Урок №21

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке мы разберем, что такое мета теги и как их прописывать к HTML-документу.
Несмотря на то, что некоторые  мета теги не видны человеку, они все же играют немаловажную роль в создании сайта. В процессе изучения, я думаю, вы поймете, насколько важны мета теги, для чего они нужны и как ими пользоваться.

Мета тег (англ. metainformation — метаинформация) – это тег, в котором может содержаться описание веб-страницы, ключевые слова, информация об авторе, управляющие команды для поисковых машин/браузеров и т.д. Можно найти еще такое выражение, что мета тег, это что-то похожее на визитную карточку страницы для различных служб Интернета. По-моему не плохое объяснение! :coffe:

Мета теги размещать нужно в голове HTML-документа между тегами <head></head> желательно после <title></title>.

Начну с самых нужных мета тегов.

Мета теги, которые должны присутствовать на сайте!

1. Описание страницы «description»
Мета тег «description» используют для краткого описания веб-страницы. Желательно краткое описание писать до 160 символов :

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

Пример:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta name="description" Content="Страница с описанием мета тегов">
</head>
<body>
текст
</body>
</html>

2. Ключевые слова «keywords»
Мета тег «keywords» используют для указания поисковой машине (Яндекс, Гугл и т.д.), какие ключевые слова присутствуют на веб странице.

<meta name="keywords" Content ="мета тег,прописать метатеги, метатеги для сайта">

Пример:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta name="keywords" Content ="мета тег,прописать метатеги, метатеги для сайта">
</head>
<body>
текст
</body>
</html>

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

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

Пример:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
текст
</body>
</html>

На веб страницах используют две кодировки – Windows-1251 либо utf-8. Более подробную статью о кодировках HTML почитайте тут.

Дополнительные мета теги!

4. Авторство или копирайтинг «Author» и «Copyright»
Чтобы указать автора или владельца сайта, используют мета тег «copyright» и «author»:

Autho – имяавтора
Copyright  – название организации

<meta name="author" content="имя автора" />
<meta name="copyright" content=" название организации " />

Например:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta name="author" content="Костаневич Степан" />
<meta name="copyright" content="Сайт StepkinBlog.ru" />
</head>
<body>
текст
</body>
</html>

5. Адрес «Publisher-Email» и «Publisher-URL»
Если нужно указать электронную почту автора и адрес сайта,  используют вот такие мета теги:

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

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

Пример:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta name="Publisher-Email" Content="admin@stepkinblog.ru">
<meta name="Publisher-URL" Content="http://stepkinblog.ru/">
</head>
<body>
текст
</body>
</html>

6. Обновление страницы «Revisit-After»
Мета тег «Revisit-After» ставят в том случае, если часто обновляется страница. Таким образом, вы говорите  поисковому роботу (Яндекс, Гугл и т.д.), когда ему прийти и снова проиндексировать обновленную страницу:

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

1 days – через сколько прийти поисковому роботу.

Пример:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<META NAME="Revisit-After" CONTENT="1 days">
</head>
<body>
текст
</body>
</html>

7. Команды для поисковых систем «ROBOTS»
Для запрета или разрешения индексированию веб страницы используют мета тег «ROBOTS»:

  • Index – разрешение на индексацию веб-страницы;
  • Noindex – не индексировать веб-страницу;
  • Follow – прослеживать ссылки на веб-странице;
  • Nofollow – не прослеживать ссылки на веб-странице;
  • All – индексировать страницу и прослеживать ссылки на веб-странице (по умолчанию);
  • None – не индексировать страницу и не прослеживать ссылки на веб-странице
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">

Пример:

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
</head>
<body>
текст
</body>
</html>

8. Перенаправление на другую страницу (редирект) «Refresh»
С помощью мета тега «Refresh» посетителя можно перенаправить на другую веб-страницу или на другой веб-сайт:

<meta http-equiv="Refresh" content="5; URL=http://stepkinblog.ru/">

5  - время, через которое посетителя автоматически перебросит на другую страницу или сайт. Время задаётся в секундах.  В примере я указал, что перенаправление должно быть через 5 секунд. Если указать «0», то посетитель перенаправится на другую страницу мгновенно.

http://stepkinblog.ru/ – адрес сайта или веб- страница, на которую перенаправится пользователь автоматически. Естественно, замените адрес на свой.

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta http-equiv="Refresh" content="5; URL=http://stepkinblog.ru/avtor/">
</head>
<body>
текст
</body>
</html>

[Посмотреть пример]

Внимание: мета теги можно использовать как одиночно, так и комплексно. Смотрите пример снизу.

<html>
<head>
<title>Блог StepkinBLOG.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" Content ="мета тег,прописать метатеги, метатеги для сайта">
<meta name="description" Content="Страница с описанием мета тегов">
<meta name="author" content="Костаневич Степан" />
<meta name="Publisher-URL" Content="http://stepkinblog.ru/">
</head>
<body>
текст
</body>
</html>

Жду вас на следующих уроках! Подписывайтесь на обновление, так как это еще не ВСЁ!



Случайные записи:

  1. PHP операторы. Основы PHP с нуля. Урок №8
  2. Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
  3. Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24
  4. Уведомления для веб-страниц. Основы bootstrap 3 для начинающих. Урок №16
  5. Кнопки. Основы bootstrap 3 для начинающих. Урок №7

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих

2 ответа(ов) на статью: “Как прописать мета теги. Основы HTML для начинающих. Урок №21”

  1. Кристина says:

    Спасибо большое! Прочитала разные сайты на тему мета-теги как прописать. Здесь с подробными и понятными примерами!))

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Спасибо, Кристина, за Ваш приятный комментарий!

    Ответить

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245