Title img: Атрибуты alt и title

Прописать атрибуты alt и title у картинок можно следующим образом:

В том случае, если на изображение назначена ссылка, то title лучше прописать к ссылке:

• Важен текст ссылки на ту же картинку с других сайтов или других страниц этого же сайта.
• Обратите внимание на текст, расположенной в непосредственной близости от размещенного на сайте изображения. Он тоже должен соответствовать изображению.
• Тексты и заголовки коротких документов, обрамляющих одиночную картинку.
• Имена файлов и скриптов, в том числе с учётом транслитерации и упрощённого подстрочного перевода.

• Информацию о изображениях передает атрибут “alt”
• Изображения часто кажутся одним из самых простых элементов сайта, но их использование также можно оптимизировать. Каждому изображению соответствует имя файла и атрибут “alt”. Оба эти элемента полезны. Атрибут “alt” позволяет ввести текст, который будет отображаться, если изображение по какой-либо причине невозможно показать (1).
• Зачем используется этот атрибут? Если пользователь просматривает ваш сайт через браузер с отключенными картинками или использует программу чтения текста с экрана, alt-текст будет служить описанием изображения.
• Alt-текст также используется в графических ссылках. В таком случае он обрабатывается поисковыми системами как анкорный текст ссылки. Несмотря на это, мы не советуем использовать большое количество графических ссылок для навигации по вашему сайту, так как текстовые ссылки справляются с этой ролью не хуже.
• Ну и, наконец, грамотное описание изображения в теге alt вместе с информативным именем файла помогают системам поиска картинок, таким как Поиск Картинок Google, проиндексировать изображения с вашего сайта.
• Файлы следует хранить в отдельных директориях, и сохранять их в общедоступных форматах
• Вместо того, чтобы хранить файлы изображений по разным директориям и субдиректориям на домене, следует собрать их все в одну папку(например, имя-сайта.ru/images/). Это упрощает путь к графическим файлам.
• Используйте широко поддерживаемые типы файлов. Большинство браузеров поддерживают графику в формате JPEG, GIF, PNG, и BMP. Также неплохо если расширение файла совпадает с его типом.

Назначение ALT и TITLE картинки — SEO-оптимизация изображения

Как правильно заполнять alt и title для картинок

Содержание:

Атрибуты alt и title в роли помощников по оптимизации

В одной из наших первых статей о внутренней оптимизации веб-сайтов мы вкратце рассказывали, насколько важными могут быть изображения для SEO продвижения. Если копнуть в этой теме немного глубже, первое, с чем придется столкнуться – это атрибуты alt и title.

Именно так будут называться пустые поля параметров, которые увидит контент-менеджер при загрузке изображения на веб-страничку.

Что же из себя представляют атрибуты alt и title? Нужно ли их заполнять? Какова их роль в поисковой оптимизации? Продолжайте читать и Вы получите ответы на перечисленные и некоторые другие не менее важные вопросы.

Атрибут title. Необходимость и основные правила использования

Если честно, атрибут title является далеко не обязательным элементом SEO-оптимизации. Основная цель его использования – давать подсказки пользователям насчет содержимого просматриваемого изображения. При наведении курсора на картинку выводится содержимое атрибута title в белом прямоугольнике.

Несмотря на то, что поисковики не придают особого значения содержимому этого параметра, все же может наблюдаться его некоторое, хоть и косвенное, влияние на продвижение – через поведенческие факторы.

Согласитесь, что просматривать веб-страничку, на которой появляются всплывающие подсказки к размещенным на ней изображениям, намного приятнее, чем если данная возможность отсутствует. Особенно если не всегда понятно, что именно изображено на них . При этом важно, чтобы атрибут title был заполнен корректно:

1. Не содержал информацию, по смыслу не соответствующую картинке. Иначе это будет вызывать отталкивающий эффект.
    
2. Был не слишком длинным. Ограничений как таковых нет, но всплывающая подсказка в две–три строки явно будет портить впечатление.
    
3. По возможности содержал одно из основных ключевых слов. Да, поисковики не зачтут этот дополнительный «прогиб». Но зато посетитель лишний раз убедится в релевантности просматриваемого материала его изначальному запросу в поисковой системе.
    
4. Не дублировать заголовки на странице (основной title, h2, h3 и т. д.) и содержимое атрибута alt. 100%-й уникальности тут, конечно же, добиться невозможно. Но добавить разбавляющие слова вроде «фото» или «картинка» по силам каждому.

Важность и нюансы заполнения атрибута alt изображений

В отличие от атрибута title, по своей сути ориентированного на посетителей, заполненный атрибут alt у картинок более существенен для поискового продвижения.

Он охотно индексируется ботами поисковиков и используется ими для определения содержимого обнаруженных изображений. А это важно как для улучшения релевантности страничек сайта, так и для привлечения на него дополнительного трафика из «Поиска по картинкам».

Поэтому нужно помнить, что забывая или не желая заполнять атрибут alt изображений, Вы лишаете свой веб-ресурс дополнительных пунктов рейтинга, которые вполне могли бы улучшить его позиции в выдачах поисковиков.

Что касается посетителей сайтов, то они могут увидеть содержимое атрибута alt лишь в нескольких случаях:

1. При отключении в браузере отображения графического контента (что по сути случается довольно редко).

   В этом случае вместо опубликованных картинок пользователь будет наблюдать стандартную иконку изображения и прописанный в атрибуте alt текст. Отсюда и его название «alt» – сокращенное от «alternative».

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

   
    

2. При просмотре результатов «Поиска по картинкам» в описании найденного изображения.

 
Для того чтобы безопасно продвинуться в данном виде поиска нужно при заполнении атрибута alt изображений придерживаться следующих рекомендаций:

1. Как и название самого графического файла, атрибут alt для картинок должен по смыслу соответствовать их содержимому и быть релевантным обтекающему тексту.
    
2. Длина текста не должна быть меньше 3–4 слов и длиннее 250 символов.
    
3. Использовать ключевые слова можно, но не стоит перечислять в нем сразу несколько из них, так как поисковики посчитают это спамом и могут исключить из выдачи не только само изображение, но и всю страницу, на которой оно размещено.

   Выберите одно, наиболее подходящее, и разбавьте парочкой дополнительных, стараясь сделать так, чтобы его употребление выглядело максимально естественным.

   Также можно взять ту же фразу, что и в атрибуте title (если она не очень длинная) и заменить употребленные там слова-разбавители (например, вместо «картинка» использовать «фото»).
    

4. Не употреблять слова вроде «купить», «оформить», «цена», если они напрямую не относятся к изображению (если это не прайс-лист, например).

Коротко подведем итоги

Атрибут title:

• заполняется по желанию;
• не оказывает прямого влияния на результаты продвижения, но участвует в формировании поведенческих факторов;
• ориентирован на удобство посетителей сайтов, которым дает возможность ознакомиться с описанием картинки в виде всплывающей подсказки.

Заполненный атрибут alt изображений:

• учитывается поисковыми ботами при индексации;
• позволяет участвовать в поиске по картинкам;
• повышает релевантность содержимого веб-страниц поисковым запросам;
• дает возможность посетителю узнать о содержимом картинки, если в браузере отключена функция просмотра изображений.

Все вышеперечисленные моменты однозначно являются положительными. И поэтому выводы по поводу необходимости заполнения атрибутов alt и title Вы вполне сможете сделать сами.

Благодарим за внимание. Ждем Ваших вопросов под этой статьей.

HTML (три) — использовать изображение img на веб-страницах

Сначала создайте новую веб-страницу index.html и поместите в эту папку изображение с расширением .jpg;

Затем используйте тег <img />, чтобы создать изображение веб-страницы: <img src = «image path» />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg"/>
</body>
</html>

Примечание. Здесь используется относительный путь;

результат операции:

2. Относительный путь и абсолютный путь

Если файл изображения находится в родительской папке, как его использовать?

Например, если я хочу сослаться на изображение yan.jpg на родительском уровне в файле index1, я могу использовать «../» для обозначения;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg">
<img src = "../ yan.jpg"> <! - Для использования ссылки на файл изображения родительского уровня необходимо использовать "../" ->
</body>
</html>

результат операции:

Абсолютный путь:

Находим картинку в Интернете и копируем адрес картинки;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg">
 <img src = "../ yan.jpg"> <! - Для использования ссылки на файл изображения родительского уровня необходимо использовать "../" ->
 <img src = "http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg" /> <! - Укажите абсолютный адрес изображения напрямую ->
</body>
</html>

результат операции:

Изображение локального жесткого диска:

Добавьте путь к изображению в src

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg">
 <img src = "../ yan.jpg"> <! - Для использования ссылки на файл изображения родительского уровня необходимо использовать "../" ->
 <img src = "http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg" /> <! - Укажите абсолютный адрес изображения напрямую ->
 <img src = "D: //fengjing.jpg"> <! - Цитируйте изображение локального жесткого диска и путь к файлу ->
</body>
</html>

результат операции:

В img мы можем добавить атрибуты высоты и веса, чтобы установить размер изображения;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <! - Укажите абсолютный адрес картинки ->
<img weight=300 height=300 src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/>
</body>
</html>

результат операции:

Можно найти намного меньше

4. Используйте атрибут alt, чтобы установить заменяемый текст для изображения.

Когда изображение не может быть нарисовано, мы можем использовать атрибут alt, чтобы временно сообщить пользователю содержимое изображения;

Например, если мы добавляем несуществующее изображение, тогда веб-страница должна быть такой:

На этом этапе мы добавляем атрибут alt к атрибуту img:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <img alt = "Это пейзажное фото" src = "1.jpg">
</body>
</html>

результат операции:

Могу сыграть роль на высоте!

5. Используйте атрибут title, чтобы задать заголовок для изображения.

Когда мы касаемся изображения мышью, веб-страница подскажет нам, что это такое и как этого добиться?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <img alt = "Это пейзажное фото" title = "Красивый пейзаж" src = "1.jpg">
</body>
</html>

Этого можно добиться с помощью атрибута title;

результат бега:

Красивый пейзаж, на самом деле здесь есть стрелка мышки, на скриншоте автора этого не видно.

Тег HTML картинка, изображение

Тег <img> используется для вставки графического изображения (картинки) в HTML документ.

HTML тег <img> имеет два обязательных атрибута: src — адрес файла картинки и alt — альтернативный текст, который будет отображен, если картинка не может быть загружена. Также не лишним будет использование глобального атрибута title.

Изображение из тега <img> может быть ссылкой. Для этого нужно обвернуть тег <img> тегом ссылки <a> (см. пример ниже).

Синтаксис

<img src="URL_картинки" alt="альтернативный текст">

Отображение в браузере

Пример использования <img> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка картинки в HTML документ</title>
</head>
<body>
<!-- Картинка на веб-странице -->
    <img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня">
<!-- картинка-ссылка -->
<a href="page.html"><img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"></a>
</body>
</html>

Поддержка браузерами

Атрибуты

Устаревшие атрибуты

Указанные ниже атрибуты не поддерживаются в HTML5. Используйте CSS вместо них.

HTML-тег img

Пример

Как вставить изображение:

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег используется для встраивания изображения в страницу HTML.

Изображения технически не вставляются на веб-страницу; изображений связаны с веб-страницами. Тег создает пространство хранения для указанного изображения.

Тег имеет два обязательных атрибута:

• src — Указывает путь к образу
• alt — Задает альтернативный текст для изображения, если изображение для некоторых причина не может быть отображена

Примечание: Кроме того, всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, страница может мерцать, пока изображение нагрузки.

Совет: Чтобы связать изображение с другим документом, просто вложите тег внутрь тег (см. пример ниже).

Поддержка браузера

Элемент
	Есть	Есть	Есть	Есть	Есть

Атрибуты

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Выровнять изображение (с помощью CSS):

Пример

Как создать карту изображений с интерактивными областями. Каждый регион представляет собой гиперссылку:

Связанные страницы

Учебное пособие по HTML: изображения в формате HTML

Ссылка на HTML DOM: объект изображения

Учебное пособие по CSS: стили изображений

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

Альтернативный текст изображения vs.Текст заголовка и имена файлов: в чем разница?

В чем разница между замещающим текстом изображения и заголовком? Вы сохраняете их такими же?

В этом посте будут рассмотрены различия между атрибутом alt изображения, текстом заголовка изображения и именем файла изображения, а также даны некоторые основные рекомендации по их оптимизации.

Альтернативный текст или альтернативный тег: что правильно?

Когда вы думаете об альтернативном тексте изображения, на ум сразу приходит термин «альтернативный тег».

Что ж, тег alt на самом деле неправильное название и вообще не существует.Поскольку замещающий текст или альтернативный текст является альтернативным текстовым атрибутом тега изображения.

Вот где коммуникация в мире SEO может стать рискованной, потому что это может быть известно как то, что почти каждый знает, что такое alt-тег, но на самом деле это совсем другое.

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

Реклама

Продолжить чтение ниже

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

Для несущественных изображений на основе дизайна можно использовать пустые атрибуты замещающего текста. В этой ситуации программы чтения с экрана просто пропустят изображение.

Что такое замещающий текст изображения?

Альтернативный текст или альтернативный текст используется для отображения текста, описывающего изображение для «альтернативных» источников.

В первую очередь, его цель — сделать изображения более доступными для слепых, использующих программы чтения с экрана, чтобы сделать Интернет намного более доступным в соответствии с рекомендациями W3C по обеспечению доступности.

Его вторичная цель, как ранее упоминала Энн Смарти на SEJ, — это для людей, которые решили по какой-либо причине отключить изображения в своих веб-браузерах. Кроме того, это удовлетворяет тех пользовательских агентов, которые также не могут «видеть» изображения.

Как правило, альтернативный текст должен включать целевую оптимизацию ключевых слов в контексте, описывающем, о чем изображение.Если для изображения не существует альтернативного текста, оно будет отображаться как пустое изображение.

Объявление

Продолжить чтение ниже

Альтернативный текст изображения — это текст, который отображается вместо пустого изображения. Поскольку Google не может точно сканировать изображения, и в основном текст, Google использует альтернативный текст как фокус, когда пытается понять, о чем изображение.

Важно отметить Руководство W3C по доступности для альтернативного текста:

При использовании элемента img укажите альтернативный короткий текст с атрибутом alt.Примечание. Значение этого атрибута называется «альтернативный текст».

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

Что такое текст заголовка изображения?

Атрибут текста заголовка изображения — это атрибут, который используется для предоставления дополнительной информации об изображении.При этом заголовок изображения не используется для ранжирования в поиске, поэтому его оптимизация не так важна.

Но, если вы заядлый специалист по SEO и хотите оптимизировать все для лучшей оптимизации W3C, непременно включайте в свое изображение как замещающий текст, так и текст заголовка.

Однако вам не нужно делать ничего сверхумного для оптимизации текста заголовка. Просто используйте быстрый, короткий, броский заголовок, который дополняет то, что вы оптимизировали для альтернативного текста, и все будет хорошо.

Намерение и опыт пользователя должны быть в центре внимания вашей оптимизации

За последние 10 лет мало что изменилось, когда дело доходит до оптимизации для альтернативного текста и атрибутов заголовка.

Объявление

Продолжить чтение ниже

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

Это должно быть основным идеалом, к которому вы должны стремиться в ходе этой оптимизации.Не добавляйте ключевые слова и, конечно же, меняйте ключевые слова, когда это необходимо.

Здесь важно отметить, что наполнение ключевыми словами по-прежнему наполнено ключевыми словами, поэтому не делайте этого даже во время оптимизации замещающего текста. Будьте осторожны и не рассылайте эти атрибуты спамом, потому что это доставит вам серьезные неприятности.

Когда вы оптимизируете замещающий текст и заголовки в изображениях, важно убедиться, что вы сосредоточены на следующем:

• Поможет ли этот замещающий текст и текст заголовка моим пользователям?
• Удовлетворят ли этот замещающий текст и текст заголовка намерения пользователя?
• Улучшит ли это пользовательский опыт?

Джон Мюллер из Google также подтвердил в недавнем твите, что изображения, которые используются в целях дизайна / позиционирования, не обязательно должны иметь замещающий текст, поэтому пустой замещающий текст, такой как этот (alt = ””) , вполне подойдет.

Рекомендации Google по изображениям

Вот предложения Google по улучшению взаимодействия с замещающим текстом, прямо из их Рекомендаций по публикации изображений:

Реклама

Продолжить чтение ниже

Создайте отличное впечатление от пользователя

Чтобы повысить свой видимость контента в Картинках Google, сфокусируйте внимание на пользователях, обеспечивая удобство для пользователя: делайте страницы в первую очередь для пользователей, а не для поисковых систем. Вот несколько советов:

• Обеспечьте хороший контекст: Убедитесь, что ваш визуальный контент соответствует теме страницы.Мы рекомендуем отображать изображения только там, где они добавляют исходную ценность странице. Мы особенно не одобряем страницы, на которых ни изображения, ни текст не являются оригинальным содержанием.
• Оптимизировать размещение: По возможности размещайте изображения рядом с соответствующим текстом. Когда это имеет смысл, подумайте о размещении самого важного изображения в верхней части страницы.
• Не вставляйте важный текст в изображения: Избегайте встраивания текста в изображения, особенно важных текстовых элементов, таких как заголовки страниц и пункты меню, потому что не все пользователи могут получить к ним доступ (а инструменты перевода страниц не работают с изображениями).Чтобы обеспечить максимальную доступность вашего контента, сохраняйте текст в HTML, предоставляйте замещающий текст для изображений.
• Создавайте информативные и качественные сайты: Хороший контент на вашей веб-странице так же важен, как и визуальный контент для Картинок Google — он обеспечивает контекст и делает результат более действенным. Содержимое страницы может использоваться для создания фрагмента текста для изображения, и Google учитывает качество содержимого страницы при ранжировании изображений.
• Создавайте сайты, удобные для устройств: Пользователи ищут в Google Картинки больше с мобильных устройств, чем с компьютеров.По этой причине важно, чтобы вы создавали свой сайт для всех типов и размеров устройств. Используйте инструмент тестирования для мобильных устройств, чтобы проверить, насколько хорошо ваши страницы работают на мобильных устройствах, и получить отзывы о том, что необходимо исправить.
• Создайте хорошую структуру URL для ваших изображений: Google использует путь URL, а также имя файла, чтобы помочь ему понять ваши изображения. Подумайте о том, чтобы организовать содержимое изображения так, чтобы URL-адреса были построены логически.

Реклама

Продолжить чтение ниже

Оптимизация имен файлов

Google использует имена файлов изображений, чтобы точно определить, что является предметом изображения.

Оптимизируя имена файлов в соответствии с оптимизацией замещающего текста и текста заголовка, можно обеспечить лучшее понимание, которое поможет вашим изображениям ранжироваться в поиске изображений.

По большей части вам не нужны длинные имена файлов с длинным описательным текстом.

Реклама

Продолжить чтение ниже

Ключевое слово, которое в основном описывает изображение, является прекрасным.

Просто убедитесь, что текст имени файла также точно отражает суть изображения.

Оптимизация изображений необходима, но не переусердствуйте.

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

Убедитесь, что вы тратите только то, что необходимо для того, чтобы ваши изображения ранжировались и дополняли ваши маркетинговые усилия в Интернете. Но при этом не упускайте из виду конечную цель.

Дополнительные ресурсы по оптимизации изображений:

изображений | 18F Руководство по доступности

При использовании изображений на странице необходимо предоставить альтернативный метод для этого содержимого.Это можно сделать разными способами. Вы можете предоставить эту информацию с помощью заголовка, атрибута alt (тег alt ), атрибута title или атрибута aria-label . Если изображение содержит текст, весь текст изображения должен быть предоставлен в альтернативном содержимом. Независимо от того, какой метод используется, должен быть предоставлен атрибут alt или title, даже если атрибут пуст.

Тестирование

1. С помощью инструмента веб-разработчика выберите изображения> Показать альтернативные атрибуты и выделить все изображения.
2. Проверьте каждый атрибут alt на наличие следующего:
   • Предоставляется уникальное описание изображения
   • Повторяющиеся изображения, используемые для элементов управления, индикаторов состояния или других программных элементов, имеют согласованный alt текст
   • Текст, включенный в изображение, должен быть включен в alt , когда они важны для понимания изображения
   • Примечание. Доверенный тестировщик DHS требует, чтобы весь текст изображения был включен в атрибут alt * «Изображение» или «Фотография из» не используются. * Если атрибут alt пуст, убедитесь, что изображение чисто декоративное.
   • Если изображение не декоративное, убедитесь, что оно описано на странице
3. Проверьте обведенные изображения без атрибута alt , выполнив следующие действия:
   • Щелкните изображение правой кнопкой мыши
   • Выберите «Проверить элемент»
   • Проверьте атрибут title для информации, обычно находящейся в атрибуте alt

Примеры

Правильно

Предпочтительный метод предоставления альтернативного контента. Удалите атрибут alt со всем текстом.

Допустимо, но менее совместимо с некоторыми вспомогательными технологиями. Очистить атрибут заголовка со всем включенным текстом.

Предупреждение, не читайте этот знак

  
 Предупреждение, не читайте этот знак 
  

Информация, содержащаяся на изображении, предоставляется на странице. В большинстве случаев предпочтительнее использовать атрибут alt . Изображения, отмеченные пустым символом alt ( alt = "" ), считаются «декоративными» и не читаются AT.

Неправильно

В изображении отсутствует атрибут alt и альтернативное содержимое

В атрибуте Alt отсутствует текст на изображении

Избегайте использования «Изображение» или «Изображение», поскольку программа чтения с экрана уведомит пользователя о том, что это изображение. Также избегайте использования заглавных букв, поскольку некоторые программы чтения с экрана будут читать каждую букву, например W-A-R-N-I-N-G.

title — HTML: язык разметки гипертекста

Глобальный атрибут title содержит текст, представляющий консультативную информацию, относящуюся к элементу, которому он принадлежит.

Некоторые типичные применения:

• Маркировка