Атрибут name тега HTML <meta>
Определение и использование
name Атрибут определяет имя метаданных.
name Атрибут определяет Атрибут content имя значения
пользуясь name и content атрибут, может использовать пары имя/значение для определения метаданных документа. В частности:name Атрибут указывает тип метаданных, а content Атрибут используется для предоставления значений.
Ниже в таблице перечислены несколько типов предопределенных метаданных.
Примечание:Если установлено атрибут http-equivЕсли установлено name Атрибуты.
Совет:HTML5 ввел метод, позволяющий веб-дизайнерам через тег <meta> контролировать viewport (пользовательская видимая область веб-страницы) (см. пример «Настройка viewport» ниже).
Пример
Использовать атрибут name для определения описания, ключевых слов и автора HTML-документа. Также определить viewport, чтобы контролировать размер страницы и масштабирование для различных устройств:
<head> <meta name="description" content="Бесплатный веб-курс"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Грамматика
<meta name="value">
Значение атрибута
| Значение | Описание |
|---|---|
| application-name | Указать имя Web-приложения, представляющего страницу. |
| author |
Указать имя автора документа. Например: <meta name="author" content="YK Investment"> |
| description |
Указать описание страницы. Поисковая система может выбрать это описание для отображения в результатах поиска. Например: <meta name="description" content="Бесплатный веб-курс"> |
| generator |
Указать один из пакетов программного обеспечения, используемого для создания документа (не используется для ручного создания страницы). Например: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Указать список ключевых слов, связанных с страницей, разделенных запятыми. Информировать поисковую систему о содержании страницы. Совет:Всегда определяйте ключевые слова (поисковые системы должны классифицировать страницу). Например: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Контроль видимости области (веб-страницы, видимая пользователю). |
Объяснение
Кроме шести предварительно определённых типов метаданных, можно использовать расширения метаданных. Посетив эту страницу, можно получить список часто обновляемых расширений:
http://wiki.whatwg.org/wiki/MetaExtensions
Некоторые расширения используются часто, в то время как другие имеют узкое применение и используются редко. Метаданные robots显然 относятся к первой категории. Автор HTML-документа может использовать их, чтобы сообщить поисковым системам, как обращаться к этому документу. Например:
<meta name="robots" content="noindex">
Этот тип метаданных имеет три значения, которые понимают большинство браузеров:
- noindex - означает, что страницу не следует индексировать
- noarchive - означает, что страницу не следует архивировать или кэшировать
- nofollow - означает, что поисковые системы не должны продолжать поиск по ссылкам на этой странице
Количество доступных расширений метаданных ограничено, поэтому разработчикам лучше ознакомиться с онлайн-списком, чтобы узнать, какие из них можно использовать в своих проектах.
Совет
Чтобы сообщить поисковым системам, как классифицировать и ранжировать контент, в прошлом最主要的 способом было использование метаданных keywords. В настоящее время поисковые системы уделяют этим метаданным меньше внимания, так как их можно использовать для создания иллюзии соответствия между содержимым страницы и её темой. Чтобы изменить представление о контенте в глазах поисковых систем, авторам лучше всего следовать рекомендациям, предоставляемым поисковыми системами. Большинство поисковых систем предлагают руководства по оптимизации веб-страниц или целых сайтов.
Google: Новичкам о поисковой оптимизации (SEO)
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Бaidu: Руководство по оптимизации поисковых систем Baidu
Настройка видимости области
Видимость области веб-страницы для пользователя. Она зависит от устройства — на телефоне она будет меньше, чем на экране компьютера.
Вы должны включать следующий элемент <meta> на всех страницах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это предоставляет браузеру инструкции о том, как контролировать размер страницы и масштабирование.
width=device-width Некоторые настройки устанавливают ширину страницы, чтобы она соответствовала ширине экрана устройства (в зависимости от устройства).
initial-scale=1.0 Некоторые настройки устанавливают начальный уровень масштабирования при первом загрузке страницы браузером.
Вот пример веб-страницы без viewport meta-тега и та же страница с viewport meta-тегом:
Совет:Если вы используете телефон или планшет для просмотра этой страницы, вы можете нажать на следующие две ссылки, чтобы увидеть различия.
Вы можете найти нашиУрок по responsive web design - viewportУзнайте больше о viewport.
Поддержка браузеров
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Поддержка | Поддержка | Поддержка | Поддержка | Поддержка |
