Урок с практикой по HTML (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

Использование HTML метатегов (Мета теги)

Мета-тег – это тег языка HTML, который размещают в заголовке веб страницы, то есть между тегами <head> ... </head>. Метатеги могут содержать описание страницы, информацию об авторе, команды для поисковых роботов. Есть специальные метатеги для социальных сетей.

Мета-теги для социальных сетей очень полезно использовать. Если использовать мета-теги социальных сетей, то можно здорово повысить посещаемость из социальных сетей.

Если вы только изучаете HTML, то, возможно, мета-теги вам сейчас не так будут нужны, поэтому рекомендую добавить страницу в закладки или еще куда-нибудь, чтобы в дальнейшем использовать ее как справочник по мета-тегам.

Мета-теги для поисковиков

Мета-тег для описания страницы:

Код HTML
<meta name = "description" content = "Описание страницы">

Мета-тег для указания кодировки страницы (о ней я писал в этом уроке):

Код HTML
<meta http-equiv = "Content-Type" content = "type; charset = ...">

Метатег для создания редиректа, где X – количество секунд перед редиректом, а site.com – страница, куда перенаправлять:

Код HTML
<meta http-equiv = "refresh" content = "X; url = site.com">

А так же группа мета-тегов для управления роботами (индексацией сайта):

Код HTML
<meta name = "robots" content = "X">

Вместо X может быть следующее:

  • noodp - не использовать описание из каталога DMOZ (Google) для сниппета в поисковой выдаче.
  • noyaca - не использовать описание из Яндекс.Каталога для сниппета в поисковой выдаче.
  • all - разрешено индексировать ссылки и текст на странице.
  • nofollow - не переходить по ссылкам, расположенным на данной странице.
  • noindex - не индексировать текст этой страницы страницы.
  • none - запрещено переходить по ссылкам и индексировать текст на странице.

Мета-теги Google – местоположение предприятия, офиса

Мета-тег для указания долготы

Код HTML
<meta property = "place:location:longitude" content = "0.0122">

Мета-тег для указания широты

Код HTML
<meta property = "place:location:latitude" content = "2.3122">

Meta-тег для указания страны

Код HTML
<meta property = "business:contact_data:country_name" content = "Страна">
Код HTML
<meta property = "business:contact_data:locality" content = "Город">
<meta property = "business:contact_data:street_address" content = "Название улицы">

мета-теги Google для указания контактной информации

Код HTML
<meta property = "business:contact_data:postal_code" content = "Индекс">
<meta property = "business:contact_data:email" content = "mail@codebra.ru">
<meta property = "business:contact_data:phone_number" content = "+7 910 889 98 88">
<meta property = "business:contact_data:website" content = "http://codebra.ru">

Мета-теги для социальных сетей

Мета-теги Twitter

twitter:card может быть таким: "summary", "summary_large_image", "photo", "gallery", "product", "app", или "player".

Код HTML
<meta name = "twitter:card" content = "summary">
<meta name = "twitter:creator" content = "Автор">
<meta name = "twitter:title" content = "Название страницы">
<meta name = "twitter:site" content = "Название сайта">
<meta name = "twitter:description" content = "Описание страницы">
<meta name = "twitter:domain" content = "codebra.ru">
<meta name = "twitter:image:src" content = "img.png">

Мета-теги Google Plus – социальная сеть от Google

Код HTML
<body itemscope itemtype = "http://schema.org/Product">
<h1 itemprop = "name">Название страницы</h1>
<img itemprop = "image" src = "Ссылка на картинку">
<p itemprop = "description">Описание страницы</p>
</body>

Или можно использовать разметку Open Graph

Open Graph разметка для Google
<meta property = "og:title" content = "Название страницы">
<meta property = "og:image" content = "Изображение страницы">
<meta property = "og:description" content = "Описание страницы">

Мета-теги Facebook

Код HTML
<meta property = "fb:admins" content = "Facebook_ID">
<meta property = "og:type" content = "profile">
<meta property = "profile:last_name" content = "Фамилия">
<meta property = "profile:first_name" content = "Имя">
<meta property = "og:title" content = "Название страницы">
<meta property = "og:description" content = "Описание страницы">
<meta property = "profile:username" content = "Ник">
<meta property = "og:image" content = "img.png">
<meta property = "og:url" content = " http://codebra.ru ">
<meta property = "og:see_also" content = " http://codebra.ru ">
<meta property = "og:site_name" content = "Название сайта">

Все популярные мета-теги я перечислил.

<
×
>
Курс «Знакомство с HTML»
Урок 0.1. Вводный урок по курсу HTML и CSS
Урок 1.1. Что такое HTML?
Урок 1.2. Первое знакомство с HTML
Урок 2.1. Теги в HTML. Одинарные и парные теги
Урок 2.2. Что такое теги и для чего они нужны?
Урок 2.3. Одинарные теги
Урок 2.4. Парные теги
Урок 3.1. Структура HTML документа
Урок 3.2. Что означают теги HTML, HEAD, BODY?
Урок 3.3. Первая строка всех сайтов - DOCTYPE
Урок 3.4. Исходный код веб-страницы
Урок 3.5. Заголовок в HTML - тег TITLE
Урок 3.6. Кодировка HTML страницы
Урок 3.7. Описание стилей в HTML документе
Урок 3.8. Подключение внешних файлов в HTML - стили CSS
Урок 3.9. Практика: что не хватает в структуре
Урок 3.10. Практика: опять чего-то не хватает в структуре
Урок 4.2. Практика: повторим метатеги
Урок 4.3. Практика: метатеги Facebook
Другие курсы
Курс 2. Разметка текста
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 10. Селекторы в CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

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

Удачи в обучении!

Закрыть окно