Search the Community

Задумался о грамотном коде при верстке логотипов и вообще ссылок с картинками без текста. Казалось бы, что может быть проще <a href="#" title="title"><img src="#" alt="alt" /></a>Но, проследив за подгрузкой изображений на сайте, я повернулся в сторону спрайтов. Вот небольшая задачка. Дано: 1 логотип, 6 социальных кнопок. Итого - 7 изображений. Задача: Объединить изображения в спрайт и выдавать его в нужных местах. Вероятное решение: Обыкновенное. Мы пишем что-то вроде <a href="#" title="logo"></a>Но в этом случае у нас нет ключевых слов. Тег а пустой. Изменяем его так: <a href="#" title="logo">Logo</a>В дизайн не вписывается строчка Logo. Вероятные решения: 1. Скрыть текст путем visibility или display:none или чем-то еще подобным. Какие недостатки? Мы скрываем от пользователя текст с ключевым словом. Чего не советует делать, гугл, например. У нас не много ключевых слов. Лишь слово Logo. И для каждой социальной кнопки. Такие слова как: Follow us on Twitter/VK/FB/etc. 2. Написать text-indent: -9999px; По сути, это Однако этим методом пользуются уже лет 10. Выходит за пределами экрана на расстоянии -9999px у нас будет минимум 7 строк для каждой ссылки с использованием изображения. Но я хочу, чтобы всё было по уму. А потому закономерный вопрос к знатокам: Как решить проблему правильно, с точки зрения СЕО?