Атрибут hreflang тега <area>
Описание
Атрибут hreflang для тега <area> указывает язык целевого ресурса, на который ссылается область изображения-карты. Это помогает поисковым системам и браузерам понять, для какой языковой аудитории предназначена ссылка.
<img src="worldmap.png" usemap="#langmap" alt="Выбор языка">
<map name="langmap">
<area shape="rect" coords="0,0,100,50"
href="/ru/home"
hreflang="ru"
alt="Русская версия">
<area shape="rect" coords="100,0,200,50"
href="/en/home"
hreflang="en"
alt="English version">
</map>
Особенности работы:
| Характеристика | Поведение |
|---|---|
| Формат значения | Код языка по ISO 639-1 (2 буквы) или с регионом (ru-RU) |
| Обязательность | Необязателен, но рекомендуется для многоязычных сайтов |
| Влияние | SEO, подсказки браузерам, доступность |
| Совместимость | Поддерживается всеми основными браузерами |
| Сочетание | Используется вместе с href и alt |
Рекомендации по использованию:
- Используйте для многоязычных image maps
- Соответствуйте языку целевой страницы
- Для региональных вариантов используйте формат язык-регион
- Не заменяет атрибут alt - описывайте область на основном языке
- Проверяйте коды языков на соответствие стандарту
Пример с региональными вариантами:
<map name="regional">
<area shape="rect" coords="0,0,100,50"
href="/es/"
hreflang="es-ES"
alt="Español (España)">
<area shape="rect" coords="100,0,200,50"
href="/mx/"
hreflang="es-MX"
alt="Español (México)">
</map>
Сочетание с другими атрибутами:
<area shape="circle" coords="150,150,30"
href="/fr/contact"
hreflang="fr"
rel="alternate"
title="Version française"
alt="Contactez-nous en français">
Ограничения и лучшие практики:
- Не влияет на отображение содержимого - только мета-информация
- Должен соответствовать языку целевой страницы
- Избегайте конфликтов с lang/html-атрибутами
- Для сложных мультиязычных систем используйте hreflang в <head>
Примечание: Правильное использование hreflang особенно важно для международных сайтов и помогает улучшить пользовательский опыт и SEO.