6 kwietnia 2020
Adrian Pakulski

Background-image w CSS czy img tag w HTML

Co z SEO?

Optymalizacja SEO Porady SEO

I ten i ten element to bitmapa. Użytkowo – niczym się nie różnią, ale pierwsza jest osadzona w dokumencie jako background-image w CSS’ie a druga typowo – w firmie img tagu w dokumencie HTML. Która z nich ma impact na SEO? O tym w dzisiejszym materiale.

Różnica między CSS background-image a img tag HTML

Odpowiedź jest prosta – jedyny impact na SEO ma zwykła bitmapa osadzona w HTML’u w img tag. To do niej – w przeciwieństwie do bitmapy w formie backgroundu zaszytej w CSS możesz przypisać atrybut alt i title. Do niej w końcu możesz pozyskiwać linki i pozycjonować ją w wynikach organicznych i wyszukiwarce Google Grafika.

Indeksacja bitmap w Google Grafika

Z kolei bitmapy background w CSS są co prawda renderowane przez boty, ale nie mają wpływu na rankowanie strony w kodzie źródłowym, do której są przypisane i nie są eksponowane w wynikach wyszukiwania Google Grafika.

Ale ej! To też nie tak, że z bitmap w formie background’ów mielibyście nie korzystać, bo przecież to naturalny sposób na osadzanie teł, warstw na stronach.

Zdarza się jednak, że CSS jest nadużywany w kontekście osadzania bitmap na stronach internetowych – szczególnie przez początkujących deweloperów.

Wiedza SEO
Ucz się podstaw SEO z naszego kanału na YouTube

Background CSS może utrudniać dostęp do treści dla osób niedowidzących, ponieważ czytniki ekranowe ignorują zawartość background-image. Poza tym – przy odpowiednio dużej rozdzielczości, background-image może stać się obciążający i w kontekście wydajnościowym na urządzeniach mobilnych, jak i czasu ładowania zawartości. Co prawda istnieją sposoby, aby i z tym sobie poradzić, bo można pisać warunki wyświetlania konkretnych bitmap w CSS dla konkretnych maksymalnych rozdzielczości, co może wyglądać w ten sposób:

@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}

ale generalnie upychanie wielu bitmap w CSS to kiepski pomysł, bo i tak to bitmapy w img tag HTML są szybciej kolejkowane i wyświetlane na stronie, bo nie wymagają wcześniejszego pobrania danych z CSS i parsowania.

Możecie przyjąć, że w dużym uproszczeniu – cała zawartość bitmap osadzonych w CSS nie ma nic wspólnego z semantyką dokumentu. Obrazy typu background-image powinny zawierać wobec tego tylko takie bitmapy, które nie są przedmiotem treści, contentem.

Tymczasem dzięki za uwagę, widzimy się niebawem w kolejnym materiale, mówił do Was Adrian Pakulski Paq, cześć.

5
Oceń
Zamknij

Ocen: Background-image w CSS czy img tag w HTML

Oceń
Adrian Pakulski
Właściciel / specjalista SEO
Specjalista SEO z 8-letnim doświadczeniem rynkowym, a od 2012 r. właściciel agencji paq-studio, linkbuilder i analityk SEO. Odpowiedzialny za opiekę merytoryczną małych, średnich i dużych marek w wyszukiwarce Google. Absolwent Politechniki Koszalińskiej i Akademii Górniczo-Hutniczej w Krakowie na kierunku Marketing Internetowy.
Jak sprawdzić popularność frazy w Google?

Jak sprawdzić popularność frazy w Google?

Szukasz pomysłu na utworzenie nowej treści na swojej stronie, blogu lub sklepie internetowym? Upewnij się, że zapytanie do wyszukiwarki, jakie intuicyjnie wydaje ...
Jak sprawdzić, na której stronie Google jest moja strona?

Jak sprawdzić, na której stronie Google jest moja strona?

Ale na jakie zapytanie, na jaką frazę? Ale okej – jeśli zadałeś sobie to pytanie w ten sposób, to prawdopodobnie chcesz dowiedzieć ...
Prowadzenie serwisu ogłoszeniowego

Prowadzenie serwisu ogłoszeniowego

Czy prowadzenie serwisu ogłoszeniowego to dobry pomysł na biznes w 2020 r.? Co z SEO? Jak operować main contentem, który w 99% ...

Jakiego artykułu szukasz?

Zamknij