License css no meta
Кусочек метаданных страницы. Описывает содержание страницы для браузера, поисковиков и соцсетей.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
В теге хранится краткое описание страницы, ключевые слова и другие данные, которые могут понадобиться браузерам и поисковым системам.
Таких метатегов может быть любое количество. Все они размещаются внутри тега , желательно в самом начале.
Пример
Скопировать ссылку «Пример» Скопировано
name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >head> meta name="description" content="Краткое описание страницы"> meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" > meta name="viewport" content="width=device-width, initial-scale=1.0"> head>
Как понять
Скопировать ссылку «Как понять» Скопировано
Теги содержат полезную для поисковиков и браузеров информацию. Информация в метатегах называется метаданными. Пользователь не видит их содержимое на странице.
Метатеги различаются набором атрибутов и их значений. Один тег содержит одно сообщение: например, описание страницы , ключевые слова , кодировку страницы или другие метаданные.
Мы рекомендуем вставить как минимум метатеги description , viewport , charset . Они помогут оптимизировать сайт для браузера пользователя и поисковых систем.
В прописывается информация, которую нельзя указать в , , , или .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Метатег, который задаёт кодировку страницы, не отличается по структуре от обычных:
meta charset=". "> Остальные метатеги содержат атрибуты name или http - equiv , которые используются в паре с атрибутом content :
meta name=". " content=". "> meta http-equiv=". " content=". "> Первый атрибут задаёт параметр, который мы меняем, а второй — значение. Вот как будет выглядеть метатег, в котором прописываются ключевые слова на странице:
name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3" >
Атрибуты
Скопировать ссылку "Атрибуты" Скопировано
- charset — задаёт кодировку страницы. Мы рекомендуем писать здесь UTF - 8 — это самый распространённый вариант.
meta charset="UTF-8"> - http - equiv — атрибут, который может изменять поведение страницы или серверов. Используется в паре с content . У него есть несколько значений:
- "default - style" — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента , который связан с таблицей CSS-стилей, или заголовок элемента , который содержит таблицу CSS-стилей.
- "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.
meta http-equiv="refresh" content="3">- name — имя мета-тега, которое также определяет его значение. Используется в паре с content . Можно задать следующие значения:
- "keywords" — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.
meta name="keywords" content="Рецепт, печенье, готовим дома">- "viewport" — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial - scale — коэффициент масштабирования страницы при первом открытии:
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" >- "description" — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать "description" .
name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками">meta name="description" content="Рассказываем, как нарезать картошку тонкими ломтиками" >meta name="author" content="Иван Петров">Подсказки
Скопировать ссылку "Подсказки" Скопировано
💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега .
💡 Атрибуты http - equiv и name выполняют похожие функции, поэтому их нельзя использовать одновременно.
💡 С помощью атрибута http - equiv = "refresh" можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд:
meta http-equiv="refresh" content="15;url=https://www.yandex.ru">На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
🛠 В , помимо стандартных метаданных, передаются всякие специальные. Например, есть такой браузер, как Safari: он очень любит подстраивать номера телефонов в какой-то удобный для себя вид. Чтобы отключить это своеволие, нужен отдельный метатег:
meta name="format-detection" content="telephone=no">🛠 С помощью метатегов можно задавать поведение мобильной версии сайта. Например, можно прописать, на сколько на мобайле можно увеличить масштаб и насколько уменьшить относительно стандарта.
🛠 Через метатеги задаётся и Open Graph-разметка: заголовок, картинка и описание для репоста в соцсетях.
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
🛠 Если не задать описание для страницы при помощи , то поисковые системы при добавлении сайта в свою базу возьмут первый попавшийся текст со страницы и составят из него так называемый сниппет — текст под заголовком сайта в поисковой выдаче.
Если хочется контролировать, что именно увидит пользователь в поиске — всегда заполняйте description .
🛠 Есть отдельная категория метаразметки — OG-разметка. OG расшифровывается как open graph. Такая разметка нужна для того, чтобы при вставке ссылки на ваш сайт в соцсетях в превью отображалась красивая карточка.
Стандартный набор метатегов для красивой карточки в Facebook:
property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия">meta property="og:title" content="Лучший сайт в интернете"> meta property="og:description" content="Посетите лучший сайт в интернете и познайте тщетность бытия" > meta property="og:image" content="http://best-site/thumbnail.jpg"> meta property="og:url" content="http://best-site/index.htm">Большинство соцсетей используют информацию, указанную в тегах из примера выше, для генерации превью ссылок.
Описание мета-тегов
Посмотрев HTML код разных сайтов возникает вопрос – зачем в нем так много мета-тегов и для чего они нужны? В данной статье представлены все самые встречающеюся теги с примерами и пояснениями.
Описание страницы
Title
Заголовок страницы, оптимальная длина 50-60 символов.
Description
Краткое описание страницы длинной 160-180 символов, используется в выводе результатов поиска.
Keywords
Содержит ключевые слова встречающихся на странице. Не более 20-ти слов и 3-х повторов.
Кодировка сайта
Application-Name
Название веб-приложения. Можно указать несколько названий для разных языковых локалей.
- В Android используется при добавлении сайта на главный экран.
- В Windows 8, 10 при добавлении сайта в панель приложений и плиткой в меню пуск.
Generator
Сообщает, с помощью какой программы был сгенерирован код страницы.
Author
Информация об авторе сайта.
Copyright
Информация о владельце сайта.
Reply-To
Указывает способ связи с автором страницы.
Content-Language
Указывает язык страницы. Используется поисковыми машинами при индексировании.
Help
Предоставляет ссылку на справку или e-mail.
Управление индексацией
Robots
Задает правила индексации для поисковых роботов.
Общие значения:
index , follow или all Разрешено индексировать текст и ссылки на странице noindex Не индексировать текст страницы nofollow Не переходить по ссылкам на странице noindex , nofollow или none Запрещено индексировать текст и переходить по ссылкам noarchive Не показывать ссылку на сохраненную копию в поисковой выдаче noyaca Не использовать описание из Яндекс.Каталога для сниппета в результатах поиска nosnippet Запрещает показывать видео или фрагмент текста в результатах поиска noimageindex Запрещает указывать вашу страницу как источник ссылки для изображения noodp Не использовать описание из каталога DMOZ Last-Modified
Альтернативно HTTP-заголовку Last-Modified задает дату последнего изменения для статических страниц.
Document-State
Определяет частоту индексации для поисковых роботов.
Revisit-After
Указывает как часто обновляется информация на сайте, и как часто поисковая система должна на него заходить.
Управление кэшированием
Cache-Control
Указывает как браузеру кэшировать страницу.
Допустимые значения:
public Кэшируется все private Кэшируется браузером, но не proxy-сервером no-cache Запрещает кэширование max-age=0 Сколько секунд хранить в кэше Pragma
Expires
Дата окончания кэша браузера. Если указать прошедшую дату или 0, то документ не будет кэшироваться.
Canonical - предпочитаемый канонический адрес
Если у страницы есть дубликаты с одним содержанием и разными URL, например:
В rel="canonical" указывается адрес, который будет считаться основным и будет использоваться в поисковой выдаче.
Prev
Указывает URL предыдущий страницы при пагинации.
Next
Указывает URL следующий страницы при пагинации.
