Jump to content
  • 0

text-indent, о размусоленном

Libiros

Asked by Libiros,

 Share

Question

Libiros Explorer

Libiros

Posted
Posted

Задумался о грамотном коде при верстке логотипов и вообще ссылок с картинками без текста.

 

Казалось бы, что может быть проще

<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 или чем-то еще подобным.

Какие недостатки?

Мы скрываем от пользователя текст с ключевым словом. Чего не советует делать, гугл, например.

 

 

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

  • Использовать текст белого цвета на белом фоне
  • Поместить изображение поверх текста
  • Поместить текст за пределами экрана с помощью CSS
  • Установить для размера шрифта значение 0
  • Скрыть ссылку, используя в качестве текста ссылки один незаметный символ (например, дефис в середине абзаца)

У нас не много ключевых слов. Лишь слово Logo. И для каждой социальной кнопки. Такие слова как: Follow us on Twitter/VK/FB/etc.

 

2. Написать text-indent: -9999px;

По сути, это

 

 

  • Поместить текст за пределами экрана с помощью CSS

Однако этим методом пользуются уже лет 10.

Выходит за пределами экрана на расстоянии -9999px у нас будет минимум 7 строк для каждой ссылки с использованием изображения.

 

Но я хочу, чтобы всё было по уму. А потому закономерный вопрос к знатокам:

Как решить проблему правильно, с точки зрения СЕО?

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
Libiros Explorer

Libiros

Posted
  • Author
Posted (edited)

Нашел следующее решение:

<a href="#" title="title">link</a>
a {content: url('gplus.png');}

Исходный код, соответственно:

<!doctype html><html lang="en"><head><link rel="stylesheet" href="style.css">	<meta charset="UTF-8">	<title><Document></Document></title></head><body>	<a href="#" title="title">link</a></body></html>

Вопрос: будет ли это считаться скрытой информацией от пользователя, но явной информацией для робота?

 

P.S. При отключении картинок - пустая страница.

Edited by Libiros
Link to comment
Share on other sites
  • 0
Z1gnet Explorer

Z1gnet

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

ну тут же написано "с целью повлиять на рейтинг сайта в результатах поиска Google". на сколько мне известно имеется ввиду, то что вы натулите ЛЕВОГО текста для раскрутки сайта, тем самым введете поисковик и пользователя в заблуждение. но предположим что у вас есть навигация где мудрений шрифт и вы решили вставить его картинками. то в этом случае если на картинке написано "about" то вы ссылку вставляете слово "about" и скрываете его через цсс, тем самым вы никого не обманули, а наоборот, внесли ясности (гугл же вряд ли будет считывать что же за текст нарисован на картинке). + если отключить цсс то будет видна нормальная навигация, + это к web accessibility. в вашем случае если на лого есть некий текст, то вы смело можете его писать в ссылке и прятать. вот если бы вы туда всунули что то типа "скачать бесплатно фильмы ...." (не знаю как там нехорошие люди пишут), то это было бы обманом и нарушением рекомендаций гугла.

если в чем ошибся или мои данные уже устарели буду рад если кто поправит)))

Link to comment
Share on other sites
  • 0
Libiros Explorer

Libiros

Posted
  • Author
Posted (edited)

Дело в том, что фактически я скрываю текст.

 

У меня есть логотип (кружок) и я делаю его ссылкой на главную страницу. Ссылку описываю как "logo". Пользователю не нужно знать, что описывает ссылка в логотипе.

 

Другое дело социальные кнопки...

 

Одно дело вставить картинку с твиттера и написать "подписывайтесь на наш твиттер". Другое дело скрыть текст и оставить логотип твиттера.

Здесь пользователь видит логотип твиттера, но не видит надписи. Является ли это обманом? С точки зрения робота

 

Еще мне понравилось простое решение с content: url()

 

Но отключение картинок всё испортит.

 

Хотя сейчас в голову приходит решение заключить каждую ссылку в div, но это плохое решение.

 

P.S. Вот до чего доводят спрайты :)

Edited by Libiros
Link to comment
Share on other sites
  • 0
Z1gnet Explorer

Z1gnet

Posted
Posted
Одно дело вставить картинку с твиттера и написать "подписывайтесь на наш твиттер". Другое дело скрыть текст и оставить логотип твиттера. Здесь пользователь видит логотип твиттера, но не видит надписи. Является ли это обманом? С точки зрения робота

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

Link to comment
Share on other sites
  • 0
Z1gnet Explorer

Z1gnet

Posted
Posted

конечно скрывать. ну вас есть значек твиттера, но текста же не предусмотрено дизом, значит его и не должно быть видно. но для сео это важно. я скрываю через text-indent: -9999px; overflow:hidden;

Link to comment
Share on other sites
  • 0
Z1gnet Explorer

Z1gnet

Posted
Posted

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

Link to comment
Share on other sites
  • 0
Libiros Explorer

Libiros

Posted
  • Author
Posted

При отключении картинок, text-indent тоже проблему не особо решает.

 

А content: url (); не позволяет использовать спрайты.

 

Остается использовать старинный способ, но про влияние на СЕО хотелось бы услышать.

Link to comment
Share on other sites
  • 0
Libiros Explorer

Libiros

Posted
  • Author
Posted (edited)

Может здесь можно просто обойтись атрибутом tittle? Зачем тут текст, если этот атрибут даст понять, что за ссылка и куда ведет.

Тогда будет ли это валидно для W3C и, опять же, SEO ?

 

В спецификации приведены примеры только для заполненного тега a

Edited by Libiros
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Да, старая больная тема... Я когда-то ее тоже поднимал. Конский отрицательный text-indent, конечно, по-любому один из худших вариантов, имхо, лучше уж дополнительный span, накрывающий текст картинкой, когда она есть.

 

Что касается соцкнопок — надо смотреть, скорее всего, они окажутся меньше 2 кБ штука, и тогда есть смысл заинлайнить их прямо в код, в виде <img src="data:image/png;base64,..." alt="...">. Сэкономив еще целый HTTP-запрос в сравнении со спрайтом. Еще вариант для них же — иконочный шрифт с вот таким фокусом.

Link to comment
Share on other sites
  • 0
Libiros Explorer

Libiros

Posted
  • Author
Posted

лучше уж дополнительный span, накрывающий текст картинкой, когда она есть.

 

Выходит, что этот способ хорош, когда картинки выключены. А когда включены, то снова гугл будет грозить нам пальцем?

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

По идее, не должен грозить, если текст на картинке и в разметке более-менее совпадают. Как и при любом другом способе IR. Но при этом, в отличие от текст-индента и его вариаций, сохраняет доступность информации для бедолаг, отключающих картинки для экономии времени и трафика, пытаясь загрузить хоть что-то через GPRS…

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Libiros
      Как повлияет на быстродействие создание дополнительных DOM-элементов на странице?
      By Libiros
      Решил использовать .webp для изображений на сайте, а также оптимизировать его через рекомендации google audits.
      Таким образом получилось следующее:
      <img src="image.webp" srcset="image-480.webp 480w, image-768.webp 768w, image-1024.webp 1024w" alt="alt" titile="title"/> Так как webp не поддерживается некоторыми браузерами, было решено использовать решение WebPJS.
      Теперь есть следующая проблема: решение заменяет атрибут src, но не трогает srcset. То есть изображения остаются неизменными и не отображаются.
      Есть следующая идея, но я, полагаю, это будет очень затратно в плане ресурсов, а также неизвестно, как это будет влиять на SEO (может, спасут теги <nofollow>?).
      Распарсить атрибут srcset Создать столько img-элементов, сколько указано изображений в атрибуте Зацепить у каждого измененный атрибут src Составить новый атрибут srcset и заменить его на первом img Остальные img будут помещены под тег nofollow с классом display:none; Пока описывал решение, подумал, что, возможно, это плохое решение в том плане, что тогда у меня возрастет количество запросов на сервер как раз на количество новосозданных img-элементов. Но не уверен, так ли это.
    • skonline.design
      Разработка клиентских веб-приложений. JavaScript, AJAX, JQuery.
      By skonline.design
      Разработка клиентских веб-приложений. JavaScript, AJAX, JQuery.
      Мы занимаемся разработкой скриптов для оптимизации работы ваших сайтов и повышения взаимодействия с трафиком, добавлением визуальных эффектов. Также готовы взяться за решение нестандартных индивидуальных задач.
       
      SEO, внутренняя и внешняя поисковая оптимизация
      В своем составе имеем специалистов, занимающихся поисковой оптимизацией, повышением CTR на ваших сайтах, увеличением монетизации трафика с учётом различных особенностей тематики и конкурентоспособности ваших сайтов

      Услуги по разработке элементов администрирования контента, системы управления, работа с СУБД
      Оказываем услуги по разработке индивидуальных систем управления сайтом, по написаниюь серверных веб-приложений, а так же работаем с базами данных, занимаемся оптимизацией обработки данных.

      Оказываем всевозможные услуги по разработке статичных веб-приложений, работе с графикой.

      Цена на все услуги договорная 
    • balck
      SEO. Продвижение сайтов. Предлагаем.
      By balck
      Предлагаем seo- и продвижение сайтов в ТОП Яндекс.
      В том смысле, что можем оптимизировать но не не продвигать, а можем продвигать уже оптимизированный сайт, или сделать все целиком под ключ, а так же увеличить конверсию сайта.
      Работаем только по официальному договору!
      Любая страна и любая законная валюта расчёта - работаем со всеми странами!
      Для многих категорий заказчиков готовы предложить продвижение сайта без предоплаты - оплата только за результат нахождения ключей в ТОПе Гугл или Яндекс.
      http://extrit.by SEO. Продвижение по-настоящему. Оплата не за магию а только за результат! - подробности и наши контакты на сайте!
      Беремся продвигать сайты и по Европе, США, Катару, и ОАЭ
    • Илья 2
      SEO Агрегаторы - развод на бабки?
      By Илья 2
      В последнее время появилось много агрегаторов SEO продвижения. Технологии, которые они используют, идут нарпямую в разрез с тем, что хотят поисковики.
       
      К примеру, официально Яндекс  крайне негативно относится к покупным ссылкам. То есть услуги, которые предлагают эти агрегаторы (или по крайней мере часть услуг), с точки зрения Яндекса «нелегальны» и вместо увеличения поискового траффика мой сайт может быть просто забанен. То есть то, что называется продвижением, является по сути умышленным введением клиента в заблуждение с целью наживы. 
       
      В части анализа они не делают ничего, чего нельзя было бы сделать, используя инструменты Гугла или Яндекса - типа аналитики и вордстат.
       
      То есть на лицо откровенный развод на бабки или я чего-то недопонимаю?
    • Nicolai6120
      SEO frendly перемещение блоков
      By Nicolai6120
      Добрый день. Есть известная фишка о том, что для SEO полезно, чтобы текст содержащий ключевые слова был как можно выше по коду страницы, таким образом робот присвоит ему более высокий коэффициент значимости и в целом это даст положительный эффект. Из соображений красивости дизайна у меня есть необходимость того, чтобы перед этим самым "ключевым" текстом (выше него на странице) шел достаточно большой, но бессмысленный с точки зрения SEO блок. Так вот, есть ли возможность поместить этот блок по коду ниже, но так, чтобы он выводился на странице выше и при этом влияние используемых средств (z-index или что-то другое) не оказало негативного воздействия на продвижение в целом?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept