Szeretnél híres lenni? A Google azzá tesz! A cég egy általa “minor update”-nek titulált frissítésben november 11-től bevezeti, hogy a felhasználók személyes adatait megjelenítheti a Google oldalakon feltűnő reklámok mellett.
Ha ezt nem szeretnéd, itt tilthatod le: Megosztott ajánlások
Régóta ismert tény, hogy a keresőmotorok azt szeretik, ha egy oldalra mindig ugyanazzal az URL-lel hivatkozunk. A SEO tesztelő programok, például az IIS SEO Toolkit, de még a WebMatrixba épített ellenőrző is, panaszkodnak, ha egy oldalhoz több URL-t talál:
The page contains multiple canonical formats.
A problémára lehet megoldás a 301 Moved Pemanently átirányítás, amit például az IIS UrlRewrite modullal egyszerűen meg is lehet csinálni. De mi van akkor, ha nincs a kezemben a szerver és nem telepíthetek mindenféle bővítményeket.
Akkor marad az inline trükközés, amit szerencsére tiszteletben tartanak a keresőmotorok:
<link rel="canonical" href="az-igazi-url" />
Az az-igazi-url helyére jöhet abszolút vagy akár relatív URL is.
Bővebben a Google WebMaster Central oldalán: http://www.google.com/support/webmasters/bin/answer.py?answer=139394
Érdekes dolog tűnt fel a Google Mapsen: Budapest egyes részein kellő közelítésnél a műholdképnél megjelent a 45 fokos nézet, például az Egyetemünk épülete ilyen szépen látszik:
Kicsit odébb tekerve az új épületünkből ennyit láthatunk:
A kép nem egészen friss, körülbelül másfél évvel ez előtti lehet, mostanra az épület többé-kevésbé felépült és már órákat is tartunk benne. Persze rögtön eszembe jutott, hogy a Bing Maps is tud ilyet, ott Bird’s eye nézetnek hívják. Sajnos Budapestről nem találtam ilyen madártávlati képet (amerikai és sok Nyugat-Európai városra kiválóan működik), sőt a műholdkép sem igazán friss. Ugyanez az épület ilyen szép “green” a Bingnél:
Ez legalább 3 éves kép, még van hova fejlődnie a Bingnek.
Amivel viszont jelentősen beelőzött a Google, az egy teljesen fehér terület a térképen: van már Street View az Antarktiszon:
A kedvencem az ikon a kis térképen:
Ez az igazi Bird’s Eye 
Annyira hozzá vagyunk szokva, hogy az interneten minden tartalom kereshető, hogy ma már nagyon amatőrnek tűnnek azok a weboldalak, ahol nem találunk keresődobozt. Szerencsére a Google AJAX Search API segítségével nagyon könnyen beépíthetjük a Google keresőjét a saját weboldalunkba.
A Google AJAX Search API egy JavaScriptes programozói felület, tehát ha tudunk a szerverünkön az egyik oldal forrásába JavaScript kódot írni, akkor használhatjuk, nem fog kelleni hozzá semmilyen szerver oldali technológia. Korábban létezett webszolgáltatás interfész is, azonban arról a SOAP API-ról most azt mondja a Google, hogy az csak egy “free experiment” volt limitációkkal, helyette inkább használjuk az AJAXos API-t, ami Firefox 1.5+, IE 6, Safari, Opera 9+ és Chrome böngészőkön támogatott. Hát rajta!
Az első lépés, hogy az oldalunk forráskódjában ki kell jelölnünk egy helyet, ahol a kereső meg fog jelenni. Egy gyakorlatilag egy div konténer, aminek a kezdeti tartalmát a késleltetve betöltött és megjelenített kereső felül fogja csapni (ha mégis megjelenik, akkor valamit rosszul csináltunk):
<div id="searchPlaceholder"> Betöltés, türelem... </div>
A kereső által renderelt tartalom az oldalunkon belül fog futni, div, table és form elemek kerülnek az oldalunkba (nincs szó iframe-ről). A generált layout minden szintjén találunk egy gsc- (gsc: Google Search Control) kezdetű CSS osztályt, ami segíthet a megjelenő tartalom megformázásában. Ezek közül a legkülső a gsc-control, ami alapértelmezés szerint 300px széles, ami többnyire nem éppen a legjobb helykihasználást eredményezi, húzzuk szét bátran:
.gsc-control { width: 100%; }
Fontos, hogy mivel a kereső hoz magával CSS-t, azt felülcsapni csak akkor tudjuk, ha a kereső JavaScriptje utánra tesszük a saját CSS definíciónkat. Ennyit a dizájnról és a layoutról, térjünk át a kódra.
Az oldalban el kell helyeznünk egy script tag-et, ami letölti a kereső kódját a Google szerveréről:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
Regisztrálhatunk egy AJAX API key-ért, amiről a gugli azt mondja, hogy teljesen opcionális, azonban ha valamit elrontanánk, ennek segítségével ők megpróbálhatják felvenni velünk a kapcsolatot. Ha nem szeretjük a nagy testvér effektust, akkor elég a fenti sor.
Ha már az oldal betöltésekor meg kívánjuk jeleníteni a keresőt, akkor a Google AJAX API Loader google.load metódusát kell használnunk (van lehetőség dinamikus betöltésre is JSONP stílusban). Ennek ez legegyszerűbb formája, a kód magáért beszél:
google.load("search", "1");
function onGoogleLoaded() { // Itt rakjuk majd össze a keresőt... } google.setOnLoadCallback(onGoogleLoaded);
A load metódusnak át kell adnunk, hogy melyik API-t (search, maps, feeds, language, gdata, earth, visualization, friendconnect, orkut) akarjuk használni, illetve hogy annak melyik verzióját. Harmadik paraméterként átadhatunk kapcsolókat, amivel elhagyhatjuk a CSS-t, a régi névtereket és magyar GUI-t kérhetünk:
google.load("search", "1", { "nocss": true, "nooldnames": true, "language" : "hu" });
Nincs más hátra, az onGoogleLoaded callback metódusunkban fel kell konfigurálnunk a keresőt, amihez létre kell hoznunk egy SearchControl objektumot:
var ctrl = new google.search.SearchControl();
A ctrl objektumunkhoz hozzá kell adnunk ún. searcher objektumokat, amik a különböző forrásokban keresnek:
ctrl.addSearcher( new google.search.WebSearch() ); ctrl.addSearcher( new google.search.VideoSearch() ); ctrl.addSearcher( new google.search.ImageSearch() ); ctrl.addSearcher( new google.search.BlogSearch() );
Jelenítsük meg a SearchControlt a korábban létrehozott div-ben:
ctrl.draw( document.getElementById( "searchPlaceholder" ) );
Ezzel sikeresen beemeltük a gugli keresőjét a saját oldalunkba, mindössze néhány sor kóddal, amin természetesen lehet finomítani. A legfontosabb, hogy valószínűleg csak a saját webhelyünkön belül szeretnénk keresni, ezért korlátozzuk a keresést. Ezt nem minden searcher objektum támogatja, de a leggyakrabban használt web és az image igen:
var site = 'www.msdnkk.hu'; var webSearch = new google.search.WebSearch(); webSearch.setSiteRestriction(site); ctrl.addSearcher(webSearch); var imageSearch = new google.search.ImageSearch(); imageSearch.setSiteRestriction(site); ctrl.addSearcher(imageSearch);
A következő, ami engem az alapértelmezett nézetben zavar, hogy kevés találat jelenik meg, kérjünk többet:
ctrl.setResultSetSize( google.search.Search.LARGE_RESULTSET );
Ez viszont tapasztalatom szerint csak akkor működik, ha beállítjuk, hogy az egyes kategóriák sok találatot jelenítsenek meg:
var searcherOptions = new google.search.SearcherOptions(); searcherOptions.setExpandMode( google.search.SearchControl.EXPAND_MODE_OPEN ); ctrl.addSearcher( webSearch, searcherOptions );
Ez így még elég szerencsétlen, mert nagyon hosszú lesz az oldal, alakítsuk át úgy, hogy a searcherek önálló füleken jelenjenek meg, ekkor nem is kell a SearcherOptions:
var drawOptions = new google.search.DrawOptions(); drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); ctrl.draw(document.getElementById("searchPlaceholder"), drawOptions);
A DrawOptions objektumra egyébként érdemes odafigyelni, lehetővé teszi például, hogy a keresődobozt leszakítsuk a találati listáról. Ehhez mindössze annyit kell tennünk, hogy létrehozunk egy másik div-et és meghívjuk a setSearchFormRoot metódust:
drawOptions.setSearchFormRoot(document.getElementById("searchFormPlaceholder"));
A SearcherOptions objektum .setRoot metódusával mellesleg azt is meg lehet határozni, hogy az eredmények hol jelenjenek meg.
Sőt, akár megválhatunk a Google logós keresődoboztól, bármely saját input mezőnket felhasználhatjuk. Ha például van egy szövegdobozunk és egy gombunk:
<input type="text" id="txtSearch" /> <input type="button" value="Keress!" onclick="ctrl.execute();" />
Akkor DrawOptions segítségével azt is megadhatjuk, hogy ezt használja a kereső:
drawOptions.setInput(document.getElementById("txtSearch"));
Számítsunk rá, hogy a kereső fel fog iratkozni ennek a szövegdoboznak az onkeyup és onpaste eseményeire, ami azért jó, mert az Enter kezelését is megoldja. A fenti kódból az is látszik, hogy saját kódunkból a keresést az execute metódus meghívásával tudjuk elindítani. Paraméter nélkül hívva az input mező tartalmára keres, de átadhatjuk neki a keresendő sztringet is.
Visszatérve a fülekre és a searcher objektumokra, természetesen megtehetjük azt is, hogy ugyanolyan típusú keresőből (pl. WebSearch) felteszünk kettőt két fülre, eltérő módon paraméterezve. Ebben az esetben célszerű használnunk a setUserDefinedLabel metódust, hogy egyedi nevet tudjunk adni a füleknek:
var webSearch = new google.search.WebSearch(); webSearch.setSiteRestriction(site); webSearch.setUserDefinedLabel("Ezen a webhelyen"); ctrl.addSearcher(webSearch); var fullWebSearch = new google.search.WebSearch(); fullWebSearch.setUserDefinedLabel("Teljes weben"); ctrl.addSearcher(fullWebSearch);
Hasonló módon csinálhatunk külön füleket a magyar nyelvű találatoknak, amihez ún. restrictiont kell beállítani:
var huWebSearch = new google.search.WebSearch(); huWebSearch.setRestriction( google.search.Search.RESTRICT_EXTENDED_ARGS, { lr: 'lang_hu' } ); huWebSearch.setUserDefinedLabel( "Magyar weben" ); ctrl.addSearcher( huWebSearch );
Restrictionként tudjuk beállítani azt is, hogy ne csak moderált találatok jelenjenek meg, illetve az egyes searcher osztályok további lehetőségeket (pl. színes képek, nagy méretű képek stb.) biztosítanak. Nem biztos, hogy mindent be tudunk állítani az objektum modellen keresztül, lehetnek olyan esetek, amikor a kereső kifejezés kiegészítése a legegyszerűbb megoldás. Erre szolgál a setQueryAddition metódus, amivel például dokumentum típusa szerint kereshetünk:
var pdfWebSearch = new google.search.WebSearch(); pdfWebSearch.setUserDefinedLabel("PDF dokumentumok"); pdfWebSearch.setQueryAddition("filetype:pdf"); ctrl.addSearcher(pdfWebSearch, searcherOptions);
Természetesen előfordulhat, hogy nincs találat, az ekkor megjelenő üzenetet a SearcherOptions objektum setNoResultString metódusával állíthatjuk be:
var searcherOptions = new google.search.SearcherOptions();
searcherOptions.setNoResultsString( "Gratulálunk, sikerült olyan kifejezést megadnia, amire még a Google sem talál semmit. :(" );
ctrl.addSearcher(webSearch, searcherOptions);
Ez működik mindenféle searcher objektum esetén, de figyeljünk oda arra, hogy az eredményhalmaz eltérő layoutja és CSS-e miatt előfordulhat, hogy máshogy jelenik meg az üzenet.
Mindez csak a jéghegy csúcsa, de ennyiből talán már látszik, hogy viszonylag egyszerűen, de ugyanakkor rugalmasan konfigurálhatóan hozzá be tudjuk építeni a Google keresőjét a saját webhelyünkre. Ugye nálad is lehet keresni?
A cikkhez tartozó teljes példa kód letölthető.
Forrás: http://www.youtube.com/watch?v=hrontojPWEE
Adalék olvasnivaló:
Google CEO: Secrets Are for Filthy People
”Eric Schmidt suggests you alter your scandalous behavior before you complain about his company invading your privacy. “
vö.
CNET: We’ve been blackballed by Google
”Google Inc. has blacklisted all CNET reporters for a year, after the popular technology news website published personal information of one of Google’s founders”
Érdekes mindezt egy Firefox blogban megtalálni egy Bing add-onnal együtt.
Elindult a Microsoft új keresője, ami most már szerencsére nem Live akármi, hanem egyszerűen csak Bing névre hallgat. Fogadni mernék, hogy ezt a szót hamarosan igeként is fogjuk használni és már nem csak olyan kifejezések hangzanak majd el, mint “meggugliztam”, hanem lesz “megbingeltem” is.
A cég nagyon nagyra van vele, még nem jöttem rá, hogy nekem mi hasznom származik belőle. Azt sikerült kideríteni, hogy ha a jobb felső sarokban Hungary van országként kiválasztva, akkor gyakorlatilag a Live Searchöt kapom egy új URL-en, ezért célszerű átállítani mondjuk United Statesre, akkor megjelenik néhány extra funkció:
Nektek mi a véleményetek, tetszik, érdemes használni?
———-
*: Forrás: Christian Weyer
Meglepően egyszerű a Google térkép szolgáltatásának integrálása egy weboldalba, mindössze egy iframe elemre van szükségünk, aminek code behindból ügyesen beállítjuk az src attribútumát. Nem is értem, miért nem használják ezt több helyen.
Történetesen az a feladatom, hogy egy GridView-ban lévő Contact rekordok Address mezőjében lévő címet a grid alatt egy térképen jelenítsem meg. A kérképet egy iframefogja tartalmazni, amihez odacsaptam a runat=”server” attribútumot, hogy kódból el tudjam érni:
<iframe runat="server" id="ifMap" width="500" height="300"></iframe>
Ezt a trükköt egyébként bármelyik HTML elemmel el lehet játszani, szerver oldalon HtmlGenericControl lesz belőle.
Ezért a GridView kapott egy gombot, ami ráadásul a CommandArgument segítségével viszi magával a címet is az eseménykezelőbe:
<asp:Button runat="server"
CommandArgument='<%# Eval( "Address" ) %>'
CommandName="ShowMap"
Text="Térképre" />
A gomb kattintást a RowCommand eseménykor lehet kezelni:
if( e.CommandName == "ShowMap" ) { this.ifMap.Attributes[ "src" ] = String.Format( CultureInfo.InvariantCulture, @"http://maps.google.com/maps?q={0}&output=embed", e.CommandArgument ); }
A dolognak tehát az az érdekessége, hogy egy sima URL-be be tudok fűzni egy teljes címet, például “Budapest, Magyar Tudósok krt. 2.” és Google Maps rátalál a helyre. Sőt, rátalál olyan földrajzi nevekre is, amiket magyarul és angolul máshogy hívunk: Magyarország, Brazília, Peking.
Persze a térkép adatbázisa nem tökéletes, rólunk például azt hiszi, hogy itt tanyázunk, pedig valójában ebben az épületben lehet minket megtalálni (a Live Space nem engedi, hogy iframe-et szúrjak be ide 😦 ).
Annak idején úgy emlékszem szokás szerint a Google volt az, ami először lehetővé tette, hogy ha például Microsoft témában keresünk valamit, akkor ne az egész webről érkező találatokat kelljen végigbogarásznunk, hanem csak egy szűkebb weblap halmazon fusson a keresés. Ha valaki nem ismerné, a http://www.google.com/microsoft címen most is elérhető ez a szolgáltatás.
A Live Search csapat valami ehhez hasonlót hozott létre Live Search Macro néven, a nagy különbség az, hogy ilyet bárki csinálhat magának egy egyszerű webes varázsló segítségével. Eddig nem sok értelmes felhasználását találtam a neten, de három hasznosnak tűnő azért akadt:
Katt a fenti linkekre és mindenki eldöntheti, hogy valóban relevánsabbak-e az így szerzett találatok, vagy továbbra is marad a Google…
Balássy György szakmai blogja 