Strategia nr. 2: Text invizibil si semivizibil
Optimizarea paginilor web pentru motoarele de cautare forteaza proiectantii de pagini sa lucreze cu doua concepte de proiectare individuale si diferite:
- Conceptul paginilor agreate de motoarele de cautare.
- Conceptul paginilor agreate de vizitatori.
Din pacate, cele 2 zone de interes adesea nu au nimic in comun.
In primul caz, motoarele de cautare raspund optim la pagini „lipsite de stralucire”, extrem de sarace in grafica, avand text masiv si foarte putine artificii vizuale. In cel de-al doilea caz, vizitatorii agreeaza paginile bine structurate, intuitive, cu multa grafica si o multitudine de materiale multimedia de efect (precum cele generate in FLASH), pe care motoarele de cautare nu le pot indexa pentru ca nu le inteleg continutul.
Ca rezultat al adaptarii simultane la conditii atat de diferite, proiectantii s-au luptat inca de la inceputurile web-ului sa creeze pagini care sa raspunda favorabil ambelor cerinte.
Textul invizibil
Este doar una dintre multele solutii care au fost adoptate pentru rezolvarea problemei.
Scopul era acela de a adauga la continutul vizibil al paginii, o alta portiune de text, invizibila ochiului vizitatorului, constand in cuvinte cheie, propozitii sau fraze, concepute astfel incat motorul de cautare sa le ia in considerare asemenea unui text de pagina oarecare, extrem de bogat in cuvinte cheie.
Textul optimizat, de cele mai multe ori nu avea sens din punct de vedere semantic, desi era conceput sa semene cu un text destinat vizitatorului, citibil si inteligibil.
Necorespunzand intocmai exigentelor utilizatorului, acesta era ascuns, devenind invizibil ochiului uman. Pentru a face posibil acest lucru, culoarea textului optimizat (<fontcolor= „#xxxxxx”>) se suprapunea perfect peste cea a fundalului paginii (<bgcolor= „#xxxxxx”>). In acest fel textul devenea invizibil in browser.
Este deci de retinut ca textul invizibil a fost folosit in scopul inserarii unui aflux sporit de cuvinte cheie.
Text semivizibil
Multe motoare de cautare considera insa textul invizibil ca o tehnica iancceptabila de „spam” (suprasaturare artificiala de cuvinte). De aceea se va utiliza aceasta tehnica in mod precaut, eventual inlocuind textul invizibil cu text semivizibil, operand modificarile corespunzatoare in codul hexa al culorilor (de exemplu #FFFFFF va deveni #FFFFFE).
Asadar, pentru a produce text semivizibil, una dintre cele 2 culori suprapuse, identice, se va altera intr-o foarte mica masura (prin modificarea cu cateva unitati a codului hexa aferent), astfel incat noua nuanta sa difere extrem de putin de cea initiala (imperceptibil in ochii vizitatorului), exact suficient cat din puct de vedere al motorului cele 2 culori sa apara ca diferite. Aceasta diferenta de nuanta, vizibila doar in cod, este necesara pentru ca pagina sa poata trece de filtrele de spam ale motorului. Diferenta insesizabila va fi ineficienta in cazul in care dorim inscrierea intr-un director web (cum este Yahoo sau Open Directory), acolo unde site-urile sunt revizuite manual de o echipa de operatori umani, inainte de a fi indexate.
Mai jos este prezentat un exemplu de text aproape alb suprapus peste un background de un alb pur:
Paranteza: Vom prezenta in cele ce urmeaza translatarea din cod hexa in cod RGB a culorilor, pentru a le putea manipula usor cu editoarele foto despre care se stie ca folosesc reprezentarea RGB (red-green-blue – compunere din rosu verde si albastru (ca si culori primare)) practic a oricaror nuante de culori dorite.
Asadar: codul HTML al culorii este un cod hexa (conform acestui cod, numarul reprezentat astfel este in baza 16 (hex), iar literele de la A pana la F reprezinta numerele de la 10 la 15 ale acestei baze). Fiecare culoare se reprezinta in cod HTML din 6 cifre hexa (de la 0 la F). Analogia este urmatoarea: primele 2 cifre hexa (de la stanga la dreapta) reprezinta numarul zecimal aferent componentei RGB R(red), din urmatoarele 2 cifre hexa se obtine numarul zecimal aferent componentei RGB G(green), iar numarul zecimal codificat in hexa de ultimele 2 cifre reprezinta comonenta RGB B(blue).
Pentru exemplul prezentat mai sus, culoarea fundalului era #FF FF FF in hexa, ceea ce inseamna (15*16 + 15) = 255 = R ; (15*16 + 15) = 255 = G; (15*16 + 15) = 255 = B, deci codul RGB aferent va fi 255/255/255, vizualizabil ca si culoare in orice editor foto sau chiar in orice soft de editare text gen MSWord, MSExcel, etc… utile atunci cand se doreste setarea exacta a unei anumite culori, aferente unui text sau unui fundal. In cazul culorii textului folosit mai sus, aceasta era #FF FF EE in cod HTML, adica (15*16 + 15) = 255 = R; (15*16 + 15) = 255 = G; (14*16 + 14) = 238 = B, asadar 255/255/238 in codificare RGB.
Revenind la subiectul textului semivizibil, acesta va aparea pentru filtrul de spam al motorului de cautare ca orice alt text vizibil, deoarece culorile textului si fundalului nu coincid. Utilizarea acestei tehnici in locul primeia se impune daca tinem cont de faptul ca multe motoare de cautare sunt programate sa rejecteze paginile care contin text de aceeasi culoare cu cea a fundalului paginii.
Imagine de fundal
O alta metoda de a adauga text optimizat in pagina imbinand armonios cele 2 vederi (a motorului si a vizitatorului), este de a utiliza o imagine intr-o singura culoare ca element primar din care sa se construiasca prin alaturare succesiva fundalul paginii.
In acest caz, motorul nu va fi capabil sa detecteze culoarea de fundal, ea fiind de fapt o imagine pe care acesta nu o intelege si deci nu un cod de culoare, astfel incat se va putea folosi cu succes in pagina un text suprapus peste imaginea de background, de aceeasi culoare cu imaginea (sa presupunem imaginea de fundal ca fiind o fasie de culoare neagra).
Inconvenientul ar fi insa ca in cazul directoarelor web, indexarea nu se va mai realiza in mod automat (precum in cazul motoarelor de cautare) ci manual, de catre o echipa umana, care va depista imediat utilizarea trucului.
Atributul HTML prin care se va specifica background-ul paginii va fi in acest caz de forma:
background=”black-image.gif”
Trebuie retinut insa ca daca imaginea de background folosita nu are o dimensiune mica si pagina se incarca greu, textul invizibil s-ar putea incarca inainte de incarcarea imaginii de fundal si astfel ar deveni vizibil pentru cateva momente (inainte de aparitia fundalului de pagina). Exista o solutie pentru rezolvarea acestui inconvenient, anume utilizarea unei imagini de fundal de doar 1×1 pixeli, adica cea mai mica imagine posibila, 1 pixel negru, care va acoperi intregul ecran prin replicarea originalului.
Mentionam ca nu orice editor grafic lucreaza cu dimensiuni atat de mici. Paint Shop Pro este printre putinele care pot salva imagini de 1×1 pixeli, majoritatea editoarelor grafice oprindu-se la limita de 8×8 sau, in cel mai fericit caz, 2×2.
Pentru a crea propria imagine 1×1 va trebui sa se incarce in utilitar o imagine initiala de dimensiuni obisnuite, sa zicem imaginea de mai jos reprezentand un patrat negru:
Apoi se va redimensiona (resize) pana la 1 pixel x 1 pixel, fara a tine cont de pastrarea scalei lungime/latime a pozei initiale. Se va obtine urmatorul rezultat:
Iar cand se vorbeste de pseudo-imagine se face referire la faptul ca, daca in pagina unde o astfel de imagine este generata prin procedeul descris mai sus (respectiv expandarea la afisare a imaginii unitate), se incearca salvarea imaginii din pagina web, pe disc se va salva de fapt imaginea unitate asa cum este ea in original ca fiser grafic pe server.
Avertisment: Utilizarea reversului acestei tehnici (adica micsorarea unei imagini la afisarea in pagina sub lungimea si latimea ei originala, cu ajutorul atributelor width si height) nu este o practica recomandata din nici un punct de vedere, atat al utilizatorului, cat si al motorului.
Pentru utilizator, imaginea prea mare va reprezenta KB suplimentari care vor ingreuna inutil incarcarea in pagina a elementului grafic iar pentru motor uzarea de atributele width si height setate la valori mici se va materializa in penalizare in cazul in care imaginea are asociat un link sau un atribut ALT, mai ales daca se va incerca redimensionarea la 1 pixel sau la valori foarte mici in general (facand imaginea greu perceptibila ochiului). Intr-un cuvant, este de evitat utilizarea atributelor WIDTH si HEIGHT la valori mici.
Un ultim aspect:
cel mai simplu mod de a constata utilizarea textului invizibil sau semivizibil in paginile competitiei este de a selecta cu mouse-ul intreaga pagina in cauza, fie prin apasarea butonului stanga si derularea in jos, de-a lungul paginii, pana la sfarsitul acesteia, fie utilizand comanda Select All din meniul Edit situat pe bara superioara a browserului (Internet Explorer) sau chiar de la tastatura utilizand combinatia de taste actionate simultan Ctrl + A. In afara cazului in care pagina web nu este criptata impotriva incercarilor de copiere si reproducere a continutului, tot textul prezent pe pagina (inclusiv cel invizibil) va deveni vizibil prin selectare, iesind in evidenta printr-o culoare stridenta.
