Игорь
22:37 20-04-2019Только с 6-й попытки смог написать коммент.
Всем привет и приступим. Для начала давайте определимся что такое мета теги и для чего они применяются. Если взять общее определение, то мета теги - это теги служащие для хранения определенной информации для браузеров и поисковых систем. То есть в мета тегах прописывается информация которая помогает поисковым системам индексировать сайт, а также настраивать страницу в браузере.
Как правило все мета теги располагаются в теге head и никак на странице не отображаются.
Рассмотрим следующие мета теги:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Мета теги HTML
</title>
<meta name="description" content="мета теги - это теги служащие для хранения определенной информации для браузеров и поисковых систем.">
<meta name="Keywords" content="теги, мета-теги, ключевые слова">
</head>
<body>
</body>
</html>здесь у нас главным образом расположены основные мета теги предназначение для поисковых систем.
Самым главным мето-тегом является title - он несет информацию о названии проекта на него поисковые машины обращают внимание в первую очередь, поэтому хорошенько подумайте что туда можно записать. Содержимое тега title вы увидите в названии вкладки.
Следующим идет мета тег description его содержимое отображает атрибут content.
<meta name="description" content="мета теги - это теги служащие для хранения определенной информации для браузеров и поисковых систем.">Данный тег служит для описания страницы и его иногда учитывают поисковые роботы, а бывает и нет, зависит от содержания. Содержимое данного тега обычно выносится как описания к вашему сайту в поисковиках.
И последним у нас идет тег keywords или ключевые слова.
<meta name="Keywords" content="теги, мета-теги, ключевые слова">данный тег предназначен для перечня ключевых слов по которым пользователи смогут найти ваш сайт в поисковых системах. Скажу сразу что данный тег устарел, поисковые машины его практически перестали учитывать.
Помимо вышеперечисленных тегов отвечающих за индексацию страницы в поисковых системах, есть еще один мета тег robots:
<meta name="robots" content="index">данный мета тег содержит опции отвечающие за индексирование страниц в поисковых системах. Значение index означает что страница будет индексироваться в поисковиках. Если поставить noindex:
<meta name="robots" content="noindex">то по сути индексация этой страницы для поисковых роботов будет запрещена. Помимо index и noindex мета тег robots может иметь следующие опции:
follow - учет гиперссылок на странице
nofollow - гиперссылки не учитываются
Ничто не мешает нам задавать несколько опций сразу:
<meta name="robots" content="noindex, nofollow">Здесь мы строго запретили индексацию страницы и гиперссылок на ней.
C помощью мета тегов мы также можем указать авторство и права:
<meta name="author" content="Андрей Грибин"><meta name="copyright" content="Все права на обновляемый контент данного ресурса принадлежат Грибину Андрею">c помощью мета тега author можно указать автора ресурса(сайта), а copyright оповещение об правах и авторстве. В общем лично я, особого смысла в этих мета тегах пока не вижу.
C основными тегами ,отвечающими за информацию для поисковых систем, мы разобрались. Теперь переходим к мета тегам настройки страницы в браузере.
<meta charset="utf-8">здесь настраиваем кодировку на странице, мы выбрали юникод (utf-8).
Дальше у нас идет content-type:
<meta http-equiv="content-type" content="text/html;>здесь мы выбираем к какому типу относится контент на странице. В нашем случае это текст-html.
Еще одним полезным мета тегом является viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">Данный мета тег позволяет создавать так называемые медиа-запросы с помощью которых мы при смене разрешения экрана можем изменять стили css, тем самым адаптируя дизайн нашего сайта под различные экраны будь то, компьютер, ноутбук, планшет или смартфон.
Как создавать медиа запросы мы рассмотрим в следующей статье посвященной css.
И напоследок мы рассмотрим мета тег refresh который позволяет через определенный промежуток времени обновлять страницу и даже делать перенаправления на другие ресурсы.
<meta http-equiv="refresh" content="3">здесь мы говорим браузеру что наша страница будет обновляться каждые 3 секунды.
<meta http-equiv="refresh" content="10; https://youtube.com">а здесь что через 10 секунд мы будем перенаправлены на youtube.
На этом дорогие друзья у меня все, сегодня мы рассмотрели основные часто используемые мета теги. Надеюсь данная статья оказалась для вас полезной и вы найдете разумное применение полученным знаниям.
А я с вами прощаюсь, желаю всего самого наилучшего. Пока!
