Войти
Регистрация

Мета-теги в HTML

Мета-теги в HTML

И так, друзья, мы с Вами подобрались к следующей теме основ HTML. Мета-теги, своими словами, это служебные заголовки страницы сайта, которые передают ту или иную информацию браузеру, либо поисковым системам.

Не все заголовки являются обязательными, например, такие, как мета-тег авторства сайта "autor", но об этом теге и других я напишу дальше.

Вообще тег мета в html представлен большом количестве и использование некоторых не всегда оправдано, поэтому я не буду Вас перенагружать ими, т.к. об этом написано в интернете на любом сайте, я лишь пишу самые нужные и часто применяемые.

Вы должны помнить, что мета-теги всегда содержаться внутри тега верхнего уровня <head>, об этом Вы узнали в предыдущей статье по созданию HTML-страницы

В HTML есть 3 типа мета-тегов:

Мета-тег страницы HTML:
Autor - для указания автора сайта;
Copyright - для указания авторских прав на сайт;
Generator - для указания названия CMS или конструктора, где была создана страница.

Пример:

<head>
 <meta name="author" content="Самвел Погосов" />
 <meta name="copyright" content="Сайт компании EditCode" />
 <meta name="generator" content="WYSIWYG Web Builder 12 Version - http://www.wysiwygwebbuilder.com" />
</head>

Эти 3 мета-тега являются основными, но и они не часто используются.

Мета-теги для браузера:
Content-Language - мета-тег сообщает браузеру язык страницы.
Content-type - важный мета-тег, указывающий на тип документа и его кодировку. Указывать его обязательно.
Refresh - с помощью этого мета-тега можно автоматически обновлять страницу или делать перенаправление на другую страницу с определенным интервалом времени.

Пример:

<head>
 <meta name="Content-Language" content="ru" />
 <meta name="Content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="refresh" content="5; url=http://google.com" />
</head>

Из всех этих 3 мета-тегов Content-type является важным, т.к. он указывает тип документа и кодировку. По поводу мета-тега Refresh, то здесь "5" означает количество секунд, по истечению которых произойдет переход по адресу в "url", т.е. на google.com, как в примере. Можно и адрес текущей страницы указать и тогда будет просто ее обновление каждые 5 сек.

Мета-теги для поисковых систем:
keywords - здесь мы указываем ключевые слова или фразы, которые содержатся в тексте страницы, чтобы поисковые системы могли вывести Ваш сайт в поиске по ним.
description - данный мета-тег содержит краткое описание страницы, чтобы при выводе в поиске люди его видели. Старайтесь писать описание кратко и по делу.
robots - этот мета-тег сообщает поисковым системам о том, нужно ли индексировать страницу, либо запретить индексацию.

Пример:

<head>
 <meta name="keywords" content="html, css, создание сайта" />
 <meta name="description" content="Создание сайта с помощью HTML и CSS" />
 <meta name="robots" content="index,follow" />
</head>

Что касается мета-тегов keywords и description, то тут Вам все ясно думаю, в первом пишем ключевые слова, во втором описание страницы. Их нужно писать на каждой странице, если Вы планируете продвигать сайт с помощью СЕО-оптимизации. А вот по поводу robots распишу Вам:

  • index - означает, что страницу нужно индексировать.
  • noindex - запрещает индексацию страницы.
  • follow - означает, что нужно переходить по ссылкам на этой странице.
  • nofollow - запрещает переход по ссылкам на странице.

Можете писать эти параметры, в зависимости от необходимости индексации страницы и переходам по ссылкам. Например: index,follow, noindex,nofollow, index,nofollow, noindex, follow

Также, я бы уделил внимание такому мета-тегу для поисковых систем, как Revisit:

<meta name="revisit" content="4"/>

Этот мета-тег сообщает поисковым системам через какое время поисковому роботу нужно вернуться и снова проиндексировать Вашу страницу. В примере я указал 4 дня. Это пригодится в том случае, если на Вашем сайте часто обновляется, добавляется новый контент и Вы хотите, чтобы робот по-быстрее его увидел и проиндексировал.

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?