post_ico2

Image Replacement

Tworząc rożnego rodzaju strony www często napotykamy konieczność podmiany tekstu obrazkiem – np. umieszczając logo strony lub niestandardowy nagłówek. Moglibyśmy użyć do tego znacznika img, ale ten sposób nie jest przyjazny użytkownikom ani SEO friendly. Z pomocą przychodzi CSS.


Jest wiele technik radzenia sobie z tym problem. Przedstawię dwie najprostsze i chyba obecnie najpopularniejsze.

1. sposób

<h1>Image Replacement</h1>

h1{
    background: url('images/header.png') no-repeat;
    height: 150px;
    width: 250px;
    text-indent: -9999em;
}

Założenia tej techniki są bardzo proste: dodaje do elementu tło z obrazkiem i wyrzuca z niego tekst gdzieś poza ekran.

2. sposób

<h1>Image Replacement</h1>

h1{
    background: url('images/header.png') no-repeat;
    height: 150px;
    width: 250px;
    font-size:0;
}

W drugim sposobie wystarczy nadać atrybutowi font-size zerową wartość. Osobiście preferuję tę metodę.

Zakończenie

Image Replacment jest bardzo prostą techniką używaną przez projektantów stron www, ale jest bardzo przydatna. Zamiast dodawać logo za pomocą img możemy dodać nagłówek h1 z nazwą strony.

Aktualizacja

Ze stosowaniem techniki Tmage Replacement trzeba jednak uważać. Używanie tej metody może spowodować ban od Google.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...
  • thek

    Jest tylko jedno „ale”. Zobacz jak obecnie algorytmy google reagują na „hacki” w stylu text-indent: -9999px czy font-size: 0
    Jeśli się nie dogrzebałeś to powiem wprost: uznają to za ukrywanie tekstu/treści i jeśli wyłapią, to tracisz pod kątem SEO. Wspominam to bo już się na to kiedyś natknąłem. Jeśli się rozpędzisz to Ci nawet filtr nałożą i to nie jest akurat przypuszczenie ale fakt. Sam sprawdź sobie wpisy ludzi, którzy go dostali za text-indent.

  • filip

    Tak jak napisał thek. Osobiście mogę powiedzieć że jeden z moich klientów, kiedyś coś podobnego chciał, powiedziałem mu jakie ewentualnie mogą z tego płynąć nie korzyści, stwierdził że wyolbrzymiam problem.. Po jakimś miesiącu dzwoni do mnie że dostał bana na wyniki wyszukiwania i praktycznie całkowicie zniknął z wyników wyszukiwania ;)

    Nie polecam nikomu żadnej techniki zaciemniania czy próbowania być mądrzejszym od google. Z doświadczenia wiem że przynosi to tylko złe korzyści, żadnych pozytywnych.

    img wcale nie jest taki zły, dać mu title, wstawić tam odpowiedni tekst i to jest brane pod uwagę, a nie jest niczym złym.

  • Szczerze powiedziawszy zaskoczyła mnie informacja, że za takie coś Google może dać ban.. No ale za specjalistę odnośnie SEO nie uważam się i do głowy mi nie przyszło, że mogą być takie konsekwencje stosowania image replacement :)

    Faktycznie, poszperałem dziś w sieci i zdarzają się przez to problemy…

  • Od dawna reagują na takie tricki.

    Osobną sprawą jest, ograniczenie minimalnego rozmiaru czcionki przez przeglądarkę, wtedy font-size: 0; nie zadziała w ogóle.

    Innym sposobem, jest pobawienie się overflow: hidden; i wypchnięcie tekstu paddingiem za obiekt.

    Nie trzeba też czarować z backgroundem, a wstawić jako img (korzyść z dodatkowego title i alt), a wypychający padding zrównoważyć negatywnym marginesem img.

    Swoją drogą: „bardziej banalniejszy” ? :D

  • Michał

    Piszecie bzdury, owszem Google to sprawdza, Google jest czujne, ale pod kątem jawnych oszustw, wszystkie wątki na ich forach dotyczą nadużyć. Jeżeli macie jakieś linki/wypowiedzi ludzi z Google to bardzo chętnie przeczytam, Hm wróć przecież nic takiego nie ma, we wszystkich dokumentach Google jest powiedziane jak tego nie używać a nie ze nie używać – reszta to jakiś buzz. Oczywiście jak ze wszystkim należy znać umiar, logo można zrobić przez img z alt i title, a chowanie tekstu tam gdzie jest to na prawdę potrzebne.

    Btw sami do tej pory korzystali z podobnej techniki, o ile teraz tez nie (nie mam możliwości sprawdzić z tabletu)

  • Wiem z własnego doświadczenia też,że jeśli ktoś nie chce to nie musi podpisywać tekstu przy wstawianiu zacznika <a href, img czy alt.Nawet w Joomli też nie jest to wymagane.Co do wstawiania obrazka do strony internetowej to z pewnością polecam znacznik img,bo to jest jeden z najprostszych sposobów,a co do wszukiwarki Google to piszą że najlepszym sposobem jest niezamykać znacznika <img na końcu.Pozdrawiam :-D

  • Podanie na tacy obrazka w img z altem jest zgodne z wytycznymi Google i najbezpieczniejsze. Żonglowanie ujemnymi stylami z automatu prawdopodobnie nie zaszkodzi, gorzej jak ktoś zgłosi spam-report i sprawdzą „ręcznie”.