Чи погано спрацьовують CSS для SEO?

18

В даний час часто те, що було зроблено з <img>тегом, зараз робиться з чимось на зразок <div>з набором фонових зображень CSS за допомогою "спрайту" CSS та зміщення.

Мені було цікаво, який вплив він має на SEO, оскільки ми ефективно втрачаємо altатрибут (який індексується Google) і застрягаємо з атрибутом 'title' (який, наскільки я розумію, не індексується).

Це суттєвий недолік?

seo css

— UpTheCreek
джерело

25

З цієї причини спрати CSS слід використовувати лише для декоративних елементів - використовувати <img>для елементів, специфічних для сторінки, та використовувати спрайт для декоративних елементів, які контекстуально не відповідають вмісту, що подається.

Якщо вам потрібні зображення кнопок для елементів навігації, має набагато більше сенсу додати це зображення як фон на посилання навігації, а не розмітку, як це:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(тобто там, де вміст зображення є надмірним для текстового вмісту на сторінці або вміст зображення найкраще можна описати як "прикраса")

Як додатковий бонус за розділення елементів шаблону сайту як спрайтів, згодом ви зможете змінити "шкуру" сайту, змінивши таблицю стилів замість того, щоб перезаписати старі файли зображень дизайну або переписати всю HTML-розмітку.

— бездарний
джерело

Я погоджуюся з вашими пунктами і додаю, що однією з головних цілей / переваг спрайтів є їх більш висока швидкість завантаження для загальної продуктивності сайту. Швидше завантаження сторінок ПОДАЄТЬСЯ, щоб допомогти в рейтингу SEO, тому я думаю, що це питання правильного інструменту для правильної роботи.

— цифра1001

@ digit1001 - чи дійсно такі роботи, як googlebot, завантажують усі ресурси, пов’язані зі сторінкою?

— UpTheCreek

4

Ви можете використовувати <img>теги з CSS-спрайтами:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png може бути прозорим пікселем 1x1, стисненим до <50 байт.

Стиль:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

Таким чином ви отримуєте оптимізацію продуктивності від спрайтів - і зберігаєте свої altтеги.

— ДжонніФальдо
джерело

Я майже впевнений, що якщо Google може скласти пошукову систему зі складними процесами для ранжування та індексу 30 трильйонів сторінок, вона може виявити твердження альт-пікселя 1x1 пікселя.

— Ricky Boyce

1

@ Ricky B Справа не в тому, чи виявлять вони це, але якщо вони за це химерно штрафують, це було б дивно, оскільки вони будуть штрафувати вас за скорочення часу завантаження сторінки та кількості запитів, до чого вони схильні заохочувати: )

— ДжонніФальдо

1

altТег переоцінювати. Я думаю, що занадто багато людей виходять зі шляху, щоб переконатися, що вони мають altтеги на своїх сторінках. Я не вірю, що тобі боляче, щоб не мати такого. Це просто переконатися, чи є у imgвас altтег, присвоєний йому тег.

Я вважаю, що час завантаження та ефективність веб-сайту має більший вплив на SEO в цілому, ніж altтеги, і для кожного запиту зображення або запиту HTTP, сайт буде сповільнюватися. Мета спрайту CSS - допомогти мінімізувати ці запити та пришвидшити час завантаження сторінки.

— Брендон Баттарс
джерело

5

altТекст також використовується для читання з екрану. Я думаю, у вас може бути інша думка щодо альт-тексту, якби ви були сліпими.

— MikeTheLiar

1

Я схильний використовувати спрайти для декоративних іконок, вони не мають нічого спільного зі сторінкою в цілому, тому для SEO її штрафу в цьому випадку. Будь-який набір у вас зображень, які мають однакові розміри, які не сприяють змісту сторінки, є хорошими кандидатами для CSS-спрайтів.

— Agile Noob
джерело