Працуючы ў кампаніі, дзе SEO надаюць дастаткова вялікую ўвагу, мне хочаш - не хочаш, а давялося навучыцца пісаць сайты так, каб яны былі, я б сказаў, "SEO спрыяльныя", гэта значыць каб у вёрстцы ужо быў загадзя закладзены немалы патэнцыял для далейшай раскруткі сайта. Што такое SEO вёрстка і пытанні, звязаныя з семантыкай я разгледжу ў наступных артыкулах, а цяпер пагаворым пра тое, з чаго пачынаецца гэтая самая SEO вёрстка - аб правільным layout'e сайта.
Ні для каго ні сакрэт, што ў колах SEO-шнікаў існуе меркаванне пра тое, што чым бліжэй ключавыя словы да пачатку кода html-дакумента, тым вышэй іх вага ў вачах пошукавікаў. Заўважце, я сказаў, «чым бліжэй да пачатку кода html-дакумента», а ні «чым вышэй яны на старонцы», «чым бліжэй яны да верхняй мяжы старонкі» і да т.п.
Прынцыповая розніца тут заключаецца ў тым, што на html-старонцы ключавыя словы павінны быць размешчаныя ў выразна адведзеным для іх месцы (часцей за ўсё гэта цэнтральная / правая / левая калонка), тады як у кодзе яны павінны знаходзіцца менавіта ў яго пачатку! Ўжо адчулі розніцу? Яшчэ не? Тады ідзем далей.
Дапусцім, дызайнер намаляваў нам двухколоночный layout прыблізна такога зместу:
seo-аптымізаваная вёрстка
Адразу агаворым, што хедар ня прызначаны для размяшчэння ключавых слоў. Калі ж гэта не так (як, напрыклад, на партале http://101.ru/, дзе ключавыя словы размешчаны як раз у хедэры і згорнутыя ў таб) пытанне SEO аптымізаванай вёрсткі адпадае сам сабой. Пажадана таксама, каб мы загадзя ведалі вышыню хедэры, што ў большасці выпадкаў як правіла выконваецца. Пад SEO аптымізацыю ў нашай вёрстцы разлічаны будзе менавіта main-column, як гэта часцяком і бывае.
Першае, што прыходзіць на розум, тыповая схема вёрсткі тыпу: wrapper -> header -> sidebar -> main-column -> footer, па якой код html-дакумента будзе выглядаць наступным чынам:
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main- column "> Ключавыя словы знаходзяцца тут! </ div> <div id =" footer "> </ div> </ div> </ body>
Wrapper нам тут патрэбен для таго, каб трымаць у сабе ўсю структуру і пазіцыянавацца па цэнтры. Такім чынам наш сайт заўсёды будзе Цэнтраваць на маніторы любых памераў.
Асноўнае пытанне для нас: «Як зрабіць так, каб блок з тэкстам" main-column "знаходзіўся ў кодзе html-дакумента як мага бліжэй да тэгу <body>, а ў ідэале наогул ішоў адразу за ім?»
Нават пры мінімальных ведах css здагадацца, як памяняць sidebar і main-column месцамі можна. Выкарыстоўваем для гэтага плавае мадэль і ўласцівасць float. Для гэтага памяняем у кодзе дакумента main-column і sidebar месцамі.
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "main-column"> Ключавыя словы знаходзяцца тут! </ Div> <div id = "sidebar"> </ div> <div id = "footer"> </ div> </ div> </ body>
Лістынг css у гэтым выпадку будзе наступным:
1 2 3 #wrapper {margin: 0 auto; width: 1000px; } # Main-column {width: 700px; float: right; } #Sidebar {width: 300px; float: left; }
Такім чынам, дзякуючы ўласцівасці «обцяканьне» (float) мы дамагліся таго, што паднялі наш блок з ключавымі словамі на адну прыступку бліжэй да <body>, што ўжо нядрэнна і з'яўляецца мінімальным выкарыстаннем SEO вёрсткі. Пры гэтым візуальнае яго размяшчэнне на старонцы не змянілася.
Але не будзем спыняцца на малым і пойдзем далей. На дадзенай стадыі наша пытанне заключаецца ў наступным: "Як зрабіць так, каб main-column ўсё ж такі быў у кодзе першым пасля <body>.
Вось тут-то нам у галаву і прыходзіць яшчэ адно выдатнае ўласцівасць званае position: absolute.
Ідэя наступная: wrapper робім релативным (position: relative), каб менавіта адносна яго пазіцыянаваліся ўсе даччыныя абсалютна спозиционированные элементы (position: absolute). Header жа змяшчаем у любое месца ў кодзе і робім яго абсалютна пазіцыянаваць, такім чынам ён як бы прыб'ецца да верхняга левым куце wrapper'a. Для wrapper'a задаем ўнутраны верхні водступ роўны вышыні header'a. Header паставім у нашым лістынгу перад footer'oм, бо для карыстальніка прыярытэтнае як мага хутчэй адлюстраваць на старонцы менавіта элементы header'a, а не footer'a. Астатняй лістынг ня чапаем, і ў выніку атрымліваем: wrapper -> main-column -> sidebar -> header -> footer.
У дадзеным варыянце header можна ўсунуць у прынцыпе ў любое месца - у тым ліку і нават паміж main-column і sidebar, паколькі ён у любым выпадку пазіцыянуецца ад верхняга левага кута wrapper. Таму, калі для вас пажадана, каб адразу пасля main-column грузіўся header, а толькі потым sidebar і ўсё астатняе, то можаце так і зрабіць.
Калі footer ў вас разлічаны на 100% шырыні body, а wrapper - фіксаванай шырыні, то footer заўсёды можна вынесці і за яго межы.
Лістынг выніковага варыянту:
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "main-column"> Ключавыя словы знаходзяцца тут! </ Div> <div id = "sidebar"> </ div> <div id = "header"> </ div> <div id = "footer"> </ div> </ div> </ body>
Выніковы css:
1 2 3 4 5 #wrapper {margin: 0 auto; width: 1000px; position: relative; padding-top: 100px; } # Main-column {width: 700px; float: right; background: # a5f0e6; padding: 40px 0; } #Sidebar {width: 300px; float: left; background: # d1e5f1; padding: 40px 0; } #Header {position: absolute; left: 0; top: 0; height: 100px; background: # b0e8f4; } #Footer {background: # b0e8f4; padding: 40px 0; }
Такім чынам дзякуючы SEO вёрстцы мы дамагліся, каб у нашым кодзе нашы блокі ішлі ў адпаведнасць з нумарацыяй на малюнку і, заўважце, не ўнеслі ні аднаго візуальнага змены ў html-старонку:
SEO вёрстка
Праверана: IE6 / 7, FF3, Safari3, Chrome.
Рэзюмуецца перавагі дадзенага метаду:
- Магчымы SEO-бонус ад пошукавых сістэм.
- Зручная чарговасць загрузкі для карыстальніка: карыстальнік звяртае ўвагу на header, як правіла, усяго пару разоў, пакуль не вывучыць. Далей жа 99% яго ўвагі засяроджваецца менавіта вакол main-column, а таму да месца пасля пераходу да чарговай старонцы адлюстроўваць для карыстальніка ў першую чаргу менавіта main-column, не затрымоўваючы яго загрузкай header'a, sidebar'a і іншага ... Дадзеная вёрстка менавіта гэта і рэалізуе. Прыклад вы можаце бачыць на гэтым самым блогу.
- Гнуткасць: header можна размясціць пасля амаль любога блока старонкі ўнутры wrapper, гэта значыць мы можам кіраваць чарговасцю загрузкі блокаў на старонцы. Калі footer у нас 100%, а wrapper - фіксаванай шырыні, яго можна вынесці за межы wrapper'a. Тое ж самае справядліва і ў адносінах да header'у. Толькі вынесьлі яго за межы wrapper'a, мы страцім магчымасць размясціць яго паміж блокаў ўнутры wrapper'a, і header ў любым выпадку давядзецца грузіць апошнім блокам на старонцы, але ўвогуле-то гэта апраўданая ахвяра.
http://blogto4ka.ru
Таксама рэкамендую прачытаць
Ўжо адчулі розніцу?Яшчэ не?
Асноўнае пытанне для нас: «Як зрабіць так, каб блок з тэкстам" main-column "знаходзіўся ў кодзе html-дакумента як мага бліжэй да тэгу <body>, а ў ідэале наогул ішоў адразу за ім?
