Alt text vs CSS sprites (SEO против скорости)

Я перерабатываю наш сайт, чтобы уменьшить HTTP-запросы и блокировать запросы, объединяя JS, css, gzipping, загружая все JS через LABjs и используя спрайты CSS для изображений, которые были загружены индивидуально через <img>.

Прогресс достиг большой успеваемости - повышение производительности загрузки 5 раз. Тем не менее, мы находимся в рейтинге 5 лучших поисковых запросов в Google для многих целевых ключевых слов и фраз. Я боюсь, что удаление многих тегов img с атрибутами alt может повредить нашему SEO.

Есть ли у кого-нибудь опыт работы с альт-тегами /удаление и влияние на позиции SEO? Является ли предыдущий ранг «липким»?

5 голосов | спросил leeoniya 17 MarpmSat, 17 Mar 2012 22:48:00 +04002012-03-17T22:48:00+04:0010 2012, 22:48:00

5 ответов


5

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

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

ответил DisgruntledGoat 18 MarpmSun, 18 Mar 2012 14:38:30 +04002012-03-18T14:38:30+04:0002 2012, 14:38:30
4

1: текст в формате «Альт» необходим для Google SEO, но только потому, что Google любит веб-сайты, предназначенные для разных типов браузеров и пользовательских способностей, например: текстовые браузеры, отключенные javascript и т. д., которые, как говорится, имеют изображения будут дополнять ваши результаты обычного поиска в целом.

2: Использование ключевых слов в альт-тексте в порядке, но только в том случае, если текст alt используется для точного описания того, что представляет собой изображение, поэтому цель alt text. Другими словами, если цель альт-текста не для плотности ключевых слов. Совет. Если у вас есть качественный, релевантный и оригинальный контент, вам даже не нужно беспокоиться о плотности ключевых слов.

3: Скорость страницы является еще одним фактором в алгоритме Google. Это связано с тем, что скорость помогает пользователю. CSS спрайты помогают уменьшить скорость страницы за счет сокращения HTTP-запросов. Многие основные веб-сайты, включая Google, используют их.

Говоря, я хочу, чтобы я мог предложить больше информации, так как я тоже ищу его.

обновление:

прочитайте пост ниже, так как он может иметь более подробную информацию по этой теме

нажмите здесь для другого сообщения, относящегося к этой проблеме

ответил joe 27 MaramTue, 27 Mar 2012 11:59:39 +04002012-03-27T11:59:39+04:0011 2012, 11:59:39
2

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

Один из самых простых способов сделать это - это что-то вроде этого:

.sprite {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

Другие возможные решения включают перенос текста в span внутри элемента спрайта, а затем с использованием абсолютного позиционирования для перемещения его за пределы экрана или установить его непрозрачность на 0 или просто с помощью visibility: hidden.

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

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

ответил Ilmari Karonen 18 MaramSun, 18 Mar 2012 03:25:52 +04002012-03-18T03:25:52+04:0003 2012, 03:25:52
2

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

ответил Anagio 18 MaramSun, 18 Mar 2012 04:37:51 +04002012-03-18T04:37:51+04:0004 2012, 04:37:51
1

Вы решаете это, пересматривая свои варианты.

Вы создаете определенную область с помощью <a> с помощью display:block; или <div> и используйте overflow hidden;, чтобы скрыть переполнение и position:relative;.

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

Затем используйте :hover на изображении, чтобы изменить положение.

Теперь ваш спрайт основан на теге img, поэтому вы можете использовать текст alt.

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

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
ответил Paul 12 Mayam14 2014, 03:30:41

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132