ZastosowaÅ‚eÅ› do budowy wÅ‚asnej strony technologiÄ™ flash, być może użyÅ‚eÅ› jej tylko w tworzeniu nawigacji, jednak zapewniam, że jeÅ›li chciaÅ‚byÅ› powalczyć z takim projektem o pozycjÄ™ w google to zafundowaÅ‚eÅ› sobie niezÅ‚Ä… przeprawÄ™ W tym tekÅ›cie postaram siÄ™ przeprowadzić rozważania na temat możliwych technik ratowania niedostÄ™pnoÅ›ci technologii flash dla robotów wyszukiwarek. Zapraszam do czytania…

Twórcy flash’a o czymÅ› nie pomyÅ›leli.

Niestety tak siÄ™ staÅ‚o, że twórcy z Macromedii nie zadbali o kompatybilność i dostÄ™pność swojej technologii dla crawlerów, trudność wynika z tego iż dynamiczna i mocno interaktywna strona jest dużo trudniejsza w interpretacji od statycznego html’a (bÄ…dź nawet semi statycznego, generowanego dynamicznie). Sprawa od samego poczÄ…tku nie zostaÅ‚a rozwiÄ…zana i jak widać jeszcze przez spory okres czasu nie bÄ™dzie flasza przyjaznego dla google. I jak sÄ…dze z tego powodu Flash dostaje karniaki na każdym kroku, dalej zobaczmy co możemy z tym fantem zrobić.

Za co jesteśmy (nie)wdzięczni deweloperowi przeglądarki IE?

W roku 2006 wyszÅ‚a nowa wersja przeglÄ…darki Microsoft’u (IE) zawierajÄ…ca aktualizacjÄ™ zwanÄ… “Eolas”, która zapobiegaÅ‚a uruchamianiu aplikacji Flash na bazie Active-x podczas Å‚adowania strony i wymagaÅ‚a aktywacji poprzez klikniÄ™cie na obiekt interaktywny. Eolas byÅ‚ znienawidzony przez twórców stron wykorzystujÄ…cych omawianÄ… technologiÄ™, gdyż ich strony byÅ‚y martwe w przeglÄ…darkach IE, a do tego wyÅ›wietlaÅ‚y okropne komentarze “Kliknij, aby aktywować kontrolkÄ™”.

Wymagania jakie musimy spełnić aby bezpiecznie korzystać z Flash.

Aktualnie można nasze wymagania uznać za marzenia ściętej głowy, ale skoro jesteśmy profesjonalistami i nasze wizje chcemy realizować z zachowaniem standardów to wymieńmy jakie punkty chcemy spełnić:

• czysty kod
• przyjazność wyszukiwarkom
• dostÄ™pność (usability), różne przeglÄ…darki, urzÄ…dzenia przenoÅ›ne
• semantyka, zachowanie standardów
• poprawne wyÅ›wietlanie pod przeglÄ…darkami IE

Programowanie Flash przyjazne wyszukiwarkom (SEO friendly).

Dobrym pomysÅ‚em na obejÅ›cie problematyki niedostÄ™pnoÅ›ci flash’a na naszej stronie jest użycie funkcji JavaScript’u zwanej SWFObject();, która to sprawdza czy przeglÄ…darka wyÅ›wietlajÄ…ca jest w stanie obsÅ‚użyć treść interaktywnÄ…. JeÅ›li napotykamy na problemy to stosujemy div z alternatywnÄ… treÅ›ciÄ… o tej samej (lub możliwie zbliżonej) funkcjonalnoÅ›ci zakodowanej za pomocÄ… statycznego kodu (x)html. W obszarze wspomnianego alternatywnego div’a możemy swobodnie zawrzeć linki, tekst oraz obrazy jakie pierwotnie miaÅ‚y być udostÄ™pnione z użyciem animacji. JeÅ›li natomiast obsÅ‚uga flash jest dostÄ™pna nasza funkcja modyfikuje strukturÄ™ dokumentu (DOM) tak aby wyÅ›wietlaÅ‚a zawartość prezentacji i wydaje siÄ™, że wybrneliÅ›my z opresji.

MogÅ‚o by siÄ™ wydawać, że ta technika nie jest do koÅ„ca wÅ‚aÅ›ciwa, jednak stworzony przez W3C (World Wide Web Consortuim) WAI (Web Accessibility Initiative) dopuszcza a nawet wskazuje sÅ‚uszność takiego rozwiÄ…zania. WdrażajÄ…c treść alternatywnÄ… dla objektów flash pozwalamy crawler’om oraz użytkownikom, dla których treść interaktywna jest niedostÄ™pna korzystać z caÅ‚ej funkcjonalnoÅ›ci stony. Wiecej szczegółów w dokumentacji: elementy multimedialne powinny posiadać dostÄ™pne wersje alternatywne. Zalecana jest również ostrożność stosowania tej metody ze wzglÄ™du na możliwość traktowania zdwojonej treÅ›ci jako sposób cloaking’u, aby temu zapobiec należy starać siÄ™ o wierne odpowiadanie obu treÅ›ci (majÄ… przedstawiać to samo).

Praktyka – użycie funkcji SWFObject();

Nasza metoda jest rozwijana przez Geoff Sterns’a w postaci skryptu SWFObject.js, który sÅ‚uży SEO-zoptymalizowanemu osadzaniu elementów flash w kodzie strony. JeÅ›li już umieÅ›ciÅ‚eÅ› na serwerze kod skryptu oraz zainkludowaÅ‚eÅ› do zawartoÅ›ci dokumentu możemy przejść do praktyki. Poniżej najprostszy wariant kodu:

<script type=”text/javascript” src=”swfobject.js” mce_src=”swfobject.js”>

</script>
<div id=”flashcontent”>

Tutejsze instrukcje zostanÄ… zastÄ…pione elementem flash.

</div>

<script type=”text/javascript”>
var so=new SWFObject(“movie.swf”, “mymovie”, “400″, “200″, “8″, “#336699″);
so.write(“flashcontent”);
</script>

–

W pojemniku <div id=”flashcontent”>[...]</div> zawarty bÄ™dzie nasz obiekt interaktywny, który bÄ™dzie automatycznie zastÄ™powany przez treść alternatywnÄ… w przypadku wykrycia problemów z obsÅ‚ugÄ… flash’a.

Argumenty jakie przekazujemy do naszego objektu za pomocÄ… funkcji SWFObject:

• swf – Å›cieżka do pliku swf oraz jego nazwa
• id – ID objektu lub znacznik embed
• width – szerokość osadzanego elementu
• hight – wysokość elementu
• version – wymagana wersja Adobe Flash Player’a
• background-color – wartość heksadecymalna koloru tÅ‚a.

Opcjonalnie może zawierać również:

• quality – jakość z jakÄ… zalecasz odtwarzanie elementu, domyÅ›lnie jest wysoka (hight)
• xiRedirectUrl – przekierowanie dla użytkowników, którzy korzystajÄ… z szybkiej aktualizacji
• redirectUrl – przekierowanie dla tych, którzy z pewnych powodów nie chcÄ… aktualizować wersji flash playera
• detectKey – klucz z jakim bÄ™dzie wykrywana wersja naszego skryptu.

Uwagi.

Jeśli stosujesz opisane rozwiązanie optymalna kolejność postępowania powinna obejmować jako pierwsze udostępnienie treści alternatywnej a następnie zastosowanie docelowego objektu interaktywnego. Jednak życie uczy nas, że właściwe drogi realizacji są bardzo nieprawdopodobne i chcesz zastosować ten wybieg jako ratunek dla już istniejącego elementu (flash). Jest na to rada, ale do tego jeszcze wrócę.

Odnośnie oczekiwań jakie możemy mieć względem stosowania tego typu wybiegu należy pamiętać, że nie uzyskamy pewności poprawnego pozycjonowania naszej strony, jedyna pewność to ta, że usuwamy niedogodności i czynimy naszą treść dostępniejszą. Solidna optymalizacja i odrobina cierpliwości może przynieść oczekiwane rezultaty lecz nie musi.

Strony w peÅ‚ni zbudowane w oparciu o flash’a.

W przypadku stron zbudowanych w pełni na technologii flash sytuacja jest nieco gorsza, aby nie powiedzieć, że beznadziejna. Możemy jednak zapewnić możliwie dobre funkcjonowanie strony pod kątem zasad SEO stosując pewne metody.

JeÅ›li stworzymy dla każdej z podstron zamienniki w czystym (x)html’u i pozwolimy na pertraktowanie wyÅ›wietlania treÅ›ci jak w poprzednio opisanej metodzie, jesteÅ›my o krok dalej. Dodatkowo możemy porcjować elementy flash i umieszczać osobno na każdej podstronie tak aby zapewnić dostÄ™p crawler’om i użytkownikom nie mogÄ…cym wyÅ›wietlać animacji.

Jest również możliwość stosowania skryptów PHP aby zamiennie serwować pierwotną treść w czystym kodzie (x)html oraz animacji alternatywnie od sytuacji. Jeśli wszystko oprzeć o wykorzystanie bazy danych (np. MySQL) do przechowywania elementów interaktywnych możemy liczyć na dosyć dobrą optymalizację wyświetlania treści w odniesieniu do szybkości funkcjonowania.

Zakończenie.

Temat optymalizacji daje pole do szerokiej dyskusji i szukania wielu rozwiązań, dlatego ten post nie wyczerpuje w pełni tematu. Jeśli uznam, że będzie to wskazane w następnej części opiszę kolejne metody dla twórców stron opartych na treści interaktywnej flash.

~Michał Kowalski 2008

admin :: sty.07.2008 :: SEO & Pozycjonowanie, Webdesign :: 1 Comment »

Trackback this post | Feed on Comments to this post