Якорная ссылка XHTML с фоновым изображением и без текста - PullRequest
6 голосов
/ 20 января 2011

Возможно ли, чтобы внутри якорных ссылок не было текста с фоновым изображением и фиксированными размерами, и все же это хорошо для SEO?

Пример CSS:

a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}

a:hover img{background-position:0 -20px;}

Пример HTML:
<a href="#"></a>

Ответы [ 5 ]

7 голосов
/ 20 января 2011

Если на изображении есть текст, или вы просто хотите добавить его описание, вы можете помочь SEO и доступности в том, чтобы дать якору заголовок и контент с большим отрицательным отступом текста, например, добавив его вваш a CSS:

display:block;
text-indent:-9999em;

... со следующим HTML:

<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>
3 голосов
/ 21 апреля 2011

Вдохновлен комментарием neXib к другому ответу.

HTML:

<a href="/home" title="Homepage" class="home">
    <div><img src="/images/sprite.png" alt="Home" /></div>
</a>

CSS:

a {
    display: block;
}
.home div {
    width: 84px;
    height: 27px;
    overflow: hidden;
    position: relative;
}
.home div img {
    position: absolute;
    top: -65px;
    left: -20px;
}

Пока div имеет «переполнение: скрытый» и фиксированные размеры, изображение внутри может быть расположено внутри, чтобы отображать только ту часть спрайта, которую вы хотите.

SEO меня тоже беспокоило, и я думаю, что это решение будет работать нормально.

1 голос
/ 20 января 2011

Использовать атрибуты alt и title, но не иметь содержимого внутри тегов бессмысленно. Я думаю, что существует серьезный риск того, что вы будете оштрафованы в результатах поиска!

Опять же, почему вы пытаетесь это сделать. Вы делаете кнопки, которые ссылаются на другую страницу или что запустить функцию JavaScript?

1 голос
/ 20 января 2011

Поисковая система не может прочитать это, так как это будет хорошо для SEO?Более важно, почему вы хотите это сделать, что вы пытаетесь сделать?

0 голосов
/ 31 мая 2012

Неужели это не решит проблему?

<a href="#">&nbsp;</a>

Ну, это немного старый вопрос, но просто хочу мнение по этому поводу!

...