22. Использование HTML метатегов (Мета теги)
Мета-тег – это тег языка HTML, который размещают в заголовке веб страницы, то есть между тегами <head> ... </head>. Метатеги могут содержать описание страницы, информацию об авторе, команды для поисковых роботов. Есть специальные метатеги для социальных сетей.
Мета-теги для социальных сетей очень полезно использовать. Если использовать мета-теги социальных сетей, то можно здорово повысить посещаемость из социальных сетей.
Если вы только изучаете HTML, то, возможно, мета-теги вам сейчас не так будут нужны, поэтому рекомендую добавить страницу в закладки или еще куда-нибудь, чтобы в дальнейшем использовать ее как справочник по мета-тегам.
Мета-теги для поисковиков
Мета-тег для описания страницы:
<meta name = "description" content = "Описание страницы">Мета-тег для указания кодировки страницы (о ней я писал в этом уроке):
<meta http-equiv = "Content-Type" content = "type; charset = ...">Метатег для создания редиректа, где X – количество секунд перед редиректом, а site.com – страница, куда перенаправлять:
<meta http-equiv = "refresh" content = "X; url = site.com">А так же группа мета-тегов для управления роботами (индексацией сайта):
<meta name = "robots" content = "X">Вместо X может быть следующее:
- noodp - не использовать описание из каталога DMOZ (Google) для сниппета в поисковой выдаче.
- noyaca - не использовать описание из Яндекс.Каталога для сниппета в поисковой выдаче.
- all - разрешено индексировать ссылки и текст на странице.
- nofollow - не переходить по ссылкам, расположенным на данной странице.
- noindex - не индексировать текст этой страницы страницы.
- none - запрещено переходить по ссылкам и индексировать текст на странице.
Мета-теги Google – местоположение предприятия, офиса
Мета-тег для указания долготы
<meta property = "place:location:longitude" content = "0.0122">Мета-тег для указания широты
<meta property = "place:location:latitude" content = "2.3122">Meta-тег для указания страны
<meta property = "business:contact_data:country_name" content = "Страна"><meta property = "business:contact_data:locality" content = "Город">
<meta property = "business:contact_data:street_address" content = "Название улицы">мета-теги Google для указания контактной информации
<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".
<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
<body itemscope itemtype = "http://schema.org/Product">
<h1 itemprop = "name">Название страницы</h1>
<img itemprop = "image" src = "Ссылка на картинку">
<p itemprop = "description">Описание страницы</p>
</body>Или можно использовать разметку Open Graph
<meta property = "og:title" content = "Название страницы">
<meta property = "og:image" content = "Изображение страницы">
<meta property = "og:description" content = "Описание страницы">Мета-теги Facebook
<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 = "Название сайта">Все популярные мета-теги я перечислил.
Похожие уроки и записи блога
- Вам нужно доделать страницу "О нас" компании, которая занимается пончиками. Первым делом укажите страну для Google поисковика. (подсказка:
<meta property = "business:contact_data:country_name" content = "Страна">). Страну укажитеПончикленд. - Добавьте мета-тег для описания страницы (для поисковиков). Текст для описания возьмите из тега
<p> ... </p> - Теперь добавьте тоже самое описание страницы (содержимое
<p> ... </p>) для социальных сетей Twitter, Facebook, Google Plus. Мета-теги для этих социальных сетей есть выше в примерах. - Запретите роботу переходить по ссылкам на странице. Пример ищите под заголовком "Мета-теги для поисковиков"
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.