Блог

0

Силата на CSS при SEO оптимизацията

В тази статия бих искал да обърна повече внимание на основите на CSS и да ви запозная с някои нагледни примери за начина на приложение на CSS в уеб дизайна. Държа да отбележа, че не съм уеб дизайнер, нито съм прилагал на практика CSS техниките, но считам за необходимо да засегна и тази тема в своите SEO статии, защото все пак това е косвена част от оптимизацията за търсачки. SEO специалистите не е необходимо непременно да разбират от CSS, нито с тази статия ще научите дори основите на тези стилови таблици, но повече информация никога не е излишна. А сега по същество.

Най-общо, използването на CSS е най-краткият път до изчистения, с добър content-to-code ratio и модерен уеб дизайн. Нека се допитаме до The World Wide Web Consortium, за да получим максимално точно определение на понятието CSS. Според официалната дефиниция на W3C:

“Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced […] By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags. Cascading Style Sheets (CSS) is a style sheet mechanism that has been specifically developed to meet the needs of Web designers and users.”
(http://www.w3.org/Style/)

В превод на български, тази дефиниция най-общо означава, че:

“Добавяйки стилови таблици към HTML документите, авторите и читателите могат да оказват влияние върху начина на представяне на уеб документите без да жертват функционалността им или да добавят нови HTML тагове. CSS е механизъм, който е създаден, за да посрещне специално нуждите на уеб дизайнерите и потребителите.”

Как работи CSS?

Първо, дефинирайте стил. Например, ако искате да дефинирате един текст като: цвят – deep blue; шрифт – 12px, Verdana; удебелен (bold), вие трябва да направите следното:

Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;

След това, именувайте този стил с някакво име (по-нататък ще го наричаме клас, от английски език – “class”). Това става по следния начин:

Mystyle
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}

…или, алтернативно, го асоциираме с най-често използвания HTML таг – H1:

h1
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}

CSS може да бъде дефиниран, сам по себе си, навсякъде из HTML документа, с помощта на <style> тага. За предпочитане е, обаче, да разполагате този <style> таг извън уеб страницата ви. Това става като го поставите в отделен, специално създаден за тази цел, файл с разширение “.css” (например “mystyle.css”). По този начин ще намалите още повече големината на своя HTML файл. Това е важно, защото успоредно с намаляването на големината на HTML документа, вие намалявате времето на зареждане на уеб страницата и подобрявате така важния за търсачките content-to-code ratio показател (колкото повече е количеството на текстовото съдържание, спрямо това на кода, толкова по-добре от гледна точка на SEO оптимизацията). За да можете да асоциирате (обвържете) това “.css” разширение със съответния HTML документ, вие трябва да поставите линк, които да води към “mystyle.css”. Този линк се поставя в HEAD секцията на HTML файла по следния начин:

<link rel=”stylesheet” href=”mystyle.css”>

С този линк в header-а на страницата ви, всички HTML тагове, които имат стилове дефинирани (зададени за тях) във файла “mystyle.css”, ще приемат тези стилове, когато се гледат през браузър.

Как CSS помага на SEO?

Представете си, че имате следния HTML код:

<strong><font color=”#FF0000″ size=”24px”>Заглавие на сайта</font></strong>

Сега нека погледнем как изглежда същият този код, когато е  използван CSS:

<span class=”mystyle”>Заглавие на сайта</span>

HTML кодът за CSS тага е два пъти по-къс от кода без CSS. Това, както вече казахме, е предимство по отношение на оптимизацията за търсачки, тъй като процентът на текстовото съдържание нараства за сметка на процента на кода.

И това не е всичко…

<h1> Заглавие на сайта </h1>

(с a <link rel=”stylesheet” href=”mystyle.css”> в HEAD секцията дефинира стилът, който задаваме на всички H1 тагове в нашия сайт с “mystyle.css”).

CSS rollovers или JavaScript rollovers

Rollover меню ефектите (бутони, при позиционирането на мишката върху които, те реагират по определен начин) са много популярни. В по-голямата си част обаче, те изискват имплементирането на JavaScript. За щастие, тези бутони/ менюта могат да се направят изцяло с CSS, при което няма да е необходимо добавянето на никакъв допълнителен JavaScript, което ги прави значително по-лесни за обхождане от ботовете на търсачките.

CSS позволява да се избягва употребата на програмния език JavaScript без това да е за сметка на дизайна или функционалността на дадена уеб страница. Дори напротив, това е едно много елегантно решение – малки файлове и изключително лесни за обхождане от паяците. Използването на CSS за управление на rollover effects ще ви даде значително предимство пред вашите SEO конкуренти, особено ако вашите линкове са с анкор текстове, съдържащи основните ключови думи за сайта ви в себе си.

Comments

There are no comments yet.

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*

© SEO оптимизация от инж. Николай Стоянов 2008-2013 г. Всички права запазени.