Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Вам нужно доделать страницу "О нас" компании, которая занимается пончиками. Первым делом укажите страну для Google поисковика. (подсказка:
<meta property = "business:contact_data:country_name" content = "Страна">). Страну укажитеПончикленд. - Добавьте мета-тег для описания страницы (для поисковиков). Текст для описания возьмите из тега
<p> ... </p> - Теперь добавьте тоже самое описание страницы (содержимое
<p> ... </p>) для социальных сетей Twitter, Facebook, Google Plus. Мета-теги для этих социальных сетей есть выше в примерах. - Запретите роботу переходить по ссылкам на странице. Пример ищите под заголовком "Мета-теги для поисковиков"
Ранее мы научились подключать внешние CSS-файлы. Подключаются они внутри <head> - контейнера для технической информации. В нем же указываются различные мета-теги. С ними мы разберемся в этом уроке.
Мета-тег – это тег языка HTML, который размещают в заголовке веб страницы, то есть между тегами <head> ... </head>. Мета-теги могут содержать описание страницы, информацию об авторе, команды для поисковых роботов. Есть специальные мета-теги для социальных сетей.
Мета-теги для социальных сетей очень полезно использовать. Если использовать мета-теги социальных сетей, то можно здорово повысить посещаемость из социальных сетей.
Если вы только изучаете HTML, то, возможно, мета-теги социальных сетей вам сейчас не так будут нужны, поэтому рекомендую добавить страницу в закладки или еще куда-нибудь, чтобы в дальнейшем использовать ее как справочник по мета-тегам.
Рассмотрим атрибуты тега <meta>:
name: имя мета-тега;content: содержимое мета-тега;charset: кодировка символов веб-документа;http-equiv: HTTP-заголовок для атрибутаcontent.
Атрибуты http-equiv и name нельзя использовать совместно.
Мета-теги для поисковиков
Самым распространенным является мета-тег для описания страницы (description):
<meta name = "description" content = "Описание страницы">Мета-тег для указания кодировки страницы (о ней я писал в этом уроке):
<meta charset = "utf-8">Мета-тег для создания редиректа, где 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 = "https://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 = "codebra.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.
Open Graph разметка для Google:
<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 = " https://codebra.ru ">
<meta property = "og:see_also" content = " https://codebra.ru ">
<meta property = "og:site_name" content = "Название сайта">В этом уроке мы изучили все популярные мета-теги. Еще раз прочитайте этот уроке и переходите к практическим заданиям.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
