RUS | ANG | |

StepkinBlog.ru

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

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

16.03.2016


00:37


11784


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. Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13
  2. Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9
  3. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  4. Бесплатный курс по основам HTML
  5. Цикл Foreach. Основы PHP с нуля. Урок №14

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

  1. Приложение для смартфонов (андроид) – основы HTML
  2. Бесплатный курс по основам HTML
  3. Шпаргалка по HTML на русском языке
  4. Создание простого мини сайта. Практика по пройдённому материалу
  5. Тесты 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:

@

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

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

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

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

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

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

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

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

Статистика:

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