StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
16.03.2016
00:37
12513
2
Как прописать мета теги. Основы HTML для начинающих. Урок №21
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке мы разберем, что такое мета теги и как их прописывать к HTML-документу.
Несмотря на то, что некоторые мета теги не видны человеку, они все же играют немаловажную роль в создании сайта. В процессе изучения, я думаю, вы поймете, насколько важны мета теги, для чего они нужны и как ими пользоваться.
Мета тег (англ. metainformation — метаинформация) – это тег, в котором может содержаться описание веб-страницы, ключевые слова, информация об авторе, управляющие команды для поисковых машин/браузеров и т.д. Можно найти еще такое выражение, что мета тег, это что-то похожее на визитную карточку страницы для различных служб Интернета. По-моему не плохое объяснение! 
Мета теги размещать нужно в голове 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>
Жду вас на следующих уроках! Подписывайтесь на обновление, так как это еще не ВСЁ!
Случайные записи:
- Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16
- Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
- Вывод переменной и строки в php на экран. Основы PHP с нуля. Урок №6
- Горизонтальное меню. Основы bootstrap 3 для начинающих. Урок №10
- Миниатюры. Основы bootstrap 3 для начинающих. Урок №25
Спасибо большое! Прочитала разные сайты на тему мета-теги как прописать. Здесь с подробными и понятными примерами!))
Ответить
3 мая, 2017 at 09:47
Спасибо, Кристина, за Ваш приятный комментарий!
Ответить