Izdelava spletnih strani, optimizacija

Preprečevanje podvajanja vsebine na iskalnikih

Dodano: Sreda, 17. Junij 2009

Pri optimizaciji spletnih strani, podprtih s CMS orodji, se lahko pojavijo težave pri podvajanju poti (URL) do vsebine. Kot primer bom omenil stran, ki še vedno teče na CMS Joomla!, različice 1.0.XX., ker je navedene primere lahko razumeti.

Do težav sicer prihaja tudi v večini drugih CMS sistemov (npr Wordpress, Drupal, Typo3, …) in v nekaterih custom-made rešitvah.

Primer:

1. Po namestitvi sistema Joomla! 1.0.XX dostopamo do podstrani preko naslova:
http://www.vasaXYdomena.com/index.php?option=com_content&task=blogcategory&id=15&Itemid=76

2. Po vklopu “SEF” povezav v nastavitvah, se ta URL spremeni v
http://www.vasaXYdomena.com/content/view/15/76/

3. Po namestitvi SEO komponente, se URL lahko spremeni v karkoli, npr.:
http://www.vasaXYdomena.com/prijazennaslov/

4. Dodaten URL nastane, če enačimo dostope do domene z in brez WWW:
http://www.vasaXYdomena.com = http://vasaXYdomena.com.

Ker so v nekaterih primerih aktivne 2 od 3 možnosti, iskalniki preko 4 različnih naslovov dostopajo do iste vsebine, kar zaradi (nenamernega) podvajanja vsebin lahko povzroči slabšo uvrstitev med zadetki.

Mislili bi, da če v sitemap vedno vpišemo samo “aktualne” URL naslove, do problema s podvajanjem ne bo prišlo. V praksi pa se žal izkaže, da stari naslovi kljub spremembam še dolgo ostanejo v iskalnikovem indeksu in povzročajo neželjeno podvajanje vsebine.

Rešitev omenjenega problema je “canonical tag“. Gre za relativno nov pristop, aktiven od februarja 2009. Podpirajo ga pri vseh večjih iskalnikih. V praksi pa se še ni povsem uveljavil.

Na srečo je implementacija preprosta. Med znački <HEAD> in </HEAD> vpišemo značko z oznako canonical in vanjo vstavimo URL, ki enolično označuje naslov podstrani.

<link rel=”canonical” href=”http://www.vasadomenaXY.com/prijazennaslov/” />

Princip delovanja te značke je podoben, kot pri 301 preusmeritvi. Kljub več aktivnim URL naslovom za dostop do vsebine bo iskalnik v indeks vpisal le URL iz značke canonical.

Za več informacij o temi obiščite Google webmaster blog.

10 pogostih in motečih napak na spletnih straneh

Dodano: Sreda, 10. Junij 2009

V tem prispevku bom izpostavil nekaj motečih zadev, ki jih redno srečujem pri analizah predstavitvenih spletnih strani. Da ne bo spisek predolg, sem zaenkrat izbral samo 10 začetniških napak. Te napake najpogosteje naredijo izdelovalci spletnih strani, ki se ne znajo postaviti v kožo povprečnega uporabnika, ki je prvič obiskal njihovo spletno stran.

1.Flash intro
Flash vstopne strani (introti) lahko izgledajo čudovito in impresionirajo direktorja naročniškega podjetja, a motijo večino obiskovalcev. Do informacij želijo priti čimprej, zato jih moti čakanje na prenos in predvajanje flash vsebine. Če je flash intro zahteva pri izdelavi nove strani in brez njega ne gre, mora vsaj ponujati možnost takojšnjega preskoka na glavno stran. Druga rešitev je uporaba  pretočnih tehnologij, kjer se flash vsebina nalaga sproti in brez čakanja (npr pri predvajanju videa).

2.Nezdružljivost spletne strani s starejšimi brskalniki, posebno z Internet Explorerjem 6
Ne glede na to, da izdelovalci spletnih strani nimamo najbljšega mnenja o IE6, je potrebno spletne strani prilagoditi tudi zanj. Velik delež uporabnikov starejše populacije ga namreč še vedno uporablja. Zna se zgoditi, da bo stran izgubila ključni del obiskovalcev zaradi „sesute“ oblike v IE6. Predvsem so problematični elementi za navigacijo (npr javascript drop-down menuji), ki lahko postanejo za uporabnike z IE6 nedostopni. Na srečo se število uporabnikov IE6 vztrajno manjša, a zaenkrat še vedno predstavlja nezanemarljiv delež med obiskovalci večine spletnih strani. Za pregled združljivosti lahko uporabimo storitvi Browser Shots ali Adobe browser lab.

3.Uporaba privzetih predlog v odprtokodnih sistemih CMS
nakazuje, da lastnik spletne strani pretirano varčuje na obliki. Z uporabo standardnih predlog se znižuje „imidž“ podjetja. Napredni uporabniki bodo opazili, da je spletna stran zelo podobna stranem raznih društev in posameznikov in obstaja možnost, da si bodo na tej osnovi ustvarili negativno mnenje o podjetju. Podoba spletne strani naj bo v skladu z grafično podobo podjetja in kadar se le da, naj jo naredi oblikovalec.

Uporaba Joomla CMS predloge
Uporaba privzete predloge Joomla! CMS za spletno stran podjetja.

4.Nedelujoče povezave (404 error)
Obiskovalec bo izgubil zaupanje v spletno stran takoj, ko naleti na nedelujoče povezave. To velja tudi za povezave na zunanje spletne strani. Dobro jih je vsake toliko pregledati. Obstajajo različna brezplačna orodja, ki to samodejno naredijo za nas. Eno takih orodij je Broken link checker.

5.Kaj podjetje ponuja, komu to nudi in kakšen je sploh namen spletne strani?
Uporabniku morajo biti že ob prvem obisku spletne strani takoj jasne osnovne informacije o dejavnosti, ponudbi in lokaciji podjetja, ter namen spletne strani. Gre za katalog, spletno trgovino, spletno vizitko? Je podjetje izvajalec, zastopnik, serviser, proizvajalec, trgovina? Ima sedež v Kopru, Ljubljani, Mariboru, … ? Te zadeve je dobro izpostaviti nekje na prvi strani.

6.Neažurnost novic
Novice morajo biti aktualne in redno dopolnjene. To, da ima neka spletna stran na vstopni strani objavljene leto dni stare novice, ne vzbuja zaupanja v podjetje.

Neažurnost novic
Primer neažurnosti novic enega izmed domačih podjetij.

7.Predolga besedila o podjetju in premalo koristnih informacij za stranke
V prvi točki sem že napisal – do željenih informacij želijo obiskovalci priti kar najhitreje. Večina jih bo na spletno stran prišla zato, ker jih zanima konkreten odgovor na njihovo vprašanje oz. potrebo. Pretirano nakladanje o superiornosti, dolgoročni vziji in ciljih podjetja  bo doseglo ravno nasproten učinek od željenega. Obiskovalci bodo dobili občutek, da jim hočete „prodajati meglo“. Informacije o podjetju morajo biti kratke in jedrnate, bistvo besedil in celotne spletne predstavitve pa naj temelji na ponudbi, storitvah in ugodnostih, ki jih podjetje nudi potencialnim strankam.

8.Podnivoji v menijih in prezahtevna navigacija
Fraza „dva klika do vseh informacij“ dejansko drži. Lastna spletna stran se lastniku zagotovo zdi povsem logično zgrajena. Kako pa se na njej znajde obiskovalec, ki jo prvič vidi? Bo znal poiskati določeno informacijo? Priporočilo je, da se uporablja le en podnivo v menijih in preprost način navigacije med podstranmi. Če se nikakor ne da poenostaviti menijev na 2 nivoja, je priporočena vsaj uporaba t.i. „breadcrumb“ sistema, ki nakazuje trenutno lokacijo na spletni strani in omogoča hitro vrnitev na višji nivo.

Breadcrumb na domači strani NUKa
Breadcrumb na domači strani NUK

9.Premalo izpostavljen kontakt podjetja
Kontaktne informacije morajo biti vidne in hitro najdljive. Nič ne bo škodilo, če se jih vključi v nogo ali v glavo strani in se prikazujejo na vseh podstraneh. Večina obiskovalcev bo za več informacij in kontakt uporabila e-pošto ali telefon, zato jim moramo ta podatek ponuditi na dobro vidnem mestu.

Kontakt
Mobitel ima pomembne kontaktne podatke v nogi vseh podstrani.

10.Odsotnost zemljevida z lokacijo podjetja
V kolikor je za posel pomembno, da obiskovalci pridejo tudi osebno do podjetja, je zemljevid nujen dodatek k spletni strani. Lokacija podjetja mora biti jasno označena na zemljevidu. Še boljše pa je, če se poleg zemljevida v nekaj alinejah na kratko opiše pot do podjetja.

Zemljevid do Računovodstva Replika
Računovodski servis Replika ima poleg zemljevida tudi opis lokacije in link na zemljevid.najdi.si

 

Na kratko bi to bilo zaenkrat vse. Želim si povratnih komentarjev o mojem izboru in še omembo katere izmed osnovnih napak, ki jih sam nisem vključil v seznam.

Google maps na spletni strani

Dodano: Sreda, 3. Junij 2009

Google maps nudi možnost, da na lastni spletni strani prikažemo poljuben del zemljevida z oznako željene lokacije. Za prikaz lokacije bom uporabil primer, ki uporablja API storitve Google maps.

Najprej moramo za spletno stran ustvariti API ključ. Z njim dobimo pravico do uporabe zemljevida Google maps na lastni spletni strani.

Ta ključ bomo vnesli v kodo, ki jo vstavimo med znački <head> in </head>. Za spletno stran Lampret.net ta del kode izgleda takole:

<script src=”http://maps.google.com/maps?file=api&v=2.123&key=
ABQIAAAALNeu4qEQLj33uAY6KZAZuhSVt5Mlri74VksIYjppaGxRuiovnh
QFldPDtXQ8zD91cJ9GJecqLpasVA
” type=”text/javascript”></script>

Za tem vpisom nadaljujemo s skripto, ki skrbi za prikaz točke. Postavimo jo pred značko </head>

<script type=”text/javascript”>
//<![CDATA[
function initialize() {
  
  if (GBrowserIsCompatible()) {
   
   ///////////////////////////// Spremenljivke ////////////////////////////////
   var x = '46.155808'; // X koordinata
   var y = '13.748918'; // Y koordinata
   var zoom = 12;  // Povečava zemljevida
   var html = '<p>Tukaj gre lahko <strong>html</strong> koda</p>'; // Vsebina oblačka

   /////////////////////////////// Glavni del //////////////////////////////////
   var map = new GMap2(document.getElementById("zemljevid"));
   map.setCenter(new GLatLng(x, y), zoom); // Centrira zemljevid na točko
   map.addControl(new GSmallMapControl()); // Prikaže povečavo in smerne puščice
   map.addControl(new GMapTypeControl()); // Prikaže gumbe za izbor pogleda
   
   var tocka = new GMarker(new GLatLng(x, y));
   map.addOverlay(tocka);
   tocka.openInfoWindowHtml(html); // Prikaže oblaček
   }
}
//]]>
</script>

Na začetku tega dela skripte so spremenljivke, ki določajo koordinate točke in napis v oblačku. Če ne znate sami poiskati koordinat, si lahko pomagate s spletno stranjo http://itouchmap.com/latlong.html.

Koordinate so izpostavljene zato, da imamo čimmanj dela, če želimo skripto uporabiti na dinamični strani, ki iz baze vleče koordinate lokacije in jih prikazuje na Google maps.

Sledi postavitev okenca za zemljevid na željeno mesto v s sledeči obliki (dimenzije lahko spreminjate po želji, lahko pa tudi vključite CSS stile v posebno datoteko, namesto direktno v značko):

<div id=”zemljevid” style=”width: 550px; height: 350px”></div>

Da se skripta zažene pa potrebujemo še dodati naslednji del kode v značko <BODY>:

 <body onload=”initialize()” onunload=”GUnload()”>

Poglejte si, kako zadeva deluje v praksi. Če so kakšne nejasnosti glede uporabe, preglejte izvorno kodo strani, ali pa vprašajte v komentarjih.

Google Insights

Dodano: Torek, 19. Maj 2009

Storitev Google Insights omogoča časovni pregled deleža iskanj po izbrani ključni besedi / besedni zvezi glede na časovno obdobje. Iskanje lahko omejimo na državo, določimo bazo iskanja (splet, slike, novice, izdelki) in izberemo začetno in končno točko na časovnem traku.

Kot rezultat poizvedbe dobimo graf, na katerem je prikazan delež iskanj po izbranem časovnem obdobju.

Poleg grafa s časovnico vidimo tudi prikaz iskanj po posameznih državah in predloge podobnih ključnih besed. Na grafu se pojavijo točke, ki jih Google samodejno poveže z raznimi novicami.

Za primer poglejmo grafični prikaz iskanja po besedi  “influenza” (gripa). :)

Iskanje - Influenza

Opazimo da se v prvem in zadnjem četrtletju posameznega leta delež iskanj vedno zviša. Med poletnimi meseci pa je iskanj manj. Povsem logičen zaključek, da se informacije o tej bolezni išče takrat, ko je obolenj največ.

Opazimo pa tudi ogromen “vrh” v začetku leta 2009. To je verjetno posledica panike, ki so jo mediji ustvarili s prispevki o prašičji gripi. :)

Storitev Google Insights je zanimiva za raziskavo trendov iskanja. Analiziramo npr. lahko v katerih mesecih uporabniki največ iščejo po določenih storitvah. Opazujemo lahko tudi padanje/rast iskanja po določeni frazi v večletnem obdobju in se s tem prilagajamo uporabnikom.

Kako pravilno vstaviti Flash vsebine na spletno stran?

Dodano: Petek, 15. Maj 2009

Zakaj komplicirati z raznimi JS metodami oz. vključevanjem zunanjih Flash datotek, ki importajo vsebine?

Obstaja preprosta metoda, ki validira celo v XHTML/STRICT in je kompatibilna z Internet Explorer 5.01, 5.5, 6.0, 7.0, Mozillo Firefox, Opero in Konqueror-jem. Za Safari in IE8 nisem probal, naj kdo preveri in sporoči v komentarjih. :)

<object type=”application/x-shockwave-flash” data=”flash_vsebina.swf” width=”288″ height=”128″>
<param name=”movie” value=”flash_vsebina.swf” />
<img src=”flash_vsebina.jpg” width=”288″ height=”128″ alt=”banner” />
</object>

Preprosto, učinkovito, združljivo z večino brskalnikov in hkrati validira.

Naprej »