Transcript Лекция 06

Съдържание
1. Какво е SEO (Search Engine Optimization)
2. HTML 5 и CSS 3.0
Search Engine Optimization
SEO (Search Engine Optimization), или казано на български
оптимизацията за търсачките е един от най-важните моменти при
изграждането на успешен уеб сайт.
Търсещите машини като Google, Yahoo и MSN редовно
обхождатат чрез своите ботове, кроулери или паяци всички уеб
сайтове в Интернет, индексират ги в базата си данни и при
търсене на определена ключова дума подреждат всеки уеб сайт
на определена позиция в търсачките.
SEO оптимизацията накратко представлява прилагане на техники,
с помощта на които даден сайт се позиционира по-добре в
резултатите на търсачките.
Search Engine Optimization
Процесът на отимизация е много сложен и дълъг. Има много
техники, коiто оказват влияние на търсачките. Някои от тях:
-Правилно структурираният код в уеб сайта е от голямо значение. Чрез него се
осъществява контакт с търсачките. Самите търсачки изпращат “паяците“ и ако
Вашия уеб сайт е написан на разбираем за тях език, те са в състояние да го
индексират добре и позициите за класиране в ранглистата ще са по успешни.
- Добре структурирани заглавия на страниците (Titles) - Всяка страница трябва
да има уникален title tag, подходящ за съдържанието на страницата и трябва да
включва ключови думи от съдържанието.
- Изграждането на връзки (линкове) проправя път на посетителите по-лесно да
намерят уеб сайта, както и помага по-лесно да се индексира от търсещите
машини.
- Размяната на линкове с други сайтове също издига Вашия уеб сайт в очите
на търсачките. Ако Вашият сайт има повече линкове в други сайтове, които
сочат към него, това се възприема много добре от търсачките.
Search Engine Optimization
Процесът на отимизация е много сложен и дълъг. Има много
техники, коiто оказват влияние на търсачките. Някои от тях:
- Уникалното и завладяващо съдържание ни дава предимство пред
конкуренцията в класирането.
- Ключовите думи и фрази, които са подходящи за тематиката на Вашия
уеб сайт, трабва да се изпозват навсякъде в текста, но не бива да се
прекалява.
- Навигация – удобната навигация е полезна както за посетителите на уеб
сайта, така и за търсачките.
- Хостинг – добре е преди да качите сайта си в интернет, да
направите проучване за това на какъв хостинг да бъде качен
или да се доверите на професионалисти за това.
Search Engine Optimization
Проучванията показват, че 90% от всички продажби в интернет са
с резултатите от търсенето.
Потребителите все повече се обръщат към сайтове като Google,
Yahoo и MSN търсачки, за да научат някаква информация.
Google провежда 293 милиона търсения на ден. Последните
проучвания показват, че потребителите са около 10 пъти посклонни да купят Вашите продукти или услуги, след намиранете
на Вашия уеб сайт от големите търсачки, отколкото всички други
методи.
Защо ли е така? Защото когато те осъществяват търсене,
откриват ключовите думи, които ние сме използвали в уеб
страницата. Потребителите намират Вашия сайт и
Вашия продукт в момента на заявката и са готови да
го купят, защото имат доверие на търсачката.
10 SEO техники за уеб дизайнера
1. Правете кода си по-красив и от самия Уеб дизайн
2. Не прекалявайте с ключовите думи
3. Избягвайте употребата на Flash (макар вече да е подобре оптимизируем)
4. Използвайте уникални заглавия – titles
5. Не забравяйте за изображенията
6. Употреба на анкор текст
7. Не използвайте изображения вместо текст
8. Използвайте разумно Ajax
9. Бързо индексиране
10. URL адреси
SEO техники
Бяла и черна оптимизация: white hat срещу black hat
SEO техниките могат да бъдат класифицирани в две основни
категории: техники, препоръчвани от търсачките като част от
добрия дизайн (white hat) и такива техники, които търсачките не
одобряват (black hat). White hat SEO техниките са тези, чрез които
се постигат дълготрайни резултати, докато използващите black hat
SEO работят под угрозата сайта да бъде наказан, временно или
завинаги.
Една SEO техника се счита за white hat, когато следва правилата
на търсачката (Google, Yahoo, Bing и Яндекс) и не си позволява
отклонения от тях. Като цяло White hat практиката се състои в
създаване на съдържание, насочено към потребителите, а не към
търсачките и в никакъв случай не е опит за манипулиране на
алгоритъма и отклоняване паяка от първоначалната му цел.
SEO техники
Black hat SEO е тази практика, която се опитва да класира своя
продукт в разрез с правилата на търсачките. Примери за black hat
SEO техники са използването на скрит текст, или текст с цвят,
подобен на фоновия, невидими div тагове или позициониране на
елементи извън екрана. Друг метод е пренасочването към
различни страници, в зависимост от това дали страницата е била
потърсена от човек или от робот на търсачка – техника, позната
като cloaking.
Търсачките налагат наказания на сайтове, които използват black
hat SEO методи, с понижаване на техния рейтинг или с
премахване от индекса на търсачката. Такива наказания могат да
бъдат налагани автоматично от алгоритмите на търсачката или
ръчно – след преглед на сайта
SEO техники
За да е успешна СЕО-та:
Валиден код +
добра оптимизирана структура +
таргетирани подходящи ключови думи +
/писане на статии и блогове/
HTML 5 и CSS 3
HTML5 e част от бъдещето на уеб приложенията и разработката
им. И макар все още в процес на доработка и
недоимплементиран в някои браузъри (по-специално Internet
Explorer), може да се използват простички функционалности от
HTML5. Само с дребни трикове вече може да пишем негов
код, работещ и в по-стари браузъри.
Още веднъж какво е HTML? - HyperText Markup Language е
проста система от тагове, дефиниращи елементите върху една
страница, които създават структурата на документ предназначен
за Уеб.
HTML 5 и CSS 3
HTML 5 и CSS 3
HTML 5 и CSS 3
За да се удовлетвори нуждата от обединяване на XML и се
създаде и XHTML5. За да е ясно, последния не е
различен език, а просто HTML5, написан като се използват
правилата на XML rules и подобен на XHTML.
HTML 5 и CSS 3
HTML 5 функции, които можем да ползваме в сайтовете си без
притеснение за съвместимостта между браузърите:
1. По-кратък DOCTYPE.
Досега беше трудно да се напише DOCTYPE ръчно и всеки го
копираше от файл с доктайпове, от реализирани проекти или
откъдето му е най-удобно.
<!DOCTYPE html>
HTML 5 и CSS 3
HTML 5 функции, които можем да ползваме в сайтовете си без
притеснение за съвместимостта между браузърите:
2. По-кратък charset. Вместо използвания досега дълъг meta таг
вече може да се използва това:
<meta charset="utf-8" />
<meta charset="windows-1251" />
HTML 5 и CSS 3
HTML 5 функции, които можем да ползваме в сайтовете си без
притеснение за съвместимостта между браузърите:
3. Без използване на type атрибута за стилове и javascript.
Докато преди беше задължително да се пише type="text/css" или
type="text/javascript", вече не е неубходимо.
<style>
// някакъв css
</style>
<script>
// някакъв javascript
</script>
HTML 5 и CSS 3
HTML 5 функции, които можем да ползваме в сайтовете си без
притеснение за съвместимостта между браузърите:
4. Без използване на кавички за атрибутите (въпреки че това
изглежда примамливо, при повече от една дума в атрибута пак се
налага да се използва, а и не е пригледно без кавичките).
<form action=neshtosi.php method=post>
<input type=text name=username value=“" />
<input type=submit value=Register />
</form>
HTML 5 и CSS 3
5. article, aside, dialog, figure, footer, header, hgroup, nav,
section. Това са един вид заместители на div. Но за да се
използват под IE трябва да се направят няколко неща.
Първото е да се добави този код в head
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
и този стил в css файла
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display: block; }
Така вече може да ги използваме без притеснение, че в
някой браузър няма да се визуализират точно както трябва.
HTML 5 и CSS 3
Ето един пример. Вместо да използваме:
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>
може да използваме:
<header></header>
<nav></nav>
<section></section>
<footer></footer>
HTML 5 и CSS 3
HTML 5 и CSS 3
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
<header> <nav></nav> </header>
<section>
<article>
<header></header>
<figure></figure>
<footer></footer>
</article>
<dialog><dialog></section><aside></aside>
<footer></footer>
</body>
</html>