Meta теги

Общие (Meta теги)

<meta charset="UTF-8"> <!-- HTML5 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTML -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv="Content-Language" Content="ru">

<meta name="description" content="Описание страницы"/>
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">

<meta name="author" Content="Автор документа">
<meta name="copyright" Content="авторское право (копирайт) в котором может указываться ФИО автора сайта, название фирмы, бренда и т.д.">

<meta name ="Generator" Content="Microsoft Notepad">
С помощью какого html редактора была написана страница

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<!-- указываем корень сайта или пусть до файла -->
<link rel="canonical" href="http://site.ru/" />

Команды для поисковых роботов (мeta теги)

<meta name="robots" content="all"/>

Команды которые понимают все роботы

• all — разрешено индексировать текст и ссылки на странице, аналогично <meta name=»robots» content=»index, follow»/> (по умолчанию)
• none — запрещено индексировать текст и переходить по ссылкам на странице, аналогично <meta name=»robots» content=»noindex, nofollow»/>
• noindex — не индексировать текст страницы
• nofollow — не переходить по ссылкам на странице

Команды для Yandex

• noarchive — не показывать ссылку на сохраненную копию на странице результатов поиска
• noyaca — не использовать описание из Яндекс.Каталога для сниппета в результатах поиска
• noodp — не использовать описание из каталога DMOZ для сниппета в результатах поиска

 

Разметка Open Graph (meta теги)

<meta property="og:locale" content="ru_RU" />

<!-- website(главная) , article (статья), object (другое) -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>

<!-- указываем корень сайта или пусть до файла -->
<meta property="og:url" content="http://site.ru/" />
<meta property="og:site_name" content="Название сайта"/>

<meta property="og:image" content="http://site.ru/images/1.jpg" />
<meta property="og:image" content="http://site.ru/images/2.jpg" />
<meta property="og:image" content="http://site.ru/images/3.jpg" />

Twitter (мета теги)

<!-- Тип окна -->
<meta name="twitter:card" content="summary"/> 
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
<meta name="twitter:creator" content="автор"/>
<!-- указываем титульную картинку-->
<meta name="twitter:image" content="http://site.ru/image250X250.png"/>  
<meta name="twitter:domain" content="site.ru"/>

Инструмент верификации: https://dev.twitter.com/docs/cards/validation/validator

Добавьте ваш сайт и проверьте на валидность.

Определения месторасположения

<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Название улицы"/>
<meta property="business:contact_data:locality" content="Город"/>
<meta property="business:contact_data:postal_code" content="Индекс"/>
<meta property="business:contact_data:country_name" content="Страна"/>
<meta property="business:contact_data:email" content="cotact@mail.com"/>
<meta property="business:contact_data:phone_number" content="+91 1234567890"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>

Помогаем Google определить месторасположение вашего магазина или офиса, а так же другую контактную информацию.

Google Plus (мета теги)

<meta itemprop="name" content="Название сайта"/>
<meta itemprop="description" content="Описание сайта"/>
<meta itemprop="image" content="https://website.com/image250X250.png"/>

Web App

<meta name="apple-mobile-web-app-capable" content="yes" />

По-умолчанию, закладка с рабочего стола запускает веб-сайт в стандартном режиме сафари – с адресной строкой.
Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме, без видимой адресной строки. К сожалению, этот режим имеет некоторые ограничения — при клике на любую ссылку, переход на следующую страницу осуществляется уже в стандартном режиме мобильного сафари.

<meta http-equiv="cleartype" content="on">

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов.

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">

Эти строки позволяют отключить автоматическое распознавание форматов. Проще говоря, если вы где-нибудь на странице указали номер телефона в html-коде и не указали в хедере, то смартфон распознает его как телефонный номер и попытается набрать его по клику. То же самое и с адресом.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-icon.png">
<link rel="apple-touch-icon-precomposed" href="img/l/apple-icon.png">

Полезное:

• hey meta — быстрая проверка и генерация социальных мета-тегов
• Чеклист фронтенд-разработчика