Списание за дизайн, визуална култура и Новата медия.
Ако искате вашият сайт да се показва добре в резултатите на търсачките, не сте задължени да жертвате предизвикателния си дизайн. Макар за постигането на добри резултати в търсачките, както и за популярността на сайта въобще, да важи правилото "съдържанието е кралят", то въпреки това въображението и творческите ви импулси в дизайна могат да достигнат висините, да достигнат звездите.
Претенциозните клиенти понякога предоставят дълъг списък с неща, които искат на първата страница или пък са им хрумнали. Ако постигането на добри резултати с търсачките присъства в списъка, а това се случва често, ще трябва да създадете своя дизайн около съдържание пълно с ключови фрази (около 250 думи1), особено за главната страница.
Този урок предлага широк преглед на подходите (в идеалния случай), които работят и показва какво трябв да се избягва ако за вас е важно къде ще се появява сайта ви в тъсачките. В някои случаи ние пренебрегваме иделаното по различни причини, така че аз ще се опитам да ви преведа през блокадите по пътя - графичните елементи, Flash, фреймовете, splash екраните и другите потенциални трудности. В края на урока има и други източници за по-нататъчно излседване на въпроса.
. . . . . . . . . . . . . . . .
"Уеб дизайнерите трябва да създават страници не само според браузърите, но и според търсачките. Но възможно най-добрият начин да се постигнат добри резултати е да имаш наистина добро съдържание."
-- Дани Съливан, редактор,
Search Engine Watch.2
. . . . . . . . . . . . . . . .
Миналата година един клиент искаше splash страница, която да създаде небходимото предразположение и настроение преди да се влезе в основното съсържание на сайта. Анимираните въведения направени с Macromedia Flash са доста популярни и сега. Но как се отразява една такава страница върху търсещите машини индексиращи вашия сайт?
Ако клиентът ви иска страницата да е сред първите показани резултати в търсачките, експертите по търсещите машини, като Дани Съливан, Джил Уолън , Дитли Джонсън , Брус Клей и специалиста по оптимизирае на съдъражнието съобразно търсачките Хедър Ллойд-Мартин отбелязват, че сайтът трябва да бъде богат на информация, с внимателно поставени ключови думи, особено на главната страница.
"У-а." Това не е описание на обикновената splash страница, нали? Понеже splash страниците и Flash интротата могат да имат твърде малко (или въобще да нямат) HTML текст, те не са особено полезни за тъсачките и понякога могат да попречат на индексирането. Ако главната ви страница има малко или въобще наяма текст, то има и много малко информация, която паякът (бел.пр. така се нарича програмата, която търси и индексира нови стрници а втоматично) ще индексира... което означава, че сайтът ви няма да се показва, когато хората търсят.
Има и такива търсачки, които индексират само главната ви страница, така че ако се случи това да е splash екран с много малко текст, вашият сайт почти няма шансове да бъде показван в резултати от търсене. META таговете могат да са отполза за търсачките, които ги разпознават, но без богато съдържание, шансовете ви поне да ви включат в списъците или пък да се показвате на първите место са значително по-малки.
Какво е значението на всичко това? Ако сега започвата, най-добре ще бъде главанта ви страница да бъде пълна с информация и с много фрази с ключови думи. В следащата част ще обърнем внимание на идеалния случай и на това какво е необходимо, за да се заобиколят барикадите по пътя.
А графиките? А онова красиво Flash интро? А колажът, който клиентът иска на splash страницата? Добре, не е нужно да се хвърляте от някоя скала. Пълно е с възможнсоти едновремено да стигнете до звездите и до добрите резултати с търсачките, но ако се съсредоточите върху работата със съдържанието.
Вече знаете, че главната страница обикновено е и най-важната страница в сайта и то не само заради търсачките. Едно скорошно изследване показва, че посетителите често решават дали ще останат или не за четири секунди, а търсачките също разчитат на главаната страница, за да преценят как да индексират сайта като освен това те позволяват да им изпратите само главната страница.
Нека да бъдем ясни. Търсачките ще четат текста. Как ще се справите с това? По подобен начин се работи с изискаванията за достъпност на сайтовете. Ето някои препоръки:
Вероятно това не е нищо ново за вас, що се отнася до елементи на дизайна. Но това са и основните неща, които са необходими, за да докарате сайта на клиента си сред първите резултати на търсачките.
Независимо дали вие или вашият клиент предоставя информацията, тя трябва да бъде написана според изискаванията и на търсачките, и на мрежата. Понеже първите 250 думи на главната страница са най-важни за постигане на добри резултати с търсенищите машини, работата ви като дизайнер е да създадете такъв дизайн, че всичко това да заработи добре. Може би ще ви се наложи да посъветвате клиента си да остави писането на съдържание богато на ключови думи на специалист, както заради по-добри резултати в търсачкита, така и заради интересното четиво, което ще напише той. освен това съществуват и много полезни инструменти, като Wordtracker например, които ще ви помогнат да откриете кои са най-популярните ключови думи за типа сайт, който създавате.
Оформянетоо на сайта с кратки изречения, къси абзаци, списъц, в 2 или 3 колони, са няколко от възможнсотите за форматиране на нужното съдържание. Хедър Ллой-Мартин, президент на SuccessWorks, отбелязва в своята статия, Как да напишем страница богата на ключови думи, която търсачките ще обикнат (бел.пр. баси заглавието;),
. . . . . . . . . . . . . . . .
"Не само, че е по лесно да се пише тескт с множество ключови думи при положение, че трябва да се вместите в 250 думи, но и търсачките обожават страниците с малко "месо" по тях.
(Подсказка: Боите се, че текстът ви от 250+ думи ще изглежда като безкраен блок? Номерът е да се пишат къси абзаци [това работи страхотно при оформление с няколко колони], да се поставят подзаглавия и да се списъци с богатио на ключови думи подточки. Това ще подобри ползваемостта и ще задоволи търсачките.)"
. . . . . . . . . . . . . . . .
Ето два примера, съчетаващи дизайна за търсачки и съдържание богато на ключови думи.
Exceptional
Smiles
Богато съдържание и дизайн. При търсене на ключовите думи,
за които беше създаден, този сайт постоянно се появяваше
на първо място в резултатите.
WebsiteTips.com
Главната страница има инфромация в горната част, разделена
в две колони след това, която е богата на ключови думи.
Създадох този сайт, така че да бъде удобен за търсачките,
като използвах указанията от този урок.
И двата сайта са с графична навигация (всички изображения са с ALT тагове), текстова навигация в края на страницата и други подходи за оптимизиране.
Друг основен фактор за постигане на добри резултати с търсачките, е навигацията на сайта.
Паяците ще проследяват линковете. Така, че ако вътрешните връзки в сайта са достатъчно добри, има далеч по-голям шанс, паяците да ги последват. Това е един от начините да ги накарате да индексират възможно най-много страници.
Създаването на вътрешни линкове е неизменна част от създаването на ефективен, user-friendly сайт. Когато създавате дизайна на сайта, обърнете внимание на ползваемостта на навигацията, която, ако е добра, ще помогне на паяците да обходят целия сайт.
Макар текстовата навигация да е най-полезна за търсещите машини, изображенията JavaScript mouseover-ите също могат да се използват. Ето няколко възможности.
Ако използвате графики за връзките в навигацията, помнете, че трябва да използвате ALT тагове, така че търсачките, които могат да ги четат да използват и тези ключовеи думи. Както споменах по-горе, има много общо между създаването на достъпни (бел.пр. за хора с физически недостатъци - слепи, глухи и др.) сайтове и оптимизирането на дизайна за търсачките, като ALT тагът не прави изключение.
<img src="images/ourlogo.gif" width="300" height="60"
alt="Името на компанията и богат на
ключови думи девиз" border="0" />
Ако използвате JavaScript mouseovers за навигацията, уверете се, че сте оставили и HTML линкове в кода, както и текст в ALT тага, също. Ето един пример:
(Във външен JavaScript файл)
if (document.images) {
imageon2 = new Image
imageoff2 = new Image
imageon2.src = "images/whoweareon.gif"
imageoff2.src = "images/whoweareoff.gif"
}
else {
imageon2 = ""
imageoff2 = ""
document.image2 = ""
}
(В HTML документа:)
<a onMouseover="document.image2.src=imageon2.src"
onMouseout="document.image2.src=imageoff2.src"
href="who/index.html"><img name="image2"
src="images/whoweareoff.gif" width="80" height="18" alt="Who
We Are" border="0" title="Find out about the people behind the
company" /></a>
Ето няколко примера в мрежата.
JavaScript навигация: вижте главната страница на SKDesigns.
Графична навигация: Exceptional Smiles и WebsiteTips.com са примери за употреба на графична навигация.
Текстова навигация: LinkwareGraphics.com Super BladePro Presets има структура подобна на WebsiteTips.com, но навигацията е текстова.
Досега, може би разбрахте защо Flash интро и splash страниците не помагат за добри резултати с търсачките. Но това не означава да не се използва Flash в сайтовете. Номерът е не в самата програма, а в начина, по който се използва.
Ако разгледате главанта страница Hillman Curtis, един уважаван Flash дизайнер, ще видите комбинация между текст и Flash, като Flash е използван, за да дава информация за това, с което се занимава тяхната компания, а не само за да шуми и украсява (тяхните работи са доста вдъхновяващи, така че ако можете, отпуснете се, протегнете крака и разгледайте техния сайт.)
. . . . . . . . . . . . . . . .
Номерът не е в самата програма, а в начина, по който се използва.
. . . . . . . . . . . . . . . .
Lemode има доста информация на главната си страница, като Flash се използва за да се анимират мухи летящи около центъра на страницата. Небходимо? Някои са за, други против. Лично аз смятам, че е сладко, а движението в центъра на страницата отвлича от четене за техните продукти.
Как търсачките се справят с Flash файловете? Има известен
напредък, но трябва да се направи още. Използвайки Macromedia
Flash Accessibility Kit с Flash 5, можете да предоставите
текстова версия на Flash информацията, като тя е в един
ALT таг между <noscript> таговте. Този
подход евентуално би помогнал на търсачките, коиото четат
ALT таговете. Тази добавка предоставя и един скрипт, който
установява наличието или отсъствието на Flash player.
. . . . . . . . . . . . . . . .
Дани Съливан казва:
"Понеже търсачките са общо взето като старите браузъри, които не поддържат JavaScript, текстът, който сложите в NOSCRIPT таг е всъщност текста, който се опитвате да ги накарате да видят."3
. . . . . . . . . . . . . . . .
Има ли някакво значение дали търсачките могат да четат Flash файлове? Отговорът зависи от сайта и съдържанието на Flash файла (файловете). Ако на главната страница има Flash файл пълен с ключови изрази и информация, заради, която ще провличате постетители, би могло и да е полезно. Ето защо предоставянето на текстови алтернативи на Flash е един от начините за постигане на добри резултати в търсачките.
В този момент, изглежда няма информация доколко NOSCRIPT тага при Flash сайтове е спомага на паяците да прочетат съдържанието. Обаче, Atomz Flash FAQ обяснява как тяхната търсачка чете Flash файловете.
Ако използвате JavaScript в страниците си - между HEAD таговете, например, - можете да преместите скриптовете в отделен външен .js файл. В противен случай, някои паяци първо ще прочетат JavaScript кода, отдавайки му по-голямо значение, отколкото на съдържанието
Сайтовете с фреймове често са пълни с проблеми, които създават големи неприятности с търсачките. Търсачката веднъж индексира някои непотребен фрейм, оставяйки посетителя извън сайта без да му дава възможност да влезе, друг път - без въобще да индексира сайта с фраймове. Тези сценарии не са много приятни, нали? С няколко реда код и малко предварително планиране, това може да се промени, такаче търсачките да индексират сайта И да не следват фалшиви линкове, водещи към празни страници.
За постигането на тази цел има два основни начина:
If (top.location.href == self.location) {
top.location.href = "URL";
}
където "URL" е URL-а на файла със фреймовете.4
Когато създавате страница с фреймове, включвайте и таговете
<noframes> </noframes> , за да
позволите и на търсачките, които не разпознават фреймове
да индексират сайта (същото както и при браузърите, които
не поддържат фреймове). Ето и прмер за това:
<html>
<head>
<title>Descriptive title </title>
</head>
<frameset>
<frame src="nav.html" name="nav">
<frame src="main.html" name="main">
<noframes>
<body>
<p>Тук вмъкнете текст, който ще могат
да четат като търсачките, така и браузърите неподдържащи
фреймове. Понякога хората слагат тук копие на текста в главната
страница на фрейма, вместо да правят отделна версия на сайта
без фреймове.</p>
</body>
</noframes>
</frameset>
</html>
Google е първата сериозна търсачка, която може да индексира PDF файлове, функция, която беше необходима отдавна. Всъщност Google предоставя текстови версии на над 10 милиона PDF файла, които можете да разгледате и с Acrobat Reader.
Другата добра новина е, че новият Acrobat 5 ще позволява да се добавят МЕТА тагове към документите.
"Данните в МЕТА таговете се пише на XML, което означава, че ще могат да бъдат индексирани от търсещите машини."5
Смятам, че скоро и другитърсачки ще последват примера на Google. В момента, обаче, помнете, че само Google индексира този формат, така че не им отделяйте много време докато и други търсачки и директории не започнат да ги описват.
Когато става въпрос за търсене в даден уебсайт, компании като Atomz вече могат да индексират PDF файлове. И така, ако използвате Atomz или друга програма за търсене в сайтовете, с подобни функции, то вашите посетители ще намират и PDF файлове в резултатите от търсенето си. Ако искате да видите как действа търсачката на Atomz с PDF функциите, потърсете нещо в WebsiteTips.com (примерно "border background").
След внимателно обмисляне, също е възможно да се използват стилове когато се пише кода на страниците. Вече вероятно разбрахте, че търсачките обръщат внимание на таговете за заглавията и други тагове, които определят важността на елементите и йерархията им в документите. (освен, че отделят повече внимание на текста в началото на страницата). Таблиците със стилове дават по-голяма гъвкавост при работа с големина на шрифта, височна на редовете и т.н.
Например, можете да промените тага на заглавието <h1>
</h1>, като смените големината на шрифта и
растоянието преди и след него, така както си искате, чрез
CSS. можете да вмъкнете някои от ключовите думи между таговете
на заглавието и след това да ги оформите като обикновен
текст, като потози начин търсачките ще им обърнат по-голямо
внимание. Освен това препоръчвам и един по-консервативенподход,
за да не си мислят търсещите машини, че ги лъжете.
В допълнение, ако използвате външни стилове ще си спестите на търсещите машини доста голямо количество код за четене. Ето тук пример за разликата.
Използвайки font тагове:
<h1><font face="Verdana,
Geneva, Arial, Helvetica, sans-serif" color="#000080"
size="6">Document Title</font></h1>
Използвайки външни стилове:
<h1>Document
Title</h1>
Един от доста честите проблеми при динамичното създаване на страници и индексиращите ги търсещи машини е ? (въпросителен знак) в техните URL. Търсачките могат да спрат до ? знака в URL и така да не индексират правилният URL. Например, този URL:
http://www.websitetips.com/cgi-bin/getpage.cgi?name=fonts
може да бъде прочетен от паяка като:
http://www.websitetips.com/cgi-bin/getpage.cgi
В резултат, търсачката се опитва да намери невалиден адрес и не може да индексира страниците използващи този скрипт. Това обаче не е безнадеждна ситуация! Има няколко разрешения на проблема и няколко програми, които правят адресите по-разбираеми за търсачките. Те са базирани на Apache, ASP и Cold Fusion.
За Apache:
Apache
Docs: mod_rewrite URL Rewriting Engine
За ASP:
PortalPageFilter,
от AlphaSierraPapa.
За Cold Fusion:
Module
by Jordan Zimmerman от Allaire's Discussion Forum
Една алтернатива е да се използва софтуер, които да прави огледални копия на динамичните страници в статични такива, като:
Конвертиране на динамично съдържание в статични страници:
UniT Text
Generator, от Thorsten van Ellen
Как да се транформират създадените с CGI URL-и в разбираеми
потребителски интерфейси:
URLs! URLs! URLs!,
от Bill Humphries
Все още е пълно с хора, които си мислят, че мета таговете са единственият начин за постигане на добри резултати с търсачките. Истината е, че 1)не всички големи търсачки четат мета таговете6, и 2) те са важни, но не са единственият начин, по който търсачките откриват и индексират вашия сайт.
<head>
<title>Тук идва заглавиие богато на клчови думи</title>
<meta name="description" content="meta tag description goes here" />
<meta name="keywords" content="keywords go here" />
</head>
Има множество начини да се скрие съдържание богато на клчови думи от потребителите, като същевременно то се направи достъпно за търсачките. Два често използвани са:
<font> или стилове,
за да се направи цветът на шрифта същият като този на
фона. Но използването на подобни техники може да се определи като "spam," което все повече търсачки започват да забраняват (или поне да избягват). Най-добре е да се справяте без да ги използвате.
Използването на всички описани техники заедно е най-ефективно. С други думи, не разчитйте на МЕТА таговете като основен начин за постигане на високи места в резултатите от търсенето, особен ако не използвате и други методи. Използвайте колкото се може повече от тях.
Често трябва да се напомня на клиентите, че освен добри резултати в търсачките, съществуват и други начини за привличане на посетители - традиционната реклама, разговорите между хората и т.н.
Съдаванетона дизайн, съобразен с търсачките, въпреки всичко ви позволява използвате творческите си хрумвания и да се целите високо в звездите, като в същото време постигате добри резултати с търсачките. По-долу са още ресурси, ако искате да продължите изследването на въпроса.
1
How to Write
a Keyword-Rich Home Page the Search Engines Will Love,
от Heather Lloyd-Martin.
Обратно към статията
2
Content
Matters Most In Search-Engine Placement от Larry Kahaner,
Informationweek, June 12, 2000.
Обратно към статията
3
Hiding
JavaScript от Danny Sullivan, Search Engine Watch. (Subscriber
area of site)
Обратно към статията
4Creating
Web Pages with Dynamic HTML. Course Technology,
Publishers, 2001. Pg. DHTML 5.45.
Обратно към статията
5Adobe
Acrobat version 5.0 New Version Highlights, Pg. 7.
Обратно към статията
6
Search
Engine Display Chart, от Danny Sullivan, Search Engine
Watch. (Subscriber area of site)
Обратно към статията
Search Engines and Dynamic Pages, от Danny Sullivan, Search Engine Watch.
Macromedia Flash Accessibility
Macromedia Flash Accessibility Kit (за Flash 5)
Getting Your Framed Site Listed With Search Engines, Jill Whalen, Rank Write Roundtable.
Hiding JavaScript, за Danny Sullivan, Search Engine Watch.
Specifying a File of JavaScript Code Chapter 1, Getting Started. DevEdge Online - Online JavaScript Reference Manual
Specifying Alternate Content With the NOSCRIPT Tag, Chapter 1, Getting Started. DevEdge Online - Online JavaScript Reference Manual
Find PDF Files, Google's Special Features, Google.com.
Google Does PDF & Other Changes, от Danny Sullivan, Search Engine Watch.
Google Ventures into the Invisible Web, The Web's First Large-Scale PDF Search, от Chris Sherman, About.com.
Preparing Your Pages For the Search Engines, от Robert Woodhead, SelfPromotion.com.
WordTracker Инструмент с баз данни, който ще ви помогне да откриете кои ключови думи да използвате на сайта си.
Bruce
Clay
Bruce Clay, LLC, Internet Business Consultants
Rank
Write Roundtable
Jill Whalen и Heather Lloyd-Martin
Search Engine
Watch
Danny Sullivan
4
Seconds to Grab Visitor's Attention?
Shirley Kaiser,
SKDesigns
Performance
Primer: Gone in 4 Seconds
от Cade Metz, PC Magazine
Статия в категория Код
Шърли е редактор и собственик на WebsiteTips.com, популярен и ценен образователен източник посветен на собствениците и дизайнерите на сайтове.
Ключови думи: търсене, meta, css, pdf, хипертекст, javascript, flash, фреймове
Източник: Designing for Search Engines and Stars
Digital Web Magazine, http://www.digital-web.com
Все още не можете да намерите онова, което търсите? Защо не пробвате с това малко поленце отдолу (подсказки: въвеждайте повече думи; пишете на кирилица; използвайте по-конкретни понятия.)